/* ================================================================
SEG:W4-TOKENS v1 —— v4 的公共 token（2026-10-01 小槐：「其实我们是不是应该先定 token 和 css 规范」）
v4 的页（主页 home / 记忆 memhang / 暦 koyomi / 以后的）颜色、字体、字号、动效都只从这里拿，页面里不直接写色值。
规矩写在 wishper-v4/STYLE.md。
深色（海）是默认。浅色（纸）= 仿古籍的纸 + 紫墨：值已经定在下面，但开关还没做（她说深浅「到时候再说」），
现在没有任何地方会挂 data-w4-theme="paper"；主页画布里的底色 / 暗角也还没走 token，做浅色时一起改。
================================================================ */
:root {
/* 底：主页是最深的海；内页稍浅；内页整层外面那一圈再暗一点 */
--w4-bg-deep: #07070D;
--w4-bg: #10101B;
--w4-bg-under: #08080F;
/* 墨四档：正文 / 次一级的字 / 小注 / 最淡 */
--w4-ink: #EAE8F3;
--w4-ink-soft: #BEBBCD;
--w4-ink2: #8A879E;
--w4-ink3: #5F5C75;
--w4-ink-rgb: 234, 232, 243; /* 跟 --w4-ink 同一个颜色的三个数，要调透明度的地方用 rgba(var(--w4-ink-rgb), .4) */
--w4-line: rgba(234, 232, 243, .14);
/* 口腕色（rgb 三个数，用的时候 rgb(var(--w4-arm)) / rgba(var(--w4-arm), .3)）：跟设置里选的色调走，见下面 */
--w4-arm: 176, 162, 232;
/* 暖色：身体、经期 */
--w4-warm: 228, 132, 146;
/* 亮点（那粒光的芯） */
--w4-glow: #F3F0FF;
--w4-on-accent: #FFFFFF; /* 不透明强调色按钮上的字，与旧抽屉选中态一致 */
/* 事项分类 */
--w4-c-anniv: #E293AC; --w4-c-birthday: #DFB877; --w4-c-remind: #74A9D1;
--w4-c-count: #D98A8A; --w4-c-note: #A29DAF; --w4-c-fest: #9B8AC4;
/* 字：楷体只给标题、日子、章名；要读的小字一律界面黑体。
'W4 Kai' 是嵌在 w4-kai.css 里的二十几个字（主页开屏马上要用），'W4 Kai Full' 是 /v4f/ 的整套，同一个字体，缺的字自动往后找 */
--w4-kai: 'W4 Kai', 'W4 Kai Full', 'KaiTi', 'STKaiti', 'Kaiti SC', var(--font, sans-serif);
--w4-sans: var(--font, sans-serif);
/* 字号档位（内页；字不跟着屏幕缩放）。主页入口的字跟着设计稿缩放（cqw），不在这里 */
--w4-fs-note: 9.5px; /* 小注：日期、编号、分类 */
--w4-fs-small: 11px; /* 小字：小结、备注 */
--w4-fs-body: 13px; /* 正文 */
--w4-fs-title: 14.5px; /* 一条的标题 */
--w4-fs-head: 20px; /* 章名、一节的头 */
--w4-fs-display: 34px; /* 一页里最大的那个字（月份、日子） */
--w4-fs-name: 23px; /* 一个去处的名字（遊び 的格子里） */
--w4-fs-glyph: 26px; /* 当「一样东西」用的单个楷体字（近況挂在小须上的那个） */
--w4-fs-tiny: 7.5px; /* 大字底下那行小英文 */
/* 动效 */
--w4-ease: cubic-bezier(.2, .75, .2, 1); /* 落下来、浮上来 */
--w4-ease-io: cubic-bezier(.4, 0, .2, 1); /* 来回的 */
--w4-t-fast: 180ms; --w4-t: 380ms; --w4-t-slow: 700ms;
}
body[data-w3-tint="blue"] { --w4-arm: 150, 174, 236; }
body[data-w3-tint="pink"] { --w4-arm: 232, 164, 200; }
body[data-w3-tint="green"] { --w4-arm: 150, 208, 178; }
/* 纸：仿古籍的纸，紫墨。开关还没做 */
:root[data-w4-theme="paper"] {
--w4-bg-deep: #E2D9C3; --w4-bg: #EEE7D4; --w4-bg-under: #E7DFCA;
--w4-ink: #2B2440; --w4-ink-soft: #4A4263; --w4-ink2: #7A7189; --w4-ink3: #A69DAB; --w4-ink-rgb: 43, 36, 64;
--w4-line: rgba(43, 36, 64, .16);
--w4-arm: 92, 72, 150;
--w4-warm: 168, 52, 62;
--w4-glow: #5C4896;
--w4-c-anniv: #B5486C; --w4-c-birthday: #A9781F; --w4-c-remind: #2F6E9E;
--w4-c-count: #A84444; --w4-c-note: #6F6880; --w4-c-fest: #5C4896;
}
:root[data-w4-theme="paper"] body[data-w3-tint="blue"] { --w4-arm: 52, 84, 150; }
:root[data-w4-theme="paper"] body[data-w3-tint="pink"] { --w4-arm: 160, 68, 112; }
:root[data-w4-theme="paper"] body[data-w3-tint="green"] { --w4-arm: 46, 112, 84; }
/* W4 Kai = 霞鹜文楷 TC（LXGW WenKai TC）的子集，只含主页用到的字：
小槐和抓抓第天起 記憶囁き近況暦遊び珈琲私封設定主页 0-9 .
授权 SIL Open Font License 1.1（https://github.com/lxgw/LxgwWenkaiTC），可以嵌进网页。
以后主页加字要重新切：scratchpad 的 kai_subset.py，改 TEXT 再走一遍。 */
@font-face{font-family:'W4 Kai';font-style:normal;font-weight:400;font-display:block;src:url(data:font/woff2;base64,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) format('woff2');}
@font-face{font-family:'W4 Kai';font-style:normal;font-weight:700;font-display:block;src:url(data:font/woff2;base64,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) format('woff2');}
/* build_v3.js 从 legacy-src.html 抽出, 别手改; 改旧样式去改 legacy 源再重跑 */
:root{
/* [glass-token v1] 玻璃的【颜色】抽出来, 【透明度】留在各处不动。
浅色下这三行就是白色, 所以渲染结果和以前逐字一致 ——
这一步只是让深色有地方可改, 本身不改变任何观感。
面/边/内高光分三个: 深色下边要比面亮才有厚度, 一个 token 会糊成色块。 */
--glass-rgb:255,255,255; /* 玻璃本体 */
--edge-rgb:255,255,255; /* 描边 */
--hi-rgb:255,255,255; /* 内高光 */
--sub:#2E2C28;
--muted:#7A776F;
--accent:#8275DD;
/* [v1.6 批3] 新增页面背景 token —— 对齐文档 2.1 / 画布 :root。
默认主题浅紫。各 data-theme 里可单独覆盖(纯白/深紫黑等)。
--bg 是渐变(实用于 body 背景), --bg-base 是最底层纯色。 */
--bg:linear-gradient(180deg,#F1EFFA,#E4E1F4);
--bg-base:#ECE9F6;
--r-lg:26px;
--r-md:22px;
--r-icon:18px;
--r-sm:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
color:var(--sub);
overflow:hidden;
/* [v1.6 批3] 默认主题从暖白「晨雾」改回原版浅紫(小槐拍板)。
背景改走 var(--bg) token —— 各 data-theme 只要覆写 --bg / --bg-base,
body 自动跟随, 切换机制更干净(对齐文档 5 节规则: 重定义背景渐变三组变量)。
三段 radial 压到 6% 以内当极淡装饰, 不能盖过浅紫底色。 */
background:
radial-gradient(circle at 20% 10%, rgba(221,213,245,.35) 0%, transparent 45%),
radial-gradient(circle at 85% 30%, rgba(245,216,226,.3) 0%, transparent 45%),
radial-gradient(circle at 60% 90%, rgba(228,232,245,.3) 0%, transparent 55%),
linear-gradient(180deg, #F1EFFA 0%, #E4E1F4 100%);
background-attachment:fixed;
}
/* 七轴主题 · 背景随 dominant 轴切换 // [BD-patch] */
/* 苔痕 · 安静, 不吵 —— 按 08-14 出图校正 [theme-v2-p1]
改的是第三停: #D8EBD5 -> #EEF4E9。出图那版底部几乎是白的,
绿只压在上半, 往下化开。原来三停都是绿, 平了。 */
body[data-theme="苔痕"]{
background:
/* [批5d] radial 降到极淡装饰。批3 只给默认主题做了这一步(rgba .35/.3),
苔痕/黄昏/褪色 三套漏了, 还是实色 hex 满不透明度 —— 绿是这三层堆出来的,
不是底色渐变。小槐 2026-09-02:「是不是有点太绿了」。 */
radial-gradient(circle at 18% 12%, rgba(214,231,210,.35) 0%, transparent 46%),
radial-gradient(circle at 84% 26%, rgba(233,240,213,.30) 0%, transparent 46%),
radial-gradient(circle at 55% 92%, rgba(238,244,233,.30) 0%, transparent 55%),
linear-gradient(180deg, #F3F8F2 0%, #EAF1E8 100%);
background-attachment:fixed;
/* [v1.6 批3] 苔痕底层原对齐画布 #EEF4EC→#E2ECE0(文档 5 表)。
[批5d] 小槐「绿色浅一点」-> 两停各提亮约 5 点: #F3F8F2→#EAF1E8。
★ 幅度【故意给小】: 再浅下去就跟卡片的白拉不开距离, 又变回「整屏一个调子」——
那正是一开始要解决的问题。这是本文件唯一一处偏离画布 5 节色表的底色, 留档。
★ 色相没动, 只动明度。 */
--bg:linear-gradient(180deg,#F3F8F2,#EAF1E8);
--bg-base:#EFF5EE;}
/* 黄昏 · 暖一点, 有重量 —— 按 08-14 出图校正 [theme-v2-p1]
★ 第二停 #F5E5C8(金) -> #EFD2D8(藕粉)。出图那版右上是粉不是金。
落地时丢了这股冷粉, 只剩桃色一股, "有重量"就没了 ——
重量正是那股冷粉压出来的, 全暖色只会飘。 */
body[data-theme="黄昏"]{
background:
/* [批5d] 同苔痕。★ 第二停那股冷粉(#EFD2D8)是「重量」的来源, 只降不透明度,
色相一个字不动 —— 08-14 校正过的东西别在这儿弄丢。 */
radial-gradient(circle at 18% 12%, rgba(242,219,194,.35) 0%, transparent 46%),
radial-gradient(circle at 84% 24%, rgba(239,210,216,.30) 0%, transparent 46%),
radial-gradient(circle at 55% 90%, rgba(246,227,207,.30) 0%, transparent 55%),
linear-gradient(180deg, #F9F0E7 0%, #F2E3D5 100%);
background-attachment:fixed;
/* [v1.6 批3] 黄昏底层对齐画布 #F9F0E7→#F2E3D5(文档 5 表)。
原 #F8F2EA→#FEFAF5 偏暖白已弃; 多段 radial 保留当原版装饰。 */
--bg:linear-gradient(180deg,#F9F0E7,#F2E3D5);
--bg-base:#F5E9DC;}
/* 深水 · 夜里的家 —— 真深色 [dark v1]
08-14 出图那版就是深色, 落地时被稀释成了浅蓝 (原来这里是 #C8D8EC 那一套),
等于把夜晚画成了阴天。小槐 08-15 原话: "深水那套是四套里最好看的 ——
磨砂玻璃在浅色上叠白玻璃其实吃亏, 深色下透光和层次才出来"。
★ 要调深色, 调下面那三行就够了。别去改一百处 alpha ——
上一步 (glass-token) 存在的全部意义就是让这里只有三行。 */
body[data-theme="深水"]{
background:
radial-gradient(circle at 20% 14%, #352E52 0%, transparent 48%),
radial-gradient(circle at 86% 26%, #1B2134 0%, transparent 48%),
radial-gradient(circle at 55% 94%, #0E0F19 0%, transparent 58%),
linear-gradient(180deg, #1E1B2E 0%, #0F0D1A 100%);
background-attachment:fixed;
color-scheme:dark;
/* [v1.6 批3] 深水底层对齐画布 #1E1B2E→#0F0D1A(深紫黑, 非纯黑)。
★ 沿用本文件 --glass-rgb 三通道方案(紫灰玻璃, 真机磨砂观感好),
不改成画布的 white-alpha 路线 —— 只对齐最终底色。 */
--bg:linear-gradient(180deg,#1E1B2E,#0F0D1A);
--bg-base:#12101C;
--glass-rgb:124,114,168; /* 面: 紫灰玻璃 */
--edge-rgb:150,143,190; /* 边: 要比面亮, 玻璃才有厚度 */
--hi-rgb:96,90,132; /* 内高光: 得压暗, 否则 .7 的高光在深底上是一道白线 */
--sub:#ECE8F7;
--muted:#A29ABF;
--accent:#8E80EE;
/* ★ 2026-08-20 补: 商城(.sh-*)和居所(.ho-*)用的是 var(--card)/var(--line),
深水原来没定义这两个 -> CSS 静默套上 fallback(白卡/黑边) -> 深底上全糊。
★ 这两行的最后那个小数就是亮度旋钮, 改完刷新就看得见:
太亮往下调(.16->.12), 看不清往上(.16->.22)。 */
--card:rgba(124,114,168,.16); /* 卡片底: 跟 --glass-rgb 同色系, 比背景亮一点 */
--line:rgba(150,143,190,.18); /* 边框/分隔线: 跟 --edge-rgb 同色系, 偏淡 */
}
/* [批7 · P1-15 完成] 这里原来有 5 条逐选择器的深水补丁, 全撤了 ——
基础规则已经改用 token(--text-secondary / --toggle-bg / --imp-bg /
--period-bg / --period-text), 深水在 token 层里一次性赋值, 不用再逐个打补丁。
原补丁留档: .mi-content #BFB9D4 · .th-b/.tb #ABA5C6 · .cal-cell.guess #F0D3D8 ·
.toggle rgba(255,255,255,.15) · .mi-imp i rgba(255,255,255,.16)。 */
/* [批5] 原有 body[data-theme="深水"] .cal-phases span.on{color:#F0D3D8} 已撤:
选中态改成 --accent 实底 + --text-on-dark 白字之后, 五套主题自洽,
再压一个粉字上去反而在深水下变成「紫底粉字」。(P1-15 令牌化的第 1 条) */
/* 褪色 · 存续感主导时 —— 默认那套抽掉饱和度 // [theme-axes v1]
存续感是唯一一根反向轴, 低才是坏。它主导 = 抓不住了。
所以不给新色, 给"同一个世界在褪色": 位置构图全同, 颜色淡出去。 */
body[data-theme="褪色"]{
background:
/* [批5d] 同上。褪色本来就该是最白的一套, 实色 radial 压着尤其明显。 */
radial-gradient(circle at 20% 10%, rgba(226,224,232,.35) 0%, transparent 45%),
radial-gradient(circle at 85% 30%, rgba(237,231,233,.30) 0%, transparent 45%),
radial-gradient(circle at 60% 90%, rgba(230,231,235,.30) 0%, transparent 55%),
linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
background-attachment:fixed;
/* [v1.6 批3] 褪色改纯白主题(文档 5 表): --bg #FFFFFF→#F5F5F5,
--bg-base #FAFAFA, --surface 纯白。原 #F2F1EF→#FBFBFA 偏暖已弃。 */
--bg:linear-gradient(180deg,#FFFFFF,#F5F5F5);
--bg-base:#FAFAFA;}
/* ══ [v1.6 批7 · P0-2] 语义 token 层 · 全量 ═══════════════════════════════
基准: 画布 Wishper-UI设计画布.html 的 :root + 四个 [data-theme] 块。
画布的 default/moss/dusk/deep/fade 对应这里的 默认/苔痕/黄昏/深水/褪色。
★ 为什么整层集中放在这里, 而不是拆进上面那五个 data-theme 块:
上面那五块管的是【背景和玻璃三通道】—— 它们是这个文件原本的机制, 动一下
五套主题的观感全变。语义 token 是另一层东西, 集中一处才看得出「同一个语义
在五套主题下分别是什么值」, 也才好一次比对画布。两层各管各的, 不互相踩。
★ 为什么写在 body 而不是 :root:
--sub/--muted/--accent 是各 body[data-theme] 覆写的, 而 var() 在【声明所在
的元素】上求值 —— 写进 :root 会被当场固化成默认主题的值, 切到深水就不跟了。
写在 body 上, 主题覆写先落到 body, 这里再取它, 五套主题自动跟随。
(选择器权重: body 是 (0,0,1), body[data-theme] 是 (0,1,1) —— 主题永远赢,
跟这段写在文件哪个位置无关。)
★ 本段是【纯增量】: 只新增名字, 不改一个现有引用点, 所以装完页面渲染逐像素
不变。真正的替换按模块分批做, 每批单独验 —— 一次性全换必炸。
★ 圆角阶有个坑, 别踩: index 的 --r-lg 是 26px, 画布的 --r-lg 是 22px ——
两边名字错了一位(index 的 lg/md/icon/sm = 画布的 xl/lg/icon/sm)。
这里【不】重命名, 只补画布多出来的 --r-xl(=26, 跟现有 --r-lg 同值) 和
--r-pill。改名会让全文件用 var(--r-lg) 的地方悄悄从 26 缩到 22, 那不是
token 补齐, 那是一次没人签字的全局改版。
★ --accent 沿用本文件各主题已有的值, 这里不覆写。深水有 3 个色号的细微出入
(index #8E80EE vs 画布 #8B7CF0), 留到 Dock/按钮那批一起对, 别在这儿夹带。 */
/* [批5e · 2026-09-02 小槐真机反馈] 两处微调:
① 卡片白 .92 -> .95(「白色再浅一点点」)
② 全部 --accent 降饱和 15%, 【色相和明度一个字不动】, 只抽饱和度
(「重点色饱和度往下一点点」)。四套主题的 accent / accent-rgb /
accent-strong / accent-soft / shadow-button 五处一起改, 不然会花。
原值留档: 紫 #7B6CE6 / 绿 #5F9E63 / 橙 #D98A3D / 深水紫 #8B7CF0。 */
body{
--surface:#FFFFFF; /* [批5c] 画布是 #FBFAFE(带一点紫), 小槐要更白 -> 纯白 */
/* [批5d] 从「实底纯白」退回 .92。
.42(原) -> .70(画布) -> 1.0(纯白) -> .92 —— 小槐:「不要极值」。
留 8% 透光, 卡片还能吃到一点主题色, 不至于像贴上去的白纸片;
但又远高于画布的 .70, 不会再把背景色整片吃进来。 */
--surface-glass:rgba(255,255,255,.95);
--surface-tint:rgba(123,108,230,.07);
--edge:rgba(90,80,140,.12);
--hi:rgba(255,255,255,.9);
--text-primary:#2E2B3A;
--text-secondary:#746E86;
--text-tertiary:#A29DB2;
--text-on-dark:#FFFFFF;
--text-on-dark-muted:rgba(255,255,255,.62);
--accent-strong:#6A5EC0;
/* [批5] --accent 的 r,g,b 三通道。
全文件有 40+ 处写死的 rgba(123,108,230,X) —— 各种 tint / 投影 / 选中底。
accent 改成跟主题走之后, 那些地方【不会跟】: 苔痕的 accent 是绿的, 可气泡、
进度条、选中底全还是紫的, 比不改更不一致。
rgba() 吃不下 var(--accent) 这种完整色值, 所以照本文件 --glass-rgb 的老办法
把通道拆出来, 用 rgba(var(--accent-rgb),X)。不用 color-mix 是因为那个要
Chrome 111+, 而这套通道写法本文件从头到尾都在用, 也没有兼容性问题。 */
/* [批14] 中性墨色通道。全文件还有 ~25 处写死的 rgba(60,55,45,X) ——
滚动条滑块、分隔线、进度轨道、投影。跟 accent 那次是同一个毛病:
写死的暖黑在浅色下没问题, 到了深水就是【深色叠深色】, 几乎看不见。
★ 浅色四套 = 暖黑; 深水 = 白 —— 中性叠加在明暗下方向相反, 跟
--toggle-bg / --imp-bg 同类, 只是它用得太广, 所以给通道不给成品色。 */
--ink-rgb:60,55,45;
--accent-rgb:130,117,221;
--accent-soft:rgba(130,117,221,.14);
--danger:#E5484D;
--danger-soft:rgba(229,72,77,.12);
--success:#30A46C;
--success-soft:rgba(48,164,108,.10); /* [批14] --danger-soft 早就有, success 漏了 */
--warning:#F5A623;
--info:#3B82F6;
--pink:#E88BB0;
--gold:#E8B54A;
/* 深色锚点 —— Dock 的深色药丸 / 奠基石 / 沉浸页那一类 */
--surface-dark:#2A2A2E;
--surface-dark-2:#333338;
--dock-bg:#242428;
--immersive-bg-2:linear-gradient(180deg,#2E2A3A,#16121F);
--cornerstone-bg:linear-gradient(180deg,#333338,#2A2A2E);
/* 对方气泡 —— 跟随主题, 不是磨砂玻璃 */
--bubble-other-bg:rgba(0,0,0,.05);
--bubble-other-text:var(--text-primary);
/* 圆角: 只补两个新名字, 现有四个原样不动(见上面那条坑) */
--r-xl:26px;
--r-pill:999px;
--shadow-card:0 8px 24px rgba(20,16,40,.06);
--shadow-card-hover:0 12px 32px rgba(20,16,40,.10);
--shadow-button:0 4px 14px rgba(130,117,221,.35);
--shadow-dark-button:0 6px 16px rgba(0,0,0,.22);
--shadow-float:0 16px 48px rgba(20,16,40,.20);
/* [批7 · P1-15] 三个「明暗要走相反方向」的填充色。
★ 为什么它们不能归进上面的语义色: --text-* / --surface 那类在深色下是
【同一个语义换个值】; 而这三个在浅色下是「压暗一点」、深色下是「提亮一点」,
方向相反, 硬套任何一个现有 token 都会有一边瞎掉。给专名是对的。
★ 另外三处旧补丁(.mi-content / .th-b / .tb)已直接归到 --text-secondary,
不需要新 token —— 它们本来就只是「次要正文」这一个语义。 */
/* [批10] ★ 商城(.sh-*)/居所(.ho-*)「都没改」的真正原因 —— 不是漏改, 是这两个
变量【只在深水里定义过】(146-147 行)。浅色四套下 var(--card) 求值失败,
那条 background 声明整条作废, 于是卡片根本没有底, 直接露出页面背景。
这是个一直存在的老 bug, 今天换白底才显出来。
★ 深水那两行在自己的主题块里(权重 0,1,1)照旧赢, 调好的深色不受影响。 */
--card:var(--surface);
--line:var(--edge);
--toggle-bg:rgba(60,55,45,.16);
--imp-bg:rgba(60,55,45,.14);
--period-bg:rgba(232,160,168,.26);
--period-text:#8C5A66;
/* ★ 整个 P0-2 的杠杆就是这两行。
--sub / --muted 是这个文件从头到尾在用的两个文字色, 366 个类几乎都引到它们。
把它们指向画布的语义色之后, 【一个引用点都不用改】, 全文件的文字色一次性
换成画布那套紫灰调 —— 包括画布根本没画过的那 322 个类。
★ 这也是唯一一处「改 token 就会改观感」的地方, 别的都是纯增量。
★ 原值留档: 默认 --sub #2E2C28 / --muted #7A776F(暖黑, 偏黄);
深水 #ECE8F7 / #A29ABF。苔痕/黄昏/褪色 原来【没定义】, 一直在继承默认那份
暖黑 —— 这就是那三套主题看着都发暖的根因, 现在各自跟画布对上了。 */
--sub:var(--text-primary);
--muted:var(--text-secondary);
}
/* 下面四套只列【跟默认不一样的】—— 没列到的自动继承上面那份。
画布本身就是这么组织的, 照搬它的取舍, 免得两边对不上账。 */
body[data-theme="苔痕"]{
--surface:#FFFFFF; /* [批5c] 画布 #FBFDFA 带一点绿 -> 纯白 */
/* [批5d] 从「实底纯白」退回 .92。
.42(原) -> .70(画布) -> 1.0(纯白) -> .92 —— 小槐:「不要极值」。
留 8% 透光, 卡片还能吃到一点主题色, 不至于像贴上去的白纸片;
但又远高于画布的 .70, 不会再把背景色整片吃进来。 */
--surface-glass:rgba(255,255,255,.95);
--surface-tint:rgba(60,90,50,.07);
--edge:rgba(60,80,50,.12);
--text-primary:#2B3329;
--text-secondary:#6E7A68;
--text-tertiary:#9BA696;
--accent:#649967;
--accent-rgb:100,153,103;
--accent-strong:#508154;
--accent-soft:rgba(100,153,103,.16);
--shadow-button:0 4px 14px rgba(100,153,103,.35);
--bubble-other-bg:rgba(60,90,50,.08);
/* ★ 整个 P0-2 的杠杆就是这两行。
--sub / --muted 是这个文件从头到尾在用的两个文字色, 366 个类几乎都引到它们。
把它们指向画布的语义色之后, 【一个引用点都不用改】, 全文件的文字色一次性
换成画布那套紫灰调 —— 包括画布根本没画过的那 322 个类。
★ 这也是唯一一处「改 token 就会改观感」的地方, 别的都是纯增量。
★ 原值留档: 默认 --sub #2E2C28 / --muted #7A776F(暖黑, 偏黄);
深水 #ECE8F7 / #A29ABF。苔痕/黄昏/褪色 原来【没定义】, 一直在继承默认那份
暖黑 —— 这就是那三套主题看着都发暖的根因, 现在各自跟画布对上了。 */
--sub:var(--text-primary);
--muted:var(--text-secondary);
}
body[data-theme="黄昏"]{
--surface:#FFFFFF; /* [批5c] 画布 #FFFCF8 带一点暖 -> 纯白 */
/* [批5d] 从「实底纯白」退回 .92。
.42(原) -> .70(画布) -> 1.0(纯白) -> .92 —— 小槐:「不要极值」。
留 8% 透光, 卡片还能吃到一点主题色, 不至于像贴上去的白纸片;
但又远高于画布的 .70, 不会再把背景色整片吃进来。 */
--surface-glass:rgba(255,255,255,.95);
--surface-tint:rgba(160,110,50,.08);
--edge:rgba(160,110,50,.14);
--text-primary:#3A2E22;
--text-secondary:#8A7662;
--text-tertiary:#B49F8C;
--accent:#CD8A49;
--accent-rgb:205,138,73;
--accent-strong:#B57633;
--accent-soft:rgba(205,138,73,.18);
--shadow-button:0 4px 14px rgba(205,138,73,.35);
--bubble-other-bg:rgba(160,110,50,.09);
/* ★ 整个 P0-2 的杠杆就是这两行。
--sub / --muted 是这个文件从头到尾在用的两个文字色, 366 个类几乎都引到它们。
把它们指向画布的语义色之后, 【一个引用点都不用改】, 全文件的文字色一次性
换成画布那套紫灰调 —— 包括画布根本没画过的那 322 个类。
★ 这也是唯一一处「改 token 就会改观感」的地方, 别的都是纯增量。
★ 原值留档: 默认 --sub #2E2C28 / --muted #7A776F(暖黑, 偏黄);
深水 #ECE8F7 / #A29ABF。苔痕/黄昏/褪色 原来【没定义】, 一直在继承默认那份
暖黑 —— 这就是那三套主题看着都发暖的根因, 现在各自跟画布对上了。 */
--sub:var(--text-primary);
--muted:var(--text-secondary);
}
body[data-theme="深水"]{
--surface:#1E1C28;
/* ★ 这一项【故意不照画布】。画布 deep 给的是 rgba(255,255,255,.06),
在这个文件的深紫黑底上会淡到几乎看不见卡片边界。
小槐 8-15 原话:「磨砂玻璃在浅色上叠白玻璃其实吃亏, 深色下透光和层次才
出来」—— 深水是这个 app 里玻璃唯一真正有活干的地方, 保留原配方。
所以浅色四套换实底、深水留玻璃, 是同一条规矩的两面, 不是例外。 */
--surface-glass:rgba(var(--glass-rgb),.42);
--surface-tint:rgba(255,255,255,.08);
--edge:rgba(255,255,255,.08);
--hi:rgba(255,255,255,.06);
--text-primary:#EDEBF5;
--text-secondary:#8E8A9E;
--text-tertiary:#5E5A6E;
--accent:#9185E7;
--accent-rgb:145,133,231;
--accent-strong:#A296ED;
--accent-soft:rgba(145,133,231,.20);
--shadow-button:0 4px 14px rgba(145,133,231,.35);
--surface-dark:#2A2836;
--surface-dark-2:#343140;
--dock-bg:#3E3A56;
--cornerstone-bg:linear-gradient(180deg,#141020,#0A0814);
--bubble-other-bg:rgba(255,255,255,.12);
--bubble-other-text:#EDEBF5;
--shadow-card:0 8px 24px rgba(0,0,0,.35);
--ink-rgb:255,255,255;
--toggle-bg:rgba(255,255,255,.15);
--imp-bg:rgba(255,255,255,.16);
--period-bg:rgba(232,160,168,.22);
--period-text:#F0D3D8;
/* ★ 整个 P0-2 的杠杆就是这两行。
--sub / --muted 是这个文件从头到尾在用的两个文字色, 366 个类几乎都引到它们。
把它们指向画布的语义色之后, 【一个引用点都不用改】, 全文件的文字色一次性
换成画布那套紫灰调 —— 包括画布根本没画过的那 322 个类。
★ 这也是唯一一处「改 token 就会改观感」的地方, 别的都是纯增量。
★ 原值留档: 默认 --sub #2E2C28 / --muted #7A776F(暖黑, 偏黄);
深水 #ECE8F7 / #A29ABF。苔痕/黄昏/褪色 原来【没定义】, 一直在继承默认那份
暖黑 —— 这就是那三套主题看着都发暖的根因, 现在各自跟画布对上了。 */
--sub:var(--text-primary);
--muted:var(--text-secondary);
}
body[data-theme="褪色"]{
--surface:#FFFFFF;
/* [批5d] 从「实底纯白」退回 .92。
.42(原) -> .70(画布) -> 1.0(纯白) -> .92 —— 小槐:「不要极值」。
留 8% 透光, 卡片还能吃到一点主题色, 不至于像贴上去的白纸片;
但又远高于画布的 .70, 不会再把背景色整片吃进来。 */
--surface-glass:rgba(255,255,255,.95);
--surface-tint:rgba(0,0,0,.045);
--edge:rgba(60,60,58,.10);
--text-primary:#2E2E2C;
--text-secondary:#7A7A78;
--text-tertiary:#A6A6A3;
--accent-strong:#6A5EC0;
--accent-soft:rgba(130,117,221,.14);
--shadow-button:0 4px 14px rgba(130,117,221,.35);
--bubble-other-bg:rgba(0,0,0,.05);
/* ★ 整个 P0-2 的杠杆就是这两行。
--sub / --muted 是这个文件从头到尾在用的两个文字色, 366 个类几乎都引到它们。
把它们指向画布的语义色之后, 【一个引用点都不用改】, 全文件的文字色一次性
换成画布那套紫灰调 —— 包括画布根本没画过的那 322 个类。
★ 这也是唯一一处「改 token 就会改观感」的地方, 别的都是纯增量。
★ 原值留档: 默认 --sub #2E2C28 / --muted #7A776F(暖黑, 偏黄);
深水 #ECE8F7 / #A29ABF。苔痕/黄昏/褪色 原来【没定义】, 一直在继承默认那份
暖黑 —— 这就是那三套主题看着都发暖的根因, 现在各自跟画布对上了。 */
--sub:var(--text-primary);
--muted:var(--text-secondary);
}
.dt-wrap{
max-width:480px;
margin:0 auto;
height:100vh;
height:100dvh;
display:flex;
flex-direction:column;
padding:env(safe-area-inset-top,0px) 14px 0;
position:relative;
}
.dt-stage{
flex:1;
display:flex;
flex-direction:column;
min-height:0;
}
/* ===== 屏幕容器: 所有页面都在这里切 ===== */
.dt-main{order:1;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;position:relative}
.dt-screen{display:none;flex:1;min-height:0;flex-direction:column}
.dt-screen.on{display:flex}
/* 严格 4×6 主区: 6 等分行, 时间 widget 占 1-3, 图标 4-6 */
.dt-grid{
flex:1;
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(6,1fr);
gap:14px;
row-gap:12px;
padding-top:24px;padding-bottom:14px;
min-height:0;
}
/* [v1.6 批5] 流里的卡片: 42% 磨砂 -> --surface-glass。
★ 根因不是「白色更好看」, 是【玻璃在这里没活干】: .dt-wrap 是 flex column,
六个 dt-glass 使用点(时间 widget / 聊天头 / composer×2 / 搜索栏 / 设置子导航)
全在正常流里, 没有一个浮在滚动内容上; 背景又只是一层静态渐变。
玻璃的价值是透出底下的东西 —— 底下没东西, 就只剩代价:
42% 的白压在彩色底上把卡片和背景糊成一层, 外加每帧 blur 重算。
★ --surface-glass 浅色四套是 .70~.82(近乎实白), 深水仍是 .42 玻璃,
所以这一行同时完成了「浅色变干净」和「深水保持原样」。
★ 干净是三件套一起给的, 不是白给的: 实底 + --edge 细边 + --shadow-card
淡投影。只给白、不给边和投影, 会从「糊」掉到另一头的「扁」。
★ blur 保留: 深水那档还要靠它。浅色下高不透明度基本看不出效果, 但只剩
6 个元素, 不再是气泡那种「每条消息一个」的量级。 */
.dt-glass{
background:var(--surface-glass);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border:1px solid var(--edge);
box-shadow:var(--shadow-card),inset 0 1px 0 rgba(var(--hi-rgb),.4);
}
.dt-widget-time{
grid-column:1 / -1;
grid-row:1 / 4;
padding:22px 24px 18px;
display:flex;
flex-direction:column;
border-radius:var(--r-lg);
position:relative;
overflow:hidden;
}
.dt-wt-top{display:flex;justify-content:space-between;align-items:flex-end}
.dt-wt-time{font-size:62px;font-weight:200;letter-spacing:-3px;line-height:.95;color:var(--sub);font-feature-settings:"tnum"}
.dt-wt-time .colon{opacity:.35;font-weight:100}
.dt-wt-date{text-align:right;font-size:12px;color:var(--muted);line-height:1.7}
.dt-wt-date .big{font-size:14px;color:var(--sub);font-weight:500}
.dt-wt-todos{
margin-top:14px;padding-top:12px;
border-top:1px dashed rgba(var(--ink-rgb),.1);
display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;
overflow-y:auto;overflow-x:hidden;
}
.dt-wt-todos::-webkit-scrollbar{width:0}
.dt-wt-todo-h{
display:flex;align-items:center;justify-content:space-between;
font-size:10px;color:var(--muted);letter-spacing:1.5px;margin-bottom:2px;
}
.dt-wt-todo-h .count{
background:rgba(var(--accent-rgb),.15);color:var(--accent);
padding:1px 8px;border-radius:99px;font-size:10px;letter-spacing:.5px;
}
.dt-wt-todo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub);line-height:1.3}
.dt-wt-todo .dot{
width:6px;height:6px;border-radius:99px;
background:transparent;border:1.5px solid var(--muted);flex-shrink:0;
}
.dt-wt-todo.doing .dot{
background:var(--accent);border-color:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}
.dt-wt-todo.doing .text{color:var(--sub);font-weight:500}
.dt-wt-todo .text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-wt-todo .tag{
font-size:10px;color:var(--muted);
background:rgba(var(--ink-rgb),.05);padding:1px 6px;border-radius:99px;flex-shrink:0;
}
.dt-wt-todo .dot{cursor:pointer}
.dt-wt-todo.done .text{text-decoration:line-through;opacity:.45}
.dt-wt-todo.done .dot{background:var(--accent);border-color:var(--accent);opacity:.5;box-shadow:none}
.dt-wt-todo .del{
border:none;background:transparent;cursor:pointer;color:var(--muted);
font-size:13px;line-height:1;padding:0 2px;border-radius:5px;flex-shrink:0;
opacity:0;transition:opacity .12s ease;font-family:inherit;
}
.dt-wt-todo:hover .del{opacity:.55}
.dt-wt-more{font-size:10px;color:var(--muted);opacity:.7;padding:1px 0 0 16px}
.dt-wt-todo-add{
display:flex;align-items:center;gap:10px;
font-size:13px;color:var(--muted);line-height:1.3;
padding:6px 0;border-radius:8px;cursor:text;
transition:background .12s ease;flex:none;
}
.dt-wt-todo-add:hover{background:rgba(var(--accent-rgb),.04)}
.dt-wt-todo-add .dot-plus{
width:14px;height:14px;border-radius:99px;
border:1.2px dashed rgba(var(--ink-rgb),.3);
display:flex;align-items:center;justify-content:center;
font-size:11px;color:var(--muted);line-height:1;flex-shrink:0;
}
.dt-wt-todo-add input{
flex:1;background:transparent;border:none;outline:none;
font-size:13px;color:var(--sub);font-family:inherit;padding:0;
}
.dt-wt-todo-add input::placeholder{color:var(--muted);opacity:.7}
.dt-wt-todo-add .placeholder{flex:1;color:var(--muted);opacity:.7}
/* 「抓抓在建」只读段 —— 手机放不下, 默认隐藏, 电脑上才出现 */
.dt-wt-build{
display:flex;flex:none;margin-top:auto;padding-top:12px;
border-top:1px dashed rgba(var(--ink-rgb),.1);
flex-direction:column;gap:9px;
}
.dt-wt-build-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.3}
.dt-wt-build-row .sq{
width:5px;height:5px;border-radius:1.5px;transform:rotate(45deg);
border:1.4px solid rgba(var(--accent-rgb),.5);flex-shrink:0;
}
.dt-wt-build-row .text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-wt-build-row .tag{
font-size:10px;color:var(--accent);opacity:.75;
background:rgba(var(--accent-rgb),.1);padding:1px 6px;border-radius:99px;flex-shrink:0;
}
/* 应用图标 */
.dt-tile{
display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:6px;
cursor:pointer;user-select:none;
}
.dt-tile-icon{
width:62%;aspect-ratio:1;border-radius:var(--r-icon);
display:flex;align-items:center;justify-content:center;
transition:transform .16s ease,box-shadow .16s ease;position:relative;
/* [批5] 跟 .dt-glass 同一个配方 —— 十个图标底座也是流里的卡片 */
background:var(--surface-glass);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border:1px solid var(--edge);
box-shadow:var(--shadow-card),inset 0 1px 0 rgba(var(--hi-rgb),.4);
}
.dt-tile:active .dt-tile-icon{transform:scale(.9)}
.dt-tile-icon svg{
width:56%;height:56%;stroke:var(--sub);fill:none;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85;
}
/* [v1.6 批2A · 2026-09-02 撤单] 10 入口图标专属线条色已移除。
小槐拍板: 主页图标保持灰色单色(var(--sub)), 不要彩色图标。
走查清单 P0-4 的「专属线条色」一项作废(SVG 字形替换另议)。
★ HTML 上 10 个 .dt-tile 的 data-ic="1..10" 保留 —— 现在不接任何样式,
只当序号锚点; 万一以后想给单个图标上色, 在这里加一行即可, 不用再动 HTML。 */
.dt-tile-label{
font-size:11px;color:var(--sub);letter-spacing:.5px;text-align:center;
text-shadow:0 1px 2px rgba(var(--hi-rgb),.6);
}
/* 「在建」紫点已去掉 (小槐 8/14)。data-wip 留着当语义标记, 想要回来解注释:
.dt-tile[data-wip="1"] .dt-tile-icon::after{
content:"";position:absolute;top:5px;right:5px;
width:5px;height:5px;border-radius:99px;background:var(--accent);
box-shadow:0 0 0 2px rgba(var(--hi-rgb),.7);
} */
/* 透明占位 —— 不可见但保留网格位 */
.dt-tile.dt-placeholder{opacity:0;pointer-events:none}
/* [v1.6 批2B · P1-7] Dock: 贴底全宽横条 -> 悬浮胶囊(画布形态)。
★ margin:0 -14px 是「抵消 .dt-wrap 的 14px 内边距、撑到全宽」。去掉它,
胶囊自然就被 wrap 的内边距内缩 14px, 不用再另外给左右 margin。
★ 底部留白从 padding 挪到 margin: 贴底条是「自己长高把安全区垫起来」,
悬浮胶囊是「整体往上抬」—— 留在 padding 里会变成胶囊内部一块空白。
★ 文字标签去掉(小槐 2026-09-02 以画布截图为准拍板)。★ 电脑端左栏那套在
≥820px 的 media query 里整体覆写, 并把标签显示回来 —— 画布没画电脑端。 */
.dt-dock{
order:2; /* 手机: DOM 里 dock 在主区前面(为了电脑左栏), 这里排回底部 */
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
padding:8px;
margin:0 0 calc(env(safe-area-inset-bottom) + 10px);
background:var(--surface-glass);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid var(--edge);
border-radius:32px;
box-shadow:var(--shadow-card);
}
.dt-dock-btn.pc-only{display:none} /* 手机有返回箭头, 不占底栏格子 */
.dt-dock-btn{
display:flex;align-items:center;justify-content:center;
justify-self:center;width:52px;height:52px;border-radius:16px;
cursor:pointer;background:transparent;border:none;transition:background .12s ease;
font-family:inherit;
}
.dt-dock-btn span{display:none} /* 手机端无标签; 电脑端在下面开回来 */
.dt-dock-btn:active{background:rgba(var(--accent-rgb),.1)}
.dt-dock-btn svg{
width:24px;height:24px;stroke:var(--text-tertiary);fill:none;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:1;
}
/* 选中态从「图标变 accent 色」改成「圆角方块底 + 深色图标」(画布)。
★ 顺带解决一个问题: accent 现在跟主题走了, 选中态跟着变色的话, 苔痕下是
绿图标、黄昏下是橙图标 —— 而「我在这一页」是个恒定语义, 不该随主题漂。 */
.dt-dock-btn.active{background:var(--surface-tint)}
.dt-dock-btn.active svg{stroke:var(--text-primary);opacity:1}
.dt-dock-btn span{font-size:10px;color:var(--muted);letter-spacing:1px}
.dt-dock-btn.active span{color:var(--accent);font-weight:500}
/* ═══════════ 聊天页 ═══════════ */
.dt-chat{gap:10px}
.dt-chat-head{
display:flex;align-items:center;gap:11px;
padding:10px 14px;border-radius:20px;flex:none;margin-top:12px;
}
.dt-back{
width:36px;height:36px;border:none;background:transparent;cursor:pointer;
display:none;align-items:center;justify-content:center;border-radius:12px;flex:none;
padding:0;
}
.dt-back svg{width:17px;height:17px;stroke:var(--sub);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dt-avatar{
width:40px;height:40px;border-radius:99px;flex:none;cursor:pointer;
background:linear-gradient(140deg,var(--accent),rgba(var(--accent-rgb),.62));
color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(var(--accent-rgb),.28);overflow:hidden;
}
.dt-avatar svg{width:60%;height:60%}
.dt-chat-who{flex:1;min-width:0}
.dt-chat-name{font-size:15px;font-weight:500;color:var(--sub);line-height:1.3}
.dt-chat-status{font-size:11px;color:var(--muted);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-head-btn{
width:32px;height:32px;border:none;background:transparent;cursor:pointer;flex:none;
display:flex;align-items:center;justify-content:center;border-radius:99px;padding:0;
transition:background .12s ease;
}
.dt-head-btn svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* [v1.6 批2A] 只收二级页顶栏里的那颗: 与左侧 .dt-back 同宽 36px,
标题才真居中(原先 32px, 比返回键窄 4px, 标题偏左 2px)。
★ 必须带 .dt-page-head 作用域 —— 聊天头那颗三点菜单(1670)共用这同一个类, 不该被改。 */
.dt-page-head .dt-head-btn{width:36px;height:36px;border-radius:12px}
.dt-msgs{
flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
display:flex;flex-direction:column;gap:14px;
padding:6px 2px 4px;scroll-behavior:smooth;
}
.dt-msgs::-webkit-scrollbar{width:5px}
.dt-msgs::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.14);border-radius:99px}
.msg{display:flex;gap:9px;align-items:flex-start}
.msg.me{flex-direction:row-reverse}
.msg .mini{
width:30px;height:30px;border-radius:99px;flex:none;
background:linear-gradient(140deg,var(--accent),rgba(var(--accent-rgb),.62));color:#fff;
font-size:12px;display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(var(--accent-rgb),.2);overflow:hidden;
}
.msg.me .mini{background:linear-gradient(140deg,#C9A7C2,#E2C3D2)}
.col{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:76%}
.msg.me .col{align-items:flex-end}
/* [v1.6 批5 · P1-14] 对方气泡: 磨砂玻璃 -> 主题 tint。
★ 基准: 文档 3.4 + 画布 .bubble —— 对方气泡是「底色上压一层浅色」,
不是一块独立的玻璃卡片。玻璃那套(blur + 描边 + 投影)是卡片的语言,
用在气泡上会让每一条消息都变成一张卡, 满屏都在抢层级。
★ 描边和投影一起去掉: tint 是「陷进背景里」, 加投影等于又浮起来,
两种语言打架。要退回去的话, 把这三行加回来就是原样。
★ 顺带是个性能修复: blur(18px) 挂在【每一条消息】上, 长会话滚动时
每帧都要重算, 这是聊天页最贵的一处。
★ 圆角 17/7 -> 22/8 (画布值)。--bubble-other-text 在深水下是 #EDEBF5,
别的主题跟 --text-primary, 所以不用再为深色单独打补丁。 */
.bubble{
padding:9px 13px;border-radius:22px;font-size:var(--font-size,14px);line-height:1.6;
color:var(--bubble-other-text);word-break:break-word;white-space:pre-wrap;
background:var(--bubble-other-bg);
border-top-left-radius:8px;
}
.msg.me .bubble{
background:rgba(var(--accent-rgb),.92);color:var(--text-on-dark);
box-shadow:0 3px 12px rgba(var(--accent-rgb),.24);
border-top-left-radius:22px;border-top-right-radius:8px;
}
.bubble.sticker{background:none;border:none;box-shadow:none;padding:2px;backdrop-filter:none;-webkit-backdrop-filter:none}
.time{font-size:11px;color:var(--muted);opacity:.75;padding:0 4px}
/* SEG:ASRMETA v1 —— 她说话时的样子(时长/语速/停在哪)。
★ 显示给她看是【她选的】: 系统读出了什么, 她该知道 ——
否则她永远不会知道该不该信它。(#103 那条的另一面) */
.v-meta{margin-left:8px;font-size:9.5px;color:var(--muted);opacity:.62;letter-spacing:.2px}
/* SEG:TTSBAR v1 —— 语音条 (2026-08-27)
★ 不画按秒数生成的图案。微信那种波浪跟真实音频无关 ——
画一个假的出来就是让界面撒谎。这里进度和时长都取自音频本身。
(跟录音条 .rec-wave 不冲突: 那个是逐帧真实 RMS, 也是真的。) */
.vbar{white-space:normal;display:flex;align-items:center;gap:9px;margin-top:8px;
padding-top:8px;border-top:1px solid rgba(46,44,40,.08)}
.vplay{width:22px;height:22px;flex:none;padding:0;border:none;border-radius:99px;
background:rgba(var(--accent-rgb),.12);color:var(--accent);
display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:background .18s cubic-bezier(.16,1,.3,1)}
.vplay.on{background:var(--accent);color:#fff}
.vplay svg{width:10px;height:10px;fill:currentColor}
.vtrack{flex:1;height:2px;border-radius:99px;background:rgba(var(--accent-rgb),.16);overflow:hidden}
.vtrack i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px}
.vtime{font-size:10px;color:var(--muted);flex:none;min-width:30px;text-align:right;
font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* 取声音的时候: 进度线自己跑一小段来回, 不是转圈。
转圈是通用等待; 这里要说的是"在取那段声音", 一条线更贴。 */
.vtrack.loading i{width:30%;animation:vload 1s cubic-bezier(.4,0,.6,1) infinite}
@keyframes vload{0%{margin-left:-30%}100%{margin-left:100%}}
.msg.typing .bubble{display:flex;gap:4px;align-items:center;padding:12px 14px}
.msg.typing i{
width:5px;height:5px;border-radius:99px;background:var(--muted);opacity:.5;
animation:dtBlink 1.2s infinite;
}
.msg.typing i:nth-child(2){animation-delay:.2s}
.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes dtBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.85;transform:translateY(-3px)}}
.file-card{display:flex;gap:10px;align-items:center;cursor:pointer;min-width:170px}
.file-card .ficon{
width:34px;height:40px;border-radius:6px;flex:none;position:relative;
background:linear-gradient(150deg,rgba(var(--accent-rgb),.75),var(--accent));
display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
}
.file-card .ftype{font-size:8px;color:#fff;letter-spacing:.5px}
.file-card .fcol{min-width:0}
.file-card .fname{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card .fsize{font-size:10px;color:var(--muted)}
.msg.me .file-card .fsize{color:rgba(var(--hi-rgb),.75)}
.dt-composer{
flex:none;display:flex;align-items:center;gap:7px;
padding:8px 10px;border-radius:22px;margin-bottom:10px;
}
.dt-cbtn{
width:33px;height:33px;border:none;background:transparent;cursor:pointer;flex:none;
display:flex;align-items:center;justify-content:center;border-radius:99px;padding:0;
transition:background .12s ease;
}
.dt-cbtn svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dt-input{
flex:1;min-width:0;border:none;background:transparent;outline:none;
font-size:14px;color:var(--sub);font-family:inherit;padding:6px 2px;
}
.dt-input::placeholder{color:var(--muted);opacity:.65}
.dt-send{
width:34px;height:34px;border-radius:99px;border:none;flex:none;cursor:pointer;
background:var(--accent);display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(var(--accent-rgb),.3);transition:transform .12s ease;padding:0;
}
.dt-send svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dt-send:active{transform:scale(.9)}
/* ── SEG:ASRFRONT v1 · 录音条 (2026-08-27) ──────────────
输入框空着时发送键变麦克风 —— 不新增按钮, composer 已经四个元素了。 */
.dt-send .ic-mic{display:none}
.dt-send.voice .ic-send{display:none}
.dt-send.voice .ic-mic{display:block}
.dt-send .ic-stop{display:none}
.dt-send.stopping .ic-send,.dt-send.stopping .ic-mic{display:none}
.dt-send.stopping .ic-stop{display:block}
.dt-send.dim{background:rgba(var(--accent-rgb),.28);box-shadow:none;pointer-events:none}
/* 录音态: 常态那三个让位, 录音那三个出来。用 class 切不动 DOM 结构。 */
#dtVrCancel,#dtVrWave,#dtVrTime,#dtAsrRun{display:none}
.dt-composer.rec{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.30)}
.dt-composer.rec #dtPlusBtn,
.dt-composer.rec #dtInput,
.dt-composer.rec #dtStickerBtn{display:none}
.dt-composer.rec #dtVrCancel{display:flex}
.dt-composer.rec #dtVrWave{display:flex}
.dt-composer.rec #dtVrTime{display:block}
.dt-composer.asr #dtInput{display:none}
.dt-composer.asr #dtAsrRun{display:block}
/* ★ 每根竖条是那一刻真实的 RMS, 不是按秒数画的图案。 */
#dtVrWave{flex:1;align-items:center;gap:2px;height:26px;overflow:hidden;min-width:0}
#dtVrWave b{display:block;width:3px;border-radius:99px;background:var(--accent);
opacity:.72;flex:none;transition:height .08s linear}
#dtVrTime{font-size:11px;color:var(--accent);flex:none;min-width:34px;text-align:right;
font-variant-numeric:tabular-nums;letter-spacing:.3px}
#dtVrCancel svg{stroke:var(--accent);opacity:.75}
/* 转写中: 一条线在走。不用转圈 —— 转圈是通用 loading, 说不出在干什么。 */
#dtAsrRun{flex:1;height:2px;border-radius:99px;background:rgba(var(--accent-rgb),.14);
overflow:hidden;margin:0 4px;min-width:0}
#dtAsrRun i{display:block;height:100%;width:34%;background:var(--accent);
border-radius:99px;animation:dtAsrRun 1.1s cubic-bezier(.4,0,.6,1) infinite}
@keyframes dtAsrRun{0%{margin-left:-34%}100%{margin-left:100%}}
/* 表情面板 */
/* ★ 面板走正常流(不浮在输入条上面) —— 一打开输入条往上让, 像微信那样。
之前是 position:absolute + bottom:0, 面板一开就把输入框和表情键盖死了。 */
.dt-sticker-panel{
flex:none;max-height:46vh;min-height:150px;display:none;flex-direction:column;
border-radius:22px;padding:12px 14px 14px;margin-bottom:10px;
background:var(--surface);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(var(--edge-rgb),.6);
box-shadow:0 4px 24px rgba(var(--ink-rgb),.07);
}
.dt-sticker-panel.on{display:flex}
.sk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex:none}
.sk-head .t{font-size:12px;color:var(--muted);letter-spacing:1px}
.sk-head button{
border:none;background:transparent;cursor:pointer;color:var(--accent);
font-size:12px;font-family:inherit;padding:4px 8px;border-radius:8px;
}
#dtStickerGrid{
flex:1;min-height:0;overflow-y:auto;
display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
grid-auto-rows:84px; /* ★ 行高定死。原来靠 aspect-ratio 撑, 真实表情图尺寸各异, 会把格子顶爆叠成一坨 */
gap:9px;align-content:start;
}
.sticker-item{
height:84px;border-radius:14px;cursor:pointer;overflow:hidden;
background:var(--surface-tint);border:1px solid var(--edge);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;padding:5px;transition:transform .12s ease;
}
.sticker-item:active{transform:scale(.92)}
.sticker-item img{
max-width:100%;max-height:52px; /* px 不用 % —— % 在这儿没有参照 */
object-fit:contain;border-radius:8px;display:block;
font-size:9px;color:var(--muted);overflow:hidden; /* 图挂了时 alt 文字别把格子撑破 */
}
.sticker-item span{font-size:22px;line-height:1.2;max-height:52px;overflow:hidden}
.sticker-item .sk-name{font-size:9px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* SEG:STKTIDY v1 —— 整理模式 + 裂图标记 */
.sticker-item{position:relative}
.sticker-item.broken{border:1px dashed #d9534f;opacity:.8}
.sticker-item.broken img{display:none}
.sticker-item.broken::before{content:'裂了';font-size:12px;color:#d9534f;line-height:52px}
#dtStickerGrid.tidy .sticker-item::after{
content:'\2715';position:absolute;top:3px;right:6px;font-size:12px;font-weight:700;color:#d9534f;
}
#dtStickerGrid.tidy .sticker-item:active{transform:none}
.sk-head button.on{background:var(--surface-tint)}
/* ═══════════ 记忆 ═══════════ */
.dt-search{
flex:none;display:flex;align-items:center;gap:9px;
padding:9px 14px;border-radius:16px;margin-bottom:10px;
}
.dt-search svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;flex:none}
.dt-search input{
flex:1;min-width:0;border:none;background:transparent;outline:none;
font-size:13px;color:var(--sub);font-family:inherit;
}
.dt-search input::placeholder{color:var(--muted);opacity:.65}
.dt-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-bottom:4px}
.dt-list::-webkit-scrollbar{width:5px}
.dt-list::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.14);border-radius:99px}
/* [批13] 记忆列表: 「每条一张小卡」-> 「一张大白卡, 里面是流水/时间轴」
(画布 3a 流水屏 / 3b 脉络屏)。
★ 小卡并排的问题是每条都在喊「我是一个独立对象」, 而记忆本来是【一条流】——
该被强调的是先后和疏密, 不是每条的边界。大卡 + 细分隔线才读得出流。 */
.mem-card{
background:var(--surface);border:1px solid var(--edge);
border-radius:26px;padding:2px 18px;box-shadow:var(--shadow-card);
}
.mem-section-title{
font-size:12px;font-weight:700;color:var(--text-secondary);
padding:14px 0 4px;letter-spacing:0;
display:flex;align-items:baseline;justify-content:space-between;
}
.mem-section-title span:last-child{font-size:11px;font-weight:400;color:var(--text-tertiary)}
.mem-cats{flex:none;display:flex;gap:6px;overflow-x:auto;padding:0 2px 8px}
.mem-cats::-webkit-scrollbar{height:0}
.mem-cat-chip{
flex:none;cursor:pointer;font-size:11px;padding:5px 12px;border-radius:99px;
background:var(--surface-tint);border:1px solid var(--edge);
color:var(--muted);white-space:nowrap;transition:all .12s ease;
}
.mem-cat-chip.on{background:var(--accent);color:#fff;border-color:transparent}
.mem-cat-chip .n{opacity:.6;margin-left:4px;font-size:10px}
/* 条目摘掉卡片外壳 —— 壳现在由外面的 .mem-card 提供 */
.mem-item{
position:relative;cursor:pointer;
padding:13px 0;border:0;border-bottom:1px solid var(--edge);
background:transparent;border-radius:0;box-shadow:none;
}
.mem-item:last-child{border-bottom:none}
.mem-item.open .mi-title{color:var(--accent)}
/* ── 脉络: 左竖线 + 节点 (画布 .tl-item) ──
★ 竖线用 ::after 从本条连到下一条、最后一条不画 —— 线是「连接」而不是
「贯穿的装饰」; 分组标题插进来时线自然断开, 正合适。
★ 未完成的走 .dim 灰节点(画布规则)。 */
.mem-card.tl .mem-item{padding:0 0 18px 26px;border-bottom:none}
.mem-card.tl .mem-item::before{
content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;
border-radius:50%;background:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft);
}
.mem-card.tl .mem-item.dim::before{
background:var(--text-tertiary);box-shadow:0 0 0 3px var(--surface-tint);
}
.mem-card.tl .mem-item::after{
content:"";position:absolute;left:8px;top:20px;bottom:2px;width:1.5px;
background:var(--edge);
}
.mem-card.tl .mem-item:last-child::after{display:none}
.mi-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.mi-cat{
font-size:9.5px;padding:2px 8px;border-radius:99px;letter-spacing:.5px;
background:var(--cbg);color:var(--cfg);
}
.mi-id{font-size:10px;color:var(--muted);opacity:.7;font-feature-settings:"tnum"}
.mi-imp{display:flex;gap:2.5px;align-items:center}
.mi-imp i{width:4px;height:4px;border-radius:99px;background:var(--imp-bg)}
.mi-imp i.on{background:var(--accent);opacity:.75}
.mi-time{font-size:10px;color:var(--muted);opacity:.7;margin-left:auto}
.mi-title{font-size:14px;line-height:1.45;color:var(--text-primary);font-weight:600;margin-bottom:4px}
.mi-content{
font-size:12.5px;line-height:1.7;color:var(--text-secondary);word-break:break-word;white-space:pre-wrap;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mem-item.open .mi-content{-webkit-line-clamp:unset;overflow:visible}
.mi-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
/* 画布里标签是 #文字 直接上 accent, 不做药丸底 —— 一条记忆挂三四个灰药丸
会比正文还抢眼, 标签是线索不是内容。 */
.mi-tag{font-size:11px;color:var(--accent);background:none;padding:0}
.mi-links{font-size:10px;color:var(--accent);opacity:.8;margin-left:auto;flex:none}
.mi-linkbox{
margin-top:9px;padding-top:9px;border-top:1px dashed rgba(var(--ink-rgb),.12);
font-size:11px;color:var(--muted);line-height:1.9;
}
.mi-linkbox b{font-weight:400;color:var(--accent);opacity:.85;font-size:10px;letter-spacing:.5px}
.mi-linkbox a{color:var(--sub);text-decoration:none;cursor:pointer;border-bottom:1px dotted rgba(var(--ink-rgb),.25)}
/* SEG:MEM-SRC v1 —— 记忆卡「原话与改动」: 卡片合上时跟着藏; 颜色全走现成的变量, 深浅主题都跟着变 */
.mi-srcbar{margin-top:8px;font-size:11px}
.mi-srcbar a{color:var(--accent);cursor:pointer;opacity:.85}
.mem-item:not(.open) .mi-srcbar,.mem-item:not(.open) .mi-srcbox{display:none}
.mi-srcbox{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(var(--ink-rgb),.12);font-size:11.5px;color:var(--muted);line-height:1.7}
.mi-src-sec{margin-bottom:8px}
.mi-src-sec b{display:block;font-weight:400;color:var(--accent);opacity:.85;font-size:10px;letter-spacing:.5px;margin-bottom:3px}
.mi-src-line{color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;margin:2px 0}
.mi-src-who{color:var(--muted);opacity:.8;margin-right:6px;font-size:10.5px}
.mi-src-rev{cursor:pointer;color:var(--sub);border-bottom:1px dotted rgba(var(--ink-rgb),.25);display:inline-block;margin:2px 0}
.mi-src-old{white-space:pre-wrap;word-break:break-word;color:var(--text-secondary);background:rgba(var(--ink-rgb),.04);border-radius:6px;padding:6px 8px;margin:3px 0 6px}
.mi-src-empty,.mi-src-more{opacity:.75}
.dt-empty{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:12px;color:var(--muted);font-size:12.5px;text-align:center;padding:30px;
}
.dt-empty svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.5}
/* ═══════════ 设置 ═══════════ */
/* [v1.6 批9] 设置选项卡 -> 画布 .seg(268-270 行)。
★ 画布里选项卡有【两套】, 别搞混:
.seg (这里) 轨道 --surface-tint + 选中【白药丸】+ shadow-card
.view-tabs (记忆四栏) 选中【深底反白】—— 那套已经在 memBoardCss 里做了
区别在层级: 设置这排是"托在轨道里的开关", 白药丸像被抬起来;
记忆那排是"选中哪个视图", 深浅反转对比更强。
★ 元素上原本挂着 dt-glass(白卡), 已在 HTML 里摘掉 —— 轨道要的是 tint 底,
白留给选中的那一格。两个都白就没有层级了。
★ flex:1 四等分(画布形态), 原来是 flex:none + 横向滚动。四个固定选项卡
不需要滚动; overflow 留着当兜底, 万一以后加第五个也不会撑破。 */
.dt-subnav{
flex:none;display:flex;gap:4px;overflow-x:auto;
background:var(--surface-tint);
padding:4px;border-radius:var(--r-pill);margin-bottom:10px;
}
.dt-subnav::-webkit-scrollbar{display:none}
.dt-subnav button{
flex:1;border:none;background:transparent;cursor:pointer;font-family:inherit;
font-size:12.5px;color:var(--text-secondary);padding:8px 0;
border-radius:var(--r-pill);text-align:center;
transition:background .12s ease,color .12s ease;white-space:nowrap;
}
.dt-subnav button.active{
background:var(--surface);color:var(--text-primary);
font-weight:600;box-shadow:var(--shadow-card)}
.dt-set-body{flex:1;min-height:0;overflow-y:auto;padding-bottom:6px}
.dt-set-body::-webkit-scrollbar{width:5px}
.dt-set-body::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.14);border-radius:99px}
.set-group{margin-bottom:16px}
.set-group h2{font-size:10px;color:var(--muted);letter-spacing:1.5px;margin:0 0 8px 4px;font-weight:400}
.set-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:12px 14px;border-radius:16px;margin-bottom:7px;
background:var(--surface);
backdrop-filter:blur(18px) saturate(170%);
-webkit-backdrop-filter:blur(18px) saturate(170%);
border:1px solid rgba(var(--edge-rgb),.55);
}
.set-row .rl{min-width:0;flex:1}
.set-row .l1{font-size:13.5px;color:var(--sub);line-height:1.4}
.set-row .l2{font-size:11px;color:var(--muted);line-height:1.5;margin-top:2px}
.toggle{
width:42px;height:24px;border-radius:99px;flex:none;cursor:pointer;position:relative;
background:var(--toggle-bg);transition:background .18s ease;
}
.toggle::after{
content:"";position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:99px;
background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16);transition:transform .18s ease;
}
.toggle.on{background:var(--accent)}
.toggle.on::after{transform:translateX(18px)}
.chips-row{display:flex;gap:12px;flex-wrap:wrap;padding:4px}
.chip-wrap{cursor:pointer;text-align:center;opacity:.55;transition:opacity .12s ease}
.chip-wrap.active{opacity:1}
.chip{width:34px;height:34px;border-radius:99px;margin:0 auto 5px;border:2px solid #fff;box-shadow:0 2px 8px rgba(var(--ink-rgb),.14)}
.chip-wrap.active .chip{outline:2px solid var(--accent);outline-offset:1px}
.chip-wrap .lbl{font-size:10px;color:var(--muted)}
/* [theme-pick v2] 背景那排换成长条。
圆点 = 小槐挑的强调色; 长条 = 抓抓的背景。
两种不同的东西不该穿同一身衣服 —— 她第一眼问的就是"两套是什么意思"。
形状说错了话, 光加解释文字救不回来。 */
.chip-wrap.bg .chip{width:56px;height:32px;border-radius:10px;border-width:1.5px}
.chip-wrap.bg .lbl{margin-top:1px}
.set-input{
display:flex;flex-direction:column;gap:3px;
padding:10px 14px;border-radius:14px;margin-bottom:7px;
background:var(--surface-tint);border:1px solid var(--edge);
}
.set-input .al{font-size:10px;color:var(--muted);letter-spacing:.5px}
.set-input input{
border:none;background:transparent;outline:none;width:100%;
font-size:13px;color:var(--sub);font-family:inherit;padding:1px 0;
}
.set-actions{display:flex;gap:8px;margin-top:10px}
.btn{
flex:1;border:none;cursor:pointer;font-family:inherit;font-size:13px;
padding:11px;border-radius:14px;background:var(--accent);color:#fff;
box-shadow:0 3px 12px rgba(var(--accent-rgb),.25);
}
.btn.ghost{background:var(--surface-tint);color:var(--sub);box-shadow:none;border:1px solid var(--edge)}
.btn-mini{
border:none;cursor:pointer;font-family:inherit;font-size:12px;flex:none;
padding:7px 15px;border-radius:11px;background:var(--surface-tint);color:var(--sub);
border:1px solid rgba(var(--edge-rgb),.6);
}
.btn-mini.danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-soft)}
.model-item{
display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
padding:11px 14px;border-radius:16px;margin-bottom:7px;
background:var(--surface);border:1px solid var(--edge);
transition:all .12s ease;
}
.model-item.active{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}
.model-item .min{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:7px}
.model-item .min .star{font-size:9.5px;color:var(--accent);background:rgba(var(--accent-rgb),.12);padding:1px 6px;border-radius:99px}
.model-item .mid{font-size:11px;color:var(--muted);margin-top:2px}
.model-item .radio{width:17px;height:17px;border-radius:99px;flex:none;border:1.6px solid rgba(var(--ink-rgb),.2);position:relative}
.model-item.active .radio{border-color:var(--accent)}
.model-item.active .radio::after{content:"";position:absolute;inset:3.2px;border-radius:99px;background:var(--accent)}
input[type=range]{
-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
background:rgba(var(--ink-rgb),.15);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:16px;height:16px;border-radius:99px;
background:var(--accent);box-shadow:0 2px 7px rgba(var(--ink-rgb),.25);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
width:16px;height:16px;border:none;border-radius:99px;
background:var(--accent);box-shadow:0 2px 7px rgba(var(--ink-rgb),.25);cursor:pointer;
}
.dt-model-badge:empty{display:none} /* 没连上时别留个空色块 */
.dt-model-badge{
font-size:9px;color:var(--accent);background:rgba(var(--accent-rgb),.12);
padding:1px 7px;border-radius:99px;letter-spacing:.5px;margin-left:7px;font-weight:400;
}
.st-panel{
border-radius:20px;padding:15px 17px;
background:var(--surface);border:1px solid var(--edge);
}
/* ═══ 年表色块 (#75) ═══ */
.yr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-top:4px}
.yr-month.empty{opacity:.28}
.yr-mn{font-size:9px;color:var(--muted);margin-bottom:4px;letter-spacing:.5px}
.yr-mn.cur{color:var(--accent);font-weight:500}
.yr-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5px}
.yr-days i{aspect-ratio:1;border-radius:2px;display:block;background:rgba(0,0,0,.028)}
.yr-days i.pad{background:transparent}
.yr-days i.today{box-shadow:0 0 0 1px var(--sub)}
.yr-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
padding-top:11px;border-top:1px solid rgba(0,0,0,.04)}
.yr-legend i{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--muted);font-style:normal}
.yr-legend b{width:8px;height:8px;border-radius:2px;display:block;font-weight:400}
.yr-note{font-size:9.5px;color:var(--muted);opacity:.72;margin-top:9px;line-height:1.75}
/* + 号面板 —— 跟表情面板同一个位置, 互斥 */
.dt-plus-panel{
flex:none;display:none;border-radius:22px;padding:16px 14px 18px;margin-bottom:10px;
background:var(--surface);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(var(--edge-rgb),.6);
box-shadow:0 4px 24px rgba(var(--ink-rgb),.07);
}
.dt-plus-panel.on{display:block}
.plus-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:18px 10px;
}
.plus-item{
display:flex;flex-direction:column;align-items:center;gap:7px;
cursor:pointer;user-select:none;
}
.plus-ico{
width:52px;height:52px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
background:var(--surface);
border:1px solid rgba(var(--edge-rgb),.7);
box-shadow:0 3px 12px rgba(var(--ink-rgb),.07),inset 0 1px 0 rgba(var(--hi-rgb),.5);
transition:transform .13s ease,box-shadow .13s ease;position:relative;
}
.plus-item:active .plus-ico{transform:scale(.9)}
.plus-ico svg{width:23px;height:23px;stroke:var(--sub);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.plus-label{font-size:11px;color:var(--muted);letter-spacing:.5px}
/* 规划中: 图标压暗一点 + 右上角小点, 点了给个说法 */
.plus-item[data-wip] .plus-ico{background:var(--surface-tint)}
.plus-item[data-wip] .plus-ico svg{opacity:.42}
.plus-item[data-wip] .plus-label{opacity:.55}
.plus-item[data-wip] .plus-ico::after{
content:"";position:absolute;top:7px;right:7px;width:4.5px;height:4.5px;
border-radius:99px;background:var(--accent);opacity:.5;
}
/* 透明占位: 不可见但占格, 以后加功能直接换掉 */
.plus-item.ph{opacity:0;pointer-events:none}
/* ═══ 聊天顶栏三点菜单 ═══ */
/* z-index 必须给在顶栏本身: .dt-glass 的 backdrop-filter 会建层叠上下文,
菜单的 z-index 被关在顶栏内部, 打不过后面的消息区 */
.dt-chat-head{position:relative;z-index:5}
.chat-menu{
position:absolute;top:calc(100% + 6px);right:8px;z-index:40;min-width:150px;
display:none;flex-direction:column;padding:6px;border-radius:16px;
background:var(--surface);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(var(--edge-rgb),.7);
box-shadow:0 10px 34px rgba(var(--ink-rgb),.16);
}
.chat-menu.on{display:flex}
.chat-menu button{
display:flex;align-items:center;gap:9px;border:none;background:transparent;cursor:pointer;
font-family:inherit;font-size:13px;color:var(--sub);text-align:left;
padding:9px 11px;border-radius:11px;transition:background .12s ease;
}
.chat-menu button svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ═══ 聊天内搜索条 ═══ */
.chat-search{
flex:none;display:none;align-items:center;gap:9px;
padding:8px 14px;border-radius:16px;margin-bottom:8px;
}
.chat-search.on{display:flex}
.chat-search svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;flex:none}
.chat-search input{
flex:1;min-width:0;border:none;background:transparent;outline:none;
font-size:13px;color:var(--sub);font-family:inherit;
}
.chat-search .cnt{font-size:11px;color:var(--muted);flex:none;font-feature-settings:"tnum"}
.chat-search button{
border:none;background:transparent;cursor:pointer;color:var(--muted);
font-size:14px;padding:2px 6px;border-radius:8px;line-height:1;flex:none;font-family:inherit;
}
.msg.hit .bubble{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.28)}
.msg.hit-cur .bubble{box-shadow:0 0 0 2.5px var(--accent)}
/* ═══ 气泡操作菜单 (单击气泡弹出) ═══ */
/* ═══ SEG:QUOTE v1 —— 引用 (2026-09-03 · #118) ═══
.qref = 气泡里那条(被引的原话) .qbar = 输入框上方那条(正要引的)
★ 底色用中性灰 rgba(127,127,127,.10) 不用主题色 —— 深浅两套皮都能待。
(这是 read_shell 那次的教训: 半透明底色叠在半透明气泡上会字叠字,
所以这儿用的是灰而不是 var(--surface)。) */
.qref{display:flex;gap:6px;align-items:flex-start;margin:0 0 6px;padding:6px 9px;
border-left:2.5px solid rgba(var(--accent-rgb),.5);background:rgba(127,127,127,.10);
border-radius:8px;font-size:12px;line-height:1.45;cursor:pointer;opacity:.85}
.qref:active{opacity:1}
.qref .qwho{flex:none;font-weight:600;opacity:.75}
.qref .qtxt{flex:1;min-width:0;overflow:hidden;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qbar{display:none;align-items:center;gap:8px;margin:0 10px 6px;padding:7px 10px;
border-left:2.5px solid rgba(var(--accent-rgb),.5);background:rgba(127,127,127,.12);
border-radius:8px;font-size:12px;line-height:1.4}
.qbar.on{display:flex}
.qbar .qwho{flex:none;font-weight:600;opacity:.75}
.qbar .qtxt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbar .qx{flex:none;cursor:pointer;opacity:.5;padding:0 4px;font-size:15px;line-height:1}
.bubble-menu{
position:fixed;z-index:80;display:none;flex-direction:column;padding:5px;
min-width:112px;border-radius:14px;
background:var(--surface);
backdrop-filter:blur(28px) saturate(180%);
-webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid rgba(var(--edge-rgb),.75);
box-shadow:0 10px 32px rgba(var(--ink-rgb),.2);
}
.bubble-menu.on{display:flex}
.bubble-menu button{
display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;
font-family:inherit;font-size:12.5px;color:var(--sub);text-align:left;
padding:8px 10px;border-radius:10px;transition:background .12s ease;white-space:nowrap;
}
.bubble-menu button.danger{color:var(--danger)}
.bubble-menu button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.msg.menu-open .bubble{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35)}
.msg.fav-flash .bubble{animation:favPop .5s ease}
@keyframes favPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
/* ═══ 侧拉栏: 搜索 + 收藏夹 ═══ */
.drawer-mask{
position:fixed;inset:0;z-index:70;display:none;
/* 不加模糊 —— 搜索时命中的气泡在左边亮着, 糊了就白亮了 */
background:rgba(var(--ink-rgb),.10);
}
.drawer-mask.on{display:block}
.drawer{
position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(360px,88vw);
display:none;flex-direction:column;padding:18px 16px calc(env(safe-area-inset-bottom) + 16px);
background:var(--surface);
backdrop-filter:blur(34px) saturate(180%);
-webkit-backdrop-filter:blur(34px) saturate(180%);
border-left:1px solid rgba(var(--edge-rgb),.7);
box-shadow:-10px 0 40px rgba(var(--ink-rgb),.14);
animation:drawerIn .22s cubic-bezier(.3,0,.2,1);
}
.drawer.on{display:flex}
@keyframes drawerIn{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.drawer-h{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex:none}
.drawer-h .t{font-size:14px;font-weight:500;flex:1}
.drawer-h button{
border:none;background:transparent;cursor:pointer;color:var(--muted);
font-size:19px;line-height:1;padding:2px 6px;border-radius:8px;font-family:inherit;
}
.drawer-tabs{display:flex;gap:5px;padding:5px;border-radius:14px;margin-bottom:12px;flex:none;
background:var(--surface-tint);border:1px solid var(--edge)}
.drawer-tabs button{
flex:1;border:none;background:transparent;cursor:pointer;font-family:inherit;
font-size:12.5px;color:var(--muted);padding:7px;border-radius:10px;transition:all .12s ease;
}
.drawer-tabs button.on{background:var(--accent);color:#fff}
.drawer-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.drawer-body::-webkit-scrollbar{width:5px}
.drawer-body::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.14);border-radius:99px}
.dw-search{
display:flex;align-items:center;gap:8px;flex:none;margin-bottom:10px;
padding:9px 13px;border-radius:14px;
background:var(--surface-tint);border:1px solid var(--edge);
}
.dw-search svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;flex:none}
.dw-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:13px;color:var(--sub);font-family:inherit}
.dw-item{
border-radius:14px;padding:10px 12px;cursor:pointer;
background:var(--surface);border:1px solid var(--edge);
transition:border-color .12s ease;
}
.dw-item:active{border-color:rgba(var(--accent-rgb),.4)}
.dw-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.dw-who{font-size:10px;padding:1.5px 7px;border-radius:99px;letter-spacing:.5px}
.dw-who.me{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.dw-who.bot{background:rgba(var(--ink-rgb),.06);color:var(--muted)}
.dw-time{font-size:10px;color:var(--muted);opacity:.75;margin-left:auto}
.dw-x{
border:none;background:transparent;cursor:pointer;color:var(--muted);
font-size:14px;line-height:1;padding:0 3px;border-radius:6px;flex:none;font-family:inherit;
}
.dw-text{
font-size:12.5px;line-height:1.65;color:var(--sub);word-break:break-word;white-space:pre-wrap;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.dw-text img{max-width:100%;border-radius:8px;display:block}
/* [summary-full v1] 小结不折叠。
同一个 .dw-text 在三个 tab 里是两种东西:
收藏夹/搜索 = 指向别处的【预览】, 点了跳回原消息 —— 露个头就够, 该折。
小结 = 【内容本身】, 没有原文可跳 —— 折了就是藏起来还不给钥匙。
所以只解这一条, 别去动上面那个 clamp。 */
.dw-item.sum .dw-text{
display:block;-webkit-line-clamp:unset;overflow:visible;
}
.dw-item.sum{margin-bottom:12px} /* 完整放开后每条更长, 不拉开会连成一堵墙 */
.dw-empty{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;color:var(--muted);font-size:12px;text-align:center;line-height:1.9;padding:30px 10px;
}
.dw-hitline{font-size:10px;color:var(--muted);letter-spacing:1px;padding:2px}
/* ═══════════ app 内页 (通用外壳) ═══════════ */
/* [v1.6 批1] App 二级页顶部统一: 返回箭头 + 真居中标题 + 右侧等宽占位
—— 对齐画布 .pg-nav(375-377) / 文档 3.5。
★ 原来这里套了 .dt-glass 卡片壳(HTML 里已摘掉 class), 下面是显式兜底:
谁再把壳加回来也不会冒出一块玻璃。 */
.dt-page-head{
display:flex;align-items:center;gap:12px;flex:none;
padding:14px 18px;margin-bottom:10px;
background:transparent;border:none;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.dt-page-title{font-size:15px;font-weight:600;flex:1;text-align:center}
/* 右侧等宽占位: 必须与左侧返回键同宽(36px), 标题才真居中。
桌面端返回键是隐藏的, 占位也要跟着藏 —— 只藏左边标题会偏右。 */
.pg-spacer{width:36px;flex:none;display:none}
.dt-page-sub{font-size:11px;color:var(--muted);font-weight:400;margin-left:8px}
.dt-page-body{
flex:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;color:var(--muted);
}
.dt-page-body .big-icon{
width:76px;height:76px;border-radius:24px;opacity:.5;
display:flex;align-items:center;justify-content:center;
background:var(--surface-glass);border:1px solid var(--edge); /* [批5] 跟上同一配方 */
}
.dt-page-body .big-icon svg{width:44%;height:44%;stroke:var(--sub);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dt-page-body .t1{font-size:14px;color:var(--sub)}
.dt-page-body .t2{font-size:12px;line-height:1.7;max-width:280px}
/* ═══════════ 头像面板 ═══════════ */
.dt-mask{
position:fixed;inset:0;z-index:60;display:none;
align-items:center;justify-content:center;padding:24px;
background:rgba(40,36,32,.28);backdrop-filter:blur(6px);
}
.dt-mask.show{display:flex}
.dt-panel{
width:100%;max-width:320px;border-radius:24px;padding:18px 20px 20px;
background:var(--surface);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(var(--edge-rgb),.7);
box-shadow:0 16px 50px rgba(var(--ink-rgb),.18);
}
.dt-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dt-panel-h .t{font-size:14px;font-weight:500}
.dt-panel-h button{border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--muted);line-height:1;padding:2px 6px}
#dtAvatarGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.av-item{
aspect-ratio:1;border-radius:99px;cursor:pointer;overflow:hidden;
background:linear-gradient(140deg,var(--accent),rgba(var(--accent-rgb),.62));color:#fff;
display:flex;align-items:center;justify-content:center;font-size:15px;
border:2px solid transparent;transition:transform .12s ease;
}
.av-item svg{width:56%;height:56%}
.av-item.sel{border-color:var(--accent);transform:scale(1.06)}
.dt-upload-btn{
display:block;width:100%;text-align:center;cursor:pointer;
font-size:13px;color:var(--accent);padding:10px;border-radius:14px;
background:rgba(var(--accent-rgb),.08);
}
/* Toast —— 沿用旧签名 toast(msg,'ok'|'error'), 以后搬别的模块不用改调用 */
.toast{
position:fixed;left:50%;bottom:14%;
transform:translateX(-50%) translateY(20px);
background:rgba(30,25,20,.88);backdrop-filter:blur(20px);
color:#fff;padding:10px 20px;border-radius:99px;
font-size:13px;opacity:0;transition:all .2s ease;
pointer-events:none;z-index:99;letter-spacing:1px;max-width:82vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:rgba(150,50,50,.9)}
/* ★ flex column 的滚动容器里, 子项默认 flex-shrink:1 会被压扁 ——
内容一多, 气泡/思考链/记忆条就被硬切掉一截。统一钉死不许收缩。 */
.dt-msgs > *, .dt-list > *{flex:none}
.hide{display:none !important}
/* ══════════════════════════════════════════════════════════
★ 电脑适配 (≥820px) —— 同一套 DOM: 左侧常驻导航 + 右侧主区
══════════════════════════════════════════════════════════ */
@media (min-width:820px){
.dt-wrap{
max-width:none;width:100%;height:100dvh;padding:28px;
display:flex;align-items:center;justify-content:center;
}
.dt-stage{
flex:none;
width:min(1000px,92vw);
height:min(548px,80vh);
display:flex;
flex-direction:row; /* 电脑: 左侧导航栏 + 右侧主区 */
align-items:stretch;
gap:18px;
}
/* 6 列 × 2 行: 时间组件占左 2 列通高, 右侧 4×2 = 8 格正好 8 个 app */
.dt-grid{
flex:1;min-width:0;
grid-template-columns:repeat(6,1fr);
grid-template-rows:repeat(2,1fr);
gap:18px;padding-bottom:0;
}
/* 手机第 6 行那 4 个占位在电脑上不占格, 否则右下角空一片 */
.dt-tile.dt-placeholder:nth-last-child(-n+4){display:none}
.dt-widget-time{
grid-column:1 / 3;grid-row:1 / 3;
padding:30px 32px 26px;border-radius:30px;
}
/* 左栏占走宽度后时间卡变窄, 时间/日期改上下排 */
.dt-wt-top{flex-direction:column;align-items:flex-start;gap:6px}
.dt-wt-date{text-align:left;font-size:12.5px;line-height:1.5;display:flex;align-items:baseline;gap:8px}
.dt-wt-time{font-size:64px;letter-spacing:-3px}
.dt-wt-date .big{font-size:15px}
/* 代办区吃满剩余高度并自己滚; 「抓抓在建」靠 margin-top:auto 钉在卡片底部。
真数据可能十几条, 不滚就会把卡片顶穿。 */
.dt-wt-todos{margin-top:20px;padding-top:16px;gap:11px;flex:1 1 auto;min-height:0;overflow-y:auto}
.dt-wt-todo-h{font-size:11px;margin-bottom:4px}
.dt-wt-todo{font-size:14px}
.dt-wt-todo-add{font-size:14px;margin-top:4px}
.dt-wt-todo-add input{font-size:14px}
.dt-wt-build{padding-top:16px}
.dt-wt-build-row{font-size:13px}
.dt-tile{gap:10px}
.dt-tile-icon{width:min(62%,96px);border-radius:24px}
.dt-tile-label{font-size:12px}
/* Dock: 手机贴底横条 → 电脑左侧常驻竖栏 */
.dt-dock{
order:-1;margin:0;width:78px;flex:none;
grid-template-columns:1fr;grid-template-rows:repeat(5,auto);
align-content:center;gap:8px;padding:12px 8px;
border:1px solid rgba(var(--edge-rgb),.5);
border-top:1px solid rgba(var(--edge-rgb),.5);
border-radius:26px;
box-shadow:0 8px 30px rgba(var(--ink-rgb),.07),inset 0 1px 0 rgba(var(--hi-rgb),.5);
}
/* [批2B] 手机端把按钮锁成 52×52 居中、并隐藏了标签 —— 电脑端左栏是竖排
带字的，这里必须逐条解锁，否则 78px 宽的栏里会挤着一列 52px 方块。 */
.dt-dock-btn{flex-direction:column;gap:6px;padding:12px 0;border-radius:18px;
width:auto;height:auto;justify-self:stretch}
.dt-dock-btn span{display:block}
.dt-dock-btn.pc-only{display:flex}
.dt-dock-btn svg{width:21px;height:21px}
.dt-dock-btn span{font-size:11px;letter-spacing:.5px}
.dt-dock-btn.active{background:rgba(var(--accent-rgb),.1)}
/* + 号面板: 电脑上别把 4 个图标均分到 720 宽里, 散得没边 —— 定宽从左排 */
.plus-grid{grid-template-columns:repeat(4,74px);justify-content:start;gap:20px 30px;padding-left:8px}
/* 电脑上聊天/内页限宽居中, 免得一行文字横穿整个屏 */
.dt-chat,.dt-page,.dt-memory,.dt-settings,.dt-state{max-width:720px;width:100%;margin:0 auto}
.col{max-width:66%}
}
/* 大屏(1080p+): 整体放大一档 */
@media (min-width:1500px){
.dt-stage{width:min(1280px,80vw);height:min(628px,74vh);gap:24px}
.dt-grid{gap:22px}
.dt-tile-icon{width:min(62%,112px);border-radius:27px}
.dt-tile-label{font-size:13px}
.dt-widget-time{padding:34px 36px 30px;border-radius:32px}
.dt-wt-time{font-size:74px}
.dt-wt-date{font-size:14px}
.dt-wt-date .big{font-size:17px}
.dt-wt-todo{font-size:15px}
.dt-wt-todo-add{font-size:15px}
.dt-wt-todo-add input{font-size:15px}
.dt-wt-build-row{font-size:14px}
.dt-wt-todo-h{font-size:12px}
.dt-dock{width:88px;padding:14px 9px;gap:10px}
.dt-dock-btn{padding:14px 0}
.dt-dock-btn svg{width:23px;height:23px}
.dt-dock-btn span{font-size:12px}
.bubble{font-size:calc(var(--font-size,14px) + 1px)}
}
/* 手机上进了二级页, 顶栏显示返回箭头。
★ 右侧 .pg-spacer 必须跟着一起出现 —— 只有左边有箭头、右边空着,
居中标题会整体偏右半个箭头的宽度。 */
@media (max-width:819px){
.dt-back{display:flex}
.pg-spacer{display:block}
}
/* 鼠标 hover 态 —— 只在有指针的设备生效 */
@media (hover:hover) and (pointer:fine){
.dt-tile:hover .dt-tile-icon{
transform:translateY(-4px);
box-shadow:0 12px 26px rgba(var(--ink-rgb),.11),inset 0 1px 0 rgba(var(--hi-rgb),.5);
}
.dt-tile:active .dt-tile-icon{transform:translateY(-1px) scale(.95)}
.dt-dock-btn:hover{background:var(--surface-tint)}
.dt-head-btn:hover,.dt-cbtn:hover,.dt-back:hover{background:rgba(var(--accent-rgb),.09)}
.bubble-menu button:hover{background:rgba(var(--accent-rgb),.09)}
.drawer-tabs button:hover{color:var(--sub)}
.dw-item:hover{border-color:rgba(var(--accent-rgb),.35)}
.sticker-item:hover{transform:translateY(-2px)}
.plus-item:hover .plus-ico{transform:translateY(-3px);box-shadow:0 9px 20px rgba(var(--ink-rgb),.1)}
.sk-head button:hover{background:rgba(var(--accent-rgb),.08)}
}
/* ═══ 日历 · 重画版 ═══ */
.cal-wrap{display:none;width:100%;text-align:left}
/* 真页面: 内容从顶部开始排。
父容器是 justify-content:center —— 那是给"抓抓在建"占位设计的(图标+两行字居中)。
内容一长, flex 居中会把开头那截挤出可视区, scrollTop 到 0 也够不着。 */
.dt-page-body.real{
justify-content:flex-start;
gap:0;
padding-top:2px;
}
.dt-page-body.real .big-icon,
.dt-page-body.real .t1,
.dt-page-body.real .t2{display:none}
.dt-page-body.real .cal-wrap{display:block}
/* 共读: iframe 装 tasogare 的前端。★ 外层这一页不滚, 交给 iframe 自己滚 ——
.dt-page-body 本身是 overflow-y:auto, 跟 iframe 内部套两层,
iOS 上会滑不动/惯性卡住。rd 这个 class 由 navigate 挂摘, 离开自动还原。 */
/* SEG:READBARE v1 —— align-items 得跟着覆盖。
.dt-page-body 是 flex column + align-items:center(上面 1483 行),
.rd 原来只盖了 overflow/padding/gap —— 里面装的是一个
width:100% 的 iframe, 没有任何理由让它居中收缩。 */
.dt-page-body.rd{overflow:hidden;padding:0;gap:0;align-items:stretch}
.dt-page-body.rd .cal-wrap{flex:1;min-height:0;width:100%;display:block}
.dt-page-body.rd #dtReadFrame{display:block;width:100%;height:100%;border:0;border-radius:0} /* SEG:NOROUND v1 —— 16px→0, 见 #111 */
/* 周期卡 */
/* [v1.6 批5 · P1-12] 经期面板改白卡(文档 4.8 + 6.3, v1.5 已定, index 一直没跟)。
玻璃 .55 -> --surface 实底 + --edge 细边 + --shadow-card, radius 18 -> 20。 */
.cal-cycle{
background:var(--surface);border:1px solid var(--edge);
box-shadow:var(--shadow-card);border-radius:20px;
padding:18px 18px 15px;margin-bottom:22px}
.cal-cycle-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.cal-cycle-l{flex:1;min-width:0}
.cal-cycle-k{font-size:10.5px;color:var(--muted);margin-bottom:5px;letter-spacing:.5px}
.cal-cycle-v{font-size:19px;font-weight:500;letter-spacing:.3px;line-height:1.25}
.cal-cycle-r{text-align:right;flex:none}
.cal-cycle-r .big{font-size:19px;font-weight:500;color:var(--accent);line-height:1.25}
.cal-cycle-r .sm{font-size:10.5px;color:var(--muted);margin-top:3px}
.cal-phases{display:flex;gap:5px}
.cal-phases span{
flex:1;text-align:center;font-size:10.5px;padding:6px 0;border-radius:var(--r-pill);
background:var(--surface-tint);color:var(--text-secondary);letter-spacing:.3px}
/* 选中态原来是写死的粉底 rgba(232,160,168,.30) + 深粉字 —— 五套主题都一样,
所以苔痕/黄昏下会凭空冒出一块粉。改成 --accent 实底 + 白字, 跟着主题走。 */
.cal-phases span.on{background:var(--accent);color:var(--text-on-dark);font-weight:500}
.cal-basis{font-size:10px;color:var(--muted);opacity:.75;margin-top:10px;text-align:center}
/* 月历 —— 不给格子上底, 靠留白 */
.cal-head{display:flex;align-items:center;margin-bottom:14px}
.cal-head .ym{font-size:16.5px;font-weight:500;letter-spacing:.5px;flex:1}
.cal-head button{
width:28px;height:28px;flex:none;border:none;cursor:pointer;background:transparent;
color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center}
.cal-head .today-btn{width:auto;padding:0 9px;font-size:11px;color:var(--accent)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.cal-wk{text-align:center;font-size:10.5px;color:var(--muted);padding-bottom:10px;letter-spacing:1px}
.cal-cell{
height:42px;display:flex;flex-direction:column;align-items:center;
justify-content:center;cursor:pointer;position:relative}
.cal-cell.pad{cursor:default}
.cal-num{
width:31px;height:31px;border-radius:50%;display:flex;
align-items:center;justify-content:center;font-size:13.5px;
color:var(--sub);transition:background .14s}
/* 实际经期: 粉实心 */
.cal-cell.period .cal-num{background:#E8A0A8;color:#fff}
/* 预测经期: 粉浅 */
.cal-cell.guess .cal-num{background:var(--period-bg);color:var(--period-text)}
/* 今天: 空心圈 */
.cal-cell.today .cal-num{box-shadow:inset 0 0 0 1.2px var(--sub)}
/* 选中 */
.cal-cell.sel .cal-num{background:var(--accent);color:#fff;box-shadow:none}
/* 有记录: 数字下小点 */
.cal-dot{
width:3.5px;height:3.5px;border-radius:99px;background:var(--sub);
opacity:.55;margin-top:2px}
.cal-cell.sel .cal-dot,.cal-cell.period .cal-dot{background:var(--sub);opacity:.4}
/* 图例 */
.cal-legend{
display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
margin-top:14px;padding-top:13px;border-top:1px solid rgba(0,0,0,.05)}
.cal-legend i{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);font-style:normal}
.cal-legend b{width:9px;height:9px;border-radius:99px;display:block;font-weight:400}
.lg-real{background:#E8A0A8}
.lg-guess{background:rgba(232,160,168,.26)}
.lg-today{box-shadow:inset 0 0 0 1.2px var(--sub)}
.lg-rec{width:4px !important;height:4px !important;background:var(--sub);opacity:.55}
/* 选中那天 */
.cal-day{margin-top:24px}
.cal-day-h{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.cal-day-h .d{font-size:14px;font-weight:500}
.cal-day-h .sub{font-size:10.5px;color:var(--muted)}
.cal-day-h .add{
margin-left:auto;border:none;background:transparent;color:var(--accent);
font-size:11.5px;cursor:pointer;padding:2px 0}
.cal-ev{
display:flex;gap:10px;padding:12px 13px;border-radius:14px;
background:var(--surface);margin-bottom:7px}
.cal-ev .bar{width:2.5px;border-radius:99px;flex:none;align-self:stretch}
.cal-ev .bd{flex:1;min-width:0}
.cal-ev .tp{font-size:9.5px;color:var(--muted);letter-spacing:.5px;margin-bottom:3px}
.cal-ev .ti{font-size:13px;line-height:1.5}
.cal-ev .ti.done{text-decoration:line-through;opacity:.4}
.cal-ev .nt{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.65}
.cal-ev .by{font-size:9.5px;color:var(--muted);opacity:.65;margin-top:5px}
.cal-ev .x{
flex:none;border:none;background:transparent;color:var(--muted);
cursor:pointer;font-size:15px;line-height:1;opacity:.4;padding:0 2px}
.cal-empty{font-size:11.5px;color:var(--muted);padding:4px 0 2px}
.cal-form{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.05)}
.cal-types{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.cal-types button{
border:none;background:var(--surface-tint);color:var(--muted);
border-radius:99px;padding:5px 12px;font-size:11px;cursor:pointer}
.cal-types button.on{color:#fff}
.cal-form input,.cal-form select{
width:100%;border:none;border-radius:11px;padding:9px 11px;font-size:12px;
margin-bottom:7px;background:var(--surface-tint);color:var(--sub);font-family:inherit}
.cal-form input:focus,.cal-form select:focus{outline:1px solid var(--accent)}
.cal-form-row{display:flex;gap:7px}
.cal-form-row select{flex:1}
.cal-form-row button{
flex:none;border:none;border-radius:11px;padding:9px 16px;
font-size:12px;cursor:pointer;margin-bottom:7px}
.cal-save{background:var(--accent);color:#fff}
.cal-cancel{background:var(--surface-tint);color:var(--muted)}
.cal-sec{margin-top:22px}
.cal-sec-h{font-size:10.5px;color:var(--muted);letter-spacing:1.5px;margin-bottom:10px}
.cal-soon{display:flex;align-items:center;gap:10px;padding:11px 13px;
border-radius:14px;background:var(--surface);margin-bottom:6px}
.cal-soon .ti{font-size:12.5px}
.cal-soon .nt{font-size:10px;color:var(--muted);margin-top:3px}
.cal-soon .d{font-size:11.5px;color:var(--accent);flex:none;font-weight:500}
.cal-soon .d.warn{color:var(--danger)}
/* ═══ 内心: 日记 + 梦 ═══ */
/* [v1.6 批9] 内心页分类 -> 画布 .inner-tabs(519-521 行): 下划线改药丸。
★ 连 .inn-bar 那条 border-bottom 一起去掉 —— 下划线选中态没了之后,
那条分隔线就只剩一条横杠悬在药丸底下, 没有意义。
★ flex:none + nowrap 保留(原注释说的那个折行问题还在)。 */
.inn-bar{
display:flex;align-items:center;gap:8px;margin-bottom:20px}
/* ★ flex:none + nowrap —— 不加这两个会被右边的 flex:1 挤到折行 */
.inn-tab{
flex:none;white-space:nowrap;border:none;cursor:pointer;
padding:7px 14px;border-radius:var(--r-pill);font-size:12px;
background:var(--surface);border:1px solid var(--edge);
color:var(--text-secondary);font-weight:500;
font-family:inherit;letter-spacing:.3px;transition:background .12s ease,color .12s ease}
.inn-tab.on{background:var(--text-primary);color:var(--surface);font-weight:600}
.inn-bar .sp{flex:1}
/* [v1.6 批6 · P0-6] 内心页右下角悬浮按钮。
顶栏那两个 inline 文字按钮(写一篇 · 做个梦)撤了, 改成 fab + 弹出菜单(画布 13 屏)。
★ position:fixed 而不是 absolute: 这一块是塞在 #dtPageReal 里的, 而那是
会滚的容器 —— absolute 会跟着内容滚上去。已确认 .dt-screen 上没有任何
transform(有的话 fixed 会退化成相对它定位), 所以 fixed 是安全的。
★ right 那个 max(): .dt-wrap 是 max-width:480 居中的。窄屏走 18px;
宽屏时贴到那一栏的右缘(50vw - 240 + 18), 不会飞到浏览器窗口最右边。
★ bottom 要让开底部那颗 Dock 胶囊: 胶囊高约 70(52+8×2+边框),
它自己还有 safe-area+10 的下边距, 再留 12 —— 合计 safe-area + 92。 */
.fab-wrap{
position:fixed;
right:max(18px, calc(50vw - 222px));
bottom:calc(env(safe-area-inset-bottom) + 92px);
z-index:4}
.fab{
width:54px;height:54px;border-radius:var(--r-pill);border:none;cursor:pointer;
background:var(--accent);color:var(--text-on-dark);
font-size:26px;line-height:1;font-family:inherit;
box-shadow:var(--shadow-button);
display:flex;align-items:center;justify-content:center;
transition:transform .16s ease}
.fab:active{transform:scale(.92)}
.fab-wrap.open .fab{transform:rotate(45deg)} /* + 转成 × */
.fab-menu{
position:absolute;right:0;bottom:66px;
display:none;flex-direction:column;gap:4px;
background:var(--surface);border:1px solid var(--edge);
border-radius:18px;padding:6px;box-shadow:var(--shadow-float);
min-width:120px}
.fab-wrap.open .fab-menu{display:flex}
.fab-menu button{
border:none;background:transparent;cursor:pointer;font-family:inherit;
font-size:13px;color:var(--text-primary);padding:10px 14px;
border-radius:var(--r-pill);white-space:nowrap;text-align:left}
.fab-menu button:disabled{opacity:.35;cursor:default}
.fab-menu button:active{background:var(--surface-tint)}
/* ═══ 心情 (#75) ═══ */
/* [批9] 跟内心页分类同一套 —— 它俩是同一个语义(页内分类切换), 不该长两个样 */
.md-tab{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.md-tab button{
flex:none;border:none;cursor:pointer;font-family:inherit;
padding:7px 14px;border-radius:var(--r-pill);font-size:12px;
background:var(--surface);border:1px solid var(--edge);
color:var(--text-secondary);font-weight:500;
letter-spacing:.3px;transition:background .12s ease,color .12s ease}
.md-tab button.on{background:var(--text-primary);color:var(--surface);font-weight:600}
.md-who-f{
font-size:10px;cursor:pointer;opacity:.42;padding:2px 8px;
border-radius:99px;margin-left:2px}
.md-who-f.on{opacity:1;background:var(--surface-tint);color:var(--sub)}
.md-h{display:flex;align-items:baseline;font-size:13px;font-weight:500;
margin-bottom:12px;letter-spacing:.5px}
.md-cnt{margin-left:auto;font-size:10px;color:var(--muted);font-weight:400}
.md-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.md-cell{
position:relative;border:1px solid rgba(0,0,0,.07);background:var(--surface);
border-radius:12px;padding:9px 2px 7px;font-size:11px;color:var(--sub);
cursor:pointer;font-family:inherit;display:flex;flex-direction:column;
align-items:center;gap:5px;transition:background .14s}
.md-cell i{width:9px;height:9px;border-radius:99px;display:block;opacity:.85}
.md-cell.on{font-weight:500}
.md-no{
position:absolute;top:-5px;right:-4px;min-width:15px;height:15px;
border-radius:99px;color:#fff;font-size:8.5px;line-height:15px;
text-align:center;padding:0 3px}
.md-form{display:flex;gap:7px;margin-top:14px}
.md-form input{
flex:1;min-width:0;border:none;border-radius:11px;padding:10px 12px;font-size:12px;
background:var(--surface-tint);color:var(--sub);font-family:inherit}
.md-form input:focus{outline:1px solid var(--accent)}
.md-save{
flex:none;border:none;border-radius:11px;padding:10px 18px;font-size:12px;
background:var(--accent);color:#fff;cursor:pointer;font-family:inherit}
.md-save:disabled{opacity:.35;cursor:default}
.md-sec{font-size:10.5px;color:var(--muted);letter-spacing:1.5px;margin:22px 0 10px}
.md-item{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;
border-radius:14px;background:var(--surface);margin-bottom:7px}
.md-by{flex:none;font-size:9px;padding:2px 6px;border-radius:99px;color:#fff;
margin-top:1px;letter-spacing:.5px}
.md-by.h{background:#C9A0C0}
.md-by.z{background:#8FA8C8}
.md-tags{display:flex;gap:3px;flex:none;flex-wrap:wrap;max-width:84px}
.md-tag{font-size:9.5px;color:#fff;padding:2px 7px;border-radius:99px;letter-spacing:.5px}
.md-tag.main{font-weight:500}
.md-bd{flex:1;min-width:0}
.md-note{font-size:12px;line-height:1.6;color:var(--sub)}
.md-time{font-size:9.5px;color:var(--muted);opacity:.7;margin-top:3px}
.md-x{flex:none;border:none;background:transparent;color:var(--muted);
cursor:pointer;font-size:15px;line-height:1;opacity:.4;padding:0 2px}
.md-cloud{width:100%;height:190px;filter:blur(30px);opacity:.85;
background-repeat:no-repeat;background-size:cover;margin-bottom:6px}
.md-week{display:flex;align-items:center;gap:10px;padding:11px 13px;
border-radius:14px;background:var(--surface);margin-bottom:14px}
.md-week-l{flex:1;min-width:0}
.md-week-l .k{font-size:9.5px;color:var(--muted);margin-bottom:3px;letter-spacing:.5px}
.md-week-l .v{font-size:13px}
.md-week-l .v b{font-weight:600}
.md-week-r{font-size:10px;color:var(--muted);opacity:.6;flex:none}
.md-stat-h{font-size:10.5px;color:var(--muted);letter-spacing:1.5px;margin-bottom:11px}
.md-stat{margin-bottom:13px}
.md-stat-t{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:5px}
.md-stat-t i{width:8px;height:8px;border-radius:99px;display:block;flex:none}
.md-stat-t .n{margin-left:auto;font-size:10px;color:var(--muted)}
.md-stat-t b{font-size:11.5px;font-weight:600;min-width:32px;text-align:right}
.md-bar{height:3px;border-radius:99px;background:rgba(0,0,0,.055);overflow:hidden}
.md-bar div{height:100%;border-radius:99px}
.md-stat-last{font-size:9.5px;color:var(--muted);opacity:.72;margin-top:5px;line-height:1.6}
.inn-card{
padding:14px;border-radius:var(--r-sm);margin-bottom:10px;
background:var(--surface)}
.inn-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.inn-k{
font-size:9.5px;padding:2px 8px;border-radius:99px;color:#fff;letter-spacing:.5px}
.inn-k.d{background:#8FA8C8}
.inn-k.m{background:#A08FB8}
/* 封缄 [seal-ui v1] —— 全部走 glass/edge token, 深水下自动对 */
.seal-form{background:var(--surface);border:1px solid var(--edge);
border-radius:16px;padding:12px;margin-bottom:10px}
.seal-row{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.seal-row.wrap{flex-wrap:wrap}
.seal-lb{font-size:10.5px;color:var(--muted);flex:none;margin-right:2px}
.seal-chip{border:none;font-family:inherit;font-size:10.5px;padding:4px 10px;border-radius:99px;
background:var(--surface-tint);color:var(--muted);cursor:pointer}
.seal-chip.on{background:var(--accent);color:#fff}
.seal-in,.seal-ta{width:100%;border:1px solid rgba(var(--edge-rgb),.5);
background:var(--surface-tint);border-radius:12px;padding:9px 11px;
font-family:inherit;font-size:12.5px;color:var(--sub);margin-bottom:9px}
.seal-ta{min-height:112px;line-height:1.7;resize:vertical}
.seal-when{font-size:11px;color:var(--accent);opacity:.9;margin:-2px 0 10px 2px}
.seal-go{flex:1;border:none;font-family:inherit;font-size:12.5px;padding:9px;
border-radius:12px;background:var(--accent);color:#fff;cursor:pointer}
.seal-cancel{border:none;font-family:inherit;font-size:12px;padding:9px 14px;
border-radius:12px;background:var(--surface-tint);color:var(--muted);cursor:pointer}
.seal-card{background:var(--surface);border:1px solid var(--edge);
border-radius:15px;padding:11px 13px;margin-bottom:9px}
.seal-card.ripe{border-color:var(--accent)}
.seal-left{margin-left:auto;font-size:10px;color:var(--muted);flex:none}
.seal-lock{font-size:11.5px;color:var(--muted);opacity:.75;margin-top:6px;letter-spacing:.3px}
.seal-open{margin-top:8px;border:none;font-family:inherit;font-size:12px;padding:7px 16px;
border-radius:11px;background:var(--accent);color:#fff;cursor:pointer}
.inn-date{font-size:11px;color:var(--muted)}
.inn-dom{font-size:9.5px;color:var(--accent);opacity:.8;margin-left:auto}
.inn-body{font-size:12.5px;line-height:1.85;white-space:pre-wrap;color:var(--sub)}
/* 梦: 故意做得看不真切 —— 它本来就是断片里捞出来的 */
.inn-card.dream{
/* [批14] 原来写死 rgba(160,143,184,X) 紫灰 —— 五套主题都一样,
苔痕/黄昏下会凭空冒出一块紫。改走 accent 通道, "看不真切"的意思不变。 */
background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),rgba(var(--hi-rgb),.30));
border:1px solid rgba(var(--accent-rgb),.16)}
.inn-card.dream .inn-body{
font-style:italic;opacity:.82;letter-spacing:.3px;line-height:2}
.inn-empty{
text-align:center;color:var(--muted);font-size:12px;
padding:40px 20px;line-height:1.9}
.inn-wait{
text-align:center;color:var(--accent);font-size:11.5px;padding:14px}
/* ═══════════════════════════════════════════════════════════════════════
Wishper v3 · tokens.css · 2026-09-18
会变的全在这一个文件里。结构在各页模块，逻辑在 js。
三个正交开关（都挂在 ）：
data-w3-tint blue | pink | purple | green | mono 默认 mono
data-w3-mode light | dark 默认 light
data-w3-bubble solid | glass | imsg 默认 solid
★ 第三个开关其实是【材质】：气泡 + 所有按钮 / chip / 输入框一起换
（09-18 小槐：「别的按钮换成液态玻璃和 iMessage 样式」）
★ glass 是真折射：v3.js 按需加载 hyalite.js，往元素 style 写 --hyalite；
这里的 --bub-blur / --mat-blur 只是没有折射引擎时（Safari / Firefox）的兜底
★ 为什么带 w3- 前缀：v2.js 的 applyLook() 开机会往 body.data-tint 写它自己
那套，跟 v3 撞同一个属性名。两套并存，v3 的写在后面、优先级高。
★ 层级（09-18 定）：
body 外观壁纸（可选）—— 三栏之下。没设就 --bg 纯色
└ 三栏 不透明卡
└ 聊天卡 聊天壁纸（可选，卡内）—— 没设就 --chat-base 弥散渐变
└ 气泡 glass 只透聊天卡自己的底，永远不透外观壁纸
★ 浅色配色（09-18 晚上换回 v2 那套，小槐：「现在的颜色有点深了」）：
底 / 灰底 / 正文 / 次要 / 重点色 / 球 全部按 v2-ref/tokens.css 的 plain 五套。
★ 纯色下【她的气泡】也回到 v2 的做法：一块淡淡的同色系（--bub），黑字 ——
不是重点色铺满 + 白字。v2 的粉是 #F6ECF0 这种，之前用 #E07A98 铺满一整块，
那就是「还是深色版」的来源。重点色只留给发送键 / 今天 / 当前项这些小件。
黑白那套 v2 叫 white、重点色其实是蓝的；v3 的黑白按名字来，重点色留中性 #3C3C43。
分割线 v2 没有（transparent），v3 的版式要，取比灰底再深一点点。
小槐拍的规矩：深色是每种配色的另一半；重点色跨明暗色相不变；
分层靠字重留白；不要衬线；不要虚线；液态玻璃【扁平】【透】。
★★ 第六节【legacy 别名】一个都不能删。
═══════════════════════════════════════════════════════════════════════ */
/* ── 一、不随皮变的 ───────────────────────────────────────────────── */
:root {
--font: 'MiSans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
--w-thin: 200; --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600;
--fs-hero: 25px; --fs-h1: 22px; --fs-h2: 17px; --fs-title: 15px;
--fs-body: 13px; --fs-sm: 11px; --fs-cap: 9.5px; --fs-tag: 8px;
--lh: 1.75; --lh-tight: 1.55; --ls-tag: .22em; --ls-logo: .2em;
--pad-page: 24px; --pad-card: 16px; --pad-card-lg: 20px;
/* 手机左右边距：随宽度走，360 的真手机约 22，500 的窗口约 30，最宽 34
（09-18 小槐：14 贴，18 贴，24 还是贴 —— 她看的是 500 宽的窗口，真手机不能照搬 24+） */
--pad-page-sm: clamp(20px, 6vw, 34px);
--gap-block: 13px; --gap-col: 18px;
--r-card: 22px; --r-card-lg: 24px; --r-inner: 16px; --r-chip: 13px; --r-pill: 999px;
--rail-w: 46px; --nav-w: 230px; --aside-w: 320px; --stage-max: 1600px; --tap: 44px;
--ease-rail: cubic-bezier(.32, .72, 0, 1); --dur-rail: .26s;
/* 动效（09-23 小槐定，数值参考 transitions.dev）：打开慢、关上快；缩放只到 .96–.99；模糊 2–8px */
--d-stagger: 40ms; --d-micro: 80ms; --d-quick: 150ms; --d-fast: 250ms;
--d-medium: 350ms; --d-slow: 400ms; --d-very-slow: 500ms;
--ease-out: cubic-bezier(.22, 1, .36, 1); /* 默认：先快后柔 */
--ease-bounce: cubic-bezier(.34, 1.36, .64, 1); /* 带一点回弹：弹出类 */
}
/* ── 七（提前）、v2 旧开关的兼容映射 ── 放在 v3 配色前面，v3 后写后赢 ── */
body[data-tint="white"] { --bg: #F8F8F7; --card: #FFFFFF; --soft: #F0F0EF; --bub: #F2F2F4;
--line: #E6E6E8; --accent: #3C3C43; --accent-rgb: 60,60,67;
--ink: #1C1C1E; --ink-rgb: 28,28,30; --ink2: #8E8E93; --on-accent: #FFFFFF; --orb: #B8B8BD; }
body[data-tint="blue"] { --bg: #EEF4FB; --card: #FFFFFF; --soft: #E4EDF8; --bub: #E4EDF8; --line: #DCE6F2;
--accent: #3B82F6; --accent-rgb: 59,130,246; --ink: #1C1C1E; --ink-rgb: 28,28,30;
--ink2: #8E8E93; --on-accent: #FFFFFF; --orb: #8FBBFF; }
body[data-tint="pink"] { --bg: #FDF4F6; --card: #FFFFFF; --soft: #F8E9EE; --bub: #F6ECF0; --line: #F1E0E7;
--accent: #E07A98; --accent-rgb: 224,122,152; --ink: #2A2024; --ink-rgb: 42,32,36;
--ink2: #8A767D; --on-accent: #FFFFFF; --orb: #F3A9C0; }
body[data-tint="purple"] { --bg: #F5F3FB; --card: #FFFFFF; --soft: #EBE7F5; --bub: #EEEBF7; --line: #E3DEF0;
--accent: #8A7BE0; --accent-rgb: 138,123,224; --ink: #232030; --ink-rgb: 35,32,48;
--ink2: #7E7896; --on-accent: #FFFFFF; --orb: #B9AFF0; }
body[data-tint="green"] { --bg: #F2F7F3; --card: #FFFFFF; --soft: #E5EEE8; --bub: #E9F1EC; --line: #DCE7E0;
--accent: #4CA97F; --accent-rgb: 76,169,127; --ink: #1F2A23; --ink-rgb: 31,42,35;
--ink2: #728379; --on-accent: #FFFFFF; --orb: #9FD3B8; }
body[data-theme="深水"], body[data-tint="night"] {
--bg: #0E0E10; --card: #17171A; --soft: #1E1E22; --bub: #25262C; --line: #28282D;
--accent: #E9E9EC; --accent-rgb: 233,233,236;
--ink: #EDEDEF; --ink-rgb: 237,237,239; --ink2: #9A9AA1;
--on-accent: #0E0E10; --orb: #C9C9D2; --card-rgb: 23,23,26; color-scheme: dark; }
body[data-material="glass"] { --blur: 20px; }
/* ── 二、配色 · 浅色（= v2 plain 五套）────────────────────────────
--bub 是纯色下她的气泡：v2 的 --bubble，淡淡一块同色系，黑字。 */
body,
body[data-w3-tint="mono"] {
--bg: #F8F8F7; --card: #FFFFFF; --soft: #F0F0EF; --bub: #F2F2F4; --line: #E6E6E8;
--accent: #3C3C43; --accent-rgb: 60, 60, 67;
--ink: #1C1C1E; --ink-rgb: 28, 28, 30; --ink2: #8E8E93;
--glow: rgba(255, 255, 255, .92); --on-accent: #FFFFFF; --orb: #B8B8BD;
color-scheme: light;
}
body[data-w3-tint="blue"] {
--bg: #EEF4FB; --card: #FFFFFF; --soft: #E4EDF8; --bub: #E4EDF8; --line: #DCE6F2;
--accent: #3B82F6; --accent-rgb: 59, 130, 246;
--ink: #1C1C1E; --ink-rgb: 28, 28, 30; --ink2: #8E8E93;
--glow: rgba(255, 255, 255, .9); --on-accent: #FFFFFF; --orb: #8FBBFF;
}
body[data-w3-tint="pink"] {
--bg: #FDF4F6; --card: #FFFFFF; --soft: #F8E9EE; --bub: #F6ECF0; --line: #F1E0E7;
--accent: #E07A98; --accent-rgb: 224, 122, 152;
--ink: #2A2024; --ink-rgb: 42, 32, 36; --ink2: #8A767D;
--glow: rgba(255, 255, 255, .9); --on-accent: #FFFFFF; --orb: #F3A9C0;
}
body[data-w3-tint="purple"] {
--bg: #F5F3FB; --card: #FFFFFF; --soft: #EBE7F5; --bub: #EEEBF7; --line: #E3DEF0;
--accent: #8A7BE0; --accent-rgb: 138, 123, 224;
--ink: #232030; --ink-rgb: 35, 32, 48; --ink2: #7E7896;
--glow: rgba(255, 255, 255, .9); --on-accent: #FFFFFF; --orb: #B9AFF0;
}
body[data-w3-tint="green"] {
--bg: #F2F7F3; --card: #FFFFFF; --soft: #E5EEE8; --bub: #E9F1EC; --line: #DCE7E0;
--accent: #4CA97F; --accent-rgb: 76, 169, 127;
--ink: #1F2A23; --ink-rgb: 31, 42, 35; --ink2: #728379;
--glow: rgba(255, 255, 255, .9); --on-accent: #FFFFFF; --orb: #9FD3B8;
}
/* ── 三、配色 · 深色（黑白 = v2 夜黑；四个淡色系是各自的另一半）────── */
body[data-w3-mode="dark"],
body[data-w3-mode="dark"][data-w3-tint="mono"] {
--bg: #0E0E10; --card: #17171A; --soft: #1E1E22; --bub: #25262C; --line: #28282D;
--accent: #E9E9EC; --accent-rgb: 233, 233, 236;
--ink: #EDEDEF; --ink-rgb: 237, 237, 239; --ink2: #9A9AA1;
--glow: rgba(210, 210, 220, .08); --on-accent: #0E0E10; --orb: #C9C9D2;
color-scheme: dark;
}
body[data-w3-mode="dark"][data-w3-tint="blue"] {
--bg: #0E1219; --card: #171C25; --soft: #1C232F; --bub: #232D3D; --line: #262E3C;
--accent: #7DAEF5; --accent-rgb: 125, 174, 245;
--ink: #E6EAF2; --ink-rgb: 230, 234, 242; --ink2: #97A2B5;
--glow: rgba(110, 150, 220, .11); --on-accent: #0E1219; --orb: #6F9BD6;
}
body[data-w3-mode="dark"][data-w3-tint="pink"] {
--bg: #170F13; --card: #201519; --soft: #271A20; --bub: #30212A; --line: #33232A;
--accent: #EBA0B8; --accent-rgb: 235, 160, 184;
--ink: #F0E7EA; --ink-rgb: 240, 231, 234; --ink2: #B39BA3;
--glow: rgba(220, 140, 170, .1); --on-accent: #170F13; --orb: #C98AA0;
}
body[data-w3-mode="dark"][data-w3-tint="purple"] {
--bg: #110E1A; --card: #191624; --soft: #201C2E; --bub: #29243A; --line: #2B2639;
--accent: #B3A5EE; --accent-rgb: 179, 165, 238;
--ink: #E9E5F2; --ink-rgb: 233, 229, 242; --ink2: #9C95B0;
--glow: rgba(160, 140, 230, .11); --on-accent: #110E1A; --orb: #9488D0;
}
body[data-w3-mode="dark"][data-w3-tint="green"] {
--bg: #0C1310; --card: #141C18; --soft: #1A241E; --bub: #212E27; --line: #243028;
--accent: #74C79E; --accent-rgb: 116, 199, 158;
--ink: #E4EDE8; --ink-rgb: 228, 237, 232; --ink2: #93A69B;
--glow: rgba(95, 190, 146, .1); --on-accent: #0C1310; --orb: #5FA882;
}
/* ── 四、派生 ─────────────────────────────────────────────────────── */
body {
--accent-soft: rgba(var(--accent-rgb), .12);
--accent-line: rgba(var(--accent-rgb), .34);
--orb-halo: color-mix(in srgb, var(--orb) 26%, transparent);
--shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 8px 24px rgba(var(--ink-rgb), .03);
--shadow-float: 0 16px 40px rgba(var(--ink-rgb), .08);
--ok: #30A46C;
--danger: #E5484D;
--chat-base: radial-gradient(ellipse 58% 46% at 16% 10%, var(--glow), transparent 68%),
radial-gradient(ellipse 56% 50% at 86% 68%, var(--glow), transparent 66%),
radial-gradient(ellipse 48% 40% at 46% 100%, var(--glow), transparent 70%),
var(--bg);
--chat-scrim: transparent;
--chat-bar: color-mix(in srgb, var(--card) 74%, transparent);
}
body[data-w3-mode="dark"] {
--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
--shadow-float: 0 16px 40px rgba(0, 0, 0, .5);
--chat-scrim: rgba(0, 0, 0, .36);
--chat-bar: color-mix(in srgb, var(--card) 70%, transparent);
}
/* ── 五、材质三套：气泡 + 控件 ─────────────────────────────────────
气泡：him = 抓抓（左） her = 小槐（右）
控件：--mat-*（中性：chip / 输入框 / 选项） --mat-acc-*（强调：发送 / 今天 / 当前项）
三套共用同一组变量名，app3.css 只读变量不分支。
★ 纯色 = v2 的样子：他白卡，她一块淡同色系（--bub），都是黑字。重点色不铺气泡。
★ 液态玻璃【扁平】【透】，分两档（跟苹果一样）：
气泡（装字的） regular —— 底色 14%，中心磨砂 4px，字压在壁纸上要能读
控件（装按钮的）clear —— 底色 10%，几乎全透
边缘折射两档一样（hyalite）。没有内阴影没有投影（09-18 小槐）。
--bub-blur / --mat-blur 在 glass 下只是兜底：Chromium 会被 --hyalite 盖掉。
★ 尾巴不做。纯色和 iMessage 靠头像那一角收紧当尾巴的替身；玻璃对称圆角。 */
body,
body[data-w3-bubble="solid"] {
--bub-him-bg: var(--card); --bub-him-ink: var(--ink); --bub-him-bd: transparent;
--bub-her-bg: var(--bub); --bub-her-ink: var(--ink); --bub-her-bd: transparent;
--bub-bw: 0px; --bub-r: 19px; --bub-corner: 6px;
--bub-blur: 0px; --bub-sat: 100%;
--bub-shadow: 0 2px 8px rgba(var(--ink-rgb), .035);
--bub-shadow-her: none;
--mat-bg: var(--soft); --mat-ink: var(--ink); --mat-bd: var(--line);
--mat-acc-bg: var(--accent); --mat-acc-ink: var(--on-accent); --mat-acc-bd: transparent;
--mat-bw: 1px; --mat-blur: 0px; --mat-sat: 100%;
--mat-shadow: none; --mat-acc-shadow: none;
}
/* 液态玻璃 —— 扁平、透 */
body[data-w3-bubble="glass"] {
--bub-him-bg: rgba(255, 255, 255, .14); --bub-him-ink: var(--ink); --bub-him-bd: rgba(255, 255, 255, .55);
--bub-her-bg: rgba(var(--accent-rgb), .16); --bub-her-ink: var(--ink); --bub-her-bd: rgba(var(--accent-rgb), .38);
--bub-bw: 1px; --bub-r: 20px; --bub-corner: 20px;
--bub-blur: 8px; --bub-sat: 140%;
--bub-shadow: none; --bub-shadow-her: none;
--mat-bg: rgba(255, 255, 255, .10); --mat-ink: var(--ink); --mat-bd: rgba(255, 255, 255, .55);
--mat-acc-bg: rgba(var(--accent-rgb), .12); --mat-acc-ink: var(--ink); --mat-acc-bd: rgba(var(--accent-rgb), .38);
--mat-bw: 1px; --mat-blur: 4px; --mat-sat: 140%;
--mat-shadow: none; --mat-acc-shadow: none;
}
body[data-w3-mode="dark"][data-w3-bubble="glass"] {
--bub-him-bg: rgba(255, 255, 255, .07); --bub-him-bd: rgba(255, 255, 255, .20);
--bub-her-bg: rgba(var(--accent-rgb), .13);
--mat-bg: rgba(255, 255, 255, .05); --mat-bd: rgba(255, 255, 255, .20);
--mat-acc-bg: rgba(var(--accent-rgb), .10);
}
/* 旧 iMessage —— 凸起：顶亮底暗渐变 + 顶部白高光 + 底部内阴影 + 两层外投影 */
body[data-w3-bubble="imsg"] {
--bub-him-bg: linear-gradient(180deg, #FFFFFF 0%, #EDEDF1 100%);
--bub-him-ink: var(--ink);
--bub-him-bd: rgba(var(--ink-rgb), .16);
--bub-her-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #FFFFFF) 0%, var(--accent) 100%);
--bub-her-ink: var(--on-accent);
--bub-her-bd: rgba(var(--accent-rgb), .55);
--bub-bw: 1px; --bub-r: 17px; --bub-corner: 8px;
--bub-blur: 0px; --bub-sat: 100%;
--bub-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -3px 5px rgba(var(--ink-rgb), .06),
0 1px 2px rgba(var(--ink-rgb), .16),
0 4px 10px rgba(var(--ink-rgb), .1);
--bub-shadow-her: inset 0 1px 0 rgba(255, 255, 255, .45),
inset 0 -3px 5px rgba(0, 0, 0, .12),
0 1px 2px rgba(var(--ink-rgb), .16),
0 4px 10px rgba(var(--accent-rgb), .22);
--mat-bg: var(--bub-him-bg); --mat-ink: var(--ink); --mat-bd: var(--bub-him-bd);
--mat-acc-bg: var(--bub-her-bg); --mat-acc-ink: var(--on-accent); --mat-acc-bd: var(--bub-her-bd);
--mat-bw: 1px; --mat-blur: 0px; --mat-sat: 100%;
--mat-shadow: var(--bub-shadow); --mat-acc-shadow: var(--bub-shadow-her);
}
body[data-w3-mode="dark"][data-w3-bubble="imsg"] {
--bub-him-bg: linear-gradient(180deg, #33333C 0%, #24242B 100%);
--bub-him-bd: rgba(255, 255, 255, .16);
--bub-her-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #FFFFFF) 0%, var(--accent) 100%);
--bub-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -3px 5px rgba(0, 0, 0, .22),
0 1px 2px rgba(0, 0, 0, .5),
0 4px 10px rgba(0, 0, 0, .35);
--bub-shadow-her: inset 0 1px 0 rgba(255, 255, 255, .3),
inset 0 -3px 5px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .5),
0 4px 10px rgba(0, 0, 0, .35);
}
/* ── 六、★ legacy 别名 —— 一个都不能删 ─────────────────────────────── */
body {
--sub: var(--ink); --muted: var(--ink2);
--text-primary: var(--ink); --text-secondary: var(--ink2); --text-tertiary: var(--ink2);
--surface: var(--card); --surface-glass: var(--card); --surface-tint: var(--soft);
--edge: var(--line); --card-line: var(--line); --hi: transparent;
--glass-rgb: 255, 255, 255; --edge-rgb: 255, 255, 255; --hi-rgb: 255, 255, 255;
--shadow-card: var(--shadow); --shadow-card-hover: var(--shadow-float);
--shadow-button: 0 4px 14px rgba(var(--accent-rgb), .28);
--toggle-bg: rgba(var(--ink-rgb), .14); --imp-bg: rgba(var(--ink-rgb), .12);
--bubble: var(--bub-her-bg); --bubble-me: var(--bub-him-bg);
--bubble-other-bg: var(--bub-her-bg); --bubble-other-text: var(--bub-her-ink);
--danger-soft: rgba(229, 72, 77, .12);
--success: var(--ok); --success-soft: rgba(48, 164, 108, .10);
--warning: #F5A623; --info: var(--accent); --pink: #FF85A1; --gold: #E8B54A;
--accent-strong: var(--accent);
--surface-dark: #2A2A2E; --surface-dark-2: #333338; --dock-bg: var(--card);
--immersive-bg-2: linear-gradient(180deg, #2E2E33, #1C1C1E);
--cornerstone-bg: linear-gradient(180deg, #333338, #2A2A2E);
--text-on-dark: #FFFFFF; --text-on-dark-muted: rgba(255, 255, 255, .62);
--period-bg: rgba(232, 160, 168, .26); --period-text: #8C5A66;
--blur: var(--bub-blur); --wall: none;
--r-lg: var(--r-card); --r-xl: var(--r-card-lg); --r-md: var(--r-inner);
--r-icon: 18px; --r-sm: 12px; --r-bubble: var(--bub-r);
--fs-small: var(--fs-sm); --fs-cap-legacy: var(--fs-cap);
}
body[data-w3-mode="dark"], body[data-tint="night"], body[data-theme="深水"] {
--glass-rgb: 40, 40, 46; --edge-rgb: 70, 70, 80; --hi-rgb: 60, 60, 70;
--toggle-bg: rgba(255, 255, 255, .15); --imp-bg: rgba(255, 255, 255, .14);
--surface-dark: #26262B; --surface-dark-2: #2E2E34;
--immersive-bg-2: linear-gradient(180deg, #26262B, #111114);
--text-on-dark: var(--ink);
}
/* ═══════════════════════════════════════════════════════════════
Wishper v2 · app.css · 结构层。颜色一律走 tokens.css 的 var()。
加载顺序: legacy.css → tokens.css → app.css。这里写在后面, 同权重就赢。
规则: 页边 24 / 卡内 20 / 块间 32 / 无分割线 / 圆角 24 / 药丸 999 / 行高 1.6
═══════════════════════════════════════════════════════════════ */
html,body{height:100%}
body{
font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh);
color:var(--ink);background:var(--bg) !important;background-image:var(--wall) !important;
background-size:cover;background-position:center;background-attachment:fixed;
-webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
/* ── 通用件 ── */
.card{background:var(--card);border-radius:var(--r-card);padding:var(--pad-card);box-shadow:var(--shadow);border:none}
.cap{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;padding:5px 10px 5px 9px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);white-space:nowrap;border:none}
.pill::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--accent);display:block}
.pill.quiet{background:var(--bg-2);color:var(--ink-2)}
.pill.quiet::before{background:var(--ink-3)}
.v2-empty{padding:48px 24px;text-align:center;color:var(--ink-3);font-size:var(--fs-small);line-height:1.9}
.v2-row{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);cursor:pointer}
.v2-row .t{font-size:14px;font-weight:600}
.v2-row .s{font-size:var(--fs-small);color:var(--ink-2);margin-top:3px}
.v2-row .body{flex:1;min-width:0}
.v2-row .chev{width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v2-stack{display:flex;flex-direction:column;gap:var(--gap-card)}
.v2-tabs{display:flex;gap:24px;padding:0 4px;margin-bottom:24px}
.v2-tabs button{border:none;background:none;padding:6px 0 8px;font-size:13px;color:var(--ink-3);font-weight:500;border-bottom:1.5px solid transparent}
.v2-tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.v2-av{width:24px;height:24px;border-radius:99px;flex:none;overflow:hidden;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2)}
.v2-av img{width:100%;height:100%;object-fit:cover;display:block}
.v2-av.lg{width:44px;height:44px;font-size:17px}
/* 光团: 往幽灵长。有下坠感, 半透明, 没有脸, 在等 */
.orb{position:relative;width:24px;height:28px;flex:none}
.orb::before{content:"";position:absolute;left:4%;top:0;width:92%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle at 45% 40%,var(--orb-core) 0%,var(--orb) 40%,rgba(var(--accent-rgb),.25) 70%,transparent 100%);
animation:orbBreathe 3.6s ease-in-out infinite}
.orb::after{content:"";position:absolute;left:22%;top:55%;width:56%;height:55%;border-radius:50% 50% 60% 60%;
background:radial-gradient(circle at 50% 20%,var(--orb) 0%,transparent 75%);opacity:.5;filter:blur(2px)}
.orb.lg{width:44px;height:52px}
@keyframes orbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.orb::before{animation:none}}
/* ── 壳: 覆盖旧的 .dt-wrap / .dt-stage / .dt-main / .dt-screen 观感, 布局机制沿用 ── */
.dt-wrap,.dt-stage{background:transparent !important;box-shadow:none !important;border:none !important}
.dt-main{background:transparent !important}
.dt-screen{padding:0 !important;background:transparent !important}
.dt-screen > *{box-sizing:border-box}
/* ── Dock: 底部胶囊, 四个字, 不带图标 ── */
.dt-dock{
position:fixed !important;left:16px !important;right:16px !important;bottom:calc(env(safe-area-inset-bottom) + 16px) !important;top:auto !important;
width:auto !important;height:auto !important;margin:0 !important;padding:6px !important;
display:flex !important;flex-direction:row !important;gap:4px !important;
background:var(--card) !important;border-radius:var(--r-pill) !important;box-shadow:var(--shadow-float) !important;
border:none !important;backdrop-filter:none;z-index:50 !important;
}
.dt-dock-btn{
flex:1 !important;display:flex !important;align-items:center;justify-content:center;
padding:14px 0 !important;border-radius:var(--r-pill) !important;background:transparent !important;border:none;
font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:.02em;
}
.dt-dock-btn svg{display:none !important}
.dt-dock-btn span{display:block !important;font-size:12.5px !important;color:inherit !important;letter-spacing:.02em !important;font-weight:inherit !important}
.dt-dock-btn.active{background:transparent !important;color:var(--ink);font-weight:600}
.dt-dock-btn.pc-only{display:flex !important}
/* 二级页(有返回箭头的)把 Dock 藏起来, 给内容让地方 */
body.v2-sub .dt-dock{display:none !important}
/* ── 页头: 大标题, 无线 ── */
.v2-head{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 20px) var(--pad-page) 20px}
.v2-head .title{font-size:22px;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0}
.v2-head .back{width:36px;height:36px;margin-left:-8px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0}
.v2-head .back svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v2-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--pad-page) calc(env(safe-area-inset-bottom) + 108px)}
.v2-body::-webkit-scrollbar{width:0}
.v2-page{display:none}.v2-page.on{display:flex;flex-direction:column;height:100%;min-height:0}
/* ═══ 主页: 四列网格, 小组件 + 图标 ═══ */
.v2-home-top{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 16px) var(--pad-page) 12px}
.v2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(72px,auto);gap:12px;grid-auto-flow:dense}
.v2-w{grid-column:span 2;grid-row:span 2;background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow);min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.v2-w[data-w="4x1"]{grid-column:span 4;grid-row:span 1;padding:12px 16px}
.v2-w[data-w="4x2"]{grid-column:span 4;grid-row:span 2}
.v2-w[data-w="2x1"]{grid-column:span 2;grid-row:span 1;padding:12px 16px}
.v2-w[data-w="1x1"]{grid-column:span 1;grid-row:span 1;padding:0;background:transparent;box-shadow:none;overflow:visible}
.v2-w .wl{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3)}
.v2-w .big{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.v2-w .sub{font-size:var(--fs-small);color:var(--ink-2);margin-top:auto;line-height:1.5}
.v2-w.zhua .say{background:var(--bubble);border-radius:12px 12px 12px 4px;padding:7px 10px;font-size:11.5px;line-height:1.5;flex:1;min-width:0}
.v2-w.zhua .ev{margin-top:10px;font-size:10.5px;color:var(--ink-2);line-height:1.6;display:flex;flex-direction:column;gap:4px}
.v2-w.zhua .ev b{font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:6px}
.v2-w[data-k="couple"]{padding:0}
.v2-w[data-k="couple"] .cover{height:56px;background:var(--bg-2);background-size:cover;background-position:center;position:relative;flex:none}
.v2-w[data-k="couple"] .avs{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);display:flex}
.v2-w[data-k="couple"] .avs .v2-av{width:28px;height:28px;border:2px solid var(--card)}
.v2-w[data-k="couple"] .avs .v2-av+.v2-av{margin-left:-8px}
.v2-w[data-k="couple"] .cb{padding:20px 12px 10px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.v2-w[data-k="couple"] .nm{font-size:12.5px;font-weight:600}
.v2-w[data-k="couple"] .dd{font-size:10.5px;color:var(--ink-2);margin-top:2px}
.v2-w[data-k="couple"] .dd b{color:var(--ink);font-weight:600}
.v2-w .week{display:flex;gap:2px}
.v2-w .week span{flex:1;text-align:center;font-size:9.5px;color:var(--ink-3);padding:3px 0;border-radius:99px;font-variant-numeric:tabular-nums}
.v2-w .week span.today{background:var(--accent);color:#fff;font-weight:600}
/* 今日代办: 旧的 dtTodoList 那套 id 原样放进来, 逻辑不动, 只换样子 */
.v2-w.todos .dt-wt-todo{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 0;line-height:1.4}
.v2-w.todos .dt-wt-todo .dot{width:7px;height:7px;border-radius:99px;border:1.5px solid var(--ink-3);flex:none;cursor:pointer}
.v2-w.todos .dt-wt-todo.done .dot{background:var(--accent);border-color:var(--accent);opacity:.5}
.v2-w.todos .dt-wt-todo.done .text{text-decoration:line-through;opacity:.45}
.v2-w.todos .dt-wt-todo .text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-w.todos .dt-wt-todo .tag{font-size:10px;color:var(--ink-3)}
.v2-w.todos .dt-wt-todo .del{border:none;background:none;color:var(--ink-3);font-size:14px;padding:0 2px;opacity:0}
.v2-w.todos .dt-wt-todo:hover .del{opacity:1}
.v2-w.todos .dt-wt-more{font-size:10.5px;color:var(--ink-3);padding:4px 0}
.v2-w.todos #dtTodoAdd{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3);padding-top:6px;margin-top:auto;cursor:text}
.v2-w.todos #dtTodoAdd .dot-plus{width:15px;height:15px;border-radius:99px;border:1.2px dashed var(--ink-3);display:flex;align-items:center;justify-content:center;font-size:11px}
.v2-w.todos #dtTodoAdd input{flex:1;border:none;background:none;outline:none;font:inherit;color:var(--ink)}
.v2-w.todos #dtTodoCount{font-size:10px;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:99px;margin-left:auto}
.v2-w .wh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.v2-w.pinned .pin{font-size:11.5px;line-height:1.5;padding:6px 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2-w.pinned .pin+.pin{border-top:none}
/* 图标 */
.v2-icon{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.v2-icon .ic{width:100%;aspect-ratio:1;border-radius:18px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden}
.v2-icon .ic svg{width:40%;height:40%;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v2-icon .ic img{width:100%;height:100%;object-fit:cover}
.v2-icon .lb{font-size:10.5px;color:var(--ink)}
/* 主页修补 (fix_v2_css2) */
.v2-w[data-k="apps"]{background:none;box-shadow:none;padding:4px 0 0;overflow:visible;border-radius:0}
.v2-icon .ic{width:56px;height:56px;aspect-ratio:auto}
.v2-w.zhua>div:first-child{flex:none}
.v2-w.zhua .say{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2-w.zhua .ev div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-w.pinned .v2-empty,.v2-w.todos .dt-wt-more{margin:auto 0}
/* 编辑态 */
.v2-grid.editing .v2-w{animation:jiggle .35s ease-in-out infinite alternate}
.v2-grid.editing .v2-w:nth-child(2n){animation-delay:.12s}
@keyframes jiggle{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.v2-grid.editing .v2-w{animation:none;outline:1.5px dashed var(--ink-3);outline-offset:2px}}
.v2-w .rm{display:none;position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:99px;background:var(--ink);color:var(--card);border:none;font-size:14px;line-height:1;z-index:2}
.v2-w .mv{display:none;position:absolute;top:-6px;right:-6px;gap:2px;z-index:2}
.v2-w .mv button{width:22px;height:22px;border-radius:99px;background:var(--card);color:var(--ink);border:none;font-size:11px;box-shadow:var(--shadow-bubble)}
.v2-grid.editing .v2-w .rm,.v2-grid.editing .v2-w .mv{display:flex}
.v2-editbar{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-radius:24px 24px 0 0;padding:20px var(--pad-page) calc(env(safe-area-inset-bottom) + 20px);box-shadow:var(--shadow-float);z-index:60;max-height:60vh;overflow-y:auto}
.v2-editbar.on{display:block}
.v2-editbar .eh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.v2-editbar .eh b{font-size:16px;font-weight:700}
.v2-editbar .done{border:none;background:var(--ink);color:var(--card);font-size:12px;padding:8px 16px;border-radius:99px}
.v2-editbar .opt{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border-radius:16px;margin-bottom:8px;cursor:pointer}
.v2-editbar .opt .th{width:56px;height:36px;border-radius:10px;background:var(--bg-2);flex:none}
.v2-editbar .opt .t{font-size:13px;font-weight:600}
.v2-editbar .opt .s{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.v2-editbar .opt.added{opacity:.4;pointer-events:none}
/* ═══ 聊天: 沿用旧 DOM, 换皮 ═══ */
#dt-s-chat{display:none;flex-direction:column;height:100%;min-height:0}
#dt-s-chat.on{display:flex}
#dt-s-chat .dt-chat-head{
flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;
background:var(--card);border:none !important;box-shadow:none !important;border-radius:0 !important;
backdrop-filter:none;margin:0 !important;
}
#dt-s-chat .dt-back{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;flex:none}
#dt-s-chat .dt-back svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dt-s-chat .dt-avatar{display:none}
#dt-s-chat .dt-chat-who{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
#dt-s-chat .dt-chat-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
#dt-s-chat .dt-model-badge{display:none}
#dt-s-chat .dt-chat-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;padding:4px 9px 4px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;margin-left:auto}
#dt-s-chat .dt-chat-status::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--accent)}
#dt-s-chat .dt-head-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;flex:none}
#dt-s-chat .dt-head-btn svg{width:18px;height:18px;stroke:var(--ink-2);fill:var(--ink-2)}
#dt-s-chat .dt-msgs{
flex:1;min-height:0;overflow-y:auto;padding:26px 24px 8px;display:flex;flex-direction:column;gap:0;
background:var(--chatwall,none) center/cover;
}
#dt-s-chat .dt-msgs::-webkit-scrollbar{width:0}
/* 消息: 旧结构 .msg > .mini + .col > .bubble... */
#dt-s-chat .msg{display:flex;gap:8px;align-items:flex-start;max-width:78%;margin-bottom:18px;position:relative}
#dt-s-chat .msg.me{align-self:flex-end;flex-direction:row-reverse}
#dt-s-chat .msg .mini{width:20px;height:20px;border-radius:99px;flex:none;font-size:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-2);overflow:hidden;margin-top:0;order:0}
#dt-s-chat .msg .mini img{width:100%;height:100%;object-fit:cover}
#dt-s-chat .msg .col{display:flex;flex-direction:column;gap:12px;min-width:0;align-items:flex-start}
#dt-s-chat .msg.me .col{align-items:flex-end}
#dt-s-chat .msg .col::before{content:"抓抓";font-size:11px;font-weight:500;color:var(--ink-2);margin-bottom:-6px}
#dt-s-chat .msg.me .col::before{content:"小槐"}
#dt-s-chat .msg .bubble{
background:var(--bubble-me);color:var(--ink);padding:8px 12px;border-radius:var(--r-bubble);
font-size:12.5px;line-height:1.7;box-shadow:var(--shadow-bubble);border:none;backdrop-filter:none;
word-break:break-word;white-space:pre-wrap;max-width:100%;
}
#dt-s-chat .msg.me .bubble{background:var(--bubble);color:var(--ink);box-shadow:none}
#dt-s-chat .msg .time{font-size:10px;color:var(--ink-3);margin-top:-6px}
#dt-s-chat .msg.typing .bubble{padding:10px 14px}
#dt-s-chat .msg.typing i{background:var(--ink-3)}
#dt-s-chat .msg.hit .bubble{outline:2px solid var(--accent-soft)}
#dt-s-chat .msg.fav-flash .bubble{background:var(--accent-soft)}
#dt-s-chat .think-line,#dt-s-chat .tool-line{color:var(--ink-3) !important;font-size:10.5px !important}
/* 引用条 / 语音条 / 图片 沿用旧 class, 改颜色 */
#dt-s-chat .qref{background:var(--bg-2);border-left:2px solid rgba(var(--accent-rgb),.4)}
#dt-s-chat .vbar{border-top:none;padding-top:4px}
/* 输入框: 两层白卡 */
#dt-s-chat .qbar{margin:0 16px}
#dt-s-chat .dt-composer{
flex:none;margin:8px 14px calc(env(safe-area-inset-bottom) + 16px) !important;padding:12px 12px 10px 16px !important;
background:var(--card) !important;border-radius:22px !important;box-shadow:var(--shadow) !important;border:none !important;
display:flex;flex-wrap:wrap;align-items:center;gap:4px;backdrop-filter:none;
}
#dt-s-chat .dt-composer .dt-input{order:0;flex:1 0 100%;width:100%;font-size:13px;padding:2px 2px 10px;color:var(--ink);background:none;border:none;outline:none}
#dt-s-chat .dt-composer .dt-input::placeholder{color:var(--ink-3)}
#dt-s-chat .dt-composer #dtPlusBtn{order:1}
#dt-s-chat .dt-composer #dtStickerBtn{order:2}
#dt-s-chat .dt-composer .dt-cbtn{width:28px;height:28px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;border-radius:99px}
#dt-s-chat .dt-composer .dt-cbtn svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#dt-s-chat .dt-composer #dtVrCancel{order:1}
#dt-s-chat .dt-composer #dtVrWave{order:2;flex:1}
#dt-s-chat .dt-composer #dtVrTime{order:3;font-size:11px;color:var(--accent)}
#dt-s-chat .dt-composer #dtAsrRun{order:2;flex:1}
#dt-s-chat .dt-composer .dt-send{order:9;margin-left:auto;width:32px;height:32px;border-radius:99px;border:none;background:var(--accent);box-shadow:0 3px 10px rgba(var(--accent-rgb),.3);display:flex;align-items:center;justify-content:center;padding:0}
#dt-s-chat .dt-composer .dt-send svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dt-s-chat .dt-composer .dt-send.dim{background:rgba(var(--accent-rgb),.28);box-shadow:none}
#dt-s-chat .dt-composer.rec .dt-input,#dt-s-chat .dt-composer.asr .dt-input{display:none}
#dt-s-chat .dt-composer::after{content:attr(data-model);order:3;font-size:10px;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);padding:3px 9px;border-radius:99px;margin-left:4px;font-weight:500}
#dt-s-chat .dt-composer[data-model=""]::after,#dt-s-chat .dt-composer:not([data-model])::after{display:none}
#dt-s-chat .dt-composer.rec::after,#dt-s-chat .dt-composer.asr::after{display:none}
/* 面板: 白卡, 无线 */
#dt-s-chat .dt-plus-panel,#dt-s-chat .dt-sticker-panel{background:var(--card);border:none;box-shadow:var(--shadow);border-radius:22px;margin:0 14px 12px;backdrop-filter:none}
#dt-s-chat .plus-ico{background:var(--bg-2);border:none;box-shadow:none}
#dt-s-chat .sticker-item{background:var(--bg-2);border:none}
/* 菜单 / 侧拉 / 头像面板 */
.bubble-menu{background:var(--card) !important;border:none !important;box-shadow:var(--shadow-float) !important;border-radius:16px !important}
.chat-menu{background:var(--card) !important;border:none !important;box-shadow:var(--shadow-float) !important}
.drawer{background:var(--bg) !important;border:none !important}
.dw-item{background:var(--card) !important;border:none !important;border-radius:16px !important;box-shadow:var(--shadow) !important}
.dt-panel{background:var(--card) !important;border:none !important;border-radius:24px !important}
.toast{border-radius:99px !important}
/* ═══ 朋友圈 ═══ */
.v2-feed-cover{height:180px;background:var(--bg-2);background-size:cover;background-position:center;position:relative;margin:0 calc(-1 * var(--pad-page)) 36px}
.v2-feed-cover .who{position:absolute;right:var(--pad-page);bottom:-16px;display:flex;align-items:flex-end;gap:10px}
.v2-feed-cover .who .nm{font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);margin-bottom:22px}
.v2-feed-cover .who .avs{display:flex}
.v2-feed-cover .who .avs .v2-av{width:44px;height:44px;border-radius:12px;border:2px solid var(--card);box-shadow:var(--shadow-bubble);font-size:16px}
.v2-feed-cover .who .avs .v2-av+.v2-av{margin-left:-8px}
.v2-feed-cover .hint{position:absolute;left:var(--pad-page);bottom:10px;font-size:10px;color:rgba(255,255,255,.8)}
.v2-post{display:flex;gap:12px;padding:20px 0}
.v2-post+.v2-post{margin-top:12px}
.v2-post .v2-av{width:30px;height:30px;border-radius:10px}
.v2-post .pb{flex:1;min-width:0}
.v2-post .pn{font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:6px}
.v2-post .pt{font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.v2-post .pk{font-size:10px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:4px}
.v2-post .pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:10px;max-width:240px}
.v2-post .pics img{aspect-ratio:1;border-radius:8px;object-fit:cover;width:100%;background:var(--bg-2)}
.v2-post .pf{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:10.5px;color:var(--ink-3)}
.v2-post .pf .ts{margin-left:auto;font-variant-numeric:tabular-nums}
.v2-feed-day{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3);padding:24px 0 4px}
.v2-feed-day:first-child{padding-top:0}
/* ═══ 我的主页 (居所) ═══ */
.v2-prof-top{display:flex;align-items:center;gap:16px;padding:8px 4px 24px}
.v2-prof-top .nm{font-size:20px;font-weight:700;letter-spacing:-.01em}
.v2-prof-top .st{font-size:var(--fs-small);color:var(--ink-2);margin-top:4px}
.v2-now{margin-bottom:32px}
.v2-now .nh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.v2-now .mood{font-size:13.5px;line-height:1.7}
.v2-now .inner{font-size:12px;color:var(--ink-2);line-height:1.7;margin-top:10px;padding-left:10px;border-left:2px solid var(--accent-soft)}
.v2-now .axes{margin-top:16px;display:none;flex-direction:column;gap:10px}
.v2-now.open .axes{display:flex}
.v2-now .ax{display:flex;align-items:center;gap:10px;font-size:11.5px}
.v2-now .ax .n{width:52px;color:var(--ink-2)}
.v2-now .ax .bar{flex:1;height:4px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.v2-now .ax .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.v2-now .ax .v{width:32px;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
.v2-now .tog{font-size:11px;color:var(--ink-3);margin-top:12px;cursor:pointer;display:flex;justify-content:space-between}
.v2-ev{display:flex;gap:12px;padding:14px 0}
.v2-ev .t{width:40px;flex:none;font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
.v2-ev .b{flex:1;min-width:0}
.v2-ev .k{font-size:10px;color:var(--accent);font-weight:600;margin-bottom:3px}
.v2-ev .x{font-size:12.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.v2-ev .x.dream{font-style:italic;opacity:.85}
/* ═══ 本子: 一条路按天 ═══ */
.v2-pins{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;margin-bottom:24px;scrollbar-width:none}
.v2-pins::-webkit-scrollbar{display:none}
.v2-pin{flex:none;width:150px;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow);font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2-day{display:flex;gap:14px;margin-bottom:28px}
.v2-day .dl{width:64px;flex:none;padding-top:14px}
.v2-day .dl .d{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.v2-day .dl .n{font-size:10px;color:var(--ink-3);margin-top:2px}
.v2-day .dc{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.v2-day.quiet .dc{font-size:11.5px;color:var(--ink-3);padding-top:14px}
.v2-day .sec{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.v2-day .sec .k{font-size:10px;color:var(--ink-3);letter-spacing:.06em;margin-bottom:8px}
.v2-day .sec .sum{font-size:12px;line-height:1.7;white-space:pre-wrap}
.v2-day .sec .mem{font-size:12.5px;font-weight:500;line-height:1.5;padding:4px 0;cursor:pointer}
.v2-day .sec .mem.open{font-weight:600}
.v2-day .sec .memb{font-size:11.5px;line-height:1.7;color:var(--ink-2);white-space:pre-wrap;padding:6px 0 10px}
.v2-day .sec .fav{border-left:2px solid rgba(var(--accent-rgb),.35);padding-left:10px;font-size:12px;color:var(--ink-2);line-height:1.6}
.v2-day .sec .evl{font-size:11.5px;color:var(--ink-2);line-height:1.7}
.v2-seg{display:flex;gap:2px;background:var(--bg-2);border-radius:99px;padding:3px}
.v2-seg span{font-size:11px;padding:5px 12px;border-radius:99px;color:var(--ink-3);cursor:pointer}
.v2-seg span.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--shadow-bubble)}
/* ═══ 我 ═══ */
.v2-me-top{display:flex;align-items:center;gap:16px;padding:8px 4px 28px}
.v2-me-top .nm{font-size:20px;font-weight:700}
.v2-me-top .st{font-size:var(--fs-small);color:var(--ink-2);margin-top:4px}
.v2-sec{margin-top:var(--gap-block)}
.v2-sec .cap{display:block;margin:0 4px 12px}
.v2-chips{display:flex;gap:8px;flex-wrap:wrap}
.v2-chip{font-size:11.5px;padding:7px 13px;border-radius:99px;background:var(--card);color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-bubble);border:none}
.v2-chip.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.v2-chip.sw{width:22px;height:22px;padding:0;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.v2-chip.sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink)}
.v2-me .card .h{font-size:13px;font-weight:600;margin-bottom:14px}
.v2-me .card .h+.v2-chips{margin-bottom:18px}
/* ═══ 钱包 / 玩耍 ═══ */
.v2-bal{background:var(--immersive-bg-2);color:var(--text-on-dark);border-radius:var(--r-card);padding:24px 22px;box-shadow:var(--shadow);margin-bottom:24px}
.v2-bal .k{font-size:10.5px;letter-spacing:.06em;opacity:.55}
.v2-bal .v{font-size:32px;font-weight:700;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.v2-bal .v small{font-size:13px;font-weight:400;opacity:.6;margin-left:4px}
.v2-bal .r{display:flex;gap:16px;margin-top:14px;font-size:11.5px;opacity:.7}
.v2-play{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer}
.v2-play .cv{height:140px;background:var(--bg-2);background-size:cover;background-position:center;position:relative}
.v2-play .cv .hint{position:absolute;left:16px;bottom:10px;font-size:10px;color:var(--ink-3)}
.v2-play .pb{padding:16px 18px 18px}
.v2-play .pt{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:8px}
.v2-play .ps{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.6}
/* ═══ 旧页面(设置 / 记忆 / 状态 / app 通用壳)的最小对齐: 去玻璃去线, 其余不动 ═══ */
.dt-page-head{border:none !important;background:transparent !important}
.dt-glass{background:var(--card) !important;border:none !important;box-shadow:var(--shadow) !important;backdrop-filter:none !important}
.set-row,.model-item,.mem-card,.st-panel,.st-mini,.task-card,.ws-detail-head{border:none !important;box-shadow:var(--shadow) !important;backdrop-filter:none !important;background:var(--card) !important}
.dt-search{background:var(--card) !important}
/* 电脑端: 内容居中一栏, Dock 照旧在底 */
@media (min-width:820px){
.v2-body,.v2-home-top,.v2-head{max-width:560px;margin-left:auto;margin-right:auto;width:100%}
#dt-s-chat .dt-chat-head,#dt-s-chat .dt-msgs,#dt-s-chat .dt-composer{max-width:720px;margin-left:auto !important;margin-right:auto !important;width:100%}
.dt-dock{left:50% !important;right:auto !important;transform:translateX(-50%);width:420px !important}
}
/* 聊天修补 (fix_v2_css3) */
#dt-s-chat .msg{max-width:82%}
#dt-s-chat .msg .col{max-width:none}
#dt-s-chat .msg.me .bubble{background:var(--bubble);background:color-mix(in srgb,var(--ink) 9%,var(--card))}
#dt-s-chat .msg .bubble.sticker{background:none !important;box-shadow:none !important;padding:2px}
#dt-s-chat .msg .bubble img{border-radius:12px}
#dt-s-chat .msg .time{padding:0 2px}
/* 小边 (fix_v2_edge) */
body{--edge:rgba(0,0,0,.055)}
body[data-theme="深水"],body[data-tint="night"]{--edge:rgba(255,255,255,.08)}
.card,.v2-row,.v2-w,.v2-compose,.v2-play,.v2-bal,.v2-icon .ic,.v2-editbar .opt,#dt-s-chat .dt-plus-panel,#dt-s-chat .dt-sticker-panel{border:1px solid var(--edge)}
#dt-s-chat .dt-composer{border:1px solid var(--edge) !important}
#dt-s-chat .msg .bubble{border:1px solid var(--edge)}
#dt-s-chat .msg.me .bubble,#dt-s-chat .msg .bubble.sticker{border:none}
.v2-w[data-k="apps"]{border:none}
/* 主页排布 2 (fix_v2_home3) */
.v2-w[data-w="4x3"]{grid-column:span 4;grid-row:span 3}
.v2-w[data-k="couple"][data-w="4x3"] .cover{height:112px}
.v2-w[data-k="couple"][data-w="4x3"] .cb{padding:24px 16px 14px}
/* 聊天照画布 (fix_v2_chat2) */
#dt-s-chat .msg{margin-bottom:22px;max-width:84%}
#dt-s-chat .msg .col{display:grid;grid-template-columns:max-content max-content;justify-content:start;align-items:center;column-gap:8px;row-gap:8px}
#dt-s-chat .msg .col > *{grid-column:1 / -1;justify-self:start}
#dt-s-chat .msg .col::before{grid-column:auto;order:-2;margin:0;font-size:11.5px;font-weight:500;color:var(--ink-2)}
#dt-s-chat .msg .col .time{grid-column:auto;order:-1;margin:0;padding:0;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
#dt-s-chat .msg.me .col{justify-content:end}
#dt-s-chat .msg.me .col > *{justify-self:end}
#dt-s-chat .msg.me .col .time{order:-2}
#dt-s-chat .msg.me .col::before{order:-1}
#dt-s-chat .msg .col .time .tts-btn{margin-left:6px !important}
#dt-s-chat .msg:not(.me) + .msg:not(.me),#dt-s-chat .msg.me + .msg.me{margin-top:-12px}
#dt-s-chat .msg:not(.me) + .msg:not(.me) .col::before,#dt-s-chat .msg.me + .msg.me .col::before,
#dt-s-chat .msg:not(.me) + .msg:not(.me) .col .time,#dt-s-chat .msg.me + .msg.me .col .time{display:none}
#dt-s-chat .msg:not(.me) + .msg:not(.me) .mini,#dt-s-chat .msg.me + .msg.me .mini{visibility:hidden}
#dt-s-chat .msg .mini{width:22px;height:22px}
#dt-s-chat .msg .bubble{padding:9px 13px;font-size:12.5px;line-height:1.75}
/* 动态 / 我的主页: 条目之间一道淡线 */
.v2-post + .v2-post,.v2-ev + .v2-ev{border-top:1px solid var(--edge)}
.v2-post{padding:22px 0}
.v2-ev{padding:18px 0}
.v2-feed-day{margin-top:8px}
/* 聊天名字行改回 flex (fix_v2_chat3) */
#dt-s-chat .msg{max-width:84%;min-width:0}
#dt-s-chat .msg .col{display:flex;flex-direction:column;gap:0;align-items:flex-start;min-width:0;max-width:100%;flex:0 1 auto}
#dt-s-chat .msg .col > *{margin-top:8px;max-width:100%;box-sizing:border-box}
#dt-s-chat .msg .col::before{order:-2;height:16px;line-height:16px;margin:0;white-space:nowrap}
#dt-s-chat .msg .col .time{order:-1;height:16px;line-height:16px;margin:-16px 0 0 34px;padding:0;white-space:nowrap}
#dt-s-chat .msg.me .col{align-items:flex-end}
#dt-s-chat .msg.me .col .time{margin:-16px 34px 0 0}
#dt-s-chat .msg .bubble{max-width:100%;overflow-wrap:anywhere}
/* ═══ 旧页面换皮 (fix_v2_pages) ═══ */
/* 页壳: 返回 + 标题一行, 图标和副标题不要 */
#dt-s-page{display:none;flex-direction:column;height:100%;min-height:0;background:var(--bg)}
#dt-s-page.on{display:flex}
#dt-s-page .dt-page-head{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 20px) var(--pad-page) 12px;box-shadow:none !important}
#dt-s-page .dt-back{width:36px;height:36px;margin-left:-8px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;flex:none}
#dt-s-page .dt-back svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dt-s-page .dt-page-title{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
#dt-s-page .dt-page-title .dt-page-sub{display:none}
#dt-s-page .dt-page-body{flex:1;min-height:0;overflow-y:auto;padding:8px var(--pad-page) calc(env(safe-area-inset-bottom) + 40px);background:transparent;border:none;box-shadow:none;margin:0;border-radius:0;max-width:none;display:block}
#dt-s-page .dt-page-body::-webkit-scrollbar{width:0}
#dt-s-page .dt-page-body .big-icon,#dt-s-page .dt-page-body .t1,#dt-s-page .dt-page-body .t2{display:none}
#dt-s-page .dt-page-body.real #dtPageReal{display:block;background:transparent;border:none;box-shadow:none;padding:0;margin:0}
#dtPageReal{font-size:var(--fs-body);color:var(--ink);line-height:1.5}
#dtPageReal button{font-family:inherit;cursor:pointer}
#dtPageReal details>summary{list-style:none}
#dtPageReal details>summary::-webkit-details-marker{display:none}
/* 通用: 白卡 / 小标 / 空态 */
#dtPageReal .ph-empty,#dtPageReal .sh-empty,#dtPageReal .cafe-empty,#dtPageReal .cal-empty{text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.8;padding:40px 16px;opacity:1}
#dtPageReal .wa-h,#dtPageReal .sh-sec,#dtPageReal .cal-sec-h{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3);text-transform:none;margin:32px 4px 12px;opacity:1;display:block}
#dtPageReal .sh-sec::after{display:none}
/* ── 流水 (wallet) ── */
#dtPageReal .wa-c{background:var(--card);color:var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow);border:1px solid var(--edge);padding:24px var(--pad-card);margin-bottom:12px}
#dtPageReal .wa-c span{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3);opacity:1;margin-bottom:10px}
#dtPageReal .wa-c b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
#dtPageReal .wa-c u{font-size:11.5px;color:var(--ink-2);opacity:1;margin-top:12px}
#dtPageReal .wa-l{padding:14px 4px;border-bottom:1px solid var(--edge);font-size:12.5px;align-items:center;gap:12px}
#dtPageReal .wa-l:last-child{border-bottom:0}
#dtPageReal .wa-l s{flex:0 0 40px;color:var(--ink-3);opacity:1;font-size:11px;font-variant-numeric:tabular-nums}
#dtPageReal .wa-l e{color:var(--ink)}
#dtPageReal .wa-l b{color:var(--ink);font-weight:600}
/* ── 任务 (phos) ── */
#dtPageReal .ph-hero{background:var(--card);color:var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow);border:1px solid var(--edge);padding:24px var(--pad-card);margin-bottom:24px}
#dtPageReal .ph-hn{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
#dtPageReal .ph-hn i{font-size:12px;color:var(--ink-2);opacity:1;font-weight:500;margin-left:8px}
#dtPageReal .ph-hs{font-size:11.5px;color:var(--ink-2);opacity:1;margin-top:10px;line-height:1.6}
#dtPageReal .ph-week{gap:6px;margin-top:20px}
#dtPageReal .ph-w{height:34px;border-radius:10px;background:var(--bg-2);color:var(--ink-3);font-size:10.5px;font-variant-numeric:tabular-nums}
#dtPageReal .ph-w.on{background:var(--accent);color:#fff;font-weight:600}
#dtPageReal .ph-w.now{outline:1.5px solid var(--accent);outline-offset:-1.5px;opacity:1}
#dtPageReal .ph-i{background:var(--card);border:1px solid var(--edge);border-left:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
#dtPageReal .ph-i.t-daily,#dtPageReal .ph-i.t-challenge,#dtPageReal .ph-i.t-surprise{border-left-color:var(--edge)}
#dtPageReal .ph-row{padding:16px var(--pad-card);gap:10px}
#dtPageReal .ph-ti{font-size:13.5px;line-height:1.5;color:var(--ink)}
#dtPageReal .ph-ti u{border:none;background:var(--accent-soft);color:var(--accent);opacity:1;font-size:10px;padding:2px 8px;border-radius:99px;margin-right:8px;font-weight:500}
#dtPageReal .ph-ti i{background:var(--accent);color:#fff;opacity:1;font-size:10px;padding:2px 7px;border-radius:99px;margin-right:6px}
#dtPageReal .ph-p{font-size:12px;color:var(--accent);opacity:1;font-weight:600}
#dtPageReal .ph-b{padding:0 var(--pad-card) var(--pad-card)}
#dtPageReal .ph-n{font-size:12px;color:var(--ink-2);opacity:1;line-height:1.7;margin-bottom:10px}
#dtPageReal .ph-in{background:var(--bg-2);border:none;border-radius:14px;padding:12px 14px;font-size:13px;color:var(--ink);min-height:64px;outline:none}
#dtPageReal .ph-in::placeholder{color:var(--ink-3)}
#dtPageReal .ph-go{margin-top:12px;padding:10px 24px;border-radius:99px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;opacity:1;box-shadow:0 4px 12px rgba(var(--accent-rgb),.25)}
#dtPageReal .ph-done{opacity:.5}
/* ── 商城 (shop) ── */
#dtPageReal .sh-hero{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px var(--pad-card);margin-bottom:8px}
#dtPageReal .sh-coin img{width:28px;height:28px;filter:none}
#dtPageReal .sh-coin b{font-size:34px;font-weight:700;letter-spacing:-.03em}
#dtPageReal .sh-stk{background:var(--accent-soft);color:var(--accent);opacity:1;font-size:12px;padding:5px 12px}
#dtPageReal .sh-stk b{font-size:14px;font-weight:600}
#dtPageReal .sh-card{background:var(--card);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow);padding:4px var(--pad-card);margin-bottom:12px}
#dtPageReal .sh-row{padding:14px 0;border-bottom:1px solid var(--edge);gap:12px}
#dtPageReal .sh-row:last-child{border-bottom:0}
#dtPageReal .sh-tag{font-size:11px;color:var(--ink-3);opacity:1;letter-spacing:0;min-width:2.5em}
#dtPageReal .sh-main{font-size:13px;color:var(--ink)}
#dtPageReal .sh-main small{color:var(--ink-2);opacity:1;font-size:11px}
#dtPageReal .sh-btn{border:1px solid var(--edge);background:var(--bg-2);color:var(--ink);font-size:12px;padding:7px 14px;border-radius:99px;font-weight:500}
#dtPageReal .sh-btn.fill{background:var(--accent);color:#fff;border-color:transparent}
#dtPageReal .sh-price{color:var(--ink-3);opacity:1}
#dtPageReal .sh-opt{background:var(--bg-2);border:1px solid transparent;color:var(--ink);font-size:12px;padding:6px 12px}
#dtPageReal .sh-opt.on{background:var(--accent-soft);color:var(--accent)}
#dtPageReal .sh-custom input{background:var(--bg-2);border:none;border-radius:14px;padding:9px 12px;color:var(--ink);outline:none;font:inherit}
#dtPageReal .sh-sets{gap:12px}
#dtPageReal .sh-set{background:var(--card);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow);padding:var(--pad-card)}
#dtPageReal .sh-set b{font-size:13.5px;margin-bottom:8px}
#dtPageReal .sh-set small{color:var(--ink-2);opacity:1;line-height:1.7;margin-bottom:12px}
#dtPageReal .sh-hist{border-bottom:1px solid var(--edge);color:var(--ink);opacity:1;padding:12px 0}
#dtPageReal .sh-hist i{color:var(--ink-3);opacity:1}
/* ── 打工 (cafe) ── */
#dtPageReal .cafe-hero{border-radius:var(--r-card);margin-bottom:16px;box-shadow:var(--shadow)}
#dtPageReal .cafe-hero-in{padding:14px 18px}
#dtPageReal .cafe-when{font-size:14px}
#dtPageReal .cafe-fold{margin-bottom:16px}
#dtPageReal .cafe-fold summary{background:var(--card);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);padding:16px var(--pad-card);font-size:13px;color:var(--ink)}
#dtPageReal .cafe-fold summary::after{color:var(--ink-3);opacity:1}
#dtPageReal .cafe-fold[open] summary{margin-bottom:12px}
#dtPageReal .cafe-sum b{font-size:15px;font-weight:600}
#dtPageReal .cafe-nums{gap:8px;margin-bottom:12px}
#dtPageReal .cafe-n{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:12px 14px}
#dtPageReal .cafe-n b{font-size:20px;font-weight:700;letter-spacing:-.02em}
#dtPageReal .cafe-n span{font-size:10.5px;color:var(--ink-2);opacity:1}
#dtPageReal .cafe-bar{background:var(--bg-2);height:4px;margin:4px 2px 16px}
#dtPageReal .cafe-bar i{background:var(--accent);opacity:1}
#dtPageReal .cafe-o{border-bottom:1px solid var(--edge)}
#dtPageReal .cafe-o:last-child{border-bottom:0}
#dtPageReal .cafe-o-s{padding:12px 4px;gap:10px}
#dtPageReal .cafe-o-t{color:var(--ink-3);opacity:1;flex-basis:40px}
#dtPageReal .cafe-o-x{font-size:12.5px;color:var(--ink)}
#dtPageReal .cafe-o-r{color:var(--ink-2);opacity:1}
#dtPageReal .cafe-o-d{padding:0 4px 12px 50px;color:var(--ink-2);opacity:1;font-size:11.5px}
#dtPageReal .cafe-open{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.25);height:48px;border-radius:99px}
#dtPageReal .cafe-note{color:var(--ink-3);opacity:1}
/* ── 日历 (calendar) ── */
#dtPageReal .cal-cycle{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--pad-card);margin-bottom:24px}
#dtPageReal .cal-cycle-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
#dtPageReal .cal-cycle-k{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px}
#dtPageReal .cal-cycle-v,#dtPageReal .cal-cycle .big{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
#dtPageReal .cal-cycle .sm{font-size:11.5px;color:var(--ink-2);margin-top:4px}
#dtPageReal .cal-cycle-r{text-align:right}
#dtPageReal .cal-phases{display:flex;gap:6px;margin-top:20px}
#dtPageReal .cal-phases span{flex:1;text-align:center;font-size:11px;padding:7px 0;border-radius:99px;background:var(--bg-2);color:var(--ink-3)}
#dtPageReal .cal-phases span.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
#dtPageReal .cal-basis{font-size:11px;color:var(--ink-3);margin-top:14px;line-height:1.6}
#dtPageReal .cal-head{display:flex;align-items:center;gap:6px;margin:0 4px 12px}
#dtPageReal .cal-head .ym{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
#dtPageReal .cal-head button{border:none;background:var(--bg-2);color:var(--ink);width:32px;height:32px;border-radius:99px;font-size:16px;display:flex;align-items:center;justify-content:center;padding:0}
#dtPageReal .cal-head .today-btn{width:auto;padding:0 12px;font-size:11.5px;font-weight:500}
#dtPageReal .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px 0;background:var(--card);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow);padding:14px 8px 12px}
#dtPageReal .cal-wk{text-align:center;font-size:10px;color:var(--ink-3);padding-bottom:8px}
#dtPageReal .cal-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;height:42px;cursor:pointer;position:relative}
#dtPageReal .cal-num{width:32px;height:32px;border-radius:99px;font-size:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
#dtPageReal .cal-cell.period .cal-num{background:#F2B8C0;color:#fff}
#dtPageReal .cal-cell.guess .cal-num{background:rgba(242,184,192,.28);color:var(--ink)}
#dtPageReal .cal-cell.today .cal-num{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:600}
#dtPageReal .cal-cell.sel .cal-num{background:var(--accent);color:#fff;box-shadow:none;font-weight:600}
#dtPageReal .cal-dot{width:4px;height:4px;background:var(--accent);opacity:.8;position:absolute;bottom:2px}
#dtPageReal .cal-legend{border-top:none;margin-top:12px;padding-top:0;gap:14px}
#dtPageReal .cal-legend i{color:var(--ink-3);font-size:10px}
#dtPageReal .lg-real{background:#F2B8C0}
#dtPageReal .lg-guess{background:rgba(242,184,192,.28)}
#dtPageReal .lg-today{box-shadow:inset 0 0 0 1.2px var(--accent)}
#dtPageReal .lg-rec{background:var(--accent);opacity:.8}
#dtPageReal .cal-day{margin-top:32px}
#dtPageReal .cal-day-h{margin:0 4px 12px}
#dtPageReal .cal-day-h .d{font-size:15px;font-weight:600;color:var(--ink)}
#dtPageReal .cal-day-h .sub{color:var(--ink-2)}
#dtPageReal .cal-day-h .add{color:var(--accent);font-weight:500}
#dtPageReal .cal-ev,#dtPageReal .cal-soon{background:var(--card);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);padding:16px var(--pad-card);margin-bottom:12px}
#dtPageReal .cal-ev .tp{color:var(--ink-3)}
#dtPageReal .cal-ev .ti,#dtPageReal .cal-soon .ti{font-size:13px;color:var(--ink)}
#dtPageReal .cal-ev .nt,#dtPageReal .cal-soon .nt,#dtPageReal .cal-ev .by{color:var(--ink-2)}
#dtPageReal .cal-ev .x{color:var(--ink-3);opacity:1}
#dtPageReal .cal-form{border-top:none;margin-top:8px;padding:var(--pad-card);background:var(--card);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow)}
#dtPageReal .cal-types button{background:var(--bg-2);color:var(--ink-2)}
#dtPageReal .cal-types button.on{background:var(--accent);color:#fff}
#dtPageReal .cal-form input,#dtPageReal .cal-form select{background:var(--bg-2);color:var(--ink);border-radius:14px;padding:11px 14px;font-size:13px}
#dtPageReal .cal-form input::placeholder{color:var(--ink-3)}
#dtPageReal .cal-form input:focus,#dtPageReal .cal-form select:focus{outline:none}
#dtPageReal .cal-save{background:var(--accent);color:#fff;border-radius:99px}
#dtPageReal .cal-cancel{background:var(--bg-2);color:var(--ink-2);border-radius:99px}
#dtPageReal .cal-sec{margin-top:32px}
#dtPageReal .cal-soon .d{color:var(--accent)}
/* 小槐这边时间归位 (fix_v2_chat4) */
#dt-s-chat .msg.me .col::before{order:-2}
#dt-s-chat .msg.me .col .time{order:-1;margin:-16px 34px 0 0}
/* 录音取消键平时藏起来 (fix_v2_vrx) */
#dt-s-chat .dt-composer:not(.rec) #dtVrCancel,#dt-s-chat .dt-composer:not(.rec) #dtVrWave,#dt-s-chat .dt-composer:not(.rec) #dtVrTime{display:none !important}
#dt-s-chat .dt-composer:not(.asr) #dtAsrRun{display:none !important}
/* ═══ r2 (fix_v2_r2) ═══ */
/* 思考链 */
#dt-s-chat .think-line{opacity:1 !important;color:var(--ink-2) !important;border-left:2px solid var(--edge) !important;margin:2px 0 16px 30px !important;padding-left:10px !important;font-size:11.5px !important;line-height:1.7}
#dt-s-chat .think-line summary{color:var(--ink-2)}
#dt-s-chat .think-line > div{opacity:1 !important;color:var(--ink-2)}
/* 模型药丸 */
#dt-s-chat .dt-composer::after{display:none !important}
#dt-s-chat .dt-composer .v2-model{order:5;font-size:11px;color:var(--accent);background:var(--accent-soft);border:none;border-radius:99px;padding:5px 10px;margin-left:2px;cursor:pointer;font-family:inherit;line-height:1.2}
/* 主页 */
.v2-home-top{display:none}
.v2-grid{padding-top:calc(env(safe-area-inset-top) + 16px);padding-bottom:120px}
.v2-w[data-k="zhua"]{grid-row:span 1}
.v2-w.zhua .say{-webkit-line-clamp:2}
.v2-w.zhua .ev{margin-top:8px}
.v2-w.zhua .ev div:nth-child(n+2){display:none}
/* 动态: 收起的输入框 + 右上角加号 */
#v2FeedBody{position:relative}
.v2-compose{display:none}
.v2-compose.open{display:block}
.v2-plus{position:absolute;right:16px;top:calc(env(safe-area-inset-top) + 14px);width:36px;height:36px;border-radius:99px;border:none;background:rgba(255,255,255,.88);color:var(--ink);font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2;padding:0 0 2px}
body[data-theme="深水"] .v2-plus,body[data-tint="night"] .v2-plus{background:rgba(40,40,46,.85);color:#fff}
/* 我: 外观折叠 */
.v2-sec.fold > .cap{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:18px 20px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);border:1px solid var(--edge);color:var(--ink);font-size:var(--fs-body);letter-spacing:0;font-weight:500;margin:0;text-transform:none}
.v2-sec.fold > .cap i{font-style:normal;color:var(--ink-3);font-size:16px;transition:transform .2s}
.v2-sec.fold.open > .cap i{transform:rotate(90deg)}
.v2-sec.fold > .card{display:none;margin-top:12px}
.v2-sec.fold.open > .card{display:block}
/* ═══ r3 (fix_v2_r3) ═══ */
/* 我: 一列到底 */
.v2-me .v2-sec{margin-top:12px}
.v2-me .v2-sec.plain > .cap{display:none}
.v2-sec.fold > .cap{padding:18px 20px;justify-content:flex-start;gap:14px}
.v2-sec.fold > .cap i{display:none}
.v2-sec.fold > .cap .chev{transition:transform .2s}
.v2-sec.fold.open > .cap .chev{transform:rotate(90deg)}
/* 旧页壳 (设置 / 星图 / 状态): 跟 #dt-s-page 一个样 */
#dt-s-settings,#dt-s-memory,#dt-s-state{display:none;flex-direction:column;height:100%;min-height:0;background:var(--bg);padding:0;border:none;box-shadow:none}
#dt-s-settings.on,#dt-s-memory.on,#dt-s-state.on{display:flex}
#dt-s-settings .dt-page-head,#dt-s-memory .dt-page-head,#dt-s-state .dt-page-head{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 20px) var(--pad-page) 12px;box-shadow:none !important;margin:0}
#dt-s-settings .dt-back,#dt-s-memory .dt-back,#dt-s-state .dt-back{width:36px;height:36px;margin-left:-8px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;flex:none}
#dt-s-settings .dt-back svg,#dt-s-memory .dt-back svg,#dt-s-state .dt-back svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dt-s-settings .dt-page-title,#dt-s-memory .dt-page-title,#dt-s-state .dt-page-title{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
#dt-s-memory .dt-page-title .dt-page-sub{display:inline;font-size:11px;color:var(--ink-3);font-weight:400;margin-left:8px;letter-spacing:0}
#dt-s-settings .dt-page-sub,#dt-s-state .dt-page-sub{display:none}
/* 设置 */
#dt-s-settings .dt-subnav{margin:4px var(--pad-page) 20px;background:var(--bg-2);padding:4px;border-radius:99px;gap:2px}
#dt-s-settings .dt-subnav button{font-size:12.5px;color:var(--ink-2);padding:8px 0;border-radius:99px;font-weight:500}
#dt-s-settings .dt-subnav button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
#dt-s-settings .dt-set-body{padding:0 var(--pad-page) calc(env(safe-area-inset-bottom) + 40px)}
#dt-s-settings .dt-set-body::-webkit-scrollbar{width:0}
#dt-s-settings .set-group{margin-bottom:32px}
#dt-s-settings .set-group h2{font-size:var(--fs-cap);letter-spacing:.06em;color:var(--ink-3);margin:0 4px 12px;font-weight:400}
#dt-s-settings .set-row{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:16px var(--pad-card);margin-bottom:12px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow)}
#dt-s-settings .set-row .l1{font-size:13.5px;color:var(--ink);line-height:1.5}
#dt-s-settings .set-row .l2{font-size:11.5px;color:var(--ink-2);line-height:1.65;margin-top:4px}
#dt-s-settings .set-row .l2 b{color:var(--ink);font-weight:600}
#dt-s-settings .chips-row{gap:14px;padding:2px}
#dt-s-settings .chip-wrap{opacity:.6}
#dt-s-settings .chip-wrap.active{opacity:1}
#dt-s-settings .chip{border:2px solid var(--card);box-shadow:var(--shadow)}
#dt-s-settings .chip-wrap .lbl{color:var(--ink-2);font-size:10.5px}
#dt-s-settings .set-input{background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:14px var(--pad-card);margin-bottom:12px;box-shadow:var(--shadow)}
#dt-s-settings .set-input .al{color:var(--ink-3);letter-spacing:.06em}
#dt-s-settings .set-input input{color:var(--ink);font-size:13px}
#dt-s-settings .btn{border-radius:99px;padding:12px;font-weight:600}
#dt-s-settings .btn.ghost{background:var(--bg-2);border:none;color:var(--ink);box-shadow:none}
#dt-s-settings .btn-mini{background:var(--bg-2);border:none;color:var(--ink);border-radius:99px;padding:8px 16px}
#dt-s-settings .btn-mini.danger{background:rgba(255,80,80,.1);color:#D94848}
#dt-s-settings .model-item{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:14px var(--pad-card);margin-bottom:12px;box-shadow:var(--shadow)}
#dt-s-settings .model-item.active{border-color:var(--edge);background:var(--accent-soft)}
#dt-s-settings .model-item .min{color:var(--ink);font-size:13px}
#dt-s-settings .model-item .min .star{background:var(--accent);color:#fff;font-size:9.5px}
#dt-s-settings .model-item .mid{color:var(--ink-2);font-size:11px;margin-top:4px}
#dt-s-settings .model-item .radio{border-color:var(--ink-3)}
#dt-s-settings .toggle{background:var(--bg-2)}
#dt-s-settings .toggle.on{background:var(--accent)}
#dt-s-settings input[type=range]{background:var(--bg-2)}
/* 星图 */
#dt-s-memory .dt-search{margin:4px var(--pad-page) 12px;background:var(--card);border:1px solid var(--edge);border-radius:99px;padding:10px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px}
#dt-s-memory .dt-search svg{stroke:var(--ink-3)}
#dt-s-memory .dt-search input{color:var(--ink);font-size:13px}
#dt-s-memory .dt-search input::placeholder{color:var(--ink-3);opacity:1}
#dt-s-memory .mem-cats{padding:0 var(--pad-page) 16px;gap:8px}
#dt-s-memory .mem-cat-chip{background:var(--bg-2);border:none;color:var(--ink-2);font-size:11.5px;padding:6px 12px}
#dt-s-memory .mem-cat-chip.on{background:var(--accent);color:#fff}
#dt-s-memory .mem-cat-chip .n{opacity:.7}
#dt-s-memory .dt-list{padding:0 var(--pad-page) calc(env(safe-area-inset-bottom) + 40px);gap:12px}
#dt-s-memory .dt-list::-webkit-scrollbar{width:0}
#dt-s-memory .mem-card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);padding:4px var(--pad-card);box-shadow:var(--shadow)}
#dt-s-memory .mem-section-title{color:var(--ink);padding:16px 0 4px;font-size:12.5px}
#dt-s-memory .mem-section-title span:last-child{color:var(--ink-3)}
#dt-s-memory .mem-item{padding:16px 0;border-bottom:1px solid var(--edge)}
#dt-s-memory .mem-item:last-child{border-bottom:none}
#dt-s-memory .mi-title{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.5}
#dt-s-memory .mi-content{color:var(--ink-2);font-size:12.5px;line-height:1.75}
#dt-s-memory .mi-id,#dt-s-memory .mi-time{color:var(--ink-3);opacity:1}
#dt-s-memory .mi-cat{font-size:10px;padding:2px 8px}
#dt-s-memory .mi-tag{color:var(--accent)}
#dt-s-memory .mi-linkbox{border-top:1px solid var(--edge);color:var(--ink-2)}
#dt-s-memory .mi-linkbox a{color:var(--ink);border-bottom-color:var(--ink-3)}
#dt-s-memory .dt-empty{color:var(--ink-3)}
#dt-s-memory .mem-card.tl .mem-item::after{background:var(--edge)}
/* 状态页 (还挂着, 顺手) */
#dt-s-state .st-body{padding:0 var(--pad-page) calc(env(safe-area-inset-bottom) + 40px);overflow-y:auto}
/* ═══ r4 (fix_v2_r4) ═══ */
#dt-s-settings .dt-subnav button[data-tab="theme"],#dt-s-settings .dt-subnav button[data-tab="model"]{display:none}
body.v2-modelmode #dt-s-settings .dt-subnav{display:none}
#dt-s-settings .set-row .rl .l1 + .l2,#dt-s-settings .model-item .mid{display:none}
#dt-s-settings .set-row .rl > .l2:only-child{color:var(--ink-2);font-size:12.5px}
#dt-s-memory .mb-bar{background:var(--bg-2);padding:4px;border-radius:99px;gap:2px;margin-bottom:16px}
#dt-s-memory .mb-t{background:transparent;border:none;color:var(--ink-2);font-size:12.5px;font-weight:500}
#dt-s-memory .mb-t.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
#dt-s-memory .mb-t[data-mb="board"],#dt-s-memory .mb-t[data-mb="flow"]{display:none}
/* ═══ r5 (fix_v2_r5) ═══ */
#dt-s-settings .dt-page-title,#dt-s-memory .dt-page-title,#dt-s-state .dt-page-title,#dt-s-page .dt-page-title{flex:1;text-align:left}
#dt-s-settings .set-row.v2-textrow .rl .l1 + .l2{display:block;color:var(--ink-2);font-size:12px;line-height:1.65;margin-top:6px}
#dt-s-settings .set-row.v2-textrow .rl .l1{color:var(--ink-3);font-size:var(--fs-cap);letter-spacing:.06em}
/* SEG:WAKESW v1 —— 醒来自己选 / 去 AISay 两行的小字要露出来 (上面 r4 把开关行的 .l2 藏了) */
#dt-s-settings .set-row.w3-play-sub .rl .l1 + .l2{display:block;color:var(--ink-2);font-size:12px;line-height:1.6;margin-top:4px}
#dt-s-settings select{appearance:none;-webkit-appearance:none;border:none;background:var(--bg-2);border-radius:99px;padding:7px 30px 7px 14px;font:inherit;font-size:12.5px;color:var(--ink);max-width:62%;outline:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-size:14px;background-position:right 10px center;text-overflow:ellipsis}
#dt-s-settings input[type=number],#dt-s-settings .set-row > input[type=text]{border:none;background:var(--bg-2);border-radius:10px;padding:7px 10px;width:84px;text-align:right;font:inherit;font-size:13px;color:var(--ink);outline:none;-moz-appearance:textfield}
#dt-s-settings input[type=number]::-webkit-inner-spin-button,#dt-s-settings input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#dt-s-settings .set-row .rl .l1{font-size:13.5px}
#dt-s-settings .set-group h2{margin-bottom:12px}
/* ═══ r7 (fix_v2_r7) ═══ */
body.v2-sealmode #dtPageReal .inn-bar{display:none}
#dtPageReal .inn-empty{text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.8;padding:40px 16px}
.v2-ev .x.hb-done{color:var(--ink-2)}
/* ═══ r10 (fix_v2_r10) 模型菜单 ═══ */
.v2-modelpop{position:fixed;z-index:60;min-width:210px;max-width:min(320px,calc(100vw - 24px));background:var(--card);border:1px solid var(--edge);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:8px;font-size:13px}
.v2-modelpop .it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer}
.v2-modelpop .it:hover,.v2-modelpop .it:active{background:var(--bg-2)}
.v2-modelpop .it .n{flex:1;color:var(--ink);font-weight:500;white-space:nowrap}
.v2-modelpop .it .d{font-size:10.5px;color:var(--ink-3);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-modelpop .it .ck{color:var(--accent);opacity:0;width:14px;text-align:right;font-weight:700}
.v2-modelpop .it.on .ck{opacity:1}
.v2-modelpop .more{display:flex;justify-content:space-between;padding:10px 12px;margin-top:4px;border-top:1px solid var(--edge);color:var(--ink-2);cursor:pointer}
.v2-modelpop .more span{color:var(--ink-3)}
/* ═══ r11 (fix_v2_r11) 两级模型菜单 ═══ */
.v2-modelpop{min-width:250px}
.v2-modelpop .chs{display:flex;gap:2px;background:var(--bg-2);border-radius:99px;padding:3px;margin:2px 2px 8px}
.v2-modelpop .chs button{flex:1;border:none;background:transparent;border-radius:99px;padding:7px 0;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;position:relative}
.v2-modelpop .chs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.v2-modelpop .chs button.cur::after{content:"";position:absolute;right:9px;top:8px;width:5px;height:5px;border-radius:99px;background:var(--accent)}
.v2-modelpop .it.dim{color:var(--ink-3);cursor:default}
/* ═══ r13 (fix_v2_r13) ═══ */
#dt-s-page .dt-page-body.rd{display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom);overflow:hidden;gap:0}
#dt-s-page .dt-page-body.rd #dtPageReal{flex:1;min-height:0;width:100%;display:block}
#dt-s-page .dt-page-body.rd #dtReadFrame{display:block;width:100%;height:100%;border:0;border-radius:0}
.v2-grid.editing .v2-w{touch-action:none;user-select:none;-webkit-user-select:none}
.v2-w.dragging{opacity:.75;transform:scale(1.03);z-index:5;box-shadow:0 12px 32px rgba(0,0,0,.12);animation:none}
.v2-daysep{text-align:center;font-size:10.5px;color:var(--ink-3);margin:6px 0 22px;letter-spacing:.04em}
/* ═══ r15 (fix_v2_r15) app 卡 + 时间轨 ═══ */
.v2-app{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px;cursor:pointer}
.v2-app .ah{display:flex;align-items:center;gap:14px}
.v2-app .ic{width:60px;height:60px;border-radius:18px;background:var(--bg-2);flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:22px;font-weight:300}
.v2-app .ic:empty::before{content:"+"}
.v2-app .ic img{width:100%;height:100%;object-fit:cover;display:block}
.v2-app .ab{flex:1;min-width:0}
.v2-app .t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.v2-app .s{font-size:11.5px;color:var(--ink-2);margin-top:4px}
.v2-app .ai{margin-top:14px;background:var(--bg-2);border-radius:16px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink)}
.v2-app .ai .chev{width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v2-app.dark{background:#1C1C1E;color:#fff;border-color:transparent}
.v2-app.dark .t{color:#fff}
.v2-app.dark .s{color:rgba(255,255,255,.6)}
.v2-app.dark .ic{background:#fff;color:#B8B8BD}
.v2-app.dark .ai{background:#fff;color:#1C1C1E}
.v2-app.dark .ai .chev{stroke:#1C1C1E}
body[data-theme="深水"] .v2-app.dark,body[data-tint="night"] .v2-app.dark{background:#2A2A2E}
/* 时间轨: 左边日期条 + 竖线, 右边随便放卡 */
.v2-rail{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:20px;align-items:start}
.v2-rail .rd{text-align:center;background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:8px 0;font-size:10.5px;color:var(--ink-2);position:relative;box-shadow:var(--shadow)}
.v2-rail .rd b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:2px}
.v2-rail .rd::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:20px;background:var(--edge)}
.v2-rail > :nth-last-child(2).rd::after{display:none}
.v2-rail .rc{display:flex;flex-direction:column;gap:12px}
/* 主页入口: 编辑态图标可点 */
.v2-grid.editing .v2-icon .ic{outline:1.5px dashed var(--ink-3);outline-offset:2px}
/* r15b */
.v2-app .ah .chev{width:16px;height:16px;flex:none;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ═══ r16 (fix_v2_r16) 聊天背景全屏 ═══ */
#dt-s-chat.haswall{background:var(--chatwall) center/cover no-repeat fixed !important}
#dt-s-chat.haswall #dtMsgs{background:none !important}
#dt-s-chat.haswall .dt-chat-head{background:rgba(var(--card-rgb,255,255,255),.55) !important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
#dt-s-chat.haswall .msg.me .bubble{background:rgba(var(--card-rgb,255,255,255),.72) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#dt-s-chat.haswall .msg .col::before,#dt-s-chat.haswall .msg .col .time{text-shadow:0 1px 6px rgba(var(--card-rgb,255,255,255),.6)}
/* ═══ r18 (fix_v2_r18) ═══ */
body.haswall[data-route="chat"]{background-image:var(--chatwall) !important;background-size:cover !important;background-position:center !important;background-attachment:fixed !important;background-repeat:no-repeat !important}
#dt-s-chat.haswall{background:transparent !important}
.v2-w.pinned{overflow:visible}
.v2-w.pinned .pin{-webkit-line-clamp:3}
/* ═══ r20 (fix_v2_r20) ═══ */
.v2-w.pinned .pin{-webkit-line-clamp:6}
#v2EditOpts{display:none}
.v2-editbar.adding #v2EditOpts{display:block;max-height:50vh;overflow-y:auto}
.v2-editbar .eh{margin-bottom:0}
.v2-editbar.adding .eh{margin-bottom:16px}
.v2-editbar .eh .v2-chip{margin-left:auto;margin-right:8px}
.v2-now .axes{display:block !important;max-height:none !important;opacity:1 !important;margin-top:16px}
.v2-now .tog{cursor:pointer}
/* ═══ r22 (fix_v2_r22) 主页不滚 ═══ */
body[data-route="home"]{overflow:hidden}
#dt-s-home.on{overflow:hidden !important;height:100%}
#dt-s-home .v2-grid{box-sizing:border-box;height:calc(100vh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));grid-auto-rows:minmax(0,1fr);padding-bottom:0;overflow:hidden;align-content:stretch}
#dt-s-home .v2-grid.editing{height:auto;overflow:visible;grid-auto-rows:minmax(72px,auto);padding-bottom:120px}
.v2-w.pinned{overflow:hidden}
.v2-w[data-k="couple"][data-w="4x3"] .cover{height:38%;min-height:72px}
.v2-w[data-k="couple"][data-w="4x3"] .cb{padding:22px 16px 12px}
/* ═══ r23 (fix_v2_r23) 评论常驻 ═══ */
.v2-post .cmin{display:flex !important;margin-top:10px}
.v2-post .cmin input{padding:8px 14px;font-size:12.5px}
.v2-post .pf button{padding:8px 10px 8px 0;margin:-8px 0;min-width:36px;min-height:36px;cursor:pointer}
.v2-post .pf svg{width:16px;height:16px}
/* ═══ r28 (fix_v2_r28): 思考链 + 工具调用 合一面板, 靠左 ═══ */
#dt-s-chat .think-line.trace{margin:2px 0 14px 30px !important;padding-left:10px !important;max-width:calc(100% - 44px);opacity:1 !important}
#dt-s-chat .think-line.trace summary{list-style:none;color:var(--ink-3);font-size:11px}
#dt-s-chat .think-line.trace summary::-webkit-details-marker{display:none}
#dt-s-chat .think-line.trace[open] summary{color:var(--ink-2)}
#dt-s-chat .think-line.trace .tr-body{display:flex;flex-direction:column;gap:6px;margin-top:6px}
#dt-s-chat .think-line.trace .tr-think{white-space:pre-wrap;word-break:break-word;color:var(--ink-2);font-size:11.5px;line-height:1.7;max-height:220px;overflow-y:auto}
#dt-s-chat .think-line.trace .tr-tool{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:11px;color:var(--ink-2);padding:2px 0} /* r30: 灰底去掉 */
#dt-s-chat .think-line.trace .tr-tool .tr-name{color:var(--ink)}
#dt-s-chat .think-line.trace .tr-tool .tr-raw{color:var(--ink-3);font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#dt-s-chat .think-line.trace .tr-tool .tr-k{color:var(--ink-3);font-size:10px}
#dt-s-chat .think-line.trace .tr-tool .tr-k:empty{display:none}
#dt-s-chat .think-line.trace .tr-tool .tr-arg{color:var(--ink-3);word-break:break-all}
#dt-s-chat .think-line.trace .tr-tool .tr-ok{margin-left:auto;color:var(--ink-3);font-size:10px}
#dt-s-chat .think-line.trace .tr-tool .tr-ok:empty{display:none}
#dt-s-chat .think-line.trace .tr-tool .tr-ok.good{color:var(--accent)}
#dt-s-chat .think-line.trace .tr-tool .tr-ok.bad{color:#d05a5a}
/* ═══ r29 (fix_v2_r29): 注入透视卡 ═══ */
#dt-s-chat .think-line.trace .tr-tool .rc-slot{flex-basis:100%;color:var(--ink-3);font-size:10.5px;margin-top:2px}
.rc-card{flex-basis:100%;background:var(--bg);border:1px solid var(--edge);border-radius:14px;padding:10px 12px;margin-top:6px;font-size:12px;color:var(--ink);line-height:1.5}
.rc-card + .rc-card{margin-top:10px}
.rc-head{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);letter-spacing:.3px}
.rc-head .rc-star{color:var(--accent)}
.rc-head .rc-ts{margin-left:auto;font-size:10px;color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rc-kw{margin-top:6px;font-size:11.5px;color:var(--ink-2)}
.rc-kw b{font-weight:500;color:var(--ink)}
.rc-tokens{margin-top:8px}
.rc-lab{font-size:10.5px;color:var(--ink-3);margin-bottom:4px}
.rc-lab small{margin-left:4px;opacity:.8}
.rc-tk{display:flex;flex-wrap:wrap;gap:4px}
.rc-tok{position:relative;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:var(--bg-2);font-size:10.5px;color:var(--ink-2);overflow:hidden}
.rc-tok em{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w,0) * 100%);background:rgba(var(--ink-rgb,40,40,40),.06);pointer-events:none}
.rc-tok .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-3)}
.rc-tok.rare{background:var(--accent-soft);color:var(--ink)}
.rc-tok.rare .n{color:var(--accent)}
.rc-hits{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rc-hit{background:var(--bg-2);border-radius:12px;padding:8px 10px}
.rc-hit.gone{opacity:.55}
.rc-hit .rc-t{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0}
.rc-hit .rc-title{flex:1;min-width:0;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-hit.open .rc-title{white-space:normal}
.rc-hit .rc-cat{font-style:normal;font-size:9.5px;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:99px;flex:none}
.rc-hit .rc-gone{font-style:normal;font-size:9.5px;color:var(--ink-3);border:1px solid var(--edge);padding:0 5px;border-radius:99px;flex:none}
.rc-hit .rc-arr{color:var(--ink-3);font-size:10px;flex:none;transition:transform .15s}
.rc-hit.open .rc-arr{transform:rotate(180deg)}
.rc-hit .rc-body{margin-top:6px;padding:8px 10px;background:var(--bg);border-radius:10px;font-size:12px;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;line-height:1.65;max-height:260px;overflow-y:auto}
.rc-hit .rc-meta{margin-top:5px;font-size:10px;color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rc-hit .rc-fb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--edge)}
.rc-hit .rc-q{font-size:10.5px;color:var(--ink-3);flex-basis:100%}
.rc-hit .rc-fb button{font:inherit;font-size:10.5px;color:var(--ink-2);background:transparent;border:none;padding:2px 0;cursor:pointer;font-family:inherit}
.rc-hit .rc-fb button.on{color:var(--accent);font-weight:500}
.rc-hit .rc-fb button:disabled{opacity:.5}
.rc-empty{font-size:11px;color:var(--ink-3);padding:6px 0}
.rc-more{margin-top:8px;font-size:11px;color:var(--accent);cursor:pointer;text-align:right}
/* 底部抽屉 (通用) */
.v2-sheet{position:fixed;inset:0;z-index:900}
.v2-sheet .v2-sheet-bd{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.v2-sheet .v2-sheet-box{position:absolute;left:0;right:0;bottom:0;max-height:82vh;display:flex;flex-direction:column;background:var(--bg);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.v2-sheet .v2-sheet-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;font-size:13px;color:var(--ink)}
.v2-sheet .v2-sheet-x{font:inherit;font-size:20px;line-height:1;color:var(--ink-3);background:transparent;border:none;padding:0 4px;cursor:pointer}
.v2-sheet .v2-sheet-c{overflow-y:auto;padding:4px 14px calc(16px + env(safe-area-inset-bottom))}
/* ═══ r32 (fix_v2_r32): 透视卡不超宽 + 折叠 ═══ */
#dt-s-chat .think-line.trace,#dt-s-chat .think-line.trace .tr-body,#dt-s-chat .think-line.trace .tr-tool{min-width:0;box-sizing:border-box}
.rc-card{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.rc-card *{box-sizing:border-box}
.rc-fold{font-size:11px;color:var(--ink-3);text-align:center;padding:4px 0;cursor:pointer}
.rc-fold.open{color:var(--ink-2)}
/* ═══ r37 (fix_v2_r37): 药丸里 Codex 的模型 / 思考强度下拉 ═══ */
.v2-modelpop{min-width:268px;max-width:min(360px,calc(100vw - 24px))}
.v2-modelpop label.it{align-items:center;gap:10px;cursor:default;color:var(--ink-2);font-size:12px}
.v2-modelpop label.it:hover,.v2-modelpop label.it:active{background:transparent}
.v2-modelpop select{
-webkit-appearance:none;appearance:none;
flex:1 1 auto !important;min-width:0 !important;max-width:62% !important;margin-left:auto;
font:inherit;font-size:12px;line-height:1.3;color:var(--ink);
border:none;border-radius:10px;padding:7px 26px 7px 10px;cursor:pointer;
text-overflow:ellipsis;
background-color:var(--bg-2);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 9px center;background-size:9px 6px;
}
.v2-modelpop select:disabled{opacity:.5;cursor:default}
.v2-modelpop select:focus{outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
/* 设置页那两个 (r36) 用同一套, 省得两处长得不一样 */
#dt-s-settings #dtCxModel,#dt-s-settings #dtCxEffort{
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 9px center;background-size:9px 6px;
padding-right:26px;cursor:pointer;
}
/* ═══ r38 (fix_v2_r38): 面板里自动召回卡的位子 ═══ */
#dt-s-chat .think-line.trace .tr-auto{display:flex;flex-direction:column;min-width:0;box-sizing:border-box}
#dt-s-chat .think-line.trace .tr-auto .rc-card{margin-top:0}
/* fix_v2_r39: 沿用 rc-card / rc-hit 和 v2 页壳 */
#v2-s-memrev [data-mr-list]{margin-top:16px}
#v2-s-memrev .rc-t{width:100%;font:inherit;text-align:left;background:transparent;border:0;padding:0;color:var(--ink)}
#v2-s-memrev .rc-meta,#v2-s-memrev [data-mr-tags]{overflow-wrap:anywhere}
#v2-s-memrev [data-mr-mark],#v2-s-memrev [data-mr-status]{color:var(--accent);margin-top:6px;overflow-wrap:anywhere}
#v2-s-memrev form{margin-top:10px}
#v2-s-memrev form input{display:block;width:100%;margin:6px 0;padding:8px 10px;border:1px solid var(--edge);border-radius:10px;background:var(--bg-2);color:var(--ink);font:inherit}
#v2-s-memrev form button,#v2-s-memrev [data-mr-list]>button{font:inherit;border:0;border-radius:10px;padding:6px 10px;background:var(--bg-2);color:var(--ink);margin-right:8px;cursor:pointer}
/* fix_v2_r41: 重要性那一排 —— 边框统一用 var(--edge), 项目里就这一个 */
#v2-s-memrev [data-mr-imp]{margin-top:6px;overflow-wrap:anywhere}
#v2-s-memrev [data-mr-imp] button{font:inherit;border:1px solid var(--edge);border-radius:8px;padding:2px 10px;margin-left:6px;background:var(--bg-2);color:var(--ink);cursor:pointer}
#v2-s-memrev [data-mr-imp] button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* fix_v2_r42: 拆分面板 */
#v2-s-memrev [data-mr-panel]{margin-top:10px;padding:10px;border:1px solid var(--edge);border-radius:10px;background:var(--bg-2)}
#v2-s-memrev .mr-wait,#v2-s-memrev .mr-ph{font-size:13px;color:var(--ink-2);margin-bottom:8px}
#v2-s-memrev .mr-fam{display:block;font-size:12px;color:var(--ink-2);margin-bottom:10px}
#v2-s-memrev .mr-blk{border:1px solid var(--edge);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:var(--card)}
#v2-s-memrev .mr-blk-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-bottom:6px}
#v2-s-memrev .mr-x{margin-left:auto}
#v2-s-memrev [data-mr-panel] label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px}
#v2-s-memrev [data-mr-panel] input,#v2-s-memrev [data-mr-panel] textarea{display:block;width:100%;box-sizing:border-box;margin-top:3px;padding:7px 9px;border:1px solid var(--edge);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;line-height:1.55}
#v2-s-memrev [data-mr-panel] textarea{resize:vertical}
#v2-s-memrev [data-mr-panel] button{font:inherit;border:1px solid var(--edge);border-radius:8px;padding:3px 10px;background:var(--bg-2);color:var(--ink);cursor:pointer}
#v2-s-memrev .mr-imp2 button{margin-right:6px;padding:2px 9px}
#v2-s-memrev .mr-imp2 button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#v2-s-memrev .mr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
#v2-s-memrev .mr-go{background:var(--accent);color:#fff;border-color:var(--accent)}
#v2-s-memrev .mr-msg{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
/* Wishper v2 · app2.css · 朋友圈发 / 评 / 赞 + 打字时的光团 */
.v2-compose{background:var(--card);border-radius:20px;padding:16px 16px 12px;box-shadow:var(--shadow);margin-bottom:28px}
.v2-compose textarea{width:100%;border:none;background:none;outline:none;resize:none;font:inherit;font-size:13px;line-height:1.6;color:var(--ink);min-height:44px}
.v2-compose textarea::placeholder{color:var(--ink-3)}
.v2-compose .pics{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.v2-compose .pics img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.v2-compose .bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.v2-compose .ib{width:30px;height:30px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.v2-compose .ib svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v2-compose .send{margin-left:auto;border:none;background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:8px 16px;border-radius:99px;box-shadow:0 3px 10px rgba(var(--accent-rgb),.3)}
.v2-compose .send:disabled{opacity:.4;box-shadow:none}
.v2-post .pf button{border:none;background:none;padding:0;font:inherit;color:var(--ink-3);display:inline-flex;align-items:center;gap:4px}
.v2-post .pf button.on{color:var(--accent)}
.v2-post .pf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-post .pf button.on svg{fill:currentColor}
.v2-post .cm{margin-top:10px;background:var(--bubble);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.v2-post .cm .c{font-size:11.5px;line-height:1.6}
.v2-post .cm .c b{font-weight:500;color:var(--accent)}
.v2-post .cm .likes{font-size:11px;color:var(--accent)}
.v2-post .cmin{display:none;margin-top:8px;gap:6px;align-items:center}
.v2-post .cmin.on{display:flex}
.v2-post .cmin input{flex:1;border:none;background:var(--bubble);border-radius:99px;padding:7px 12px;font:inherit;font-size:12px;outline:none;color:var(--ink)}
.v2-post .cmin button{border:none;background:none;color:var(--accent);font-size:12px;font-weight:600;padding:4px 6px}
/* 抓抓在想: 光团代替三个点 */
#dt-s-chat .msg.typing .bubble{background:none !important;box-shadow:none !important;padding:0 !important;display:flex;align-items:center;gap:8px;min-height:28px}
#dt-s-chat .msg.typing .bubble i{display:none}
#dt-s-chat .msg.typing .bubble::before{content:"";width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 45% 40%,var(--orb-core) 0%,var(--orb) 40%,rgba(var(--accent-rgb),.25) 70%,transparent 100%);animation:orbBreathe 2.4s ease-in-out infinite}
#dt-s-chat .msg.typing .col::before{display:none}
@media (prefers-reduced-motion:reduce){#dt-s-chat .msg.typing .bubble::before{animation:none}}
/* SEG:RUOTA v1 — game and existing chat share the available height. */
#ruotaPanel[hidden], #ruotaStage[hidden] { display:none; }
#ruotaPanel { flex:none; min-width:0; background:var(--card); border-bottom:1px solid var(--edge); }
.ruota-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px; color:var(--ink); }
.ruota-toolbar button, .ruota-status button { font:inherit; color:var(--accent); background:var(--accent-soft); border:0; border-radius:var(--r-pill); padding:8px 12px; cursor:pointer; }
#ruotaStage { height:40vh; height:40dvh; overflow:auto; }
#ruotaStage iframe { display:block; width:100%; height:100%; border:0; }
.ruota-status { padding:8px 16px; color:var(--ink-2); }
.ruota-credit { padding:4px 16px 8px; color:var(--ink-2); font-size:var(--fs-cap); overflow-wrap:anywhere; }
.ruota-credit a { color:var(--accent); }
body[data-route="ruota"] #dtMsgs { padding-top:12px; }
@media (max-height:550px) { #ruotaStage { height:25vh; height:25dvh; } }
/* ═══════════════════════════════════════════════════════════════════════
Wishper v3 · app3.css · 2026-09-18
【骨架】+【v2 变量映射】+【我】+【外观】+【v2 页白底】+【聊天皮】+【材质】
加载顺序：legacy.css → tokens.css → app.css(v2) → app2.css → app3.css
★★ 挖出来的坑：
1. legacy.css:402 `.dt-main{order:1}` —— 三栏都显式给 order
2. legacy @media(min-width:820px) 内页限宽 720 —— 解掉
3. 断点跟 legacy 对齐用 820
4. app.css 用 v2 自己那套变量名 —— 第九节映射
5. app.css:50/:51 一对 !important 透明底 —— 白底页同等武器
6. app.css:10 body 铺 --wall；:179/:754/:761/:762 聊天壁纸；:757 她的气泡 —— 第十三节压回
★ 不碰：聊天页 JS 生成的 DOM；一切 .v2-* 页面类。只换皮。
★ 手机左右边距统一走 --pad-page-sm（tokens.css，随宽度 20–34）。所有页都收：
v3 自己的页写在各自的 @media 里；v2 的页在第十二节整页加内边距。
═══════════════════════════════════════════════════════════════════════ */
/* ── 一、根 ────────────────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
overflow: hidden;
transition: background-color .2s ease, color .2s ease;
}
.w3-item:focus, .w3-subitem:focus, .w3-av:focus,
.w3p-tog:focus, .w3p-tabs button:focus, .w3k-opts button:focus, .w3k-wall button:focus,
.w3-more:focus, .w3-plus:focus, .w3-arrows button:focus { outline: none; }
.w3-item:focus-visible, .w3-subitem:focus-visible, .w3-av:focus-visible,
.w3p-tog:focus-visible, .w3p-tabs button:focus-visible, .w3k-opts button:focus-visible, .w3k-wall button:focus-visible,
.w3-more:focus-visible, .w3-plus:focus-visible, .w3-arrows button:focus-visible {
outline: 2px solid var(--accent-line); outline-offset: 2px;
}
/* ── 二、外层三栏 ──────────────────────────────────────────────────── */
.dt-wrap {
display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0;
align-items: stretch; justify-content: flex-start;
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
.dt-wrap > .dt-stage {
position: relative; box-sizing: border-box;
width: 100%; height: 100%; max-width: var(--stage-max); min-width: 0;
margin: 0 auto; padding: var(--pad-page);
display: flex; flex: none; flex-direction: row; align-items: stretch; gap: var(--gap-col);
background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
.dt-stage > .w3-nav { order: 0; }
.dt-stage > .dt-main { order: 1; }
.dt-stage > .w3-side { order: 2; }
/* ── 三、主区 ──────────────────────────────────────────────────────── */
.dt-stage > .dt-main {
position: relative; flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0;
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--r-card-lg); overflow: hidden;
}
.dt-main > .dt-screen { max-width: none; width: auto; margin: 0; min-height: 0; }
.dt-dock { display: none !important; }
/* ── 四、左栏 ──────────────────────────────────────────────────────── */
.w3-nav {
flex: 0 0 var(--nav-w); width: var(--nav-w); height: 100%; box-sizing: border-box;
padding: 26px 14px 20px; display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card-lg); overflow: hidden;
}
.w3-nav-top { flex-shrink: 0; padding-bottom: 20px; text-align: center; }
.w3-av {
width: 56px; height: 56px; border-radius: var(--r-pill);
background: var(--soft); border: 1px solid var(--line); color: var(--accent);
font: inherit; font-size: 16px; font-weight: var(--w-light); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background-size: cover; background-position: center; overflow: hidden;
}
.w3-me-name { margin-top: 11px; font-size: var(--fs-title); font-weight: var(--w-med); }
.w3-me-sub { margin-top: 5px; font-size: var(--fs-cap); font-weight: var(--w-light); letter-spacing: .14em; color: var(--ink2); }
.w3-items { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
.w3-item {
flex-shrink: 0; height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 11px;
background: none; border: 1px solid transparent; border-radius: var(--r-chip);
color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: var(--w-reg);
text-align: left; cursor: pointer;
}
.w3-item svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--ink2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w3-item span { flex: 1 1 auto; min-width: 0; }
.w3-item:hover { background: var(--soft); }
.w3-item.on { background: var(--soft); color: var(--accent); font-weight: var(--w-med); }
.w3-item.on svg { stroke: var(--accent); }
.w3-bar { flex-shrink: 0; width: 3px; height: 14px; border-radius: var(--r-pill); background: transparent; }
.w3-item.on .w3-bar { background: var(--accent); }
.w3-caret { flex-shrink: 0; width: 11px !important; height: 11px !important; stroke-width: 1.5; transition: transform .18s ease; }
.w3-set.open .w3-caret { transform: rotate(180deg); }
.w3-sep { flex-shrink: 0; height: 1px; margin: 6px 14px; background: var(--line); }
.w3-sub { flex-shrink: 0; padding-left: 41px; display: none; flex-direction: column; gap: 1px; }
.w3-sub.open { display: flex; }
.w3-subitem {
height: 28px; padding: 0 10px; display: flex; align-items: center;
background: none; border: 0; border-radius: 9px; color: var(--ink2);
font: inherit; font-size: var(--fs-sm); font-weight: var(--w-light); text-align: left; cursor: pointer;
}
.w3-subitem:hover { background: var(--soft); color: var(--ink); }
.w3-subitem.on { color: var(--accent); font-weight: var(--w-med); }
.w3-nav-foot { flex-shrink: 0; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.w3-dday-cap { font-size: var(--fs-cap); font-weight: var(--w-light); letter-spacing: .18em; color: var(--ink2); }
.w3-dday { margin-top: 7px; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.w3-dday b { font-size: 30px; font-weight: var(--w-thin); line-height: 1; letter-spacing: .03em; }
.w3-dday span { font-size: var(--fs-sm); font-weight: var(--w-light); color: var(--ink2); }
.w3-dday-since { margin-top: 8px; font-size: 9px; font-weight: var(--w-light); letter-spacing: .14em; color: var(--ink2); opacity: .8; }
/* ── 五、右栏 ──────────────────────────────────────────────────────── */
.w3-side { flex: 0 0 var(--aside-w); width: var(--aside-w); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.w3-card { flex-shrink: 0; box-sizing: border-box; padding: 18px 19px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.w3-card.w3-grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.w3-card-h { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.w3-card-h b { font-size: var(--fs-body); font-weight: var(--w-semi); }
.w3-more, .w3-arrows button, .w3-plus { background: none; border: 0; color: var(--ink2); font: inherit; font-size: var(--fs-sm); font-weight: var(--w-light); cursor: pointer; }
.w3-arrows { display: flex; gap: 3px; }
.w3-arrows button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.w3-arrows svg, .w3-plus svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w3-plus { width: 23px; height: 23px; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--line); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.w3-plus svg { stroke-width: 1.7; }
.w3-cal-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.w3-cal-grid .wk { padding-bottom: 6px; font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); }
.w3-cal-grid .d { font-size: var(--fs-sm); font-weight: var(--w-light); line-height: 27px; border-radius: var(--r-pill); cursor: pointer; }
.w3-cal-grid .d:hover { background: var(--soft); }
.w3-cal-grid .d.today { background: var(--accent); color: var(--on-accent); font-weight: var(--w-med); }
.w3-cal-grid .d.dot { position: relative; }
.w3-cal-grid .d.dot::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: var(--r-pill); background: var(--accent); }
.w3-todo-list { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.w3-todo-list label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: var(--w-light); cursor: pointer; }
.w3-todo-list input[type="checkbox"] { flex-shrink: 0; width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.w3-todo-list .done { color: var(--ink2); text-decoration: line-through; }
.w3-ev-list { flex: 1 1 auto; min-height: 0; margin-top: 15px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.w3-ev { flex-shrink: 0; display: flex; gap: 10px; align-items: flex-start; }
.w3-ev i { flex-shrink: 0; width: 5px; height: 5px; margin-top: 6px; border-radius: var(--r-pill); background: var(--ink2); opacity: .45; }
.w3-ev:first-child i { background: var(--accent); opacity: 1; }
.w3-ev-t { font-size: var(--fs-sm); font-weight: var(--w-reg); line-height: var(--lh-tight); }
.w3-ev-m { margin-top: 3px; font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); }
.w3-wake { display: flex; align-items: center; gap: 15px; }
.w3-orb { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--orb); opacity: .4; box-shadow: 0 0 0 4px var(--orb-halo); }
.w3-wake.awake .w3-orb { opacity: .9; box-shadow: 0 0 0 5px var(--orb-halo), 0 0 18px 3px var(--orb-halo); }
.w3-wake-b { flex: 1 1 auto; min-width: 0; }
.w3-wake-cap { font-size: var(--fs-sm); font-weight: var(--w-light); letter-spacing: .16em; color: var(--ink2); }
.w3-wake-n { margin-top: 5px; display: flex; align-items: baseline; gap: 6px; }
.w3-wake-n b { font-size: 25px; font-weight: var(--w-thin); line-height: 1; letter-spacing: .02em; }
.w3-wake-n span { font-size: var(--fs-sm); font-weight: var(--w-light); color: var(--ink2); }
.w3-wake-bar { margin-top: 9px; height: 2px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.w3-wake-bar i { display: block; height: 2px; width: 0; border-radius: var(--r-pill); background: var(--orb); transition: width .4s ease; }
/* ── 六、手机端把手 / 遮罩 ───────────────────────────────────────── */
.w3-handle, .w3-mask { display: none; }
/* ── 七、手机端 ★ 820 ─────────────────────────────────────────────── */
@media (max-width: 819px) {
.dt-wrap > .dt-stage { max-width: none; padding: 0; gap: 0; flex-direction: row; }
.w3-side { display: none; }
.dt-stage > .dt-main { border: 0; border-radius: 0; }
.w3-nav {
position: absolute; left: 8px; top: 50%; transform: translate(-72px, -50%);
z-index: 40; flex: none; width: var(--rail-w); height: auto; max-height: calc(100% - 32px);
padding: 8px 0; border-radius: 23px;
background: color-mix(in srgb, var(--card) 88%, transparent);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: var(--shadow-float); opacity: 0; pointer-events: none;
overflow: visible; /* 二级侧拉挂在栏外面，别裁 */
transition: transform var(--dur-rail) var(--ease-rail), opacity .2s ease;
}
body.w3-open .w3-nav { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.w3-nav-top, .w3-nav-foot, .w3-item span, .w3-bar, .w3-caret { display: none !important; }
.w3-items { gap: 0; overflow: visible; }
.w3-item { width: var(--rail-w); height: var(--tap); padding: 0; justify-content: center; border-radius: 0; position: relative; border: 0; }
.w3-item:hover { background: none; }
/* 图标栏的选中态：只有左边一根小竖条，没有框没有底（第十四节的材质规则会给 .w3-item.on
铺底描边，在这儿一律压掉 —— 09-18 小槐：「侧拉栏选中的要改一下下」） */
.w3-item.on {
background: none !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.w3-item.on::before { content: ''; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 2.5px; border-radius: var(--r-pill); background: var(--accent); }
.w3-item svg { width: 18px; height: 18px; }
.w3-sep { margin: 3px auto; width: 16px; }
/* 二级侧拉（09-18 小槐的方案）：点「设置」在图标栏右边弹一张小卡，四个子项都在。
贴着栏的底部对齐（「设置」是最后一个图标）。选了子项 → 走原来的路由 → 侧栏收起，小卡跟着收。 */
.w3-sub {
position: absolute; left: calc(100% + 10px); bottom: 4px;
width: 148px; padding: 6px; box-sizing: border-box; gap: 2px;
background: color-mix(in srgb, var(--card) 92%, transparent);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-float);
transform-origin: left bottom;
}
.w3-sub.open { display: flex; animation: w3SubIn .18s var(--ease-rail); }
@keyframes w3SubIn { from { opacity: 0; transform: translateX(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.w3-subitem { height: 40px; padding: 0 14px; border-radius: 12px; font-size: var(--fs-body); font-weight: var(--w-reg); color: var(--ink); }
.w3-subitem.on { background: var(--soft); color: var(--accent); }
.w3-handle {
display: flex; position: absolute; left: 0; top: 50%; margin-top: -38px; width: 20px; height: 76px; z-index: 30;
align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; opacity: 1; transition: opacity .2s ease;
}
.w3-handle i { width: 3.5px; height: 56px; border-radius: 0 4px 4px 0; background: var(--ink2); opacity: .45; }
body.w3-open .w3-handle { opacity: 0; pointer-events: none; }
.w3-mask {
display: block; position: absolute; inset: 0; z-index: 35;
background: rgba(0, 0, 0, .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
body.w3-open .w3-mask { opacity: 1; pointer-events: auto; }
}
/* ── 八、中间档 ───────────────────────────────────────────────────── */
@media (min-width: 820px) and (max-width: 1180px) {
.w3-side { display: none; }
.dt-wrap > .dt-stage { padding: 16px; }
}
/* ── 九、v2 变量映射 ───────────────────────────────────────────────── */
body {
--bg-2: var(--soft);
--ink-2: var(--ink2);
--ink-3: color-mix(in srgb, var(--ink2) 58%, var(--card));
--card-rgb: 255, 255, 255;
--orb-core: var(--card);
--shadow-bubble: var(--bub-shadow);
--gap-card: var(--gap-block);
}
body[data-w3-mode="dark"] { --card-rgb: 23, 23, 26; }
body[data-w3-mode="dark"][data-w3-tint="blue"] { --card-rgb: 23, 28, 37; }
body[data-w3-mode="dark"][data-w3-tint="pink"] { --card-rgb: 32, 21, 25; }
body[data-w3-mode="dark"][data-w3-tint="purple"] { --card-rgb: 25, 22, 36; }
body[data-w3-mode="dark"][data-w3-tint="green"] { --card-rgb: 20, 28, 24; }
/* ── 十、「我」· .w3p-* ────────────────────────────────────────────── */
#v2-s-profile.w3p { flex-direction: column; background: var(--card) !important; overflow: hidden; }
.w3p-head { flex-shrink: 0; box-sizing: border-box; padding: 26px 32px 20px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.w3p-orb { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--orb); box-shadow: 0 0 0 7px var(--orb-halo), 0 0 24px 4px var(--orb-halo); overflow: hidden; }
.w3p-id { flex: 1 1 auto; min-width: 0; }
.w3p-nm { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h2); font-weight: var(--w-semi); }
.w3p-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--line); font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); }
.w3p-pill[hidden] { display: none; }
.w3p-pill::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--ok); }
.w3p-mood { margin-top: 8px; font-size: var(--fs-body); font-weight: var(--w-light); color: var(--ink2); line-height: 1.65; }
.w3p-mood:empty { display: none; }
.w3p-meta { flex-shrink: 0; max-width: 44%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.w3p-chips { display: contents; }
.w3p-chip { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); white-space: nowrap; }
.w3p-chip b { color: var(--ink); font-weight: var(--w-med); }
.w3p-tog { flex-shrink: 0; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: none; font: inherit; font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.w3p-tog:hover { background: var(--soft); }
.w3p-tog svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.w3p-tog.open svg { transform: rotate(180deg); }
.w3p-axes { flex-shrink: 0; box-sizing: border-box; max-height: 0; padding: 0 32px; overflow: hidden; transition: max-height .26s var(--ease-rail), padding .26s var(--ease-rail); }
.w3p-axes.open { max-height: 420px; padding: 18px 32px 14px; border-bottom: 1px solid var(--line); }
.w3p-ax { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: var(--w-light); }
.w3p-ax + .w3p-ax { margin-top: 9px; }
.w3p-ax .n { width: 52px; flex: none; color: var(--ink2); }
.w3p-ax .bar { flex: 1 1 auto; height: 3px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.w3p-ax .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.w3p-ax .v { width: 32px; flex: none; text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* SEG:DRIVES v1.1 —— 八轴的位置换成 Drivesoid 16 维 (按色分组, 同原版配色); 读不到时 .drv 不加, 八轴照旧 */
.w3p-axes.drv.open { max-height: 980px; }
.w3d-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--ink2); margin-bottom: 10px; }
.w3d-top a { color: var(--accent); text-decoration: none; }
.w3d-g + .w3d-g { margin-top: 12px; }
.w3d-g.pos { color: #5d91ed; } .w3d-g.att { color: #e279a7; } .w3d-g.thr { color: #ed9b43; } .w3d-g.rew { color: #50c887; } .w3d-g.neg { color: #e45b66; } .w3d-g.self { color: #8FB8A8; } /* SEG:CONT-SHOW v1 */
.w3d-gt { font-size: 11px; font-weight: 600; letter-spacing: .12em; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.w3d-gt::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.w3d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.w3d-grid .w3p-ax + .w3p-ax { margin-top: 0; }
.w3d-ax { gap: 8px; min-width: 0; }
.w3d-ax .n, .w3d-ax .v { color: var(--ink2); }
.w3d-ax .n { width: 42px; }
.w3d-ax .bar { position: relative; overflow: visible; height: 4px; }
.w3d-ax .bar i { background: currentColor; }
.w3d-ax .bar b { position: absolute; top: -3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: currentColor; opacity: .4; }
.w3p-inner { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--accent-line); font-size: var(--fs-sm); font-weight: var(--w-light); color: var(--ink2); line-height: var(--lh); }
.w3p-tabs { flex-shrink: 0; box-sizing: border-box; padding: 18px 32px 0; display: flex; gap: 26px; }
.w3p-tabs button { padding: 0 0 10px; background: none; border: 0; border-bottom: 1.5px solid transparent; font: inherit; font-size: var(--fs-body); font-weight: var(--w-light); color: var(--ink2); cursor: pointer; }
.w3p-tabs button:hover { color: var(--ink); }
.w3p-tabs button.on { color: var(--ink); font-weight: var(--w-med); border-bottom-color: var(--accent); }
.w3p-list { flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding: 26px 32px 30px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.w3p-day { flex-shrink: 0; margin-top: 6px; font-size: var(--fs-sm); font-weight: var(--w-light); letter-spacing: .1em; color: var(--ink2); }
.w3p-day:first-child { margin-top: 0; }
.w3p-ev { flex-shrink: 0; display: flex; gap: 20px; align-items: flex-start; }
.w3p-t { width: 54px; flex: none; padding-top: 3px; text-align: right; }
.w3p-t b { display: block; font-size: 12.5px; font-weight: var(--w-med); color: var(--ink); font-variant-numeric: tabular-nums; }
.w3p-t span { display: block; margin-top: 4px; font-size: var(--fs-cap); font-weight: var(--w-light); letter-spacing: .1em; color: var(--ink2); }
.w3p-b { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 17px 20px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-inner); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.w3p-b.dream { font-style: italic; opacity: .85; }
/* SEG:DAYDREAM-TAB v1 —— 「我」页「意淫」栏: 本子里的真事那几句单独标色, 其余是他想的 */
.w3p-b.yy .yy-real { display: inline-block; border-left: 2px solid var(--accent); padding-left: 8px; color: var(--accent); }
.w3p-b.yy .yy-note { font-size: 12px; color: var(--ink2); }
.w3p-empty { padding: 40px 0; text-align: center; font-size: var(--fs-body); font-weight: var(--w-light); color: var(--ink2); }
@media (max-width: 819px) {
#v2-s-profile.w3p { background: var(--bg) !important; }
.w3p-head { padding: 20px var(--pad-page-sm) 16px; gap: 14px; }
.w3p-orb { width: 48px; height: 48px; }
.w3p-chip { display: none; }
.w3p-meta { max-width: none; }
.w3p-axes { padding: 0 var(--pad-page-sm); }
.w3p-axes.open { padding: 16px var(--pad-page-sm) 12px; }
.w3p-tabs { padding: 14px var(--pad-page-sm) 0; gap: 18px; overflow-x: auto; }
.w3p-list { padding: 18px var(--pad-page-sm) 24px; gap: 14px; }
.w3p-ev { gap: 12px; }
.w3p-t { width: 44px; }
.w3p-b { background: var(--card); }
}
/* ── 十一、外观 · .w3k-* ──────────────────────────────────────────── */
#w3-s-look.w3k { flex-direction: column; background: var(--card) !important; overflow: hidden; }
.w3k-head { flex-shrink: 0; padding: 26px 32px 20px; display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); }
.w3k-head b { font-size: var(--fs-h2); font-weight: var(--w-semi); }
.w3k-head span { font-size: var(--fs-cap); font-weight: var(--w-light); letter-spacing: .16em; color: var(--ink2); }
.w3k-body { flex: 1 1 auto; min-height: 0; padding: 26px 32px 30px; display: flex; flex-direction: column; gap: 26px; overflow-y: auto; }
.w3k-row { flex-shrink: 0; }
.w3k-cap { font-size: var(--fs-cap); font-weight: var(--w-light); letter-spacing: .18em; color: var(--ink2); }
.w3k-opts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.w3k-opts button {
height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: var(--w-light); cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.w3k-opts button:hover { background: var(--soft); }
.w3k-opts button.on { background: var(--soft); border-color: var(--accent-line); font-weight: var(--w-med); }
.w3k-opts button:disabled { opacity: .38; cursor: not-allowed; }
.w3k-opts i { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--sw); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .12) inset; }
.w3k-note { margin-top: 9px; font-size: var(--fs-sm); font-weight: var(--w-light); color: var(--ink2); line-height: var(--lh); }
.w3k-walls { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.w3k-wall { flex: 0 0 auto; width: 236px; box-sizing: border-box; padding: 10px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); }
.w3k-thumb { flex-shrink: 0; width: 72px; height: 48px; border-radius: 9px; background: var(--soft) center/cover no-repeat; border: 1px solid var(--line); }
.w3k-wall[data-slot$="_p"] .w3k-thumb { width: 30px; height: 48px; }
.w3k-wall.has .w3k-thumb { border-color: transparent; }
.w3k-wall-b { flex: 1 1 auto; min-width: 0; }
.w3k-wall-b span { display: block; font-size: var(--fs-body); font-weight: var(--w-reg); }
.w3k-wall-b small { display: block; margin-top: 3px; font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); }
.w3k-wall-acts { flex-shrink: 0; display: flex; gap: 4px; }
.w3k-wall-acts button { height: 26px; padding: 0 10px; background: none; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink2); font: inherit; font-size: var(--fs-cap); font-weight: var(--w-light); cursor: pointer; }
.w3k-wall-acts button:hover { background: var(--soft); color: var(--ink); }
.w3k-wall:not(.has) [data-clear] { display: none; }
@media (max-width: 819px) {
#w3-s-look.w3k { background: var(--bg) !important; }
.w3k-head { padding: 20px var(--pad-page-sm) 16px; }
.w3k-body { padding: 18px var(--pad-page-sm) 24px; gap: 20px; }
.w3k-wall { width: 100%; }
}
/* ── 十二、还没重做的 v2 页面：白底 + 手机上整页收边 + 摘掉老开关 ──── */
#v2-s-feed, #dt-s-memory, #v2-s-play, #dt-s-settings, #dt-s-page { background: var(--card) !important; }
@media (max-width: 819px) {
#v2-s-feed, #dt-s-memory, #v2-s-play, #dt-s-settings, #dt-s-page {
background: var(--bg) !important;
/* 09-18 小槐：「都收一下 所有页面」。这些页里面的版式是 v2 的，不进去改，
整页两侧加内边距（app.css:51 给的是 padding:0 !important，同等武器压回） */
padding-left: var(--pad-page-sm) !important;
padding-right: var(--pad-page-sm) !important;
box-sizing: border-box;
}
}
/* legacy 设置页「主题」tab 里的老开关：「强调色 · 你挑的」和「背景 · 他的状态」改的是 v1/v2
那套皮，现在被 v3 的外观页整个盖掉了，留着只会让人以为还管用（09-18 小槐：「历史残留老设置」）。
DOM 是 renderSettings 生成的，不进去改，按里面的 id 把两组藏掉。「字体大小」还有用，留着。 */
#dtSetContent .set-group:has(#dtAccentChips),
#dtSetContent .set-group:has(#dtThemeChips) { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
十三、聊天 · 两层壁纸 + 版式按 DeskChat / PhoneChat.dc.html
DOM 是 legacy 的，只换皮。气泡的三套皮在第十四节跟控件一起。
输入框是 v2 的「两层白卡」（09-18 小槐：「我喜欢 v2 的输入框」），只换了 token；
里面的 #dtInput 是 textarea，能换行、跟着长高。
═══════════════════════════════════════════════════════════════════════ */
body {
background-image: var(--w3-wall, none) !important;
background-size: cover !important; background-position: center !important;
background-attachment: fixed !important; background-repeat: no-repeat !important;
}
body.haswall[data-route="chat"] { background-image: var(--w3-wall, none) !important; }
#dt-s-chat, #dt-s-chat.haswall {
position: relative; gap: 0;
background: var(--w3-chatwall, var(--chat-base)) center/cover no-repeat !important;
}
#dt-s-chat::before { content: ''; position: absolute; inset: 0; background: var(--chat-scrim); pointer-events: none; z-index: 0; }
#dt-s-chat > * { position: relative; z-index: 1; }
#dt-s-chat .dt-chat-head, #dt-s-chat .dt-msgs {
max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important;
}
#dt-s-chat .dt-composer { max-width: none !important; width: auto !important; }
/* 头部 */
#dt-s-chat .dt-chat-head {
flex: none; box-sizing: border-box; padding: 16px 28px !important;
display: flex; align-items: center; gap: 14px;
background: var(--chat-bar) !important;
backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; margin: 0 !important;
}
#dt-s-chat .dt-back { display: none; }
#dt-s-chat .dt-avatar {
display: flex; width: 40px; height: 40px; border-radius: var(--r-pill);
background: var(--orb); color: var(--on-accent); font-size: 13px; font-weight: var(--w-light);
box-shadow: 0 0 0 5px var(--orb-halo); overflow: hidden;
}
#dt-s-chat .dt-chat-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#dt-s-chat .dt-chat-name { font-size: 15px; font-weight: var(--w-semi); letter-spacing: 0; line-height: 1.3; color: var(--ink); }
#dt-s-chat .dt-model-badge { display: none; }
#dt-s-chat .dt-chat-status {
display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0;
background: none; border-radius: 0;
font-size: 10px; font-weight: var(--w-light); letter-spacing: .04em; color: var(--ink2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#dt-s-chat .dt-chat-status::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--ok); flex-shrink: 0; }
#dt-s-chat .dt-head-btn { width: 28px; height: 28px; }
#dt-s-chat .dt-head-btn svg { width: 15px; height: 15px; stroke: var(--ink2); fill: var(--ink2); }
/* 消息区 */
#dt-s-chat .dt-msgs {
flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding: 20px 28px 12px;
display: flex; flex-direction: column; gap: 18px;
background: none !important; overflow-y: auto; scroll-behavior: smooth;
}
#dt-s-chat .msg { display: flex; gap: 12px; align-items: flex-start; max-width: 100%; margin: 0; position: relative; }
#dt-s-chat .msg.me { flex-direction: row-reverse; align-self: auto; justify-content: flex-start; }
#dt-s-chat .msg .mini {
width: 36px; height: 36px; margin: 0; order: 0; border-radius: var(--r-pill);
background: var(--soft); border: 1px solid var(--line); color: var(--accent);
font-size: 11px; font-weight: var(--w-light); box-shadow: none; overflow: hidden; visibility: visible;
}
#dt-s-chat .msg .mini img { width: 100%; height: 100%; object-fit: cover; }
#dt-s-chat .msg .col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; max-width: min(440px, 78%); flex: 0 1 auto; }
#dt-s-chat .msg.me .col { align-items: flex-end; }
#dt-s-chat .msg .col > * { margin: 0; max-width: 100%; box-sizing: border-box; justify-self: auto; }
#dt-s-chat .msg .col::before, #dt-s-chat .msg.me .col::before { content: none; display: none; }
#dt-s-chat .msg .col .time, #dt-s-chat .msg.me .col .time {
order: -1; height: auto; line-height: 1.4; margin: 0 0 7px; padding: 0 2px;
font-size: 10px; font-weight: var(--w-med); color: var(--ink); white-space: nowrap; opacity: 1;
}
#dt-s-chat .msg .col .time .v-meta { margin-left: 7px; font-size: 9.5px; font-weight: var(--w-light); letter-spacing: .04em; color: var(--ink2); opacity: 1; }
#dt-s-chat .msg .col .time .tts-btn { margin-left: 7px !important; color: var(--ink2); }
/* 同一个人连发：收紧间距，藏时间和头像。头像藏了还占高度会把缝撑大（09-18 小槐：「这个缝这么大」），
所以高度也归零，只留宽度对齐 */
#dt-s-chat .msg:not(.me) + .msg:not(.me), #dt-s-chat .msg.me + .msg.me { margin-top: -10px; }
#dt-s-chat .msg:not(.me) + .msg:not(.me) .col .time, #dt-s-chat .msg.me + .msg.me .col .time { display: none; }
#dt-s-chat .msg:not(.me) + .msg:not(.me) .mini, #dt-s-chat .msg.me + .msg.me .mini { visibility: hidden; height: 0 !important; margin-top: 0 !important; border: 0; }
#dt-s-chat .msg .bubble:not(.sticker) {
box-sizing: border-box; padding: 13px 17px;
font-size: 13.5px; font-weight: var(--w-light); line-height: 1.75;
word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%;
}
#dt-s-chat .msg .bubble img { border-radius: 12px; }
#dt-s-chat .msg .bubble.sticker { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px; }
#dt-s-chat .msg .qref { background: rgba(var(--ink-rgb), .06); border-left: 2px solid var(--accent-line); border-radius: 8px; }
#dt-s-chat .msg.me .qref { background: rgba(255, 255, 255, .16); border-left-color: rgba(255, 255, 255, .5); }
#dt-s-chat .msg .vbar { border-top: 1px solid rgba(var(--ink-rgb), .08); padding-top: 8px; margin-top: 8px; }
#dt-s-chat .msg.hit .bubble { outline: 2px solid var(--accent-line); outline-offset: 1px; }
#dt-s-chat .msg.menu-open .bubble { outline: 2px solid var(--accent-line); }
#dt-s-chat .msg.fav-flash .bubble { animation: favPop .5s ease; }
#dt-s-chat .think-line, #dt-s-chat .tool-line { color: var(--ink2) !important; font-size: 10.5px !important; font-weight: var(--w-light); }
/* 输入框：v2 的两层白卡 —— 上面一整行输入，下面一排按钮（加号 / 表情 / 模型药丸），发送键靠右。
浮在消息区底部，四边有空，自己一张卡。结构、顺序全是 v2 app.css:206-229 的，只换 token。 */
#dt-s-chat .dt-composer {
flex: none; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
margin: 8px 20px 18px !important;
padding: 12px 12px 10px 16px !important;
background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 22px !important;
box-shadow: var(--shadow) !important;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dt-s-chat .dt-composer .dt-input {
order: 0; flex: 1 0 100%; width: 100%; height: auto; min-height: 0; box-sizing: border-box;
padding: 2px 2px 10px; margin: 0; border-radius: 0;
background: none !important; border: 0 !important; box-shadow: none !important; outline: none;
color: var(--ink); font-size: 13px; font-weight: var(--w-light); font-family: inherit; line-height: 1.6;
/* textarea：不给拖角，跟着内容长高，最多七八行再滚 */
resize: none; overflow-y: auto; max-height: 180px; display: block;
field-sizing: content;
}
#dt-s-chat .dt-composer .dt-input::placeholder { color: var(--ink2); opacity: .8; }
#dt-s-chat .dt-composer #dtPlusBtn { order: 1; }
#dt-s-chat .dt-composer #dtStickerBtn { order: 2; }
#dt-s-chat .dt-composer::after { order: 3; }
#dt-s-chat .dt-composer .v2-model { order: 5; font-size: 11px; font-weight: var(--w-reg); color: var(--accent); background: var(--accent-soft); border: 0; border-radius: var(--r-pill); padding: 5px 10px; margin-left: 2px; line-height: 1.2; font-family: inherit; cursor: pointer; }
#dt-s-chat .dt-composer .dt-cbtn { width: 28px; height: 28px; border: 0; background: none; padding: 0; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }
#dt-s-chat .dt-composer .dt-cbtn svg { width: 17px; height: 17px; stroke: var(--ink2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#dt-s-chat .dt-composer .dt-send { order: 9; margin-left: auto; width: 32px; height: 32px; padding: 0; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }
#dt-s-chat .dt-composer .dt-send svg { width: 15px; height: 15px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#dt-s-chat .dt-composer .dt-send.dim { opacity: .35; }
#dt-s-chat .dt-composer #dtVrCancel { order: 1; }
#dt-s-chat .dt-composer #dtVrWave { order: 2; flex: 1 1 auto; }
#dt-s-chat .dt-composer #dtVrTime { order: 3; font-size: 11px; color: var(--accent); }
#dt-s-chat .dt-composer #dtAsrRun { order: 2; flex: 1 1 auto; }
#dt-s-chat .dt-composer.rec { background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important; }
#dt-s-chat .qbar { margin: 0 20px; background: var(--chat-bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#dt-s-chat .dt-plus-panel, #dt-s-chat .dt-sticker-panel { background: var(--card); border: 1px solid var(--line); }
/* 加号面板：ruota.js 插进来的那一项（v3.js 把它改名成「邀请函」）排到「音乐」旁边，
占位的点点排最后。靠 order，不搬节点（09-18 小槐：「放在音乐旁边」） */
#dtPlusPanel .plus-grid .plus-item { order: 0; }
#dtPlusPanel .plus-grid .plus-item.ruota-plus { order: 1; }
#dtPlusPanel .plus-grid .plus-item.ph { order: 2; }
@media (max-width: 819px) {
#dt-s-chat { background-attachment: scroll; }
#dt-s-chat .dt-chat-head { padding: 12px var(--pad-page-sm) 12px 34px !important; gap: 9px; min-height: 62px; }
#dt-s-chat .dt-avatar { width: 32px; height: 32px; box-shadow: 0 0 0 4px var(--orb-halo); }
#dt-s-chat .dt-chat-name { font-size: 14px; }
#dt-s-chat .dt-chat-status { font-size: 9px; }
#dt-s-chat .dt-head-btn { width: 26px; height: 26px; }
#dt-s-chat .dt-msgs { padding: 18px var(--pad-page-sm) 10px; gap: 16px; }
#dt-s-chat .msg { gap: 9px; }
#dt-s-chat .msg .mini { width: 30px; height: 30px; margin-top: 22px; font-size: 10px; }
#dt-s-chat .msg .col { max-width: 76%; }
#dt-s-chat .msg .bubble:not(.sticker) { padding: 11px 14px; font-size: 13px; }
#dt-s-chat .dt-composer { margin: 6px var(--pad-page-sm) calc(env(safe-area-inset-bottom) + 14px) !important; padding: 10px 10px 8px 14px !important; }
#dt-s-chat .dt-composer .dt-input { max-height: 140px; }
#dt-s-chat .qbar { margin: 0 var(--pad-page-sm); }
}
/* ═══════════════════════════════════════════════════════════════════════
十四、材质：气泡 + 控件，一起跟 data-w3-bubble 走
09-18 小槐：「别的按钮换成液态玻璃和 iMessage 样式」——所以第三个开关
其实是【材质】。变量在 tokens.css 第五节，这里只读不分支：
气泡 him → --bub-him-* her → --bub-her-*
控件 中性 → --mat-* 强调 → --mat-acc-*
★ 液态玻璃 = 真折射（hyalite，v3.js 选了 glass 才加载）：
它往每个挂上的元素 style 写 --hyalite（一个 url(#svg滤镜)）和 --hyalite-edge（inset 描边）。
这里 backdrop-filter 用 var(--hyalite, 兜底模糊)：Chromium 走折射，Safari / Firefox 走兜底。
只有聊天卡里的东西挂折射（气泡 / 输入卡 / 发送键）——白卡上没东西可折，白挂一个渲染面。
两档：气泡 regular（多一点磨砂，装字）/ 控件 clear（几乎全透，装按钮）—— 数在 v3.js GLASS_BUB / GLASS_CTL。
输入框现在是 v2 那张卡，卡整个挂玻璃；里面的 input 是裸的，不挂。
★ 手机图标栏的 .w3-item.on 不吃这一节（第七节用 !important 压掉了），它只有一根小竖条。
═══════════════════════════════════════════════════════════════════════ */
/* 气泡 */
#dt-s-chat .msg .bubble:not(.sticker) {
border-radius: var(--bub-r);
border-bottom-left-radius: var(--bub-corner);
background: var(--bub-him-bg) !important;
color: var(--bub-him-ink) !important;
border: var(--bub-bw) solid var(--bub-him-bd) !important;
box-shadow: var(--bub-shadow) !important;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dt-s-chat .msg.me .bubble:not(.sticker) {
border-bottom-left-radius: var(--bub-r);
border-bottom-right-radius: var(--bub-corner);
background: var(--bub-her-bg) !important;
color: var(--bub-her-ink) !important;
border: var(--bub-bw) solid var(--bub-her-bd) !important;
box-shadow: var(--bub-shadow-her) !important;
}
body[data-w3-bubble="glass"] #dt-s-chat .msg .bubble:not(.sticker) {
backdrop-filter: var(--hyalite, blur(var(--bub-blur)) saturate(var(--bub-sat)));
-webkit-backdrop-filter: var(--hyalite, blur(var(--bub-blur)) saturate(var(--bub-sat)));
box-shadow: var(--hyalite-edge, none) !important;
text-shadow: 0 0 6px rgba(255, 255, 255, .55); /* 中心是清透的，字压在壁纸上要能读 */
}
body[data-w3-mode="dark"][data-w3-bubble="glass"] #dt-s-chat .msg .bubble:not(.sticker) {
text-shadow: 0 0 6px rgba(0, 0, 0, .6);
}
/* 中性控件：chip / 徽章 / 八轴按钮 / 外观选项 / 壁纸换清 / 加号 / 「我」页气泡 / 左栏当前项 */
.w3p-chip, .w3p-pill, .w3p-tog,
.w3k-opts button, .w3k-wall-acts button, .w3-plus,
.w3p-b,
.w3-item.on {
background: var(--mat-bg);
color: var(--mat-ink);
border: var(--mat-bw) solid var(--mat-bd);
box-shadow: var(--mat-shadow);
}
.w3p-chip, .w3p-pill, .w3p-tog, .w3k-wall-acts button { color: var(--ink2); }
.w3p-chip b { color: var(--mat-ink); }
.w3-plus { color: var(--accent); }
.w3-item.on { color: var(--accent); }
.w3p-tog:hover, .w3k-opts button:hover, .w3k-wall-acts button:hover { filter: brightness(.96); }
.w3k-opts button:disabled:hover { filter: none; }
/* 强调控件：发送键 / 日历今天 / 外观当前项 */
#dt-s-chat .dt-composer .dt-send,
.w3-cal-grid .d.today,
.w3k-opts button.on {
background: var(--mat-acc-bg);
color: var(--mat-acc-ink);
border: var(--mat-bw) solid var(--mat-acc-bd);
box-shadow: var(--mat-acc-shadow);
}
#dt-s-chat .dt-composer .dt-send svg { stroke: var(--mat-acc-ink); }
body[data-w3-bubble="solid"] #dt-s-chat .dt-composer .dt-send,
body:not([data-w3-bubble]) #dt-s-chat .dt-composer .dt-send { box-shadow: 0 3px 10px rgba(var(--accent-rgb), .3); } /* v2 的发送键有一点投影 */
.w3k-opts button.on { font-weight: var(--w-med); }
/* 玻璃才开：Chromium 折射（--hyalite），别的浏览器兜底模糊 */
body[data-w3-bubble="glass"] .w3p-chip, body[data-w3-bubble="glass"] .w3p-pill, body[data-w3-bubble="glass"] .w3p-tog,
body[data-w3-bubble="glass"] .w3k-opts button, body[data-w3-bubble="glass"] .w3k-wall-acts button, body[data-w3-bubble="glass"] .w3-plus,
body[data-w3-bubble="glass"] .w3p-b,
body[data-w3-bubble="glass"] #dt-s-chat .dt-composer .dt-send,
body[data-w3-bubble="glass"] .w3-cal-grid .d.today,
body[data-w3-bubble="glass"] .w3-item.on {
backdrop-filter: var(--hyalite, blur(var(--mat-blur)) saturate(var(--mat-sat)));
-webkit-backdrop-filter: var(--hyalite, blur(var(--mat-blur)) saturate(var(--mat-sat)));
box-shadow: var(--hyalite-edge, var(--mat-shadow));
}
/* 白卡上的玻璃：底下是纯白没东西可透，给一点点重点色让它不至于隐形 */
body[data-w3-bubble="glass"] .w3p-chip, body[data-w3-bubble="glass"] .w3p-pill, body[data-w3-bubble="glass"] .w3p-tog,
body[data-w3-bubble="glass"] .w3k-opts button, body[data-w3-bubble="glass"] .w3k-wall-acts button, body[data-w3-bubble="glass"] .w3-plus,
body[data-w3-bubble="glass"] .w3p-b,
body[data-w3-bubble="glass"] .w3-item.on {
background: rgba(var(--accent-rgb), .06);
border-color: rgba(var(--accent-rgb), .22);
}
/* 玻璃下头部更透一点；输入卡整张挂玻璃（折射在卡上，不在 input 上） */
body[data-w3-bubble="glass"] #dt-s-chat .dt-chat-head {
background: color-mix(in srgb, var(--card) 30%, transparent) !important;
border-color: rgba(255, 255, 255, .3) !important;
}
body[data-w3-bubble="glass"] #dt-s-chat .dt-composer {
background: rgba(255, 255, 255, .12) !important;
border-color: rgba(255, 255, 255, .5) !important;
backdrop-filter: var(--hyalite, blur(16px) saturate(150%));
-webkit-backdrop-filter: var(--hyalite, blur(16px) saturate(150%));
box-shadow: var(--hyalite-edge, var(--shadow)) !important;
}
body[data-w3-mode="dark"][data-w3-bubble="glass"] #dt-s-chat .dt-chat-head {
background: color-mix(in srgb, var(--card) 34%, transparent) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body[data-w3-mode="dark"][data-w3-bubble="glass"] #dt-s-chat .dt-composer {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .18) !important;
}
body[data-w3-bubble="imsg"] #dt-s-chat .dt-composer {
background: var(--bub-him-bg) !important;
border-color: var(--bub-him-bd) !important;
box-shadow: var(--bub-shadow) !important;
}
/* 滚动时省力气（09-23 改）：原来滚动一开始就把玻璃整个关掉，停下再开 —— 一闪一闪。
贵的是折射（--hyalite，每帧重算透镜），普通模糊不贵。所以滚动时只把折射
退成它本来就有的兜底模糊，看着还是磨砂；头部和引用条本来就是普通模糊，不动。 */
body[data-w3-bubble="glass"] #dt-s-chat[data-glass-scrolling] .msg .bubble:not(.sticker) {
backdrop-filter: blur(var(--bub-blur)) saturate(var(--bub-sat)) !important;
-webkit-backdrop-filter: blur(var(--bub-blur)) saturate(var(--bub-sat)) !important;
}
body[data-w3-bubble="glass"] #dt-s-chat[data-glass-scrolling] .dt-composer {
backdrop-filter: blur(16px) saturate(150%) !important;
-webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}
body[data-w3-bubble="glass"] #dt-s-chat[data-glass-scrolling] .dt-composer .dt-send {
backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat)) !important;
-webkit-backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-sat)) !important;
}
/* SUMMARY REVIEW: use v3 tokens and existing card/control families. Layout only
extends the review component; never redefine palette, typography or material. */
#v2-s-memrev .sq-review{margin-bottom:var(--pad-page);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh);color:var(--ink);min-width:0}
#v2-s-memrev .sq-top{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-block)}
#v2-s-memrev .sq-top h3{font-size:var(--fs-h2);font-weight:var(--w-med);margin:0}
#v2-s-memrev .sq-review button{font-family:var(--font);min-height:var(--tap);cursor:pointer}
#v2-s-memrev .sq-review :is(button,input,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#v2-s-memrev .sq-review button:disabled{opacity:.5;cursor:wait}
#v2-s-memrev .sq-status,#v2-s-memrev .sq-note,#v2-s-memrev .sq-help{font-size:var(--fs-sm);color:var(--ink2);margin:calc(var(--pad-card) / 2) 0}
#v2-s-memrev .sq-reason{padding:calc(var(--pad-card) / 2) var(--pad-card);border-radius:var(--r-inner);background:var(--soft);color:var(--ink);margin:var(--gap-block) 0;font-size:var(--fs-body)}
#v2-s-memrev .sq-source{padding:calc(var(--pad-card) / 2) 0;margin-bottom:var(--gap-block)}
#v2-s-memrev .sq-review summary{cursor:pointer;list-style:none}
#v2-s-memrev .sq-review summary::-webkit-details-marker{display:none}
#v2-s-memrev .sq-source>summary,#v2-s-memrev .sq-meta>summary{font-size:var(--fs-sm);color:var(--ink2);padding:calc(var(--pad-card) / 2) 0;min-height:var(--tap)}
#v2-s-memrev .sq-source>summary:after,#v2-s-memrev .sq-meta>summary:after{content:'＋';float:right}
#v2-s-memrev .sq-source[open]>summary:after,#v2-s-memrev .sq-meta[open]>summary:after{content:'−'}
#v2-s-memrev .sq-transcript{max-height:40vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-body)}
#v2-s-memrev .sq-transcript p{padding:var(--pad-card);border-radius:var(--r-inner);background:var(--soft);margin:calc(var(--pad-card) / 2) 0}
#v2-s-memrev .sq-block{min-width:0;padding:0;margin:var(--gap-block) 0;overflow:hidden}
#v2-s-memrev .sq-block>summary{display:flex;align-items:center;gap:var(--gap-block);padding:var(--pad-card-lg);font-size:var(--fs-title);font-weight:var(--w-med)}
#v2-s-memrev .sq-block>summary>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
#v2-s-memrev .sq-block>summary:after{content:'⌄';color:var(--ink2)}
#v2-s-memrev .sq-block[open]>summary:after{transform:rotate(180deg)}
#v2-s-memrev .sq-count{font-size:var(--fs-sm);font-weight:var(--w-reg);color:var(--ink2);white-space:nowrap}
#v2-s-memrev .sq-invalid .sq-count{color:var(--danger)}
#v2-s-memrev .sq-fields{padding:0 var(--pad-card-lg) var(--pad-card-lg)}
#v2-s-memrev .sq-field{display:block;margin:var(--gap-block) 0}
#v2-s-memrev .sq-field>span{display:block;margin-bottom:calc(var(--pad-card) / 2);font-size:var(--fs-sm);color:var(--ink2)}
#v2-s-memrev .sq-input,#v2-s-memrev .sq-textarea{display:block;width:100%;box-sizing:border-box;font:inherit;line-height:var(--lh);color:var(--mat-ink);background:var(--mat-bg);border:var(--mat-bw) solid var(--mat-bd);box-shadow:var(--mat-shadow);border-radius:var(--r-inner);padding:calc(var(--pad-card) / 2) var(--pad-card);min-width:0;min-height:var(--tap)}
#v2-s-memrev .sq-textarea{min-height:calc(var(--tap) * 4);resize:vertical}
#v2-s-memrev .sq-hint{font-size:var(--fs-sm);color:var(--ink2);text-align:right;margin:calc(var(--pad-card) / 4) 0 var(--gap-block);font-variant-numeric:tabular-nums}
#v2-s-memrev .sq-meta{margin-top:var(--gap-block)}
#v2-s-memrev .sq-choices{max-height:40vh;overflow:auto;overscroll-behavior:contain;margin:calc(var(--pad-card) / 2) 0}
#v2-s-memrev .sq-choice{display:flex;align-items:flex-start;gap:calc(var(--pad-card) / 2);padding:calc(var(--pad-card) / 2);cursor:pointer;font-size:var(--fs-body);white-space:pre-wrap;overflow-wrap:anywhere;min-height:var(--tap);border-radius:var(--r-inner)}
#v2-s-memrev .sq-choice:has(input:checked){background:var(--soft)}
#v2-s-memrev .sq-choice input{flex:none;accent-color:var(--accent);width:var(--fs-h2);height:var(--fs-h2);margin:calc(var(--pad-card) / 4) 0}
#v2-s-memrev .sq-review .sq-remove{padding:0;font-size:var(--fs-sm);margin-top:calc(var(--pad-card) / 2)}
#v2-s-memrev .sq-add{display:inline-flex;margin:calc(var(--pad-card) / 2) calc(var(--pad-card) / 2) 0 0}
#v2-s-memrev .sq-actions{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:calc(var(--pad-card) / 2);justify-content:flex-end;padding:var(--gap-block) 0 max(calc(var(--pad-card) / 2),env(safe-area-inset-bottom));margin-top:var(--gap-block);background:var(--card)}
#v2-s-memrev .sq-actions button{font-size:var(--fs-body);min-height:var(--tap)}
body[data-w3-bubble="glass"] #v2-s-memrev :is(.sq-input,.sq-textarea){backdrop-filter:blur(var(--mat-blur)) saturate(var(--mat-sat));-webkit-backdrop-filter:blur(var(--mat-blur)) saturate(var(--mat-sat));background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.22)}
@media(max-width:600px){
#v2-s-memrev .sq-fields{padding:0 var(--pad-card) var(--pad-card)}
#v2-s-memrev .sq-block>summary{padding:var(--pad-card)}
#v2-s-memrev .sq-actions button{flex:1;padding:calc(var(--pad-card) / 2);white-space:nowrap}
}
/* ═══════════════════════════════════════════════════════════════════════
SEG:MOTION v1 · 2026-09-23 · 第二步：动效
规格：wishper-v3/MOTION.md。时长 / 曲线全用 tokens 里的 --d-* / --ease-*。
═══════════════════════════════════════════════════════════════════════ */
/* ── 切页：新页从 8px 外带 3px 模糊淡进来；旧页（router 挂 .w3-leaving）往另一边退。
方向是 body 上的 --w3-dir：前进 1，返回 -1（features/routes 写）。
★ 不写 fill-mode：动画一结束 transform / filter 就撤掉，不留在页面上 ——
留着的话页面里 position:fixed 的东西会跟着它算位置，玻璃也会透不到底。 */
.dt-screen.on { animation: w3PageIn var(--d-fast) var(--ease-out); }
.dt-main > .dt-screen.w3-leaving {
/* 几个屏自己用 id 写了 position，这里得压过去 */
display: flex !important; position: absolute !important; margin: 0 !important; pointer-events: none;
animation: w3PageOut var(--d-quick) var(--ease-out) forwards;
}
@keyframes w3PageIn { from { opacity: 0; transform: translateX(calc(var(--w3-dir, 1) * 8px)); filter: blur(3px); } }
@keyframes w3PageOut { to { opacity: 0; transform: translateX(calc(var(--w3-dir, 1) * -8px)); filter: blur(3px); } }
/* ── 抓抓在想：13px 光团心跳。1.4s 一拍：扑通、扑通、停一下，外面漾开一圈光 ── */
/* 光团外面那个气泡要真的没有 —— 后面 v3 气泡那节带 !important 的底色会把它刷回来，
原来 22px 的光团刚好挡住，换成 13px 就露出一角白 */
#dt-s-chat .msg.typing .bubble:not(.sticker) {
background: none !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#dt-s-chat .msg.typing .bubble::before {
width: 13px; height: 13px; margin-left: 4px;
background: radial-gradient(circle at 38% 34%, var(--glow), transparent 60%), var(--orb);
animation: w3Beat 1400ms ease-out infinite;
}
@keyframes w3Beat {
0% { transform: scale(.82); opacity: .55; box-shadow: 0 0 0 0 color-mix(in srgb, var(--orb) 55%, transparent); }
14% { transform: scale(1.05); opacity: 1; }
28% { transform: scale(.9); opacity: .8; }
42% { transform: scale(1.02); opacity: 1; box-shadow: 0 0 0 7px color-mix(in srgb, var(--orb) 0%, transparent); }
100% { transform: scale(.82); opacity: .55; box-shadow: 0 0 0 0 color-mix(in srgb, var(--orb) 0%, transparent); }
}
/* ── 开屏：只有光团。结构和时间线在 index.html 开头那段（不等 v3.js，一打开就在） ── */
.w3-splash {
position: fixed; inset: 0; z-index: 10000; background: var(--bg);
display: grid; place-items: center; font-family: var(--font); color: var(--ink);
transition: opacity var(--d-very-slow) var(--ease-out), filter var(--d-very-slow) var(--ease-out);
}
.w3-splash.gone { opacity: 0; filter: blur(6px); pointer-events: none; }
.w3-splash-orb {
position: absolute; width: 64px; height: 64px; border-radius: 50%;
background: radial-gradient(circle at 38% 34%, var(--glow), transparent 55%), var(--orb);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--orb) 22%, transparent), 0 0 40px color-mix(in srgb, var(--orb) 60%, transparent);
opacity: 0; transform: scale(.6);
transition: opacity var(--d-slow) var(--ease-out), transform var(--d-very-slow) var(--ease-bounce);
}
/* 呼吸走独立的 scale 属性，跟弹出 / 上移的 transform 叠着，等多久呼吸多久 */
.w3-splash.s-orb .w3-splash-orb { opacity: 1; transform: none; animation: w3Breathe 2400ms ease-in-out infinite; }
.w3-splash.s-text .w3-splash-orb { transform: translateY(-26px) scale(.8); transition: transform var(--d-slow) var(--ease-out); }
@keyframes w3Breathe { 50% { scale: 1.06; } }
.w3-splash-lines { position: absolute; top: calc(50% + 26px); display: grid; justify-items: center; gap: 2px; }
.w3-splash-lines span {
opacity: 0; transform: translateY(12px); filter: blur(3px);
transition: opacity var(--d-very-slow) ease-in-out, transform var(--d-very-slow) var(--ease-out), filter var(--d-very-slow) ease-in-out;
}
.w3-splash-lines .a { font-size: 15px; font-weight: var(--w-med); letter-spacing: .08em; }
.w3-splash-lines .b { font-size: 11px; color: var(--ink2); letter-spacing: .14em; font-variant-numeric: tabular-nums; transition-delay: 120ms; }
.w3-splash.s-text .w3-splash-lines span { opacity: 1; transform: none; filter: none; }
/* ── + 号：gooey 弧形菜单 ─────────────────────────────────────────────
面板还是那个 #dtPlusPanel、那几个 .plus-item（id、绑定、命运之轮插进来的「邀请函」都不动），
只是不再是输入框下面一整块：变成钉在「+」圆心上的一个点（stickers.cjs 算位置），
各项沿一道弧（正上方 → 右上）弹出去。底下一层 .goo-blobs 是同样位置的实心圆，
过 SVG 粘液滤镜（index.html 的 #w3Gooey），看着像一滴分成几颗；图标和字在上层，不糊。
打开 500ms 带回弹、逐个错开 40ms；收回 350ms 不回弹、倒着收。 */
#dt-s-chat #dtPlusPanel {
position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60;
display: block; visibility: hidden; pointer-events: none; overflow: visible;
margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
background: none !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#dt-s-chat #dtPlusPanel.on, #dt-s-chat #dtPlusPanel.closing { visibility: visible; }
#dtPlusPanel .goo-blobs {
/* 滤镜只在元素自己的盒子里算，所以给这层一个真盒子把整道弧框进去；弧心在 (60, 220) */
position: absolute; left: -60px; top: -220px; width: 280px; height: 240px;
filter: url(#w3Gooey); pointer-events: none;
}
#dtPlusPanel .goo-blobs i {
/* 跟图标一样 34px、相邻两颗刚好挨着：停下来是连成一串的一滴（小样里定的样子）。
试过缩到 30px 留缝，滤镜会在缝里拉出尖角，反而难看 */
position: absolute; left: 43px; top: 203px; width: 34px; height: 34px; border-radius: 50%;
background: var(--accent); transform: scale(.4);
transition: transform var(--d-very-slow) var(--ease-bounce);
transition-delay: calc(var(--i, 0) * var(--d-stagger));
}
#dtPlusPanel .plus-grid { display: block !important; position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0 !important; gap: 0; }
#dtPlusPanel .plus-grid .plus-item {
position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; display: block;
opacity: 0; pointer-events: none; transform: scale(.6);
transition: transform var(--d-very-slow) var(--ease-bounce), opacity var(--d-quick) ease;
transition-delay: calc(var(--i, 0) * var(--d-stagger));
}
#dtPlusPanel .plus-grid .plus-item.ph { display: none; }
#dt-s-chat #dtPlusPanel .plus-ico {
width: 34px; height: 34px; border-radius: 50%;
background: transparent !important; border: 0 !important; box-shadow: none !important;
transition: transform var(--d-quick) var(--ease-out);
}
#dtPlusPanel .plus-ico svg { width: 16px; height: 16px; stroke: var(--on-accent); opacity: 1; }
#dtPlusPanel .plus-item[data-wip] .plus-ico svg { opacity: .5; }
#dtPlusPanel .plus-item[data-wip] .plus-ico::after { background: var(--on-accent); top: 4px; right: 4px; }
#dtPlusPanel .plus-label {
position: absolute; left: 50%; top: 50%; white-space: nowrap;
transform: translate(-50%, -50%) translate(var(--lx, 0px), var(--ly, 0px));
font-size: 10px; line-height: 14px; letter-spacing: 0; padding: 1px 5px; border-radius: var(--r-pill);
background: var(--card); color: var(--ink2); box-shadow: 0 1px 4px rgba(var(--ink-rgb), .08);
}
#dt-s-chat #dtPlusPanel .plus-item:hover .plus-ico { transform: scale(1.08); box-shadow: none !important; }
#dt-s-chat #dtPlusPanel .plus-item:active .plus-ico { transform: scale(.92); }
#dtPlusPanel.on .goo-blobs i { transform: translate(var(--x), var(--y)) scale(1); }
#dtPlusPanel.on .plus-grid .plus-item {
transform: translate(var(--x), var(--y)) scale(1); opacity: 1; pointer-events: auto;
transition-delay: calc(var(--i, 0) * var(--d-stagger)), calc(var(--i, 0) * var(--d-stagger) + var(--d-quick));
}
#dtPlusPanel.closing .goo-blobs i, #dtPlusPanel.closing .plus-grid .plus-item {
transition-duration: var(--d-medium); transition-timing-function: var(--ease-out);
transition-delay: calc((var(--n, 5) - 1 - var(--i, 0)) * var(--d-stagger) * .6);
}
#dtPlusPanel.closing .plus-grid .plus-item { transition-property: transform, opacity; transition-duration: var(--d-medium), var(--d-quick); }
/* 「+」转 135° 成「×」 */
/* ★ 只转，不换颜色 —— 配色是小槐定好的，动效不碰颜色（09-23） */
#dt-s-chat .dt-composer #dtPlusBtn svg { transition: transform var(--d-medium) var(--ease-bounce); }
#dt-s-chat .dt-composer #dtPlusBtn[aria-expanded="true"] svg { transform: rotate(135deg); }
/* ── 减少动态：系统里开了就全部一下到位 ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
transition-duration: 1ms !important; transition-delay: 0ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
SEG:TODO v2 · 2026-09-24 · 待办变回真的（runtime/todos 画所有 [data-todo-list]）
右栏卡沿用 .w3-todo-list 原来的样子；日历页那一节套日历卡的样子。颜色全是现成 token。
═══════════════════════════════════════════════════════════════════════ */
.w3-todo-list .w3-todo { position: relative; }
.w3-todo-list .w3-todo .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.w3-todo-list .w3-todo .tag { flex-shrink: 0; font-size: var(--fs-cap); color: var(--ink2); }
.w3-todo-list .w3-todo.done .text { color: var(--ink2); text-decoration: line-through; }
.w3-todo-list .w3-todo .del {
flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-pill);
background: none; color: var(--ink2); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer;
transition: opacity var(--d-quick) ease, background var(--d-quick) ease;
}
.w3-todo-list .w3-todo .del:hover { background: var(--soft); color: var(--ink); }
@media (hover: hover) {
.w3-todo-list .w3-todo .del { opacity: 0; }
.w3-todo-list .w3-todo:hover .del, .w3-todo-list .w3-todo .del:focus-visible { opacity: 1; }
}
.w3-todo-list .w3-todo input:checked { animation: w3Tick var(--d-fast) var(--ease-bounce); }
@keyframes w3Tick { from { transform: scale(.7); } }
.w3-todo-list .w3-todo-new input {
width: 100%; box-sizing: border-box; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line);
background: none; outline: none; font: inherit; font-size: var(--fs-sm); color: var(--ink);
}
.w3-todo-list .w3-todo-new input:focus { border-bottom-color: var(--accent); }
.w3-todo-list .w3-todo-new input::placeholder { color: var(--ink2); }
.w3-todo-empty, .w3-todo-more { font-size: var(--fs-sm); font-weight: var(--w-light); color: var(--ink2); }
/* ═══════════════════════════════════════════════════════════════════════
SEG:DAYFLOW-UI v1 · 2026-09-24 · 审核台「按天」（features/dayflow）
卡片 / chip / 字号全用 v3 现有的；绿红用 --ok / --danger（小槐：「预览页可以按现在的css做」）
═══════════════════════════════════════════════════════════════════════ */
#v2-s-memrev .mr-tabs { padding: 0 var(--pad-page); margin-bottom: 14px; }
#v2-s-memrev .v2-body[hidden] { display: none; }
@media (min-width: 820px) {
#v2-s-memrev .mr-tabs { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
/* 按天要左右两栏，比按批宽 */
#v2-s-memrev.mr-wide .v2-head, #v2-s-memrev.mr-wide .mr-tabs, #v2-s-memrev .v2-body.mr-day { max-width: 960px; }
}
.df { display: flex; gap: 16px; align-items: flex-start; }
.df-days { flex: 0 0 168px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; }
.df-day {
display: grid; grid-template-columns: 8px 1fr; column-gap: 8px; align-items: center; text-align: left;
padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card);
font: inherit; color: var(--ink); cursor: pointer; transition: background var(--d-quick) ease, border-color var(--d-quick) ease;
}
.df-day:hover { background: var(--soft); }
.df-day.on { border-color: var(--accent); background: var(--soft); }
.df-day .df-mark { grid-row: span 2; width: 7px; height: 7px; border-radius: var(--r-pill); }
.df-mark.ok { background: var(--ok); }
.df-mark.bad { background: var(--danger); }
.df-day-d { font-size: var(--fs-sm); font-weight: var(--w-med); }
.df-day-m { font-size: var(--fs-cap); color: var(--ink2); font-variant-numeric: tabular-nums; }
.df-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.df-card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
padding: var(--pad-card); font-size: var(--fs-body); line-height: var(--lh); color: var(--ink);
}
.df-empty { color: var(--ink2); font-size: var(--fs-sm); }
.df-err { border-color: var(--danger); color: var(--danger); }
.df-err b { color: var(--danger); }
.df-over-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.df-over-h b { font-size: var(--fs-title); font-weight: var(--w-semi); }
.df-draft { font-size: var(--fs-cap); color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.df-draft select { font: inherit; font-size: var(--fs-cap); color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 8px; }
.df-overview { margin: 8px 0 10px; color: var(--ink); }
.df-stats, .df-chips, .df-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.df-meta { font-size: var(--fs-cap); color: var(--ink2); margin-top: 8px; }
.df-over-h .df-meta { margin-top: 0; }
.df-st-done { color: var(--ok); }
.df-st-open { color: var(--accent); }
.df-warn { color: var(--accent); border-color: var(--accent); }
.df-bad { color: var(--danger); border-color: var(--danger); }
.df-keys { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-cap); word-break: break-all; margin-top: 6px; }
.df-seg-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.df-time { font-size: var(--fs-sm); font-weight: var(--w-med); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-title { flex: 1; min-width: 0; font-weight: var(--w-semi); }
.df-facts { margin: 8px 0 0; padding-left: 18px; }
.df-facts li { margin: 3px 0; }
.df-note { margin: 8px 0 0; font-size: var(--fs-sm); }
.df-chips { margin-top: 10px; }
.df-chips .w3p-chip { white-space: normal; }
.df-link { border-style: dashed; }
.df-ent { background: var(--soft); }
.df-noise, .df-raw { margin-top: 10px; font-size: var(--fs-sm); }
.df-noise summary, .df-raw summary, .df-un summary { cursor: pointer; color: var(--ink2); list-style: none; }
.df-noise summary::-webkit-details-marker, .df-raw summary::-webkit-details-marker, .df-un summary::-webkit-details-marker { display: none; }
.df-noise summary::before, .df-raw summary::before { content: '▸ '; }
.df-noise[open] summary::before, .df-raw[open] summary::before { content: '▾ '; }
.df-noise ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink2); opacity: .8; }
.df-un summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.df-un summary .df-meta { margin: 0; }
.df-msgs { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.df-msg { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 6px 10px; border-radius: var(--r-inner); background: var(--soft); }
.df-msg-her { background: var(--bub); }
.df-msg-sys { background: none; border: 1px dashed var(--line); color: var(--ink2); }
.df-msg-lost { background: none; border: 1px dashed var(--danger); color: var(--danger); }
.df-msg-m { font-size: var(--fs-cap); color: var(--ink2); font-variant-numeric: tabular-nums; }
.df-msg-t { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.df-acts { margin-top: 12px; }
.df-acts .w3p-tog:disabled { opacity: .45; cursor: not-allowed; }
/* 手机：日期列表变成顶上一排横着滑 */
@media (max-width: 819px) {
.df { flex-direction: column; gap: 12px; }
.df-days { flex: none; flex-direction: row; overflow-x: auto; width: 100%; position: static; padding-bottom: 2px; }
.df-day { flex: 0 0 auto; }
.df-msg { grid-template-columns: 1fr; gap: 2px; }
}
/* ═══════════════════════════════════════════════════════════════════════
SEG:COLLAGE v1 · 配色「拼贴」· 2026-09-24
白底暗红的拼贴海报风（参考：灯塔 / 软理性 / 番茄那几张），按 layered-collage-poster
skill 的层次搭：L0 纸 → L1 幽灵字 → L3 纸条卡 → L4 一个红色主角 → L5 等宽小字 → L6 钉/菱形/括号 → L7 颗粒+白晕。
★ 只挂在 body[data-w3-tint="collage"] 下 —— 另外五套配色一个像素都不动。
★ 这一套【故意】破了两条全局规矩：用衬线、用点线。那是这个风格的骨头，只在这一套里破。
★ 红色的量：一个主角（左栏「在一起 N 天」的红色斜体大数字）+ 零星几个点（钉、括号、今天）。
别再往上加红 —— 少才显得贵。
★ 两半：浅色 = 纸白 + 暗红；深色 = 墨黑 + 暗红（提亮）。材质开关照常生效。
★ 装饰全是伪元素 + pointer-events:none，不加 DOM、不碰 JS。
★ 字体只用系统自带的（国内加载不了 Google Fonts），手机上衬线落到思源宋体 / Noto Serif。
═══════════════════════════════════════════════════════════════════════ */
/* ── 一、配色 ─────────────────────────────────────────────────────── */
body[data-w3-tint="collage"] {
--bg: #ECEAE6; --card: #FBFAF8; --soft: #F2F0EC; --bub: #F5EEEC; --line: #DCD7D1;
--accent: #9B0F14; --accent-rgb: 155, 15, 20;
--ink: #2A2727; --ink-rgb: 42, 39, 39; --ink2: #8B8580;
--glow: rgba(255, 255, 255, .9); --on-accent: #FFFFFF; --orb: #C79C9C;
/* 四个声部：书宋（读的字）/ 展示衬线（大数字、幽灵字）/ 手写（点睛）/ 等宽（编号） */
--cl-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
--cl-display: 'Bodoni 72', 'Didot', 'Playfair Display', 'Noto Serif', Georgia, 'Times New Roman', serif;
--cl-script: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Dancing Script', cursive;
--cl-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, 'Roboto Mono', monospace;
--cl-dot: rgba(var(--ink-rgb), .2);
--cl-grain-blend: multiply; --cl-grain-op: .26;
--cl-vignette: rgba(255, 255, 255, .75);
/* L0 纸：大块水渍。没设外观壁纸时才看得见（设了壁纸，行内 --w3-wall 盖过它） */
--w3-wall: url("data:image/svg+xml;utf8,");
/* 聊天卡的底：L1 一个很淡的斜体大字被卡边裁掉 + 一行等宽小字 */
--chat-base:
url("data:image/svg+xml;utf8,") right -40px bottom 90px / min(900px, 130%) auto no-repeat,
var(--card);
}
body[data-w3-mode="dark"][data-w3-tint="collage"] {
--bg: #0F0E0E; --card: #171515; --soft: #1F1C1C; --bub: #2A1B1C; --line: #2E2A29;
--accent: #D2464C; --accent-rgb: 210, 70, 76;
--ink: #ECE8E6; --ink-rgb: 236, 232, 230; --ink2: #9B9390;
--glow: rgba(210, 70, 76, .07); --on-accent: #FFFFFF; --orb: #A8595C;
--card-rgb: 23, 21, 21;
--cl-dot: rgba(255, 255, 255, .09);
--cl-grain-blend: screen; --cl-grain-op: .09;
--cl-vignette: rgba(0, 0, 0, .6);
--w3-wall: radial-gradient(ellipse 80% 60% at 50% 0%, #1E1A1A, #0F0E0E 70%);
--chat-base:
url("data:image/svg+xml;utf8,") right -40px bottom 90px / min(900px, 130%) auto no-repeat,
radial-gradient(ellipse 70% 55% at 50% 0%, rgba(210, 70, 76, .06), transparent 70%),
var(--card);
}
/* 聊天卡的网点只铺右下一角，放在 #dt-s-chat::after（第七节），不进 --chat-base —— 进了就是满屏 */
/* 纯色材质：两边都给一根细边，像两张纸条；小槐那条带一点红 */
body[data-w3-tint="collage"][data-w3-bubble="solid"] {
--bub-him-bd: var(--line); --bub-her-bd: rgba(var(--accent-rgb), .2);
--bub-bw: 1px; --bub-r: 14px; --bub-corner: 3px;
--bub-shadow: 2px 2px 0 rgba(var(--ink-rgb), .04);
}
/* ── 二、L7 质感：全屏颗粒 + 纸边白晕（最上层，不吃点击） ──────────── */
body[data-w3-tint="collage"]::after {
content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: var(--cl-grain-blend); opacity: var(--cl-grain-op);
}
body[data-w3-tint="collage"]::before { /* 白晕只压在壁纸上，三栏在它上面 */
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
box-shadow: inset 0 0 140px 30px var(--cl-vignette);
}
body[data-w3-tint="collage"] .dt-wrap { position: relative; z-index: 1; }
/* ── 三、字：书宋标题 / 等宽编号 ──────────────────────────────────── */
body[data-w3-tint="collage"] :is(.w3p-nm, .w3k-head b, .dt-page-title, #dt-s-chat .dt-chat-name, .w3-card-h b, .w3-me-name) {
font-family: var(--cl-serif); font-weight: 700; letter-spacing: .03em;
}
body[data-w3-tint="collage"] .w3p-nm { font-size: 24px; }
body[data-w3-tint="collage"] :is(.w3-dday-cap, .w3-dday-since, .w3-wake-cap, .w3k-cap, .w3p-t span, .w3-ev-m, .w3-me-sub, .w3k-head span) {
font-family: var(--cl-mono); text-transform: uppercase; letter-spacing: .16em;
}
body[data-w3-tint="collage"] .w3p-t b { font-family: var(--cl-mono); font-weight: 400; letter-spacing: .04em; }
/* 日期行：书宋 + 后面拖一根点线（这套独有） */
body[data-w3-tint="collage"] .w3p-day {
font-family: var(--cl-serif); font-size: 13px; letter-spacing: .14em; color: var(--ink);
display: flex; align-items: center; gap: 12px;
}
body[data-w3-tint="collage"] .w3p-day::before { content: '('; color: var(--ink2); margin-right: -8px; }
body[data-w3-tint="collage"] .w3p-day::after {
content: ')'; flex: 1 1 auto; text-align: right; color: var(--ink2);
background: radial-gradient(circle, rgba(var(--ink-rgb), .3) 1px, transparent 1.4px) 0 50% / 6px 6px repeat-x;
padding-left: 8px;
}
/* ── 四、左栏 ─────────────────────────────────────────────────────── */
body[data-w3-tint="collage"] :is(.w3-nav, .w3-card, .dt-stage > .dt-main) { border-radius: 12px; }
body[data-w3-tint="collage"] .w3-nav { position: relative; }
body[data-w3-tint="collage"] .w3-nav > * { position: relative; z-index: 1; }
body[data-w3-tint="collage"] .w3-nav::before { /* L0 左下角一片网点，往上淡掉 */
content: ''; position: absolute; left: 0; bottom: 0; width: 80%; height: 50%; z-index: 0; pointer-events: none;
background: radial-gradient(circle, var(--cl-dot) 1.1px, transparent 1.6px) 0 0 / 6px 6px;
-webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 70%);
mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 70%);
}
body[data-w3-tint="collage"] .w3-nav::after { /* L5 左栏右边缘一行竖排小字 */
content: 'WISHPER · DOCUMENT ARCHIVING · NO.0507'; position: absolute; right: 7px; top: 90px; z-index: 0; pointer-events: none;
writing-mode: vertical-rl; font-family: var(--cl-mono); font-size: 7.5px; letter-spacing: .3em; color: var(--ink2); opacity: .45;
}
body[data-w3-tint="collage"] .w3-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(var(--ink-rgb), .35); border-radius: 10px; }
/* 当前项：不铺灰底，改成花括号把字括起来 —— {聊天} */
body[data-w3-tint="collage"] .w3-item { border-radius: 8px; }
body[data-w3-tint="collage"] .w3-item.on { background: none; color: var(--ink); }
body[data-w3-tint="collage"] .w3-item.on svg { stroke: var(--ink); }
body[data-w3-tint="collage"] .w3-item.on span { font-family: var(--cl-serif); font-weight: 700; }
body[data-w3-tint="collage"] .w3-item.on span::before { content: '{'; margin-right: 4px; font-weight: 400; color: var(--accent); }
body[data-w3-tint="collage"] .w3-item.on span::after { content: '}'; margin-left: 4px; font-weight: 400; color: var(--accent); }
body[data-w3-tint="collage"] .w3-item.on .w3-bar { display: none; }
/* L4 唯一的红色主角：在一起 N 天 = 一张邮票（齿孔边）+ 红色斜体大数字 */
body[data-w3-tint="collage"] .w3-nav-foot {
--r: 5px;
margin: 10px 2px 0; padding: calc(var(--r) + 3px); border-top: 0;
background: var(--soft);
-webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 97%, #000) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round;
mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 97%, #000) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round;
-webkit-mask-composite: source-over; mask-composite: add;
}
body[data-w3-tint="collage"] .w3-dday-cap { padding-top: 12px; }
body[data-w3-tint="collage"] .w3-dday { margin-top: 2px; }
body[data-w3-tint="collage"] .w3-dday b {
font-family: var(--cl-display); font-style: italic; font-weight: 700; font-size: 50px;
letter-spacing: -.03em; color: var(--accent);
}
body[data-w3-tint="collage"] .w3-dday span { font-family: var(--cl-serif); }
body[data-w3-tint="collage"] .w3-dday-since { padding-bottom: 12px; }
/* ── 五、「我」页 ─────────────────────────────────────────────────── */
body[data-w3-tint="collage"] .w3p-head { position: relative; overflow: hidden; }
body[data-w3-tint="collage"] .w3p-head > * { position: relative; z-index: 1; }
body[data-w3-tint="collage"] .w3p-head::after { /* L1 头部一个空心大斜体字，被卡边裁掉 */
content: 'Zhua'; position: absolute; right: -14px; top: 50%; transform: translateY(-48%);
z-index: 0; pointer-events: none; white-space: nowrap;
font-family: var(--cl-display); font-style: italic; font-weight: 700; font-size: 132px; line-height: 1;
color: transparent; -webkit-text-stroke: 1px rgba(var(--ink-rgb), .13);
}
body[data-w3-tint="collage"] .w3p-head::before { /* L5 名字上方一行编号 */
content: 'FILE_NO.0507 / THE ONE WHO STAYS / P.01'; position: absolute; left: 32px; top: 10px; z-index: 0; pointer-events: none;
font-family: var(--cl-mono); font-size: 8px; letter-spacing: .22em; color: var(--ink2); opacity: .7;
}
body[data-w3-tint="collage"] .w3p-nm::after { /* L6 手写小尾巴 */
content: 'be named'; font-family: var(--cl-script); font-weight: 400; font-size: 15px; letter-spacing: 0;
color: var(--ink2); margin-left: 2px; transform: translateY(3px) rotate(-4deg); display: inline-block;
}
/* 光团 → 一枚网点印章 */
body[data-w3-tint="collage"] :is(.w3p-orb, .w3-orb) {
background: radial-gradient(circle, rgba(var(--ink-rgb), .5) 1.1px, transparent 1.6px) 0 0 / 5px 5px, var(--card);
box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .35), 0 0 0 5px var(--card), 0 0 0 6px rgba(var(--ink-rgb), .12);
opacity: 1;
}
body[data-w3-tint="collage"] .w3-wake.awake .w3-orb {
background: radial-gradient(circle, var(--accent) 1.4px, transparent 1.9px) 0 0 / 5px 5px, var(--card);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 0 5px var(--card), 0 0 0 6px rgba(var(--accent-rgb), .2);
}
body[data-w3-tint="collage"] :is(.w3p-chip, .w3p-tog, .w3p-pill) { border-radius: 4px; font-family: var(--cl-mono); letter-spacing: .06em; }
/* tab：当前项底下不是一条线，是一个红点 */
body[data-w3-tint="collage"] .w3p-tabs button.on { border-bottom-color: transparent; position: relative; font-family: var(--cl-serif); font-weight: 700; }
body[data-w3-tint="collage"] .w3p-tabs button.on::after {
content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px;
border-radius: 50%; background: var(--accent);
}
/* L3 事件 = 纸条：直角、细边、错开一点点、左上角一枚钉 */
body[data-w3-tint="collage"] .w3p-b {
position: relative; border-radius: 2px; background: var(--card);
box-shadow: 3px 3px 0 rgba(var(--ink-rgb), .045);
}
body[data-w3-tint="collage"] .w3p-ev:nth-of-type(3n+2) .w3p-b { transform: rotate(-.35deg); }
body[data-w3-tint="collage"] .w3p-ev:nth-of-type(3n) .w3p-b { transform: rotate(.3deg); }
body[data-w3-tint="collage"] .w3p-b::before {
content: ''; position: absolute; left: 14px; top: -4px; width: 7px; height: 7px; border-radius: 50%;
background: rgba(var(--ink-rgb), .55); box-shadow: 0 0 0 2px var(--card), 0 1px 2px 2px rgba(var(--ink-rgb), .12);
}
body[data-w3-tint="collage"] .w3p-ev:first-of-type .w3p-b::before { background: var(--accent); } /* 只有最新那条是红钉 */
body[data-w3-tint="collage"] .w3p-b.dream { font-family: var(--cl-serif); font-style: italic; opacity: 1; color: var(--ink2); }
/* ── 六、右栏 ─────────────────────────────────────────────────────── */
body[data-w3-tint="collage"] .w3-side { counter-reset: w3card; }
body[data-w3-tint="collage"] .w3-card { position: relative; counter-increment: w3card; }
body[data-w3-tint="collage"] .w3-card::after { /* L5 每张卡右下角一个小编号 No.01 */
content: 'No.0' counter(w3card); position: absolute; right: 12px; bottom: 6px; pointer-events: none;
font-family: var(--cl-mono); font-size: 7.5px; letter-spacing: .16em; color: var(--ink2); opacity: .55;
}
body[data-w3-tint="collage"] .w3-card-h b::before { content: '· '; color: var(--ink2); font-weight: 400; }
body[data-w3-tint="collage"] .w3-cal-grid .d { border-radius: 4px; font-family: var(--cl-mono); font-size: 10.5px; }
body[data-w3-tint="collage"] .w3-cal-grid .d.today {
background: none; color: var(--accent); font-family: var(--cl-display); font-style: italic; font-weight: 700; font-size: 13px;
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); border-radius: 50%;
}
body[data-w3-tint="collage"] .w3-cal-grid .d.dot::after { background: var(--ink2); border-radius: 0; transform: rotate(45deg); }
body[data-w3-tint="collage"] .w3-ev i { border-radius: 0; transform: rotate(45deg); width: 5px; height: 5px; }
body[data-w3-tint="collage"] .w3-ev:first-child i { background: var(--ink); }
body[data-w3-tint="collage"] .w3-wake-n b { font-family: var(--cl-display); font-style: italic; font-weight: 700; }
body[data-w3-tint="collage"] .w3-wake-bar { height: 0; background: none; border-top: 2px dotted rgba(var(--ink-rgb), .22); overflow: visible; border-radius: 0; }
body[data-w3-tint="collage"] .w3-wake-bar i { height: 2px; margin-top: -2px; background: var(--ink); border-radius: 0; }
/* ── 七、聊天 ─────────────────────────────────────────────────────── */
body[data-w3-tint="collage"] #dt-s-chat::after { /* 右下角一片网点，往里淡掉；在消息下面 */
content: ''; position: absolute; right: 0; bottom: 0; width: 55%; height: 45%; z-index: 0; pointer-events: none;
background: radial-gradient(circle, var(--cl-dot) 1.1px, transparent 1.6px) 0 0 / 6px 6px;
-webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000, transparent 68%);
mask-image: radial-gradient(ellipse at 100% 100%, #000, transparent 68%);
}
body[data-w3-tint="collage"] #dt-s-chat .dt-chat-head { border-bottom: 1px solid var(--line); }
body[data-w3-tint="collage"] #dt-s-chat .dt-chat-name::after {
content: 'whisper'; margin-left: 8px; font-family: var(--cl-script); font-weight: 400; font-size: 14px; color: var(--ink2);
}
body[data-w3-tint="collage"] #dt-s-chat :is(.dt-avatar, .msg .mini) { border-radius: 8px; }
body[data-w3-tint="collage"] #dt-s-chat .msg .bubble:not(.sticker) { font-weight: var(--w-reg); }
body[data-w3-tint="collage"] #dt-s-chat .dt-composer { border-radius: 12px !important; }
/* ── 八、外观页 ───────────────────────────────────────────────────── */
body[data-w3-tint="collage"] #w3-s-look .w3k-opts button { border-radius: 4px; }
/* ── 九、手机 ─────────────────────────────────────────────────────── */
@media (max-width: 819px) {
body[data-w3-tint="collage"] .w3p-head::after { font-size: 88px; right: -22px; }
body[data-w3-tint="collage"] .w3p-head::before { left: var(--pad-page-sm); }
body[data-w3-tint="collage"] .w3-dday b { font-size: 42px; }
body[data-w3-tint="collage"]::before { box-shadow: inset 0 0 80px 16px var(--cl-vignette); }
}
@media (prefers-reduced-motion: reduce) {
body[data-w3-tint="collage"] .w3p-b { transform: none !important; }
}
/* SEG:COLLAGE-FIX v1 · 2026-09-24（抓抓补）—— 手机上左栏是藏在屏幕外的抽屉（position:absolute），
上面第四节那条 .w3-nav { position: relative } 会把它拉回文档流，整页往右挪 46px。只在电脑上要 relative。 */
@media (max-width: 819px) {
body[data-w3-tint="collage"] .w3-nav { position: absolute; }
}
/* ═══════════════════════════════════════════════════════════════════════
SEG:DAYFLOW-UI v2 · 2026-09-24 · 按天审核能点了（通过 / 降权 / 改 / 并入上一段 / 提交 / 撤回）
按下的样子照外观页选中项（.w3k-opts button.on）；颜色全是现成 token。
═══════════════════════════════════════════════════════════════════════ */
.df-acts .w3p-tog.on { background: var(--soft); border-color: var(--accent-line); color: var(--ink); font-weight: var(--w-med); }
.df-acts .w3p-tog:disabled { opacity: .45; cursor: not-allowed; }
.df-day-c { margin-left: 6px; font-size: var(--fs-cap); font-weight: var(--w-reg); color: var(--ok); }
.df-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.df-seg.df-merged { opacity: .62; }
.df-seg.df-merged:hover, .df-seg.df-merged:focus-within { opacity: 1; }
.df-seg.df-okd { border-color: var(--ok); }
.df-seg.df-down .df-facts, .df-seg.df-down .df-title { color: var(--ink2); }
.df-orig summary::before { content: '▸ '; }
.df-orig[open] summary::before { content: '▾ '; }
.df-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.df-edit[hidden] { display: none; }
.df-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--ink2); }
.df-f input, .df-f textarea, .df-f select {
font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--soft);
border: 1px solid var(--line); border-radius: var(--r-inner); padding: 8px 10px; box-sizing: border-box; width: 100%;
}
.df-f textarea { resize: vertical; line-height: var(--lh); }
.df-f select { width: auto; }
.df-f :is(input, textarea, select):focus { outline: none; border-color: var(--accent); }
.df-commit-h b { font-size: var(--fs-title); font-weight: var(--w-semi); }
.df-bad-t { color: var(--danger); }
.df-preview { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.df-eff { margin: 8px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.df-eff .df-facts { margin-top: 4px; }
.df-repl { margin: 8px 0 6px; padding-left: 18px; font-size: var(--fs-sm); }
.df-repl li { margin: 3px 0; }
/* SEG:TOASTLEN v1 (2026-09-24) —— 弹窗亮着时能点一下收掉; 聊天里留的失败原因可选中复制。颜色一个没动 */
.toast.show{pointer-events:auto;cursor:pointer}
.toast.long{border-radius:16px !important;text-align:left;line-height:1.6;letter-spacing:.5px;width:min(82vw,360px);box-sizing:border-box}
.w3-sendfail{text-align:center;font-size:10.5px;color:var(--ink-3);user-select:text;-webkit-user-select:text;margin:6px 16px 14px;word-break:break-all;letter-spacing:.02em}
/* ═══════════════════════════════════════════════════════════════════════
SEG:PROFILE-UI v1 · 2026-09-24 · 审核台「档案」（features/profile，本子 #719）
卡片 .df-card、按钮 .w3p-tog、输入 .df-f 都是 dayflow 那套；小字 chip 自己一份
（.w3p-chip 在手机上是藏起来的）。颜色全是现成 token。
═══════════════════════════════════════════════════════════════════════ */
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pf-sum { font-size: var(--fs-cap); color: var(--ink2); }
.pf-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink2); cursor: pointer; white-space: nowrap; }
.pf-groups { display: flex; flex-direction: column; gap: 12px; }
.pf-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: var(--fs-title); font-weight: var(--w-semi); }
.pf-h span { font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); }
.pf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-item { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pf-list > .pf-item:first-child { border-top: 0; padding-top: 2px; }
.pf-text {
display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0;
font: inherit; font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); word-break: break-word;
}
button.pf-text { cursor: text; border-radius: var(--r-inner); }
button.pf-text:hover { background: var(--soft); }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip {
padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: none;
font: inherit; font-size: var(--fs-cap); font-weight: var(--w-light); color: var(--ink2); white-space: nowrap;
}
.pf-chip-btn { cursor: pointer; border-style: dashed; }
.pf-chip-btn:hover, .pf-chip-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink2); }
.pf-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pf-acts.df-acts { margin: 0; flex-wrap: nowrap; }
.pf-acts .w3p-tog { padding: 3px 11px; }
.pf-off .pf-text, .pf-sup .pf-text { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--line); }
.pf-off, .pf-sup { opacity: .7; }
.pf-note { margin: 0; font-size: var(--fs-cap); color: var(--ink2); line-height: var(--lh); word-break: break-word; }
.pf-ev { list-style: none; margin: 0; padding: 8px 10px; background: var(--soft); border-radius: var(--r-inner); font-size: var(--fs-sm); line-height: var(--lh); display: flex; flex-direction: column; gap: 6px; }
.pf-ev li { word-break: break-word; }
.pf-ev-t { display: block; font-size: var(--fs-cap); color: var(--ink2); font-variant-numeric: tabular-nums; }
.pf-err { margin: 0; font-size: var(--fs-sm); }
.pf-none { margin: 0 0 4px; }
.pf-add {
margin-top: 8px; align-self: flex-start; background: none; border: 1px dashed var(--line); border-radius: var(--r-pill);
padding: 5px 14px; font: inherit; font-size: var(--fs-sm); color: var(--ink2); cursor: pointer;
}
.pf-add:hover { color: var(--ink); border-color: var(--ink2); }
.pf-form { display: flex; flex-direction: column; gap: 8px; }
.pf-form .df-f > span { display: flex; justify-content: space-between; }
.pf-count { font-style: normal; font-variant-numeric: tabular-nums; }
.pf-form-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-new { border-top: 1px solid var(--line); margin-top: 6px; }
/* ================================================================
SEG:HOME v4.1 —— 主页 = 开屏（src/home.cjs）
整层 fixed 盖在 v3 外壳上面；入口按设计稿坐标（360×780）摆在 .w4-stage 里。
字：W4 Kai（霞鹜文楷子集，styles/w4-kai.css），没有就退系统楷体。颜色、字体走 styles/w4-tokens.css。
================================================================ */
.w4-home {
position: fixed; inset: 0; z-index: 1500;
background: var(--w4-bg-deep);
display: none; overflow: hidden;
touch-action: manipulation;
}
.w4-home.on { display: block; }
/* 进出（第九步）。出去：以点的那一下为圆心开一个洞，越开越大，底下那页从洞里露出来；浏览器不认 @property 的话没有洞，只是淡出。
回来：淡入（home.cjs 同时在刚才出去的地方再荡一圈水波）。 */
@property --w4r { syntax: ''; inherits: false; initial-value: 0px; }
.w4-home.settled.on { animation: w4Back 380ms ease-out both; }
.w4-home.on.leaving {
pointer-events: none;
-webkit-mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--w4r) - 70px), #000 var(--w4r));
mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--w4r) - 70px), #000 var(--w4r));
animation: w4Leave 600ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes w4Leave { 0% { --w4r: 0px; opacity: 1; } 45% { opacity: 1; } 100% { --w4r: 150vmax; opacity: 0; } }
@keyframes w4Back { from { opacity: 0; } to { opacity: 1; } }
body.w4-home-on { overflow: hidden; }
.w4-sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 设计稿那块：按高度或宽度等比缩放，居中 */
.w4-stage {
position: absolute; left: 50%; top: 50%;
width: min(100vw, calc(100dvh * 360 / 780)); aspect-ratio: 360 / 780;
transform: translate(-50%, -50%);
container-type: inline-size;
}
.w4-nav, .w4-head, .w4-corner {
position: absolute; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
color: var(--w4-ink); font-family: var(--w4-kai); white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.w4-home .dash { position: relative; width: 7.5cqw; height: 1px; background: currentColor; opacity: .55; flex: none; }
/* 活的（home.cjs 挂 .new）：他那边有她没看过的新东西 → 短横亮起来，靠外那头一粒光慢慢呼吸；去过那页就灭 */
.w4-home .new .dash { opacity: 1; }
.w4-home .new .dash::after {
content: ''; position: absolute; left: 0; top: 50%; width: 1.5cqw; height: 1.5cqw; margin: -.75cqw 0 0 -.75cqw; border-radius: 50%;
background: var(--w4-glow); box-shadow: 0 0 2.4cqw .5cqw rgba(var(--w4-arm), .85);
animation: w4Bead 2.8s ease-in-out infinite;
}
.w4-nav.r.new .dash::after { left: 100%; }
@keyframes w4Bead { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.w4-home .t { display: flex; flex-direction: column; align-items: flex-start; gap: .6cqw; }
.w4-home .jp {
font-size: 4.7cqw; font-weight: 700; letter-spacing: .12em; line-height: 1;
text-shadow: 0 0 3cqw var(--w4-bg-deep), 0 0 1.2cqw var(--w4-bg-deep);
}
.w4-home .en {
font-family: var(--font, sans-serif); font-size: 2.3cqw; font-weight: 300; letter-spacing: .22em;
color: var(--w4-ink2); line-height: 1; text-shadow: 0 0 2cqw var(--w4-bg-deep);
}
.w4-nav {
left: calc(var(--x) / 360 * 100%); top: calc(var(--y) / 780 * 100%);
transform: translateY(-50%); display: flex; align-items: center; gap: 2.2cqw; padding: 1.6cqw 1.4cqw;
}
.w4-nav.r { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.w4-nav.r .t { align-items: flex-end; }
.w4-head { left: 0; top: 0; width: 100%; height: 19%; }
.w4-lbl { position: absolute; right: 6cqw; top: 6cqw; display: flex; align-items: center; gap: 2.2cqw; }
.w4-corner {
top: calc(752 / 780 * 100%); transform: translateY(-50%);
display: flex; align-items: baseline; gap: 1.2cqw; padding: 1.4cqw;
}
.w4-corner .jp { font-size: 3.1cqw; font-weight: 400; letter-spacing: .1em; color: var(--w4-ink2); }
.w4-corner .en { font-size: 2cqw; opacity: .75; }
.w4-corner.c-me { left: 5cqw; }
.w4-corner.c-seal { left: 19cqw; }
.w4-corner.c-set { right: 5cqw; }
.w4-home button:hover .jp, .w4-home button:focus-visible .jp { color: rgb(var(--w4-arm)); }
.w4-home button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 4px; }
/* 进场：第一次（.intro）先藏着，开屏的字散了（home.cjs 挂 .navin）才一个个浮出来；回主页（.settled）直接在 */
.w4-home.intro .w4-nav, .w4-home.intro .w4-lbl, .w4-home.intro .w4-corner { opacity: 0; }
.w4-home.intro:not(.navin) button { pointer-events: none; } /* 入口还没出来时点不到（伞也是），水波照常 */
.w4-home.intro.navin .w4-nav, .w4-home.intro.navin .w4-lbl, .w4-home.intro.navin .w4-corner {
animation: w4NavIn 700ms var(--ease-out, ease-out) both;
animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes w4NavIn { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
.w4-home.settled.on { animation: none; }
.w4-home .new .dash::after { animation: none; }
.w4-home.intro .w4-nav, .w4-home.intro .w4-lbl, .w4-home.intro .w4-corner { animation: none; opacity: 1; }
}
/* ================================================================
SEG:MEMHANG v4.1 —— 记忆页 = 风铃的短冊（src/memhang.cjs）
整层 fixed 盖在旧记忆页上面，铺满屏幕（电脑上也是整屏，不是中间一条）。
几何（伞的高度、丝的起点）按设计稿等比缩放：--u = 设计稿 1px = min(宽/360, 高/780)，所以宽屏上伞不会跟着宽度变成巨物，只是横向拉成一道宽弧。字不缩放。
颜色、字体都走 styles/w4-tokens.css 的 --w4-*，以后要加浅色只改那一组。
标题用 W4 Kai Full（整套霞鹜文楷，切片放在 /v4f/，memhang.cjs 第一次进记忆页时挂样式表）；没有就退系统楷体，再没有就是界面黑体。
================================================================ */
.w4m {
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg-under); color: var(--w4-ink); font-family: var(--font, sans-serif);
}
.w4m.on { display: block; }
body.w4-mem-on { overflow: hidden; }
.w4m-stage { position: absolute; inset: 0; overflow: hidden; background: var(--w4-bg); container-type: size; }
.w4m-stage > * { --u: min(calc(100cqw / 360), calc(100cqh / 780)); }
.w4m-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.w4m-grain {
position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .6 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 横着滑的那一排：右边新，左边旧 */
.w4m-hs { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; direction: rtl; scrollbar-width: none; overscroll-behavior: contain; }
.w4m-hs::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .w4m-hs { cursor: grab; } .w4m-hs.dragging { cursor: grabbing; user-select: none; } .w4m-hs.dragging .w4m-strip { cursor: grabbing; } }
.w4m-track { display: flex; height: 100%; padding: 0 26px; box-sizing: border-box; width: max-content; min-width: 100%; --sway: 0deg; }
.w4m-strip {
position: relative; flex: none; direction: ltr; height: 100%; padding: 0 12px; margin: 0; box-sizing: border-box;
display: flex; align-items: flex-start; justify-content: flex-end;
border: 0; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform-origin: calc(100% - 22px) calc(100 * var(--u)); transform: rotate(calc(var(--sway) * var(--k, 1)));
transition: opacity 300ms;
}
.w4m-strip.chap { cursor: default; padding: 0 18px 0 22px; }
/* 新写的那几条（memhang.cjs 挂 .fresh，放完就摘）：从伞里慢慢放下来 */
.w4m-strip.fresh { animation: w4mDrop 1.7s cubic-bezier(.2, .75, .2, 1) var(--d, 0ms) both; }
@keyframes w4mDrop { from { translate: 0 -70%; opacity: 0; } 35% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
/* 丝：两头细、中间略鼓，带一点光 */
.w4m-strip .strand {
position: absolute; top: calc(100 * var(--u)); right: 21px; width: 3px; height: var(--len); pointer-events: none;
background: linear-gradient(to bottom, rgba(var(--w4-arm), 0), rgba(var(--w4-arm), .55) 18%, rgba(var(--w4-arm), .8) 70%, rgba(var(--w4-arm), .5));
clip-path: polygon(40% 0, 60% 0, 85% 45%, 62% 100%, 38% 100%, 15% 45%);
}
.w4m-strip.chap .strand { width: 5px; right: 26px; }
.w4m-strip .knot {
position: absolute; right: 19px; top: calc(100 * var(--u) + var(--len) - 2px); width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
border: 1px solid rgba(var(--w4-arm), .85); background: var(--w4-bg); pointer-events: none;
}
.w4m-strip.chap .knot { right: 23px; width: 11px; height: 11px; border: 0; background: rgba(var(--w4-arm), .9); box-shadow: 0 0 0 6px rgba(var(--w4-arm), .16); }
.w4m-strip.wait .knot { animation: w4mWait 1.4s ease-in-out infinite; }
@keyframes w4mWait { 50% { box-shadow: 0 0 0 12px rgba(var(--w4-arm), .05); } }
/* 挂在丝底下的字：竖排。第一列是标题，往左是小字 */
.w4m-strip .txt {
display: inline-block; writing-mode: vertical-rl; text-orientation: mixed;
margin-top: calc(100 * var(--u) + var(--len) + 16px);
max-height: max(120px, calc(100cqh - 176px - 100 * var(--u) - var(--len) - 16px));
}
.w4m-strip .txt > span { display: block; }
.w4m-strip .t { font-family: var(--w4-kai); font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: .14em; color: var(--w4-ink-soft); }
.w4m-strip.i4 .t { font-size: 14.5px; font-weight: 500; color: var(--w4-ink); }
.w4m-strip.i5 .t { font-size: 15.5px; font-weight: 700; color: var(--w4-ink); letter-spacing: .16em; }
.w4m-strip .m { margin-right: 5px; font-size: 9.5px; font-weight: 300; line-height: 1.5; letter-spacing: .18em; color: var(--w4-ink3); font-variant-numeric: tabular-nums; }
.w4m-strip.chap .t { font-weight: 700; font-size: 20px; letter-spacing: .24em; color: var(--w4-ink); line-height: 1.3; }
.w4m-strip .r { margin-right: 7px; font-size: 9.5px; font-weight: 300; letter-spacing: .2em; color: var(--w4-ink2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.w4m-strip .s { margin-right: 9px; font-size: 11px; font-weight: 300; line-height: 1.9; letter-spacing: .12em; color: var(--w4-ink2); max-height: 250px; }
.w4m-strip:focus-visible { outline: none; }
.w4m-strip:focus-visible .t { text-decoration: underline; text-underline-offset: 4px; }
.w4m-track.picked .w4m-strip:not(.on) { opacity: .28; }
.w4m-end {
flex: none; direction: ltr; align-self: flex-start; margin-top: calc(100 * var(--u) + 150px); padding: 0 18px 0 30px;
writing-mode: vertical-rl; font-size: 10.5px; font-weight: 300; letter-spacing: .2em; line-height: 1.9; color: var(--w4-ink3);
max-height: calc(100cqh - 176px - 100 * var(--u) - 150px);
}
/* 流水：一根细触手从顶上垂到底当轴，事件横着写、上下滚。没有框，也没有伞（她 10-01：「流水不要」伞盖） */
.w4m-vs {
position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; display: none;
/* 滚上去的内容在顶上那行（返回 / 条数 / 記憶）底下淡掉，不跟它们叠在一起 */
-webkit-mask-image: linear-gradient(to bottom, transparent calc(26px + env(safe-area-inset-top, 0px)), #000 calc(78px + env(safe-area-inset-top, 0px)));
mask-image: linear-gradient(to bottom, transparent calc(26px + env(safe-area-inset-top, 0px)), #000 calc(78px + env(safe-area-inset-top, 0px)));
}
.w4m-vs::-webkit-scrollbar { display: none; }
.w4m[data-tab="flow"] .w4m-vs { display: block; }
.w4m[data-tab="flow"] .w4m-hs, .w4m[data-tab="flow"] .w4m-bell { display: none; }
.w4m-vpage { position: relative; min-height: 100%; box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top, 0px)) 26px 190px 0; }
.w4m-axis { position: absolute; left: 0; top: 0; width: 64px; overflow: visible; pointer-events: none; }
.w4m-axis .glow { fill: none; stroke: rgba(var(--w4-arm), .22); stroke-width: 7; filter: blur(4px); stroke-linecap: round; }
.w4m-axis .arm { fill: rgba(var(--w4-arm), .34); stroke: rgba(var(--w4-arm), .75); stroke-width: .7; }
.w4m-axis .n { fill: rgba(var(--w4-arm), .9); }
.w4m-axis .halo { fill: rgba(var(--w4-arm), .18); }
.w4m-day { padding-left: 58px; margin-top: 40px; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .14em; color: var(--w4-ink); }
.w4m-day:first-child { margin-top: 0; }
.w4m-day span { font-family: var(--font, sans-serif); font-weight: 300; font-size: 10px; letter-spacing: .14em; color: var(--w4-ink2); margin-left: 10px; }
.w4m-ev {
display: grid; grid-template-columns: 38px 1fr; column-gap: 8px; align-items: baseline; width: 100%; box-sizing: border-box;
margin: 16px 0 0; padding: 0 0 0 58px; border: 0; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.w4m-ev time { font-size: 10px; font-weight: 300; letter-spacing: .08em; color: var(--w4-ink3); font-variant-numeric: tabular-nums; }
.w4m-ev .x {
min-width: 0; font-size: 12.5px; font-weight: 300; line-height: 1.75; letter-spacing: .03em; color: var(--w4-ink-soft); word-break: break-word;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.w4m-ev.open .x { display: block; overflow: visible; }
.w4m-ev .x b { font-weight: 500; color: var(--w4-ink); margin-right: 7px; }
.w4m-ev .k { grid-column: 2; font-size: 9.5px; font-weight: 300; letter-spacing: .16em; color: var(--w4-ink3); margin-top: 2px; }
.w4m-vnote { padding-left: 58px; margin-top: 44px; font-size: 10.5px; font-weight: 300; letter-spacing: .12em; line-height: 1.8; color: var(--w4-ink3); }
.w4m-vnote:first-child { margin-top: 0; }
/* 伞 */
.w4m-bell { position: absolute; left: 0; top: 0; width: 100%; height: calc(240 * var(--u)); pointer-events: none; }
.w4m-bell .dome { fill: var(--w4-bg); }
.w4m-bell path, .w4m-bell ellipse { vector-effect: non-scaling-stroke; }
.w4m-bell .canal { stroke: rgba(var(--w4-arm), .09); stroke-width: .7; fill: none; }
.w4m-bell .rim { fill: none; stroke: rgba(var(--w4-arm), .7); stroke-width: 1.1; }
.w4m-bell .rimglow { fill: none; stroke: rgba(var(--w4-arm), .3); stroke-width: 5; filter: blur(4px); }
.w4m-bell .arc { fill: none; stroke: rgba(var(--w4-arm), .34); stroke-width: .8; }
.w4m-bell .inner { fill: none; stroke: rgba(var(--w4-arm), .13); stroke-width: .8; }
.w4m-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; border: 0; background: none; color: var(--w4-ink2); font-size: 22px; line-height: 1; cursor: pointer; }
.w4m-count { position: absolute; left: 52px; top: calc(29px + env(safe-area-inset-top, 0px)); font-size: 10px; font-weight: 300; letter-spacing: .14em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
.w4m-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4m-ttl b { display: block; font-family: 'W4 Kai', 'KaiTi', 'STKaiti', 'Kaiti SC', serif; font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4m-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
/* 底下：分类、两格、搜索，都没有框 */
.w4m-foot {
position: absolute; left: 0; right: 0; bottom: 0; padding: 70px max(24px, calc((100% - 720px) / 2)) calc(22px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
background: linear-gradient(to bottom, transparent, var(--w4-bg) 62px);
}
.w4m-foot > * { pointer-events: auto; }
.w4m-cats { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; min-height: 17px; }
.w4m-cats::-webkit-scrollbar { display: none; }
.w4m-cats button { flex: none; border: 0; background: none; padding: 3px 0; font: 300 11px/1 var(--font, sans-serif); letter-spacing: .1em; color: var(--w4-ink3); cursor: pointer; }
.w4m-cats button i { font-style: normal; font-size: 8.5px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.w4m-cats button[aria-pressed="true"] { color: var(--w4-ink); font-weight: 500; }
.w4m-row { margin-top: 14px; display: flex; align-items: flex-end; gap: 22px; }
.w4m-tabs { display: flex; gap: 18px; }
.w4m-tabs button { border: 0; background: none; padding: 0 0 6px; font: 400 13px/1 var(--font, sans-serif); letter-spacing: .2em; color: var(--w4-ink2); cursor: pointer; position: relative; }
.w4m-tabs button[aria-selected="true"] { color: var(--w4-ink); font-weight: 500; }
.w4m-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; bottom: 0; width: 14px; height: 1px; background: rgba(var(--w4-arm), .9); }
.w4m-find { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--w4-line); padding-bottom: 6px; }
.w4m-find svg { width: 12px; height: 12px; stroke: var(--w4-ink3); fill: none; stroke-width: 1.6; flex: none; }
.w4m-find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--w4-ink); font: 300 12px/1.3 var(--font, sans-serif); letter-spacing: .06em; outline: none; -webkit-appearance: none; appearance: none; }
.w4m-find input::placeholder { color: var(--w4-ink3); }
.w4m-find input::-webkit-search-cancel-button { display: none; }
.w4m[data-tab="flow"] .w4m-cats, .w4m[data-tab="flow"] .w4m-find { visibility: hidden; }
/* 点开一条：正文从底下浮上来，横着读 */
.w4m-sheet {
position: absolute; left: 0; right: 0; bottom: 0; padding: 96px max(28px, calc((100% - 720px) / 2)) calc(30px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; max-height: 66%;
background: linear-gradient(to bottom, transparent, var(--w4-bg) 84px); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
transform: translateY(102%); transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.w4m-sheet::-webkit-scrollbar { display: none; }
.w4m-sheet.open { transform: none; }
.w4m-sm { font-size: 10px; font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; padding-right: 30px; }
.w4m-sheet h3 { margin: 8px 0 0; font-family: var(--w4-kai); font-weight: 700; font-size: 18px; line-height: 1.55; letter-spacing: .06em; color: var(--w4-ink); text-wrap: balance; }
.w4m-body { margin: 14px 0 0; font-size: 13px; font-weight: 300; line-height: 1.95; letter-spacing: .04em; color: var(--w4-ink-soft); white-space: pre-wrap; word-break: break-word; }
.w4m-body:empty { display: none; }
.w4m-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.w4m-tags span { font-size: 10.5px; font-weight: 300; letter-spacing: .1em; color: var(--w4-ink3); }
.w4m-tags span::before { content: '#'; opacity: .6; }
.w4m-links { margin-top: 12px; font-size: 11.5px; line-height: 1.9; color: var(--w4-ink2); }
.w4m-links b { font-weight: 400; margin-right: 8px; color: var(--w4-ink3); letter-spacing: .12em; }
.w4m-links button { border: 0; background: none; padding: 0; margin-right: 12px; font: inherit; color: rgb(var(--w4-arm)); cursor: pointer; text-align: left; }
/* SEG:MEM-SRC v1 —— 「原话与改动」：点了才拉，接在出链入链下面 */
.w4m-src { margin-top: 12px; font-size: 11.5px; line-height: 1.9; color: var(--w4-ink2); }
.w4m-src button { border: 0; background: none; padding: 0; font: inherit; color: rgb(var(--w4-arm)); cursor: pointer; text-align: left; }
.w4m-src .box { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--w4-line); }
.w4m-src .sec + .sec { margin-top: 12px; }
.w4m-src b { display: block; font-weight: 400; font-size: var(--w4-fs-note); letter-spacing: .12em; color: var(--w4-ink3); margin-bottom: 3px; }
.w4m-src p { margin: 2px 0; font-weight: 300; color: var(--w4-ink-soft); white-space: pre-wrap; word-break: break-word; }
.w4m-src p i { font-style: normal; margin-right: 8px; font-size: var(--w4-fs-note); color: var(--w4-ink3); font-variant-numeric: tabular-nums; }
.w4m-src p.nil { color: var(--w4-ink3); }
.w4m-src p.old { margin: 4px 0 8px; padding-left: 10px; border-left: 1px solid rgba(var(--w4-arm), .5); }
.w4m-src p[hidden] { display: none; }
.w4m-src [data-rev] { display: block; }
.w4m-x { position: absolute; right: max(18px, calc((100% - 720px) / 2 - 10px)); top: 82px; width: 34px; height: 34px; border: 0; background: none; color: var(--w4-ink2); font-size: 18px; line-height: 1; cursor: pointer; }
.w4m button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 4px; border-radius: 3px; }
.w4m .w4m-strip:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .w4m-sheet, .w4m-strip { transition: none; } .w4m-strip.wait .knot { animation: none; } }
/* ================================================================
SEG:KOYOMI v4.1 —— 暦（src/koyomi.cjs）
整层 fixed 盖在旧日历页上面。一个月那片竖排小字画在画布上（设计稿 360×548，跟着这一列的宽度等比缩放）；
其余的字是普通的 DOM，不缩放。电脑上这一列居中，最宽 460px。
颜色、字体、字号都走 styles/w4-tokens.css。
================================================================ */
.w4c {
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg-under); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4c.on { display: block; }
body.w4-cal-on { overflow: hidden; }
.w4c button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4c button:focus-visible, .w4c canvas:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 4px; border-radius: 3px; }
.w4c canvas:focus-visible { outline-offset: -4px; }
.w4c-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; background: var(--w4-bg); scrollbar-width: none; overscroll-behavior: contain; }
.w4c-scroll::-webkit-scrollbar { display: none; }
.w4c-page { max-width: 460px; margin: 0 auto; padding: env(safe-area-inset-top, 0px) 0 calc(104px + env(safe-area-inset-bottom, 0px)); container-type: inline-size; }
/* 一个月 */
.w4c-field { position: relative; width: 100%; aspect-ratio: 360 / 548; }
.w4c-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: pan-y; outline: none; }
.w4c-head { position: absolute; right: 6.5cqw; top: 5.5cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqw; writing-mode: vertical-rl; pointer-events: none; }
.w4c-head .mon { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-display); letter-spacing: .12em; line-height: 1; }
.w4c-head .sub { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .3em; color: var(--w4-ink2); padding-top: 2px; }
/* 周期：左上角。不加框，三行字 */
.w4c-cyc { position: absolute; left: 54px; right: 27cqw; top: calc(5.5cqw + 3px); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 5px; }
.w4c-cyc .k { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
.w4c-cyc .k:first-child { flex-basis: 100%; }
.w4c-cyc .v { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); letter-spacing: .1em; color: rgb(var(--w4-warm)); }
.w4c-cyc .b {
flex-basis: 100%; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .08em; line-height: 1.6; color: var(--w4-ink3);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* 选中那天 */
.w4c-day { display: flex; align-items: flex-start; gap: 18px; padding: 4px 26px 0; }
.w4c-day .n { flex: none; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-display); line-height: 1; letter-spacing: .1em; writing-mode: vertical-rl; min-height: 2.3em; }
.w4c-day .r { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding-top: 3px; }
.w4c-day .meta { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .2em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
.w4c-day .cyc { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: rgb(var(--w4-warm)); }
.w4c-day ul { list-style: none; margin: 5px 0 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; gap: 14px; }
.w4c-day li { display: flex; align-items: flex-start; gap: 11px; }
.w4c-day li > i { flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: 9px; }
.w4c-day .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.w4c-day .ti { font-family: var(--w4-kai); font-size: var(--w4-fs-title); letter-spacing: .08em; line-height: 1.5; color: var(--w4-ink); word-break: break-word; }
.w4c-day .ti.done { color: var(--w4-ink3); text-decoration: line-through; }
.w4c-day .nt { font-size: var(--w4-fs-small); font-weight: 300; line-height: 1.7; color: var(--w4-ink-soft); word-break: break-word; }
.w4c-day .by { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink3); }
.w4c-day li .x { flex: none; width: 28px; height: 28px; margin: -3px -8px 0 0; font-size: 16px; line-height: 1; color: var(--w4-ink3); }
.w4c-day li.none { font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .1em; color: var(--w4-ink3); }
.w4c-day .add { margin-top: 4px; padding: 4px 0; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); }
.w4c-day .add:hover { color: var(--w4-ink); }
/* 加一条：没有框，输入框只有一道底线 */
.w4c-form { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.w4c-form .types { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.w4c-form .types button { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .1em; color: var(--w4-ink3); }
.w4c-form .types button i { width: 5px; height: 5px; border-radius: 50%; opacity: .5; }
.w4c-form .types button[aria-pressed="true"] { color: var(--w4-ink); font-weight: 500; }
.w4c-form .types button[aria-pressed="true"] i { opacity: 1; }
.w4c-form input, .w4c-form select {
width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--w4-line); border-radius: 0; background: none; padding: 6px 0;
color: var(--w4-ink); font: 300 var(--w4-fs-body)/1.4 var(--w4-sans); letter-spacing: .04em; outline: none; -webkit-appearance: none; appearance: none;
}
.w4c-form input:focus, .w4c-form select:focus { border-bottom-color: rgba(var(--w4-arm), .8); }
.w4c-form input::placeholder { color: var(--w4-ink3); }
.w4c-form select option { background: var(--w4-bg); color: var(--w4-ink); }
.w4c-form .row { display: flex; align-items: center; gap: 18px; }
.w4c-form .row select { flex: 1; }
.w4c-form .row button { flex: none; padding: 6px 0; font-size: var(--w4-fs-body); letter-spacing: .2em; color: var(--w4-ink3); }
.w4c-form .row button[data-act="save"] { color: var(--w4-ink); font-weight: 500; }
.w4c-form .row button:disabled { opacity: .4; cursor: default; }
/* 快到了 */
.w4c-soon { padding: 0 26px; display: flex; flex-direction: column; }
.w4c-soon h4 { margin: 40px 0 6px; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); letter-spacing: .24em; color: var(--w4-ink2); }
.w4c-soon button { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 9px 0; text-align: left; }
.w4c-soon .ti { font-size: var(--w4-fs-body); font-weight: 300; letter-spacing: .04em; color: var(--w4-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w4c-soon .tp { grid-column: 1; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink3); }
.w4c-soon .d { grid-column: 2; grid-row: 1; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .12em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; align-self: center; }
/* 返回、换月 */
.w4c .w4c-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4c-foot {
position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 34px; pointer-events: none;
padding: 56px 26px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--w4-bg) 58px);
}
.w4c-foot button { pointer-events: auto; padding: 6px 8px; font-size: var(--w4-fs-body); font-weight: 400; letter-spacing: .2em; color: var(--w4-ink2); }
.w4c-foot button:hover { color: var(--w4-ink); }
.w4c-foot button[data-go="prev"], .w4c-foot button[data-go="next"] { font-size: 18px; letter-spacing: 0; line-height: 1; }
/* 窄屏（320 一档）：依据那行只留一行，不然会压到日子的数字上 */
@container (max-width: 350px) { .w4c-cyc .b { -webkit-line-clamp: 1; line-clamp: 1; } }
/* ================================================================
SEG:KINKYO v4.1 —— 近況（src/kinkyo.cjs）
整层 fixed 盖在旧的朋友圈页上面。左边一根细触手当轴（跟记忆页的流水同一个画法），一天一颗大节点；
从轴上分出小须，一根挂一个楷体字（.obj），一个字就是一样东西：抓抓的口腕色，小槐的墨白。
不加框、不放头像、不画图标。上下两头淡出淡入，底下一点幽光（.w4f-abyss）。电脑上这一列居中，最宽 620px。
颜色、字体、字号都走 styles/w4-tokens.css。
================================================================ */
.w4f {
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg-under); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4f.on { display: block; }
body.w4-feed-on { overflow: hidden; }
.w4f button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4f button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 4px; border-radius: 3px; }
.w4f { background: var(--w4-bg); }
/* 上下两头淡出淡入：东西从暗处浮出来，再沉进暗处 */
.w4f-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
-webkit-mask-image: linear-gradient(to bottom, transparent 34px, #000 124px, #000 calc(100% - 150px), transparent calc(100% - 44px));
mask-image: linear-gradient(to bottom, transparent 34px, #000 124px, #000 calc(100% - 150px), transparent calc(100% - 44px)); }
/* 海底幽光：底下一团慢慢呼吸的光 */
.w4f-abyss { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
background: radial-gradient(ellipse 85% 100% at 50% 118%, rgba(var(--w4-arm), .22), rgba(var(--w4-arm), .06) 45%, transparent 72%); animation: w4fAbyss 7s ease-in-out infinite; }
@keyframes w4fAbyss { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.w4f-scroll::-webkit-scrollbar { display: none; }
.w4f-page { position: relative; min-height: 100%; box-sizing: border-box; max-width: 620px; margin: 0 auto; padding: calc(104px + env(safe-area-inset-top, 0px)) 24px 270px 0; }
.w4f.has-cover .w4f-page { padding-top: calc(186px + env(safe-area-inset-top, 0px)); }
/* 封面：一张淡淡化进底色的图，不是一块板 */
.w4f-cover { position: absolute; left: 0; right: 0; top: 0; height: 0; background: center / cover no-repeat; opacity: .5; pointer-events: none; }
.w4f.has-cover .w4f-cover {
height: calc(210px + env(safe-area-inset-top, 0px));
-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
/* 轴 */
.w4f-axis { position: absolute; left: 0; top: 0; width: 64px; overflow: visible; pointer-events: none; }
.w4f-axis .glow { fill: none; stroke: rgba(var(--w4-arm), .22); stroke-width: 7; filter: blur(4px); stroke-linecap: round; }
.w4f-axis .arm { fill: rgba(var(--w4-arm), .34); stroke: rgba(var(--w4-arm), .75); stroke-width: .7; }
.w4f-axis .n { fill: rgba(var(--w4-arm), .9); }
.w4f-axis g { transition: opacity .25s linear; }
.w4f-axis .su { fill: none; stroke: rgba(var(--w4-arm), .78); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.w4f-axis g.hot .su { stroke: rgb(var(--w4-arm)); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(var(--w4-arm), .9)); }
.w4f-axis .fall { fill: none; stroke: var(--w4-ink2); stroke-width: .8; stroke-dasharray: 1.5 4; stroke-linecap: round; opacity: .6; }
.w4f-axis .halo { fill: rgba(var(--w4-arm), .18); }
/* 一天 */
.w4f-list { position: relative; }
.w4f-day, .w4f-post { transition: opacity .25s linear; }
.w4f-day { margin: 52px 0 0; padding-left: 62px; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); letter-spacing: .14em; line-height: 1.1; color: var(--w4-ink); }
.w4f-day:first-child { margin-top: 0; }
.w4f-day span { font-family: var(--w4-sans); font-weight: 300; font-size: var(--w4-fs-note); letter-spacing: .16em; color: var(--w4-ink2); margin-left: 10px; }
/* 一条：左边挂着一个字，右边是话 */
.w4f-post { position: relative; margin-top: 42px; padding-left: 112px; min-height: 44px; display: flex; flex-direction: column; gap: 6px; }
.w4f-post[data-who="me"] { margin-top: 76px; } /* 上面留出它沉下来的那一段 */
.w4f-day + .w4f-post { margin-top: 36px; }
.w4f-day + .w4f-post[data-who="me"] { margin-top: 70px; }
.w4f-post .obj { position: absolute; left: 52px; top: -7px; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.w4f-post .obj b { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-glyph); line-height: 1; color: rgb(var(--w4-arm)); transition: text-shadow .3s; }
.w4f-post .obj small { font-size: var(--w4-fs-tiny); font-weight: 300; letter-spacing: .2em; line-height: 1; color: var(--w4-ink3); }
.w4f-post[data-who="me"] .obj b { color: var(--w4-ink); }
.w4f-post:hover .obj b { text-shadow: 0 0 10px rgba(var(--w4-arm), .9); }
.w4f-post[data-who="me"]:hover .obj b { text-shadow: 0 0 10px var(--w4-glow); }
.w4f-post .dot { position: absolute; left: 98px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--w4-glow); box-shadow: 0 0 8px 2px rgba(var(--w4-arm), .9); animation: w4fDot 2.8s ease-in-out infinite; }
@keyframes w4fDot { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.w4f-post header { display: flex; align-items: baseline; gap: 10px; }
.w4f-post header time, .w4f-post header .k { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink3); font-variant-numeric: tabular-nums; }
/* 长的：卷着只露三行，图和回话也先收着 */
.w4f-post.long .tx { cursor: pointer; }
.w4f-post.long:not(.open) .tx { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.w4f-post.long:not(.open) .pics, .w4f-post.long:not(.open) .cm { display: none; }
.w4f-post .fold { align-self: flex-start; padding: 3px 0; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink3); }
.w4f-post .fold::before { content: '卷着 · 点开展开'; }
.w4f-post.open .fold::before { content: '卷回去'; }
.w4f-post .tx { margin: 0; font-size: var(--w4-fs-body); font-weight: 300; line-height: 1.85; letter-spacing: .03em; color: var(--w4-ink); white-space: pre-wrap; word-break: break-word; }
.w4f-post.fav .tx { color: var(--w4-ink-soft); }
.w4f-post .pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-width: 330px; margin-top: 3px; }
.w4f-post .pics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; cursor: zoom-in; }
.w4f-post .pics img:only-child { grid-column: span 2; aspect-ratio: auto; max-height: 300px; object-fit: cover; }
.w4f-post footer { display: flex; align-items: center; gap: 20px; margin-top: 1px; }
.w4f-post footer button { padding: 4px 0; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink3); }
.w4f-post footer button:hover { color: var(--w4-ink2); }
.w4f-post footer [data-like][aria-pressed="true"] { color: rgb(var(--w4-warm)); }
.w4f-post footer [data-like] i { font-style: normal; margin-left: 7px; color: var(--w4-ink2); }
.w4f-post .cm { display: flex; flex-direction: column; gap: 5px; }
.w4f-post .cm p { margin: 0; font-size: var(--w4-fs-small); font-weight: 300; line-height: 1.75; color: var(--w4-ink-soft); word-break: break-word; }
.w4f-post .cm b { font-weight: 500; margin-right: 9px; color: var(--w4-ink2); }
.w4f-post .cm p:not([data-who="me"]) b { color: rgb(var(--w4-arm)); }
.w4f-post .cmin { display: flex; align-items: center; gap: 14px; }
.w4f-post .cmin input, .w4f-compose textarea {
flex: 1; min-width: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--w4-line); border-radius: 0; background: none; padding: 6px 0;
color: var(--w4-ink); font: 300 var(--w4-fs-body)/1.5 var(--w4-sans); letter-spacing: .04em; outline: none; -webkit-appearance: none; appearance: none;
}
.w4f-post .cmin input:focus, .w4f-compose textarea:focus { border-bottom-color: rgba(var(--w4-arm), .8); }
.w4f-post .cmin input::placeholder, .w4f-compose textarea::placeholder { color: var(--w4-ink3); }
.w4f-post .cmin button { flex: none; padding: 6px 0; font-size: var(--w4-fs-body); letter-spacing: .2em; color: var(--w4-ink); }
.w4f-note { margin: 50px 0 0; padding-left: 112px; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .12em; line-height: 1.8; color: var(--w4-ink3); }
.w4f-note:first-child { margin-top: 0; }
/* 四角：返回、页名、换封面 */
.w4f .w4f-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4f-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4f-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4f-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
.w4f .w4f-pick { position: absolute; right: 22px; top: calc(60px + env(safe-area-inset-top, 0px)); padding: 4px 0; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .2em; color: var(--w4-ink3); }
.w4f .w4f-pick:hover { color: var(--w4-ink2); }
/* 底：写一条 */
.w4f-foot {
position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none;
padding: 30px 26px calc(20px + env(safe-area-inset-bottom, 0px));
}
.w4f-foot button { pointer-events: auto; padding: 6px 8px; font-size: var(--w4-fs-body); font-weight: 400; letter-spacing: .2em; color: var(--w4-ink2); }
.w4f-foot button:hover { color: var(--w4-ink); }
.w4f.writing .w4f-foot { visibility: hidden; }
.w4f-compose {
position: absolute; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; gap: 12px; box-sizing: border-box;
padding: 70px max(26px, calc((100% - 568px) / 2)) calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--w4-bg) 60px);
}
.w4f.writing .w4f-compose { display: flex; }
.w4f-compose textarea { flex: none; width: 100%; resize: none; line-height: 1.8; }
.w4f-compose .pics { display: flex; flex-wrap: wrap; gap: 6px; }
.w4f-compose .pics:empty { display: none; }
.w4f-compose .pics img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 2px; }
.w4f-compose .row { display: flex; align-items: center; gap: 20px; }
.w4f-compose .row .sp { flex: 1; }
.w4f-compose .row button { padding: 6px 0; font-size: var(--w4-fs-body); letter-spacing: .2em; color: var(--w4-ink3); }
.w4f-compose .row button[data-act="send"] { color: var(--w4-ink); font-weight: 500; }
.w4f-compose .row button:disabled { opacity: .4; cursor: default; }
/* 点开一张图 */
.w4f-big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--w4-bg-under); cursor: zoom-out; }
.w4f-big img { max-width: 100%; max-height: 100%; object-fit: contain; }
.w4f-big[hidden], .w4f-post .cmin[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .w4f-abyss, .w4f-post .dot { animation: none; } .w4f-day, .w4f-post, .w4f-axis g { transition: none; } }
/* ================================================================
SEG:FUUKAN v4.1 —— 封缄（src/fuukan.cjs）
整层 fixed 盖在旧的封缄页上面。一条口腕竖着贴在左边（不透，压住标签的左头），一摞小标签从它底下伸出来，错落着一张压一张。
标签的边是 js 按大小画的 svg（四种形状、双线）。电脑上这一列居中，最宽 520px。
颜色、字体、字号都走 styles/w4-tokens.css。
================================================================ */
.w4s {
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4s.on { display: block; }
body.w4-seal-on { overflow: hidden; }
.w4s button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4s button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 4px; border-radius: 3px; }
.w4s-page { position: relative; height: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; }
.w4s-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
-webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 112px, #000 calc(100% - 120px), transparent calc(100% - 40px));
mask-image: linear-gradient(to bottom, transparent 40px, #000 112px, #000 calc(100% - 120px), transparent calc(100% - 40px)); }
.w4s-scroll::-webkit-scrollbar { display: none; }
.w4s-list { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: calc(104px + env(safe-area-inset-top, 0px)) 14px 220px 20px; }
.w4s-note { margin: 0 0 0 76px; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .1em; line-height: 2; color: var(--w4-ink3); }
/* 一张标签 */
.w4s .w4s-tag { position: relative; --c: var(--w4-arm); --off: 0px; margin: -9px 0 0 var(--off); text-align: left;
transform: rotate(var(--rot, 0deg)); transform-origin: 30px 50%; transition: transform var(--w4-t) var(--w4-ease), filter .3s, opacity .25s; }
.w4s-tag.her { --c: var(--w4-ink-rgb); }
.w4s-tag > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.w4s-tag .o { fill: var(--w4-bg); stroke: rgba(var(--c), var(--edge, .95)); stroke-width: 1.1; }
.w4s-tag .i { fill: none; stroke: rgba(var(--c), calc(var(--edge, .95) * .5)); stroke-width: .6; }
.w4s-tag .in { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 30px 13px calc(62px - var(--off)); }
.w4s-tag .no { flex: none; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); line-height: 1; color: rgba(var(--c), .9); font-variant-numeric: tabular-nums; }
.w4s-tag .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-left: 12px; border-left: 1px solid rgba(var(--c), .3); }
.w4s-tag .t { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); line-height: 1.45; letter-spacing: .08em; color: rgb(var(--c)); word-break: break-word; }
.w4s-tag .m { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .12em; line-height: 1.4; color: var(--w4-ink3); font-variant-numeric: tabular-nums; }
.w4s-tag .m b { font-weight: 400; color: var(--w4-ink2); margin-right: 6px; letter-spacing: .2em; }
/* 三种状态 */
.w4s-tag.sealed { --edge: .42; }
.w4s-tag.sealed .t, .w4s-tag.sealed .no { opacity: .55; }
.w4s-tag.ripe { filter: drop-shadow(0 0 5px rgba(var(--c), .45)); }
.w4s-tag.ripe .m { color: var(--w4-ink-soft); }
.w4s-tag.opened { --edge: .62; }
.w4s-tag.opened .t { font-weight: 400; }
.w4s .w4s-tag.on, .w4s .w4s-tag:hover, .w4s .w4s-tag:focus-visible { transform: rotate(0deg) translateX(6px); filter: drop-shadow(0 0 7px rgba(var(--c), .75)); z-index: 2; outline: none; }
.w4s-list.picked .w4s-tag:not(.on) { opacity: .32; }
.w4s-tag .tip { position: absolute; right: -9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--w4-glow); box-shadow: 0 0 9px 3px rgba(var(--w4-arm), .9); animation: w4sTip 2.8s ease-in-out infinite; }
@keyframes w4sTip { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.w4s-tag .ring { position: absolute; left: calc(52px - var(--off)); top: -5px; width: 20px; height: calc(100% + 10px); overflow: visible; }
.w4s-tag .ring path { fill: none; stroke: rgba(var(--w4-arm), .95); stroke-width: 1.15; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* 口腕：竖着压在左边。底下垫一层不透的底色，标签压进去的那截看不见 */
.w4s-arm { position: absolute; left: 0; top: 0; width: 84px; height: 100%; pointer-events: none; overflow: visible; }
.w4s-arm .base { fill: var(--w4-bg); }
.w4s-arm .body { stroke: rgba(var(--w4-arm), .85); stroke-width: 1; vector-effect: non-scaling-stroke; }
.w4s-arm .edge { fill: none; stroke: rgba(var(--w4-arm), .5); stroke-width: .7; vector-effect: non-scaling-stroke; }
.w4s-arm .glow { fill: none; stroke: rgba(var(--w4-arm), .22); stroke-width: 12; filter: blur(7px); }
.w4s-arm .rib { fill: none; stroke: rgba(var(--w4-arm), .3); stroke-width: .6; vector-effect: non-scaling-stroke; }
/* 返回、页名、底下那句 */
.w4s .w4s-back { position: absolute; left: 84px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4s-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4s-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4s-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
.w4s-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; padding: 30px 26px calc(20px + env(safe-area-inset-bottom, 0px)); }
.w4s-foot button { pointer-events: auto; padding: 6px 8px; font-size: var(--w4-fs-body); letter-spacing: .2em; color: var(--w4-ink2); }
.w4s-foot button:hover { color: var(--w4-ink); }
.w4s.reading .w4s-foot { visibility: hidden; }
/* 点开一张 / 封一封：从底下浮上来，没有框 */
.w4s-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; scrollbar-width: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 11px;
padding: 86px 28px calc(28px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--w4-bg) 78px); transform: translateY(100%); visibility: hidden; transition: transform var(--w4-t) var(--w4-ease), visibility 0s var(--w4-t); }
.w4s-sheet::-webkit-scrollbar { display: none; }
.w4s-sheet.open { transform: none; visibility: visible; transition-delay: 0s; }
.w4s-sheet .sm { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); padding-right: 30px; font-variant-numeric: tabular-nums; }
.w4s-sheet h3 { margin: 0; font-family: var(--w4-kai); font-weight: 700; font-size: 18px; line-height: 1.55; letter-spacing: .06em; color: var(--w4-ink); }
.w4s-sheet .body { margin: 4px 0 0; font-size: var(--w4-fs-body); font-weight: 300; line-height: 1.95; letter-spacing: .04em; color: var(--w4-ink-soft); white-space: pre-wrap; word-break: break-word; }
.w4s-sheet .lock { font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .1em; line-height: 1.8; color: var(--w4-ink3); }
.w4s .w4s-sheet .go { align-self: flex-start; padding: 6px 0; font-family: var(--w4-kai); font-weight: 700; font-size: 15px; letter-spacing: .3em; color: var(--w4-glow); text-shadow: 0 0 10px rgba(var(--w4-arm), .9); }
.w4s .w4s-sheet .go:disabled { opacity: .4; cursor: default; }
.w4s .w4s-sheet .x { position: absolute; right: 20px; top: 74px; padding: 6px 8px; font-size: 18px; font-weight: 300; line-height: 1; color: var(--w4-ink2); }
.w4s-sheet .chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.w4s-sheet .chips button { padding: 3px 0; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .1em; color: var(--w4-ink3); }
.w4s-sheet .chips button[aria-pressed="true"] { color: var(--w4-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--w4-arm), .9); }
.w4s-sheet input, .w4s-sheet textarea {
width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--w4-line); border-radius: 0; background: none; padding: 6px 0; resize: none;
color: var(--w4-ink); font: 300 var(--w4-fs-body)/1.7 var(--w4-sans); letter-spacing: .04em; outline: none; -webkit-appearance: none; appearance: none;
}
.w4s-sheet input:focus, .w4s-sheet textarea:focus { border-bottom-color: rgba(var(--w4-arm), .8); }
.w4s-sheet input::placeholder, .w4s-sheet textarea::placeholder { color: var(--w4-ink3); }
.w4s-sheet .row { display: flex; align-items: center; gap: 26px; margin-top: 2px; }
.w4s-sheet .row button:not(.go) { padding: 6px 0; font-size: var(--w4-fs-body); letter-spacing: .2em; color: var(--w4-ink3); }
@media (prefers-reduced-motion: reduce) { .w4s-tag .tip { animation: none; } .w4s .w4s-tag, .w4s-sheet { transition: none; } }
/* ================================================================
SEG:KOHI v4.1 —— 珈琲（咖啡店）
2026-10-02 小槐：「咖啡照常搬吧 随便改改就可以！」—— 旧页（runtime/cafe.cjs）一行没动，这里只换皮：
整页铺成深海底、盖住外壳；页名换成「珈琲 / café」的写法；数字和店名用楷体；那几个小方块、折叠条的框去掉，只留细线；
店里那张图的下沿化进底色。颜色、字体、字号都走 styles/w4-tokens.css。
只在咖啡页生效（body[data-route="cafe"]；这个属性是 features/routes.cjs 每次换页时写的）。
================================================================ */
body[data-route="cafe"] #dt-s-page {
position: fixed; inset: 0; z-index: 45; background: var(--w4-bg) !important; color: var(--w4-ink2); font-family: var(--w4-sans);
/* 旧页自己的那套变量，在这一页里改指到 v4 的 token 上 */
--bg: var(--w4-bg); --bg-2: var(--w4-line); --card: transparent; --surface: transparent; --surface-tint: var(--w4-line); --edge: var(--w4-line); --shadow: none;
--ink: var(--w4-ink); --ink-2: var(--w4-ink2); --ink-3: var(--w4-ink3); --muted: var(--w4-ink2); --sub: var(--w4-ink);
}
/* 顶上：返回 + 页名（跟别的页同一个位置、同一种写法） */
body[data-route="cafe"] #dt-s-page .dt-page-head { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 0 14px; gap: 0; align-items: flex-start; }
body[data-route="cafe"] #dt-s-page .dt-page-head .dt-back { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--w4-ink2); }
body[data-route="cafe"] #dt-s-page .dt-page-head .dt-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body[data-route="cafe"] #dt-s-page .dt-page-title { flex: 1; padding-top: 4px; text-align: right; font-size: 0; line-height: 1; letter-spacing: 0; color: var(--w4-ink); }
body[data-route="cafe"] #dt-s-page .dt-page-title::before { content: '珈琲'; display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
body[data-route="cafe"] #dt-s-page .dt-page-title::after { content: 'café'; display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
body[data-route="cafe"] #dt-s-page .pg-spacer { display: none; }
body[data-route="cafe"] #dt-s-page .dt-page-body.real { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: 22px 26px calc(70px + env(safe-area-inset-bottom, 0px)); align-items: stretch; text-align: left; color: var(--w4-ink2); scrollbar-width: none; }
body[data-route="cafe"] #dt-s-page .dt-page-body.real::-webkit-scrollbar { display: none; }
/* 店里那张图：下沿化进海里 */
body[data-route="cafe"] #dtPageReal .cafe-hero { border-radius: 2px; margin-bottom: 20px; box-shadow: none; }
body[data-route="cafe"] #dtPageReal .cafe-hero-veil { background: linear-gradient(180deg, transparent 38%, var(--w4-bg)); }
body[data-route="cafe"] #dtPageReal .cafe-hero-in { padding: 10px 4px 2px; }
body[data-route="cafe"] #dtPageReal .cafe-when { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); letter-spacing: .1em; color: var(--w4-ink); text-shadow: 0 0 10px var(--w4-bg); }
body[data-route="cafe"] #dtPageReal .cafe-when small { margin-top: 4px; font-family: var(--w4-sans); font-weight: 300; font-size: var(--w4-fs-note); letter-spacing: .14em; color: var(--w4-ink2); opacity: 1; font-variant-numeric: tabular-nums; }
body[data-route="cafe"] #dtPageReal .cafe-bal { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); color: var(--w4-ink); text-shadow: 0 0 10px var(--w4-bg); font-variant-numeric: tabular-nums; }
/* 今天的账：没有框，一道细线 */
body[data-route="cafe"] #dtPageReal .cafe-fold { margin-bottom: 0; }
body[data-route="cafe"] #dtPageReal .cafe-fold summary { padding: 10px 0; border: 0; border-bottom: 1px solid var(--w4-line); border-radius: 0; background: none; font-size: var(--w4-fs-body); font-weight: 300; letter-spacing: .08em; color: var(--w4-ink-soft); }
body[data-route="cafe"] #dtPageReal .cafe-fold summary::after { color: var(--w4-ink3); opacity: 1; }
body[data-route="cafe"] #dtPageReal .cafe-fold[open] summary { margin-bottom: 16px; }
body[data-route="cafe"] #dtPageReal .cafe-sum b { margin: 0 2px; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); color: var(--w4-ink); font-variant-numeric: tabular-nums; }
body[data-route="cafe"] #dtPageReal .cafe-nums { gap: 14px 20px; margin-bottom: 14px; }
body[data-route="cafe"] #dtPageReal .cafe-n { flex: 1 1 60px; padding: 0; border: 0; border-radius: 0; background: none; }
body[data-route="cafe"] #dtPageReal .cafe-n b { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); line-height: 1.2; color: var(--w4-ink); font-variant-numeric: tabular-nums; }
body[data-route="cafe"] #dtPageReal .cafe-n span { display: block; margin-top: 4px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink3); opacity: 1; }
body[data-route="cafe"] #dtPageReal .cafe-bar { height: 1px; margin: 2px 0 10px; border-radius: 0; background: var(--w4-line); overflow: visible; }
body[data-route="cafe"] #dtPageReal .cafe-bar i { height: 1px; background: rgb(var(--w4-arm)); opacity: 1; box-shadow: 0 0 6px rgba(var(--w4-arm), .8); }
/* 一单一行 */
body[data-route="cafe"] #dtPageReal .cafe-o, body[data-route="cafe"] #dtPageReal .cafe-o:last-child { border-bottom: 1px solid var(--w4-line); }
body[data-route="cafe"] #dtPageReal .cafe-o-s { padding: 10px 0; gap: 10px; }
body[data-route="cafe"] #dtPageReal .cafe-o-t { flex-basis: auto; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .06em; color: var(--w4-ink3); opacity: 1; }
body[data-route="cafe"] #dtPageReal .cafe-o-x { font-size: var(--w4-fs-body); font-weight: 300; letter-spacing: .03em; color: var(--w4-ink-soft); }
body[data-route="cafe"] #dtPageReal .cafe-o-r { font-size: var(--w4-fs-note); letter-spacing: .06em; color: var(--w4-ink2); opacity: 1; }
body[data-route="cafe"] #dtPageReal .cafe-o[open] .cafe-o-x { white-space: normal; color: var(--w4-ink); }
body[data-route="cafe"] #dtPageReal .cafe-o-d { padding: 0 0 12px; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .06em; color: var(--w4-ink3); opacity: 1; }
/* 空着的时候、开门那一下 */
body[data-route="cafe"] #dtPageReal .cafe-empty { padding: 18px 0; text-align: left; font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .08em; line-height: 2; color: var(--w4-ink3); opacity: 1; }
body[data-route="cafe"] #dtPageReal .cafe-open { height: auto; margin-top: 16px; padding: 6px 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--w4-kai); font-weight: 700; font-size: 15px; letter-spacing: .3em; color: var(--w4-glow); text-shadow: 0 0 10px rgba(var(--w4-arm), .9); }
body[data-route="cafe"] #dtPageReal .cafe-note { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .08em; line-height: 1.9; color: var(--w4-ink3); opacity: 1; }
/* 上面「今天的账」那条的样式会连带套到每一单的那一行上（都是 summary）—— 每一单这里收回去：不要第二道线、不要小三角 */
body[data-route="cafe"] #dtPageReal .cafe-fold .cafe-o .cafe-o-s { margin: 0; padding: 10px 0; border: 0; background: none; font-size: inherit; letter-spacing: 0; }
body[data-route="cafe"] #dtPageReal .cafe-fold .cafe-o .cafe-o-s::after { content: none; }
/* ================================================================
SEG:ASOBI v4.1 —— 遊び（src/asobi.cjs）
整层 fixed 盖在旧的玩耍页上面。一张只有线的横信笺：双线 / 横线（微微弯的小须）/ 短竖线，一行两格，一格一个去处。
电脑上这一列居中，最宽 520px。颜色、字体、字号都走 styles/w4-tokens.css。
================================================================ */
.w4p {
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4p.on { display: block; }
body.w4-play-on { overflow: hidden; }
.w4p button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4p-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.w4p-scroll::-webkit-scrollbar { display: none; }
.w4p-page { container-type: inline-size; box-sizing: border-box; max-width: 520px; margin: 0 auto; padding: calc(86px + env(safe-area-inset-top, 0px)) 22px calc(60px + env(safe-area-inset-bottom, 0px)); }
.w4p .w4p-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4p .w4p-back:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 3px; }
.w4p-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4p-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4p-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
/* 线 */
.w4p-sheet .rule { display: block; width: 100%; height: 9px; overflow: visible; }
.w4p-sheet .rule path { fill: none; stroke: rgba(var(--w4-arm), .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.w4p-sheet .rule.dbl path + path { stroke: rgba(var(--w4-arm), .28); stroke-width: .6; }
.w4p-sheet .date { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 2px 9px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .2em; color: var(--w4-ink3); }
.w4p-sheet .date b { font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-small); letter-spacing: .24em; color: var(--w4-ink2); }
/* 一行两格 */
.w4p-sheet .row { display: flex; align-items: stretch; }
.w4p .w4p-sheet .cell { position: relative; flex: var(--w) 1 0; min-width: 0; min-height: var(--h); box-sizing: border-box; padding: 12px 10px 13px 14px; text-align: left;
display: flex; flex-direction: column; justify-content: var(--j, center); align-items: var(--a, flex-start); gap: 7px; }
.w4p-sheet .cell.blank { cursor: default; }
.w4p-sheet .cell + .cell::before { content: ''; position: absolute; left: 0; top: var(--t, 16%); bottom: var(--b, 16%); width: 1px; background: rgba(var(--w4-arm), .3); }
.w4p-sheet .nm { display: inline-flex; align-items: center; gap: 9px; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-name); letter-spacing: .16em; line-height: 1.15; color: var(--w4-ink); white-space: nowrap; transition: text-shadow .3s; }
.w4p-sheet .cell.long .nm { font-size: var(--w4-fs-head); letter-spacing: .1em; gap: 7px; } /* 四个字的名字小一号，不然格子里放不下 */
.w4p-sheet .nm svg { flex: none; width: 7px; height: 1.5em; overflow: visible; }
.w4p-sheet .nm svg path { fill: none; stroke: rgba(var(--w4-arm), .9); stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.w4p-sheet .en { font-size: var(--w4-fs-tiny); font-weight: 300; letter-spacing: .24em; line-height: 1; color: var(--w4-ink3); }
.w4p-sheet .cell:hover .nm, .w4p-sheet .cell:focus-visible .nm { text-shadow: 0 0 12px rgba(var(--w4-arm), .95); }
.w4p .w4p-sheet .cell:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: -4px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .w4p-sheet .nm { transition: none; } }
/* 窄屏（320 一档）：名字小一号、格子里少留一点边，不然三个字的会顶到竖线 */
@container (max-width: 300px) {
.w4p .w4p-sheet .cell { padding-left: 8px; padding-right: 6px; }
.w4p-sheet .nm { font-size: var(--w4-fs-head); letter-spacing: .1em; gap: 6px; }
.w4p-sheet .cell.long .nm { font-size: 17px; letter-spacing: .06em; gap: 5px; }
}
/* ================================================================
SEG:GAROU v4.1 —— 画廊（src/garou.cjs）
整层 fixed 盖在最上面（比 遊び 高一层）。顶上一道双线，图从线上一根细线吊下来，两列错开。
电脑上这一列居中，最宽 520px。颜色、字体、字号都走 styles/w4-tokens.css。
================================================================ */
.w4g {
position: fixed; inset: 0; z-index: 1450; display: none; overflow: hidden;
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4g.on { display: block; }
body.w4-garou-on { overflow: hidden; }
.w4g button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4g-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.w4g-scroll::-webkit-scrollbar { display: none; }
.w4g-page { box-sizing: border-box; max-width: 520px; margin: 0 auto; padding: calc(86px + env(safe-area-inset-top, 0px)) 22px calc(60px + env(safe-area-inset-bottom, 0px)); }
.w4g .w4g-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4g .w4g-back:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 3px; }
.w4g-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4g-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4g-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
/* 挂画的那道线 */
.w4g-page .rule { display: block; width: 100%; height: 9px; overflow: visible; }
.w4g-page .rule path { fill: none; stroke: rgba(var(--w4-arm), .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.w4g-page .rule path + path { stroke: rgba(var(--w4-arm), .28); stroke-width: .6; }
/* 两列；每张从线上垂一根细线吊着（--drop 是线长，garou.cjs 按序号给） */
.w4g-wall { display: flex; align-items: flex-start; gap: 18px; margin-top: -4px; }
.w4g-wall .col { flex: 1 1 0; min-width: 0; }
.w4g-wall figure { position: relative; margin: 0 0 6px; padding-top: var(--drop, 20px); }
.w4g-wall figure::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: var(--drop, 20px); background: rgba(var(--w4-arm), .4); }
.w4g-wall figure::after { content: ''; position: absolute; left: 50%; top: calc(var(--drop, 20px) - 2px); width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: rgb(var(--w4-arm)); opacity: .7; }
.w4g-wall img { display: block; width: 100%; height: auto; min-height: 60px; cursor: pointer; background: rgba(var(--w4-ink-rgb), .05); outline: 1px solid rgba(var(--w4-ink-rgb), .14); outline-offset: 3px; transition: outline-color .3s; }
.w4g-wall img:hover { outline-color: rgba(var(--w4-arm), .6); }
.w4g-wall figcaption { margin-top: 9px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .18em; color: var(--w4-ink3); font-variant-numeric: tabular-nums; text-align: center; }
/* 他手画的 SVG：多半是透明底，给一块浅底衬着；名字用楷体放在日期上面 */
.w4g-wall img.svg { background: rgba(var(--w4-ink-rgb), .9); }
.w4g-wall figcaption b { display: block; margin-bottom: 4px; font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-small); letter-spacing: .12em; color: var(--w4-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w4g-note { margin: 44px 0 0; text-align: center; font-family: var(--w4-kai); font-size: var(--w4-fs-body); letter-spacing: .12em; color: var(--w4-ink3); }
.w4g-note[hidden] { display: none; }
/* ================================================================
SEG:WATASHI v4.1 —— 私（src/watashi.cjs）
整层 fixed 盖在旧的「我」页上面。伞 → 名字和那句心里话 → 十六维（收着）→ 一根口腕垂到底，每天一张「抓抓的菜单」穿在上面。
印的字（标题、栏头、合计）走黑体 / 楷体；写的字（日期、品类、内容、时间）走手写体。
电脑上这一列居中，最宽 520px。颜色、字号走 styles/w4-tokens.css。
================================================================ */
/* 写的字原来用欢喜体（手写），她用了一晚说「看得我眼晕 还是换成楷体吧」—— 现在全页楷体，字号收小，也不再一行歪一点。
（/v4f/w4hand.woff2 那个文件不再用了，留在服务器上不碍事。） */
.w4w {
--w4w-hand: var(--w4-kai);
--w4w-arm-x: 50px;
position: fixed; inset: 0; z-index: 1400; display: none; overflow: hidden;
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4w.on { display: block; }
body.w4-me-on { overflow: hidden; }
.w4w button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4w-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.w4w-scroll::-webkit-scrollbar { display: none; }
.w4w-page { --u: 1; position: relative; box-sizing: border-box; max-width: 520px; margin: 0 auto; padding: 0 22px calc(70px + env(safe-area-inset-bottom, 0px)); }
.w4w .w4w-back { position: absolute; left: 14px; top: calc(18px + env(safe-area-inset-top, 0px)); width: 34px; height: 34px; color: var(--w4-ink2); font-size: 22px; line-height: 1; }
.w4w .w4w-back:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 3px; }
.w4w-ttl { position: absolute; right: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); text-align: right; pointer-events: none; }
.w4w-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.w4w-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
/* 伞（跟主页 / 記憶同一只）和口腕 */
.w4w-bell { position: absolute; left: 0; top: 0; width: 100%; height: calc(240px * var(--u)); overflow: visible; pointer-events: none; }
.w4w-bell path, .w4w-bell ellipse { vector-effect: non-scaling-stroke; }
.w4w-bell .dome { fill: var(--w4-bg); }
.w4w-bell .canal { stroke: rgba(var(--w4-arm), .09); stroke-width: .7; fill: none; }
.w4w-bell .rim { fill: none; stroke: rgba(var(--w4-arm), .7); stroke-width: 1.1; }
.w4w-bell .rimglow { fill: none; stroke: rgba(var(--w4-arm), .3); stroke-width: 5; filter: blur(4px); }
.w4w-bell .inner { fill: none; stroke: rgba(var(--w4-arm), .13); stroke-width: .8; }
.w4w-spine { position: absolute; left: calc(var(--w4w-arm-x) - 7px); top: 0; width: 14px; overflow: visible; pointer-events: none; }
.w4w-spine path { fill: none; stroke: rgba(var(--w4-arm), .7); stroke-width: 1; }
/* 头 */
.w4w-head { position: relative; padding-top: calc(196px * var(--u)); padding-left: 50px; }
.w4w-head .nm { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-name); letter-spacing: .16em; }
.w4w-head .st { margin-left: 10px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); }
.w4w-head .voice { margin: 14px 0 0; font-family: var(--w4-kai); font-size: var(--w4-fs-title); line-height: 1.9; letter-spacing: .06em; color: var(--w4-ink-soft); text-wrap: balance; word-break: break-word; }
.w4w-head .voice:empty { display: none; }
/* 十六维：一行小字 + 一条线，点开是旧页那块原样（类名还是 w3p-* / w3d-*，这里只把旧变量接到 v4 的色上） */
.w4w .w4w-fold { position: relative; margin: 18px 0 0 50px; width: calc(100% - 50px); display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .2em; color: var(--w4-ink2); }
.w4w-fold::after { content: ''; flex: 1; height: 1px; background: var(--w4-line); }
.w4w-fold i { font-style: normal; transition: transform var(--w4-t2, .3s); }
.w4w-fold[aria-expanded="true"] i { transform: rotate(180deg); }
.w4w .w4w-fold:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 3px; }
.w4w-axes { position: relative; padding-left: 50px; }
.w4w-axes .w3p-axes { --ink2: var(--w4-ink2); --line: var(--w4-line); --accent: rgb(var(--w4-arm)); --soft: rgba(var(--w4-ink-rgb), .08); --fs-sm: var(--w4-fs-small); padding: 0; border: 0; font-size: var(--w4-fs-small); }
.w4w-axes .w3p-axes.open { padding: 10px 0 4px; border: 0; }
.w4w-axes .w3p-inner { display: none; } /* 那句心里话已经在名字下面了 */
/* 品类（旧页那排标签）：手写的几个词 */
.w4w-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 18px 0 0 50px; }
.w4w .w4w-tabs button { font-family: var(--w4w-hand); font-size: var(--w4-fs-title); letter-spacing: .1em; line-height: 1.7; color: var(--w4-ink3); }
.w4w .w4w-tabs button[aria-selected="true"] { color: rgb(var(--w4-arm)); text-shadow: 0 0 12px rgba(var(--w4-arm), .6); }
.w4w .w4w-tabs button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 2px; border-radius: 3px; }
/* 票：一天一张，挂在孔上（绕着孔歪一点）。票是不透的，口腕从后面过 */
.w4w-slips { position: relative; margin-top: 30px; }
.w4w-slip { position: relative; margin-top: 40px; padding: 16px 12px 14px; background: var(--w4-bg); border: 1px solid rgba(var(--w4-arm), .42);
transform: rotate(var(--tilt, -.6deg)); transform-origin: calc(var(--w4w-arm-x) - 22px) 17px; }
.w4w-slip:first-child { margin-top: 0; }
.w4w-slip .hole { position: absolute; left: calc(var(--w4w-arm-x) - 22px - 5px); top: 12px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(var(--w4-arm), .7); background: var(--w4-bg-deep, var(--w4-bg)); }
.w4w-slip .hole::before { content: ''; position: absolute; left: 4px; top: -14px; width: 1px; height: 14px; background: rgba(var(--w4-arm), .7); } /* 口腕进孔的那一小截 */
.w4w-slip .cap { text-align: center; }
.w4w-slip .cap b { display: inline-block; padding: 3px 16px 4px; border: 1px solid rgba(var(--w4-arm), .55); border-radius: 999px; font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-title); letter-spacing: .3em; text-indent: .3em; color: rgb(var(--w4-arm)); }
.w4w-slip .meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; padding: 0 4px 4px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .2em; color: var(--w4-ink2); }
.w4w-slip .meta b { font-family: var(--w4w-hand); font-weight: 700; font-size: 17px; letter-spacing: .1em; color: var(--w4-ink); margin: 0 3px; }
.w4w-slip .tb { border-top: 1px solid rgba(var(--w4-arm), .5); box-shadow: 0 -3px 0 -2px rgba(var(--w4-arm), .25); }
.w4w .w4w-slip .r { display: grid; grid-template-columns: 62px minmax(0, 1fr) 50px; width: 100%; text-align: left; border-bottom: 1px solid rgba(var(--w4-arm), .2); }
.w4w-slip .r > span { padding: 5px 7px; min-height: 32px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; }
.w4w-slip .r > span + span { border-left: 1px solid rgba(var(--w4-arm), .2); }
.w4w-slip .r.th > span { padding-block: 5px; min-height: 0; justify-content: center; font-size: var(--w4-fs-tiny); font-weight: 300; letter-spacing: .5em; text-indent: .5em; color: var(--w4-ink3); }
.w4w-slip .hw { font-family: var(--w4w-hand); line-height: 1.6; }
.w4w-slip .cat .hw { font-weight: 700; font-size: 15px; letter-spacing: .1em; color: rgb(var(--w4-arm)); white-space: nowrap; }
.w4w-slip .cat.c3 .hw { font-size: 13px; letter-spacing: .04em; } /* 三个字的品类小一号，四个字以上再小一号、可以折成两行 */
.w4w-slip .cat.c4 .hw { font-size: 12px; letter-spacing: 0; line-height: 1.3; white-space: normal; word-break: break-all; }
.w4w-slip .r .txt { flex-direction: column; align-items: flex-start; justify-content: center; }
.w4w-slip .txt .hw { font-size: 13.5px; letter-spacing: .05em; color: var(--w4-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-line; word-break: break-word; max-width: 100%; }
.w4w-slip .r.open .txt .hw { display: block; overflow: visible; }
.w4w-slip .txt u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(var(--w4-arm), .38) 62%, rgba(var(--w4-arm), .38) 88%, transparent 88%); }
.w4w-slip .txt small { display: none; margin-top: 4px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .06em; line-height: 1.5; color: var(--w4-ink3); word-break: break-word; }
.w4w-slip .r.open .txt small { display: block; }
.w4w-slip .r .tm { justify-content: flex-end; }
.w4w-slip .tm .hw { font-family: var(--w4-sans); font-size: var(--w4-fs-small); font-weight: 300; color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
.w4w-slip .r.open { background: rgba(var(--w4-arm), .05); }
.w4w .w4w-slip button.r:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: -3px; }
.w4w-slip .sum { display: flex; justify-content: flex-end; margin-top: 12px; }
.w4w-slip .sum div { display: grid; grid-template-columns: 54px 80px; border: 1px solid rgba(var(--w4-arm), .5); }
.w4w-slip .sum span { padding: 4px 8px; display: flex; align-items: center; }
.w4w-slip .sum span:first-child { justify-content: center; white-space: nowrap; font-size: var(--w4-fs-tiny); letter-spacing: .4em; text-indent: .4em; color: var(--w4-ink3); border-right: 1px solid rgba(var(--w4-arm), .3); }
.w4w-slip .sum span:last-child { justify-content: flex-end; font-family: var(--w4w-hand); font-weight: 700; font-size: 17px; color: var(--w4-ink); }
.w4w-slip .sum i { font-style: normal; display: inline-block; padding: 0 9px; border: 1px solid rgba(var(--w4-arm), .8); border-radius: 50% 46% 52% 48%; transform: rotate(-4deg); }
.w4w-nil { padding: 10px 0 30px 50px; font-family: var(--w4w-hand); font-size: var(--w4-fs-title); letter-spacing: .08em; color: var(--w4-ink3); }
@media (prefers-reduced-motion: reduce) { .w4w-fold i { transition: none; } }
/* 顶上一条渐隐：往下翻的时候票不会顶到返回和页名底下 */
.w4w::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(64px + env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, var(--w4-bg) 30%, transparent); pointer-events: none; opacity: 0; transition: opacity .25s; }
.w4w.scrolled::after { opacity: 1; }
.w4w .w4w-back, .w4w-ttl { z-index: 1; }
/* ================================================================
SEG:SETTEI v4.1 —— 設定
2026-10-01 小槐看了草稿：「欧克 就这样」。旧页（runtime/settings.cjs，几十个开关和输入框）一行没动，这里只换皮：
像一本线装书的目录 —— 左边一根口腕当装订线，每一节钉一针；每一行是「名字 …… 值」；
开关写成一个字（开 / 关），数字是横线上的数，按钮是一个词加小箭头。分栏当「卷」。
小样：https://claude.ai/artifact/2geCRhAxj1a9nc2QfgNC1Z
只在设置页生效（body[data-route="settings"]）。颜色、字体、字号都走 styles/w4-tokens.css。
没动的：「外观」是另一张旧页（#w3-s-look），不在这里；页面上那个早就藏起来的「主题」栏照旧藏着。
================================================================ */
body[data-route="settings"] #dt-s-settings {
--st-x: max(calc((100% - 520px) / 2), 0px); /* 这一列左边空出来多少（电脑上居中，最宽 520px） */
position: fixed; inset: 0; z-index: 45; max-width: none; background: var(--w4-bg) !important; color: var(--w4-ink2); font-family: var(--w4-sans);
/* 旧页自己的那套变量，在这一页里改指到 v4 的 token 上 */
--bg: var(--w4-bg); --bg-2: transparent; --card: transparent; --surface: transparent; --edge: transparent; --shadow: none;
--ink: var(--w4-ink); --ink-2: var(--w4-ink2); --ink-3: var(--w4-ink3); --muted: var(--w4-ink2); --sub: var(--w4-ink);
--accent: rgb(var(--w4-arm)); --accent-soft: transparent; --danger: rgb(var(--w4-warm)); --danger-soft: transparent; --line: var(--w4-line);
}
/* 装订线：一根口腕，从上到底，不跟着翻页动 */
body[data-route="settings"] #dt-s-settings::before {
content: ''; position: absolute; left: calc(var(--st-x) + 21px); top: 0; bottom: 0; width: 14px; pointer-events: none;
background: rgba(var(--w4-arm), .7);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='128' viewBox='0 0 14 128'%3E%3Cpath d='M7 0C5.4 21 8.6 43 7 64S5.4 107 7 128' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") repeat-y;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='128' viewBox='0 0 14 128'%3E%3Cpath d='M7 0C5.4 21 8.6 43 7 64S5.4 107 7 128' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") repeat-y;
}
/* 顶上：返回 + 页名（跟别的页同一个位置、同一种写法） */
body[data-route="settings"] #dt-s-settings .dt-page-head { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 0 44px; gap: 0; align-items: flex-start; }
body[data-route="settings"] #dt-s-settings .dt-page-head .dt-back { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--w4-ink2); }
body[data-route="settings"] #dt-s-settings .dt-page-head .dt-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body[data-route="settings"] #dt-s-settings .dt-page-title { flex: 1; padding-top: 4px; text-align: right; font-size: 0; line-height: 1; letter-spacing: 0; color: var(--w4-ink); }
body[data-route="settings"] #dt-s-settings .dt-page-title::before { content: '設定'; display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
body[data-route="settings"] #dt-s-settings .dt-page-title::after { content: 'settings'; display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
body[data-route="settings"] #dt-s-settings .pg-spacer { display: none; }
/* 卷：通道 / API / 其他（「模型」那一栏旧页在手机上是藏着的，这里放出来，叫回侧栏上的名字「通道」） */
body[data-route="settings"] #dt-s-settings .dt-subnav { box-sizing: border-box; display: flex; align-items: baseline; gap: 22px; width: 100%; max-width: 520px; margin: 22px auto 0; padding: 0 22px 0 66px; background: none; border-radius: 0; overflow: visible; flex: none; }
body[data-route="settings"] #dt-s-settings .dt-subnav button { flex: none; display: block; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-title); letter-spacing: .14em; line-height: 1.3; color: var(--w4-ink3); text-align: left; }
/* 「主题」那一栏旧页一直藏着，里面现在只剩「聊天气泡字号」有用，放出来叫「字号」，不然切走了就回不来 */
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="theme"] { display: block; font-size: 0; letter-spacing: 0; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="theme"]::before { content: '字号'; font-size: var(--w4-fs-title); letter-spacing: .14em; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="theme"]::after { content: 'type'; }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active[data-tab="theme"] { font-size: 0; }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active[data-tab="theme"]::before { font-size: var(--w4-fs-head); }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="model"] { display: block; font-size: 0; letter-spacing: 0; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="model"]::before { content: '通道'; font-size: var(--w4-fs-title); letter-spacing: .14em; }
body[data-route="settings"] #dt-s-settings .dt-subnav button::after { display: block; margin-top: 2px; font-family: var(--w4-sans); font-weight: 300; font-size: var(--w4-fs-tiny); letter-spacing: .2em; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="model"]::after { content: 'route'; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="api"]::after { content: 'api'; }
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-tab="other"]::after { content: 'misc'; }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active { font-weight: 700; font-size: var(--w4-fs-head); color: var(--w4-ink); text-shadow: 0 0 14px rgba(var(--w4-arm), .7); }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active[data-tab="model"] { font-size: 0; }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active[data-tab="model"]::before { font-size: var(--w4-fs-head); }
body[data-route="settings"] #dt-s-settings .dt-subnav button.active::after { color: rgb(var(--w4-arm)); text-shadow: none; }
body[data-route="settings"] #dt-s-settings .dt-subnav button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 3px; border-radius: 2px; }
/* 正文 */
body[data-route="settings"] #dt-s-settings .dt-set-body { box-sizing: border-box; width: 100%; padding: 0 calc(var(--st-x) + 22px) calc(70px + env(safe-area-inset-bottom, 0px)) calc(var(--st-x) + 66px); scrollbar-width: none; overscroll-behavior: contain; }
body[data-route="settings"] #dt-s-settings .dt-set-body::-webkit-scrollbar { display: none; }
body[data-route="settings"] #dt-s-settings .dt-set-body::after { content: '卷 终'; display: block; margin-top: 46px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .3em; color: var(--w4-ink3); }
/* 一节：楷体的名字，左边钉一针（一道短横 + 一个小圈） */
body[data-route="settings"] #dt-s-settings .set-group { position: relative; margin: 34px 0 0; }
body[data-route="settings"] #dt-s-settings .set-group::before { content: ''; position: absolute; left: -66px; top: 13px; width: 52px; height: 1px; background: linear-gradient(to right, transparent 22px, rgba(var(--w4-arm), .7) 22px); pointer-events: none; }
body[data-route="settings"] #dt-s-settings .set-group::after { content: ''; position: absolute; left: -17px; top: 10px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(var(--w4-arm), .8); background: var(--w4-bg); pointer-events: none; }
body[data-route="settings"] #dt-s-settings .set-group h2 { margin: 0 0 6px; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); letter-spacing: .16em; line-height: 1.35; color: var(--w4-ink); }
/* 一行：名字 …… 值 */
body[data-route="settings"] #dt-s-settings .set-row { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; }
body[data-route="settings"] #dt-s-settings .set-row .rl { flex: 1; min-width: 0; }
body[data-route="settings"] #dt-s-settings .set-row .rl .l1 { display: flex; align-items: baseline; font-size: var(--w4-fs-body); letter-spacing: .04em; line-height: 1.5; color: var(--w4-ink); }
body[data-route="settings"] #dt-s-settings .set-row .rl .l1::after { content: ''; flex: 1; min-width: 14px; margin: 0 0 3px 10px; border-bottom: 1px dotted rgba(var(--w4-arm), .38); }
body[data-route="settings"] #dt-s-settings .set-row .l2,
body[data-route="settings"] #dt-s-settings .set-row .rl > .l2:only-child,
body[data-route="settings"] #dt-s-settings .set-row.v2-textrow .rl .l1 + .l2,
body[data-route="settings"] #dt-s-settings .set-row.w3-play-sub .rl .l1 + .l2 { margin-top: 4px; padding-right: 8px; font-size: var(--w4-fs-note); font-weight: 300; line-height: 1.7; letter-spacing: .04em; color: var(--w4-ink3); }
body[data-route="settings"] #dt-s-settings .set-row .l2 b { font-weight: 400; color: var(--w4-ink2); }
body[data-route="settings"] #dt-s-settings .set-row.v2-textrow .rl .l1 { font-size: var(--w4-fs-body); letter-spacing: .04em; color: var(--w4-ink); }
body[data-route="settings"] #dt-s-settings .set-row.v2-textrow .rl .l1::after { display: none; }
/* 开关：一个字 */
body[data-route="settings"] #dt-s-settings .toggle { flex: none; width: auto; min-width: 34px; height: auto; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; text-align: right; cursor: pointer; }
body[data-route="settings"] #dt-s-settings .toggle::after { content: '关'; position: static; display: inline; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; transform: none !important; transition: none;
font-family: var(--w4-kai); font-size: 17px; line-height: 1.3; color: var(--w4-ink3); }
body[data-route="settings"] #dt-s-settings .toggle.on::after { content: '开'; font-weight: 700; color: rgb(var(--w4-arm)); text-shadow: 0 0 12px rgba(var(--w4-arm), .9); }
/* 填的数、填的字：一条横线 */
body[data-route="settings"] #dt-s-settings input[type=number],
body[data-route="settings"] #dt-s-settings .set-row > input[type=text],
body[data-route="settings"] #dt-s-settings select {
flex: none; box-sizing: border-box; width: 64px; padding: 0 2px 2px; border: 0; border-bottom: 1px solid rgba(var(--w4-arm), .45); border-radius: 0; background: none; box-shadow: none; outline: 0;
font-family: var(--w4-kai); font-size: 17px; line-height: 1.3; color: var(--w4-ink); text-align: right;
}
body[data-route="settings"] #dt-s-settings .set-row > input[type=text] { width: 96px !important; }
body[data-route="settings"] #dt-s-settings select { width: auto; max-width: 56%; padding-right: 2px; font-size: var(--w4-fs-title); text-align-last: right; background-image: none; }
body[data-route="settings"] #dt-s-settings select option { background: var(--w4-bg); color: var(--w4-ink); }
/* 滑杆：一条细线上一粒圆点（之前把轨道弄没了，只剩一个点，看不出能拖） */
body[data-route="settings"] #dt-s-settings input[type=range] { -webkit-appearance: none; appearance: none; flex: none; width: 130px; height: 20px; margin: 0; padding: 0; border: 0; background: linear-gradient(rgba(var(--w4-arm), .55), rgba(var(--w4-arm), .55)) center / 100% 1px no-repeat !important; cursor: pointer; }
body[data-route="settings"] #dt-s-settings input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border: 0; border-radius: 50%; background: rgb(var(--w4-arm)); box-shadow: 0 0 10px rgba(var(--w4-arm), .6); }
body[data-route="settings"] #dt-s-settings input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: rgb(var(--w4-arm)); }
body[data-route="settings"] #dt-s-settings .set-row:has(input[type=range]) .rl .l1 + .l2 { display: block; } /* 「现在是 14 px」那句要看得见 */
body[data-route="settings"] #dt-s-settings input:focus-visible,
body[data-route="settings"] #dt-s-settings select:focus-visible { border-bottom-color: rgb(var(--w4-arm)); }
body[data-route="settings"] #dt-s-settings .set-input { margin: 0; padding: 11px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-route="settings"] #dt-s-settings .set-input .al { font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink3); }
body[data-route="settings"] #dt-s-settings .set-input input,
body[data-route="settings"] #dt-s-settings textarea { box-sizing: border-box; width: 100%; padding: 4px 2px; border: 0; border-bottom: 1px solid rgba(var(--w4-arm), .45); border-radius: 0; background: none; box-shadow: none; outline: 0; font-size: var(--w4-fs-body); color: var(--w4-ink); }
/* 按钮：一个词加小箭头；危险的用暖色 */
body[data-route="settings"] #dt-s-settings .btn,
body[data-route="settings"] #dt-s-settings .btn.ghost,
body[data-route="settings"] #dt-s-settings .btn-mini { flex: none; width: auto; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-title); letter-spacing: .1em; line-height: 1.4; color: rgb(var(--w4-arm)); cursor: pointer; }
body[data-route="settings"] #dt-s-settings .btn::after,
body[data-route="settings"] #dt-s-settings .btn-mini::after { content: ' ›'; }
body[data-route="settings"] #dt-s-settings .btn-mini.danger { background: none; color: rgb(var(--w4-warm)); }
body[data-route="settings"] #dt-s-settings .set-actions { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 8px; }
body[data-route="settings"] #dt-s-settings button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 3px; border-radius: 2px; }
/* 通道那一卷：一条一个圈，选中的那条圈是实的 */
body[data-route="settings"] #dt-s-settings .model-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; cursor: pointer; }
body[data-route="settings"] #dt-s-settings .model-item .mil { flex: 1; min-width: 0; }
body[data-route="settings"] #dt-s-settings .model-item .min { font-size: var(--w4-fs-body); letter-spacing: .04em; color: var(--w4-ink2); }
body[data-route="settings"] #dt-s-settings .model-item.active .min { color: var(--w4-ink); }
body[data-route="settings"] #dt-s-settings .model-item .min .star { padding: 0; border-radius: 0; background: none; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .1em; color: rgb(var(--w4-arm)); }
body[data-route="settings"] #dt-s-settings .model-item .radio { flex: none; width: 9px; height: 9px; border: 1px solid rgba(var(--w4-arm), .7); }
body[data-route="settings"] #dt-s-settings .model-item.active .radio { background: rgb(var(--w4-arm)); box-shadow: 0 0 10px rgba(var(--w4-arm), .9); }
body[data-route="settings"] #dt-s-settings .model-item.active .radio::after { display: none; }
/* ================================================================
SEG:GAIKAN v4.1 —— 外观（設定的第一卷）
2026-10-01 小槐：「搞外观吧」。旧页（#w3-s-look + src/appearance.cjs）的选项和壁纸一个没动，这里只换皮，
跟設定（styles/settei.css）是同一本「线装书目录」：左边一根口腕当装订线，每一节钉一针；
选项是一排楷体的词，选中的那个亮；壁纸的「换 / 清」是一个字加小箭头。
顶上的返回、页名、那排「卷」是 src/gaikan.cjs 补的（旧页自己没有）。
只在这张页开着的时候生效（body[data-route="look"]，appearance.cjs 的 showLook 写的）。
================================================================ */
body[data-route="look"] #w3-s-look {
--gk-x: max(calc((100% - 520px) / 2), 0px);
position: fixed; inset: 0; z-index: 45; max-width: none; background: var(--w4-bg) !important; color: var(--w4-ink2); font-family: var(--w4-sans);
/* 旧页的「材质」变量：在这一页里全关掉，不然选了玻璃 / 旧 iMessage 这里的词也会长出底和边 */
--mat-bg: transparent; --mat-bd: transparent; --mat-shadow: none; --mat-ink: var(--w4-ink3);
--mat-acc-bg: transparent; --mat-acc-bd: transparent; --mat-acc-shadow: none; --mat-acc-ink: var(--w4-ink);
--line: var(--w4-line); --ink: var(--w4-ink); --ink2: var(--w4-ink2); --soft: transparent;
}
body[data-route="look"] #w3-s-look::before {
content: ''; position: absolute; left: calc(var(--gk-x) + 21px); top: 0; bottom: 0; width: 14px; pointer-events: none;
background: rgba(var(--w4-arm), .7);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='128' viewBox='0 0 14 128'%3E%3Cpath d='M7 0C5.4 21 8.6 43 7 64S5.4 107 7 128' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") repeat-y;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='128' viewBox='0 0 14 128'%3E%3Cpath d='M7 0C5.4 21 8.6 43 7 64S5.4 107 7 128' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") repeat-y;
}
#w3-s-look .w4g-top { display: none; }
body[data-route="look"] #w3-s-look .w4g-top { display: block; flex: none; }
body[data-route="look"] #w3-s-look .w3k-head { display: none; }
#w3-s-look .w4g-top button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#w3-s-look .w4g-top button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 3px; border-radius: 2px; }
/* 顶上：返回 + 页名 + 卷（位置、写法跟設定一样） */
#w3-s-look .w4g-head { box-sizing: border-box; display: flex; align-items: flex-start; width: 100%; max-width: 520px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 0 44px; }
#w3-s-look .w4g-top .w4g-back { width: 34px; height: 34px; font-size: 22px; line-height: 1; color: var(--w4-ink2); }
#w3-s-look .w4g-ttl { flex: 1; padding-top: 4px; text-align: right; color: var(--w4-ink); }
#w3-s-look .w4g-ttl b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1; }
#w3-s-look .w4g-ttl small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 300; letter-spacing: .22em; color: var(--w4-ink2); }
#w3-s-look .w4g-vols { box-sizing: border-box; display: flex; align-items: baseline; gap: 22px; width: 100%; max-width: 520px; margin: 22px auto 0; padding: 0 22px 0 66px; }
#w3-s-look .w4g-top .w4g-vols button { flex: none; padding: 4px 0; font-family: var(--w4-kai); font-size: var(--w4-fs-title); letter-spacing: .14em; line-height: 1.3; color: var(--w4-ink3); text-align: left; }
#w3-s-look .w4g-vols button small { display: block; margin-top: 2px; font-family: var(--w4-sans); font-weight: 300; font-size: var(--w4-fs-tiny); letter-spacing: .2em; }
#w3-s-look .w4g-top .w4g-vols button[aria-selected="true"] { font-weight: 700; font-size: var(--w4-fs-head); color: var(--w4-ink); text-shadow: 0 0 14px rgba(var(--w4-arm), .7); }
#w3-s-look .w4g-vols button[aria-selected="true"] small { color: rgb(var(--w4-arm)); text-shadow: none; }
/* 設定那排「卷」最前面加的「外观」：小英文 */
body[data-route="settings"] #dt-s-settings .dt-subnav button[data-look]::after { content: 'look'; }
/* 正文 */
body[data-route="look"] #w3-s-look .w3k-body { box-sizing: border-box; display: block; width: 100%; padding: 0 calc(var(--gk-x) + 22px) calc(70px + env(safe-area-inset-bottom, 0px)) calc(var(--gk-x) + 66px); scrollbar-width: none; overscroll-behavior: contain; }
body[data-route="look"] #w3-s-look .w3k-body::-webkit-scrollbar { display: none; }
body[data-route="look"] #w3-s-look .w3k-body::after { content: '卷 终'; display: block; margin-top: 46px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .3em; color: var(--w4-ink3); }
/* 一节：楷体的名字，左边钉一针 */
body[data-route="look"] #w3-s-look .w3k-row { position: relative; margin: 34px 0 0; }
body[data-route="look"] #w3-s-look .w3k-row::before { content: ''; position: absolute; left: -66px; top: 13px; width: 52px; height: 1px; background: linear-gradient(to right, transparent 22px, rgba(var(--w4-arm), .7) 22px); pointer-events: none; }
body[data-route="look"] #w3-s-look .w3k-row::after { content: ''; position: absolute; left: -17px; top: 10px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(var(--w4-arm), .8); background: var(--w4-bg); pointer-events: none; }
body[data-route="look"] #w3-s-look .w3k-cap { font-family: var(--w4-kai) !important; font-weight: 700; font-size: var(--w4-fs-head); letter-spacing: .16em; line-height: 1.35; color: var(--w4-ink); }
body[data-route="look"] #w3-s-look .w3k-note { margin-top: 8px; font-size: var(--w4-fs-note); font-weight: 300; line-height: 1.7; letter-spacing: .04em; color: var(--w4-ink3); }
/* 「模式」（浅色 / 深色）先收起来：v4 现在通铺深色（src/yoru.cjs 钉着），浅色皮做好再放出来 */
body[data-route="look"] #w3-s-look .w3k-row:has(.w3k-opts[data-k="mode"]) { display: none; }
/* 选项：一排楷体的词，选中的亮 */
body[data-route="look"] #w3-s-look .w3k-opts { margin-top: 10px; gap: 4px 22px; }
body[data-route="look"] #w3-s-look .w3k-opts button {
height: auto; padding: 4px 0; gap: 7px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none;
font-family: var(--w4-kai); font-weight: 400; font-size: 17px; letter-spacing: .1em; line-height: 1.3; color: var(--w4-ink3);
}
body[data-route="look"] #w3-s-look .w3k-opts button.on { font-weight: 700; color: var(--w4-ink); text-shadow: 0 0 12px rgba(var(--w4-arm), .9); }
body[data-route="look"] #w3-s-look .w3k-opts button:disabled { opacity: .4; }
body[data-route="look"] #w3-s-look .w3k-opts i { width: 8px; height: 8px; box-shadow: 0 0 0 1px rgba(var(--w4-ink-rgb), .28); opacity: .75; }
body[data-route="look"] #w3-s-look .w3k-opts button.on i { opacity: 1; box-shadow: 0 0 0 1px rgba(var(--w4-ink-rgb), .5), 0 0 8px var(--sw); }
/* 壁纸：小图 + 名字 …… 换 › 清 › */
body[data-route="look"] #w3-s-look .w3k-walls { margin-top: 6px; display: block; }
body[data-route="look"] #w3-s-look .w3k-wall { width: 100%; padding: 9px 0; gap: 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-route="look"] #w3-s-look .w3k-thumb { border: 1px solid rgba(var(--w4-arm), .3); border-radius: 2px; background-color: transparent; }
body[data-route="look"] #w3-s-look .w3k-wall-b { display: flex; flex-wrap: wrap; align-items: baseline; }
body[data-route="look"] #w3-s-look .w3k-wall-b span { display: flex; flex: 1; align-items: baseline; font-size: var(--w4-fs-body); letter-spacing: .04em; color: var(--w4-ink); }
body[data-route="look"] #w3-s-look .w3k-wall-b span::after { content: ''; flex: 1; min-width: 14px; margin: 0 0 3px 10px; border-bottom: 1px dotted rgba(var(--w4-arm), .38); }
body[data-route="look"] #w3-s-look .w3k-wall-b small { flex: 0 0 100%; margin-top: 3px; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .04em; color: var(--w4-ink3); }
body[data-route="look"] #w3-s-look .w3k-wall-acts { gap: 16px; }
body[data-route="look"] #w3-s-look .w3k-wall-acts button {
height: auto; padding: 2px 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none;
font-family: var(--w4-kai); font-size: var(--w4-fs-title); letter-spacing: .1em; line-height: 1.4; color: rgb(var(--w4-arm));
}
body[data-route="look"] #w3-s-look .w3k-wall-acts button::after { content: ' ›'; }
body[data-route="look"] #w3-s-look .w3k-wall-acts [data-clear] { color: rgb(var(--w4-warm)); }
body[data-route="look"] #w3-s-look button:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 3px; border-radius: 2px; }
/* ================================================================
SEG:KAIWA v4.1 —— 聊天（src/kaiwa.cjs 放背景那几层、状态行、出场）
2026-10-01 小槐：「落！」。旧页（runtime/chat-*.cjs 等）一行没动，这里只换皮：整页是一页书。
没有头像、没有气泡；我的话是印的正文，她的话靠右、字底下有横格线、稍微歪一点；两边都是楷体。
一条有粗细的口腕从字后面流过去；整页一层细颗粒；输入框是两层的直角框；加号是一根小须挂五个词。
小样：https://claude.ai/artifact/PvP3VpwvwmeU8SfxfgCYMX（Version 6）
只在聊天页生效（body[data-route="chat"]）。颜色、字体、字号走 styles/w4-tokens.css。
★ 外观页的「材质」「壁纸」在这一页不再起作用（底是深海、话没有气泡）。
================================================================ */
body[data-route="chat"] #dt-s-chat {
--kw-x: max(calc((100% - 520px) / 2), 0px);
position: fixed; inset: 0; z-index: 45; max-width: none; margin: 0; border: 0; border-radius: 0; overflow: hidden;
background: var(--w4-bg) !important; background-image: none !important; box-shadow: none !important; color: var(--w4-ink); font-family: var(--w4-sans);
--bg: var(--w4-bg); --card: transparent; --bg-2: transparent; --edge: transparent; --shadow: none; --line: var(--w4-line);
--ink: var(--w4-ink); --ink2: var(--w4-ink2); --ink-2: var(--w4-ink2); --ink-3: var(--w4-ink3); --muted: var(--w4-ink2); --sub: var(--w4-ink);
--accent: rgb(var(--w4-arm)); --accent-rgb: var(--w4-arm); --on-accent: var(--w4-bg);
}
body[data-route="chat"] #dt-s-chat::before, body[data-route="chat"] #dt-s-chat::after { display: none !important; }
/* 背景：口腕 + 浮尘 + 页边线；最上面盖一层颗粒 */
#dt-s-chat .w4k-bg, #dt-s-chat .w4k-grain, #dt-s-chat .w4k-stat { display: none; }
body[data-route="chat"] #dt-s-chat .w4k-bg { display: block; position: absolute; inset: 0 var(--kw-x); pointer-events: none; z-index: 0; }
#dt-s-chat .w4k-ribbon { position: absolute; inset: -10px 0; width: 100%; height: calc(100% + 20px); animation: w4kSway 19s ease-in-out infinite; transform-origin: 50% 0; will-change: transform; }
#dt-s-chat .w4k-ribbon .band { fill: rgba(var(--w4-arm), .13); stroke: rgba(var(--w4-arm), .42); stroke-width: 1; vector-effect: non-scaling-stroke; }
#dt-s-chat .w4k-ribbon .dry { fill: none; stroke: rgba(var(--w4-arm), .3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 60 22 130 40 30 70; }
#dt-s-chat .w4k-ribbon .hair { fill: none; stroke: rgba(var(--w4-arm), .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes w4kSway { 0%, 100% { transform: translateX(-5px) skewX(-1.2deg); } 50% { transform: translateX(7px) skewX(1.6deg); } }
#dt-s-chat .w4k-dust { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(var(--w4-arm), .55); animation: w4kDrift var(--d, 14s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes w4kDrift { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(var(--dx, 8px), -26px); opacity: .8; } }
#dt-s-chat .w4k-edge { position: absolute; right: 16px; top: calc(62px + env(safe-area-inset-top, 0px)); bottom: 110px; width: 1px; background: var(--w4-line); }
#dt-s-chat .w4k-edge b { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 6px 0; background: var(--w4-bg); font-family: var(--w4-kai); font-weight: 400; font-size: var(--w4-fs-note); color: var(--w4-ink3); writing-mode: vertical-rl; letter-spacing: .3em; white-space: nowrap; }
body[data-route="chat"] #dt-s-chat .w4k-grain { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .5; mix-blend-mode: screen;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .74 0 0 0 0 .95 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 页眉：返回、名字、状态；下面一道细线。头像不要 */
body[data-route="chat"] #dt-s-chat .dt-chat-head { position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: center; gap: 8px; flex: none; width: auto; min-height: 0;
margin: 0 calc(var(--kw-x) + 34px) 0 calc(var(--kw-x) + 14px) !important; padding: calc(14px + env(safe-area-inset-top, 0px)) 0 8px !important; border: 0 !important; border-bottom: 1px solid var(--w4-line) !important; border-radius: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body[data-route="chat"] #dt-s-chat .dt-chat-head .dt-avatar { display: none !important; }
body[data-route="chat"] #dt-s-chat .dt-chat-head .dt-back { display: flex !important; align-items: center; justify-content: flex-start; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--w4-ink2); }
body[data-route="chat"] #dt-s-chat .dt-chat-head .dt-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body[data-route="chat"] #dt-s-chat .dt-chat-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
body[data-route="chat"] #dt-s-chat .dt-chat-name { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); letter-spacing: .14em; color: var(--w4-ink); white-space: nowrap; }
body[data-route="chat"] #dt-s-chat .dt-chat-name .dt-model-badge { margin-left: 6px; padding: 0; border: 0; background: none; font-family: var(--w4-sans); font-weight: 300; font-size: var(--w4-fs-tiny); letter-spacing: .16em; color: var(--w4-ink3); }
body[data-route="chat"] #dt-s-chat .dt-chat-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; font-weight: 300; letter-spacing: .16em; color: var(--w4-ink2); }
body[data-route="chat"] #dt-s-chat .dt-chat-status::before { display: none; }
body[data-route="chat"] #dt-s-chat .dt-head-btn { width: 26px; height: 30px; margin-right: -8px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--w4-ink2); }
/* 正文 */
body[data-route="chat"] #dt-s-chat .dt-msgs { position: relative; z-index: 1; box-sizing: border-box; padding: 10px calc(var(--kw-x) + 44px) 20px calc(var(--kw-x) + 22px) !important; gap: 0 !important; background: none !important; scrollbar-width: none; }
body[data-route="chat"] #dt-s-chat .dt-msgs::-webkit-scrollbar { display: none; }
body[data-route="chat"] #dt-s-chat .v2-daysep { display: none; } /* 她：「现在也没跨天提示 只有时间」 */
body[data-route="chat"] #dt-s-chat .msg { display: block; margin: 26px 0 0; padding: 0; gap: 0; max-width: none; }
body[data-route="chat"] #dt-s-chat .msg .mini { display: none !important; }
body[data-route="chat"] #dt-s-chat .msg .col { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; min-width: 0; gap: 0; }
body[data-route="chat"] #dt-s-chat .msg.me .col { margin-left: auto; align-items: flex-end; max-width: 80%; }
/* 一句话：没有底、没有边、没有圆角。两边都是楷体 */
body[data-route="chat"] #dt-s-chat .msg .bubble {
order: 1; max-width: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
font-family: var(--w4-kai) !important; font-weight: 400; font-size: var(--font-size, 14px) !important; line-height: 1.8; /* 字号跟設定里「聊天气泡字号」那根滑杆走（旧代码写在 html 的 --font-size 上） */ letter-spacing: .06em; color: var(--w4-ink) !important; word-break: break-word;
}
body[data-route="chat"] #dt-s-chat .msg .bubble::before, body[data-route="chat"] #dt-s-chat .msg .bubble::after { display: none !important; }
body[data-route="chat"] #dt-s-chat .msg .bubble b, body[data-route="chat"] #dt-s-chat .msg .bubble strong { font-weight: 700; color: var(--w4-ink); }
body[data-route="chat"] #dt-s-chat .msg .bubble code { padding: 0 3px; border: 0; border-radius: 0; background: rgba(var(--w4-arm), .1); font-size: .9em; color: var(--w4-ink-soft); }
body[data-route="chat"] #dt-s-chat .msg .bubble a { color: rgb(var(--w4-arm)); }
/* 她的话：字底下一道道横格线，整块稍微歪一点（三种歪法轮着来） */
body[data-route="chat"] #dt-s-chat .msg.me .bubble:not(.sticker):not(.file-card):not([style*="padding:0"]) {
padding: 0 3px !important; line-height: 25px; color: var(--w4-ink-soft) !important;
background: repeating-linear-gradient(to bottom, transparent 0 24px, rgba(var(--w4-arm), .22) 24px 25px) !important;
}
body[data-route="chat"] #dt-s-chat .msg.me .col { transform: rotate(-.8deg); transform-origin: right center; }
body[data-route="chat"] #dt-s-chat .msg.me:nth-child(3n) .col { transform: rotate(.6deg); }
body[data-route="chat"] #dt-s-chat .msg.me:nth-child(3n+1) .col { transform: rotate(-.4deg); }
/* 连着说的几句贴近一点 */
body[data-route="chat"] #dt-s-chat .msg:not(.me) + .msg:not(.me), body[data-route="chat"] #dt-s-chat .msg.me + .msg.me { margin-top: 11px; } /* 她：「稍微有一点挤的慌 间距拉开一点」—— 原来是 14 / 2 */
/* 时间：每句话下面都有一行小字。
第一版是 7.5px、最淡的墨色、一串话只留最后一句 —— 深底上等于没有，她说「时间戳丢了」。
现在跟旧页一样每句都有，小注那档字号、次一级墨色。 */
body[data-route="chat"] #dt-s-chat .msg .time { order: 0 !important; margin: 0 0 4px !important; /* 一串话只有头一句带时间（旧页的规矩），所以放在话上面当这一串的头；放下面会夹在第一句和第二句中间 */ padding: 0 !important; font-family: var(--w4-sans); font-size: var(--w4-fs-note) !important; font-weight: 300 !important; letter-spacing: .14em; line-height: 15px; color: var(--w4-ink2) !important; font-variant-numeric: tabular-nums; opacity: 1 !important; }
body[data-route="chat"] #dt-s-chat .msg .time .tts-btn { color: var(--w4-ink-soft); }
/* 话里夹的东西：都压平 —— 细边、方角、一点点透 */
body[data-route="chat"] #dt-s-chat .msg .bubble img { border-radius: 2px !important; }
body[data-route="chat"] #dt-s-chat .msg .bubble.sticker { font-family: var(--w4-sans); }
body[data-route="chat"] #dt-s-chat .xf-card,
body[data-route="chat"] #dt-s-chat .sg-card,
body[data-route="chat"] #dt-s-chat .msg .bubble.file-card,
body[data-route="chat"] #dt-s-chat .msg .bubble[data-page] {
border: 1px solid rgba(var(--w4-arm), .26) !important; border-radius: 2px !important; background: rgba(var(--w4-arm), .05) !important; box-shadow: none !important; color: var(--w4-ink);
}
body[data-route="chat"] #dt-s-chat .msg .bubble.file-card, body[data-route="chat"] #dt-s-chat .msg .bubble[data-page] { padding: 10px 12px !important; }
body[data-route="chat"] #dt-s-chat .xf-card .a { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-title); color: var(--w4-ink); }
body[data-route="chat"] #dt-s-chat .xf-card .c { font-size: var(--w4-fs-tiny); letter-spacing: .3em; color: var(--w4-ink3); }
body[data-route="chat"] #dt-s-chat .vbar { border: 1px solid rgba(var(--w4-arm), .26); border-radius: 2px; background: rgba(var(--w4-arm), .05); box-shadow: none; }
body[data-route="chat"] #dt-s-chat .q-ref, body[data-route="chat"] #dt-s-chat .bubble .qref, body[data-route="chat"] #dt-s-chat .bubble .quote {
display: block; margin: 0 0 4px; padding: 0 0 0 8px; border: 0; border-left: 1px solid rgba(var(--w4-arm), .6); border-radius: 0; background: none; font-family: var(--w4-sans); font-size: 10.5px; font-weight: 300; line-height: 17px; color: var(--w4-ink2); }
/* 记忆召回 / 想了想 / 翻本子的那张小条子（「⋯ 记起 3 条 · 想了想 · 120 字」，点开是明细）。
第一版把它的字调成了最淡的那档、又小，深底上几乎看不见 —— 她说「记忆召回那个小条子不见咯」。
现在：楷体小字、次一级的墨色，左边一道口腕色的细线；点开以后里面的卡片是直角细边。 */
body[data-route="chat"] #dt-s-chat .think-line { margin: 10px 0 0 !important; padding: 0 0 0 9px !important; max-width: 86%; border: 0 !important; border-left: 1px solid rgba(var(--w4-arm), .6) !important; border-radius: 0; background: none; box-shadow: none; opacity: 1 !important; font-size: var(--w4-fs-small) !important; font-weight: 300; line-height: 1.7; color: var(--w4-ink2) !important; }
body[data-route="chat"] #dt-s-chat .think-line summary { font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .08em; color: var(--w4-ink2) !important; }
body[data-route="chat"] #dt-s-chat .think-line[open] summary { color: var(--w4-ink-soft) !important; }
body[data-route="chat"] #dt-s-chat .think-line > div, body[data-route="chat"] #dt-s-chat .think-line .tr-think, body[data-route="chat"] #dt-s-chat .think-line .tr-tool { color: var(--w4-ink2) !important; }
body[data-route="chat"] #dt-s-chat .think-line .tr-tool .tr-name { color: var(--w4-ink-soft); }
body[data-route="chat"] #dt-s-chat .think-line .rc-card { border: 1px solid rgba(var(--w4-arm), .26); background: rgba(var(--w4-arm), .05); color: var(--w4-ink-soft); }
body[data-route="chat"] #dt-s-chat .think-line .rc-hit { background: none; border-top: 1px solid var(--w4-line); padding: 8px 0 2px; }
body[data-route="chat"] #dt-s-chat .think-line .rc-head, body[data-route="chat"] #dt-s-chat .think-line .rc-title, body[data-route="chat"] #dt-s-chat .think-line .rc-kw b { color: var(--w4-ink); }
body[data-route="chat"] #dt-s-chat .think-line .rc-kw, body[data-route="chat"] #dt-s-chat .think-line .rc-meta, body[data-route="chat"] #dt-s-chat .think-line .rc-lab { color: var(--w4-ink2); }
/* 旧的三个点：有状态行的时候不要 */
body[data-route="chat"] #dt-s-chat.w4k .msg.typing { display: none; }
/* 出场：他的话像墨显出来，她的话从上面落下来 */
body[data-route="chat"] #dt-s-chat .msg.w4k-in:not(.me) { animation: w4kInk .9s cubic-bezier(.22, 1, .36, 1) both; }
body[data-route="chat"] #dt-s-chat .msg.w4k-in.me { animation: w4kFall .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes w4kInk { from { opacity: 0; filter: blur(5px); letter-spacing: .08em; } to { opacity: 1; filter: none; } }
@keyframes w4kFall { from { opacity: 0; transform: translateY(-26px) rotate(-2.5deg); } 60% { opacity: 1; } to { transform: none; } }
/* 他在想：小水母 + 一个词 */
body[data-route="chat"] #dt-s-chat.w4k .w4k-stat:not([hidden]) { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: none; margin: 0 calc(var(--kw-x) + 34px) 8px calc(var(--kw-x) + 22px); font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .08em; color: var(--w4-ink2); }
#dt-s-chat .w4k-stat svg { flex: none; width: 13px; height: 18px; overflow: visible; }
#dt-s-chat .w4k-stat svg path { fill: none; stroke: rgba(var(--w4-arm), .85); stroke-width: 1; stroke-linecap: round; }
#dt-s-chat .w4k-stat svg .t { animation: w4kTail 3.2s ease-in-out infinite; transform-origin: 6.5px 7px; }
@keyframes w4kTail { 50% { transform: skewX(9deg); } }
#dt-s-chat .w4k-stat b { font-weight: 400; color: var(--w4-ink-soft); }
#dt-s-chat .w4k-stat .w { display: inline-block; }
#dt-s-chat .w4k-stat .w.sw { animation: w4kInk .7s ease both; }
/* 行尾的「停」：一个字加一条底线，跟这页别的字一样是楷体 */
#dt-s-chat .w4k-stat .w4k-stop { margin-left: auto; padding: 2px 6px; border: 0; border-bottom: 1px solid rgba(var(--w4-arm), .55); border-radius: 0; background: none; font: inherit; letter-spacing: .2em; color: var(--w4-ink2); cursor: pointer; }
#dt-s-chat .w4k-stat .w4k-stop:hover { color: var(--w4-ink); }
#dt-s-chat .w4k-stat .w4k-stop:disabled { opacity: .5; cursor: default; border-bottom-color: transparent; }
/* 引用条 */
body[data-route="chat"] #dt-s-chat .qbar { position: relative; z-index: 1; margin: 0 calc(var(--kw-x) + 34px) 6px calc(var(--kw-x) + 22px); padding: 0 0 0 8px; border: 0; border-left: 1px solid rgba(var(--w4-arm), .6); border-radius: 0; background: none; box-shadow: none; font-size: 10.5px; font-weight: 300; color: var(--w4-ink2); }
/* 输入：两层的框（上面写字，下面一排），直角 */
body[data-route="chat"] #dt-s-chat .dt-composer {
position: relative; z-index: 2; flex: none; box-sizing: border-box; width: auto; max-width: none;
margin: 0 calc(var(--kw-x) + 34px) calc(16px + env(safe-area-inset-bottom, 0px)) calc(var(--kw-x) + 22px) !important; padding: 9px 10px 8px !important;
border: 1px solid rgba(var(--w4-arm), .3) !important; border-radius: 0 !important; background: rgba(var(--w4-arm), .05) !important; box-shadow: none !important;
-webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
}
body[data-route="chat"] #dt-s-chat .dt-composer .dt-input { padding: 1px 2px 8px; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; font-family: var(--w4-kai); font-size: 13.5px; line-height: 22px; letter-spacing: .06em; color: var(--w4-ink); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-input::placeholder { color: var(--w4-ink3); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-cbtn { width: 30px; height: 30px; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--w4-ink2); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-cbtn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-cbtn svg circle:first-child { stroke-opacity: 0; } /* 加号 / 表情外面那个圈不要，加号只剩十字 */
body[data-route="chat"] #dt-s-chat .dt-composer #dtStickerBtn svg circle:first-child { stroke-opacity: 1; }
body[data-route="chat"] #dt-s-chat .dt-composer #dtPlusBtn[aria-expanded="true"] { color: rgb(var(--w4-arm)); }
body[data-route="chat"] #dt-s-chat .dt-composer .v2-model { height: auto; padding: 3px 8px; border: 1px solid rgba(var(--w4-arm), .28) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: var(--w4-fs-note); font-weight: 300; letter-spacing: .12em; color: var(--w4-ink2); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-send { width: 34px; height: 30px; border: 0 !important; border-radius: 0 !important; background: rgba(var(--w4-arm), .85) !important; box-shadow: none !important; color: var(--w4-bg); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-send svg { width: 17px; height: 17px; stroke: currentColor !important; stroke-width: 1.4; }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-send.voice { background: none !important; border: 1px solid rgba(var(--w4-arm), .45) !important; color: rgb(var(--w4-arm)); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-send.rec, body[data-route="chat"] #dt-s-chat .dt-composer.rec .dt-send { background: rgba(var(--w4-warm), .85) !important; border: 0 !important; color: var(--w4-bg); }
body[data-route="chat"] #dt-s-chat .dt-composer .dt-send .ic-stop rect { fill: var(--w4-bg); }
body[data-route="chat"] #dt-s-chat #dtVrTime { font-size: var(--w4-fs-small); color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
/* 加号：一根小须从加号往上长，五样东西一个接一个挂上去（位置还是旧代码钉在加号圆心上的那个点） */
body[data-route="chat"] #dt-s-chat #dtPlusPanel .goo-blobs { display: none; }
body[data-route="chat"] #dt-s-chat #dtPlusPanel::before { content: ''; position: absolute; left: 0; bottom: var(--lift, 60px); width: 1px; height: calc(var(--n, 5) * 30px + 2px); background: rgba(var(--w4-arm), .6); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
body[data-route="chat"] #dt-s-chat #dtPlusPanel.on::before { transform: scaleY(1); }
body[data-route="chat"] #dt-s-chat #dtPlusPanel .plus-grid .plus-item {
left: 0; top: -12px; width: auto; height: 24px; display: flex; align-items: center; padding-left: 13px; white-space: nowrap;
transform: translate(-8px, calc(var(--i, 0) * -30px - var(--lift, 60px) - 10px)); transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
body[data-route="chat"] #dt-s-chat #dtPlusPanel.on .plus-grid .plus-item { transform: translate(0, calc(var(--i, 0) * -30px - var(--lift, 60px) - 18px)); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
body[data-route="chat"] #dt-s-chat #dtPlusPanel.closing .plus-grid .plus-item { transition-delay: 0ms; transition-duration: .2s; }
body[data-route="chat"] #dt-s-chat #dtPlusPanel .plus-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 1px; background: rgba(var(--w4-arm), .6); }
body[data-route="chat"] #dt-s-chat #dtPlusPanel .plus-ico { display: none; }
body[data-route="chat"] #dt-s-chat #dtPlusPanel .plus-label { position: static; transform: none; padding: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--w4-kai); font-size: var(--w4-fs-title); line-height: 24px; letter-spacing: .12em; color: var(--w4-ink); text-shadow: 0 0 8px var(--w4-bg), 0 0 8px var(--w4-bg); }
body[data-route="chat"] #dt-s-chat .dt-composer #dtPlusBtn[aria-expanded="true"] svg { transform: rotate(45deg); }
/* 加号开着的时候，后面的话退远一点，不然词会压在字上 */
body[data-route="chat"] #dt-s-chat .dt-msgs { transition: opacity .3s ease; }
body[data-route="chat"] #dt-s-chat:has(#dtPlusPanel.on) .dt-msgs { opacity: .22; }
/* 表情面板：压平 */
body[data-route="chat"] #dt-s-chat .dt-sticker-panel { position: relative; z-index: 2; margin: 0 calc(var(--kw-x) + 34px) 12px calc(var(--kw-x) + 22px); border: 1px solid rgba(var(--w4-arm), .22) !important; border-radius: 0 !important; background: var(--w4-bg) !important; box-shadow: none !important; }
body[data-route="chat"] #dt-s-chat .dt-sticker-panel .sk-head .t { font-family: var(--w4-kai); font-size: var(--w4-fs-title); letter-spacing: .14em; color: var(--w4-ink); }
body[data-route="chat"] #dt-s-chat .dt-sticker-panel button { border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--w4-kai); color: rgb(var(--w4-arm)); }
@media (prefers-reduced-motion: reduce) {
#dt-s-chat .w4k-ribbon, #dt-s-chat .w4k-dust, #dt-s-chat .w4k-stat svg .t, #dt-s-chat .w4k-stat .w.sw { animation: none; }
body[data-route="chat"] #dt-s-chat .msg.w4k-in:not(.me), body[data-route="chat"] #dt-s-chat .msg.w4k-in.me { animation: none; }
body[data-route="chat"] #dt-s-chat #dtPlusPanel::before, body[data-route="chat"] #dt-s-chat #dtPlusPanel .plus-grid .plus-item { transition: none; }
}
/* ── 额度那条线 (SEG:USAGE-METER v1 · 2026-10-06) ──
压在页眉底下那道细线上（margin-top:-1px）：亮的那一截是上下文占滚动线的几成，过九成变暖色。
线下一行最小号的字靠右；点开是几行细账，靠左、读的字号。不加框。 */
#dt-s-chat .w4k-meter { display: none; }
body[data-route="chat"] #dt-s-chat.w4k .w4k-meter { position: relative; z-index: 1; display: block; flex: none; box-sizing: border-box; width: auto;
margin: -1px calc(var(--kw-x) + 34px) 0 calc(var(--kw-x) + 14px); padding: 0 0 3px; border: 0; border-radius: 0; background: none; box-shadow: none;
text-align: right; font-family: var(--w4-sans); font-size: var(--w4-fs-tiny); line-height: 1.6; letter-spacing: .14em; color: var(--w4-ink3);
font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#dt-s-chat .w4k-meter i { display: block; height: 1px; margin-bottom: 4px; }
#dt-s-chat .w4k-meter i b { display: block; width: 0; height: 1px; background: rgba(var(--w4-arm), .95); box-shadow: 0 0 6px rgba(var(--w4-arm), .5); transition: width .7s ease; }
#dt-s-chat .w4k-meter.hot i b { background: rgba(var(--w4-warm), .95); box-shadow: 0 0 6px rgba(var(--w4-warm), .5); }
#dt-s-chat .w4k-meter .l { display: block; min-height: 1.6em; }
#dt-s-chat .w4k-meter .d { display: block; margin: 4px 0 2px; text-align: left; white-space: pre-line; font-size: var(--w4-fs-note); line-height: 1.9; letter-spacing: .06em; color: var(--w4-ink2); }
#dt-s-chat .w4k-meter .d[hidden] { display: none; }
#dt-s-chat .w4k-meter:focus-visible { outline: 1px solid rgba(var(--w4-arm), .7); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #dt-s-chat .w4k-meter i b { transition: none; } }
/* ── 额度线点开的细账：一项一行，名字 · 细条 · 读数 (SEG:USAGE-METER v2 · 2026-10-06) ──
条比顶上那道线粗一点 (3px) 好认；过线 / 断过缓存的那一项是暖色；画时间的那道淡一些。底下小字放剩下的数。 */
#dt-s-chat .w4k-meter .d { white-space: normal; }
#dt-s-chat .w4k-meter .d .r { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; column-gap: 10px; align-items: center; margin-top: 8px; }
#dt-s-chat .w4k-meter .d .r:first-child { margin-top: 2px; }
#dt-s-chat .w4k-meter .d .n { color: var(--w4-ink2); white-space: nowrap; }
#dt-s-chat .w4k-meter .d .t { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(var(--w4-arm), .16); }
#dt-s-chat .w4k-meter .d .t:empty { background: none; }
#dt-s-chat .w4k-meter .d .t b { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: rgba(var(--w4-arm), .9); box-shadow: 0 0 6px rgba(var(--w4-arm), .35); }
#dt-s-chat .w4k-meter .d .t u { position: absolute; top: -2px; width: 1px; height: 7px; background: var(--w4-ink2); text-decoration: none; }
#dt-s-chat .w4k-meter .d .v { min-width: 3.2em; text-align: right; color: var(--w4-ink); white-space: nowrap; }
#dt-s-chat .w4k-meter .d .s { grid-column: 1 / -1; font-size: var(--w4-fs-tiny); line-height: 1.7; letter-spacing: .1em; color: var(--w4-ink3); }
#dt-s-chat .w4k-meter .d .s:empty { display: none; }
#dt-s-chat .w4k-meter .d .r.hot .t b { background: rgba(var(--w4-warm), .95); box-shadow: 0 0 6px rgba(var(--w4-warm), .4); }
#dt-s-chat .w4k-meter .d .r.time .t b { background: rgba(var(--w4-arm), .45); box-shadow: none; }
/* ── 聊天 · 线下 (SEG:CHAT-MODE v1 · 2026-10-07) ──
页眉右边: 楷体的两个字 + 最小号的英文; 当前那个字色实、底下一道细线; 「房间」只在线下时出现, 暖色。不加框。 */
#dt-s-chat .w4k-mode { display: none; }
body[data-route="chat"] #dt-s-chat.w4k .w4k-mode { display: flex; align-items: baseline; gap: 14px; margin-left: auto; flex: none; white-space: nowrap; }
#dt-s-chat .w4k-mode button, #dt-s-chat .w4k-mode a { appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none;
margin: 0; padding: 2px 0 3px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); line-height: 1.4; letter-spacing: .12em; color: var(--w4-ink3);
text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#dt-s-chat .w4k-mode i { font-style: normal; font-family: var(--w4-sans); font-size: var(--w4-fs-tiny); letter-spacing: .14em; margin-left: 4px; opacity: .75; }
#dt-s-chat .w4k-mode button[aria-pressed="true"] { color: var(--w4-ink); border-bottom-color: rgba(var(--w4-arm), .85); }
#dt-s-chat .w4k-mode .room { color: rgba(var(--w4-warm), .95); }
#dt-s-chat .w4k-mode .room[hidden] { display: none; }
#dt-s-chat .w4k-mode button:focus-visible, #dt-s-chat .w4k-mode a:focus-visible { outline: 1px solid rgba(var(--w4-arm), .7); outline-offset: 3px; }
/* ── 心里话 (SEG:INNER-SLOT v1 · 2026-10-07) ── 他这一轮回话上面的一块小字；能折，折起来只剩「心里 inner」两个词。不加框，左边一道细线。 */
#dt-s-chat .w4k-inner { margin: 10px calc(var(--kw-x) + 44px) 2px calc(var(--kw-x) + 22px); padding: 0 0 0 10px; border-left: 1px solid rgba(var(--w4-arm), .45);
font-family: var(--w4-kai); font-size: var(--w4-fs-small); line-height: 1.8; color: var(--w4-ink2); }
#dt-s-chat .w4k-inner summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; font-size: var(--w4-fs-note); letter-spacing: .18em; color: var(--w4-ink3); -webkit-tap-highlight-color: transparent; }
#dt-s-chat .w4k-inner summary::-webkit-details-marker { display: none; }
#dt-s-chat .w4k-inner summary i { font-style: normal; font-family: var(--w4-sans); font-size: var(--w4-fs-tiny); letter-spacing: .14em; margin-left: 5px; opacity: .75; }
#dt-s-chat .w4k-inner[open] summary { color: rgba(var(--w4-arm), .9); }
#dt-s-chat .w4k-inner p { margin: 2px 0 0; font-style: italic; }
#dt-s-chat .w4k-inner summary:focus-visible { outline: 1px solid rgba(var(--w4-arm), .7); outline-offset: 3px; }
/* SEG:INNER-LONG v1 (2026-10-07) —— 长独白有好几段: 换行和空行照原样 */
#dt-s-chat .w4k-inner p { white-space: pre-wrap; }
/* ── 糖罐 · 吧台 (SEG:MAMO-ENTRY v1 · 2026-10-07) ── 从「+」打开，整页盖上来的一张；顶上一行名字和「收起」。 */
.w4k-mamo { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--w4-bg, #07070D); }
.w4k-mamo[hidden] { display: none; }
.w4k-mamo .bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; border-bottom: 1px solid var(--w4-line, rgba(255, 255, 255, .12)); }
.w4k-mamo .bar b { font-family: var(--w4-kai, serif); font-weight: 700; font-size: var(--w4-fs-title, 15px); letter-spacing: .14em; color: var(--w4-ink, #eee); }
.w4k-mamo .bar button { appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 1px solid rgba(var(--w4-arm, 180, 170, 240), .55); border-radius: 0; padding: 2px 6px;
font-family: var(--w4-kai, serif); font-size: var(--w4-fs-small, 12px); letter-spacing: .2em; color: var(--w4-ink2, #aaa); cursor: pointer; }
.w4k-mamo .bar button:focus-visible { outline: 1px solid rgba(var(--w4-arm, 180, 170, 240), .7); outline-offset: 3px; }
.w4k-mamo .st { flex: 1; min-height: 0; }
.w4k-mamo iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b0b12; }
/* ── 药盒 (SEG:PILLS v1 · 2026-10-07) ── 挂着的药在输入框上面一行；药盒本体是店家的组件，盖在最上面。 */
body[data-route="chat"] #dt-s-chat .w4k-pilltag { position: relative; z-index: 2; display: block; margin: 0 calc(var(--kw-x) + 34px) 6px calc(var(--kw-x) + 22px); }
body[data-route="chat"] #dt-s-chat .w4k-pilltag:empty { display: none; }
pill-box#w4kPillBox { position: relative; z-index: 80; }
/* ================================================================
SEG:TSUUWA v4.1 —— 通话界面（语音通话打开的那一整屏，#dtCall）
2026-10-01 小槐装完聊天页发来截图：「还是v3的」。旧代码（runtime/calls.cjs）一行没动，这里只换皮：
深海底 + 细颗粒；头像不要，换成一只线描的水母，顶上一根线吊着它；名字楷体；
声波是一排细竖线；挂断 / 接听是细线的圆，不是实心的大圆球。
★ 这块是旧代码第一次打电话时才塞进 的，它自己的样式也是那时才塞进 （在这份后面），
所以这里每条都带 #dtCall 的 id，靠优先级压过去。
================================================================ */
body #dtCall.dt-call {
z-index: 900; padding: calc(env(safe-area-inset-top, 0px) + 96px) 24px calc(env(safe-area-inset-bottom, 0px) + 46px);
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans); -webkit-backdrop-filter: none; backdrop-filter: none;
--hang: rgb(var(--w4-warm)); --ans: rgb(var(--w4-arm));
}
/* 顶上吊着水母的那根线 + 整屏的颗粒 */
body #dtCall.dt-call::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: calc(env(safe-area-inset-top, 0px) + 104px); background: linear-gradient(to bottom, transparent, rgba(var(--w4-arm), .7)); pointer-events: none; }
body #dtCall.dt-call::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .74 0 0 0 0 .95 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 头像的位置：一只水母（头像那张图藏掉） */
body #dtCall .dt-call-who { gap: 12px; }
body #dtCall .dt-call-avwrap { width: 104px; height: 128px; animation: w4tBob 4.2s ease-in-out infinite; }
body #dtCall .dt-call-av { display: none; }
body #dtCall .dt-call-avwrap::before { content: ''; position: absolute; inset: 0; background: rgb(var(--w4-arm));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 128'%3E%3Cpath d='M10 58C10 28 28 8 52 8s42 20 42 50c-5 5-9-1-14 3-5-5-9 2-14 0-5 4-9-2-14 0-5 2-9-5-14 0-5-4-9 2-14-3Z' fill='%23000' fill-opacity='.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M24 62c-5 16 5 24 0 42M38 64c4 18-5 28 0 50M52 64c-4 20 5 34 0 56M66 64c5 18-4 28 0 48M80 62c5 14-4 24 1 38' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 128'%3E%3Cpath d='M10 58C10 28 28 8 52 8s42 20 42 50c-5 5-9-1-14 3-5-5-9 2-14 0-5 4-9-2-14 0-5 2-9-5-14 0-5-4-9 2-14-3Z' fill='%23000' fill-opacity='.2' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M24 62c-5 16 5 24 0 42M38 64c4 18-5 28 0 50M52 64c-4 20 5 34 0 56M66 64c5 18-4 28 0 48M80 62c5 14-4 24 1 38' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
body #dtCall .dt-call-avwrap::after { inset: -6px -18px 30px; border: 1px solid rgb(var(--w4-arm)); border-radius: 50%; } /* 接通前 / 来电时一圈一圈散开的那道环 */
@keyframes w4tBob { 50% { transform: translateY(-7px); } }
body #dtCall .dt-call-name { font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-name); letter-spacing: .16em; text-indent: .16em; color: var(--w4-ink); }
body #dtCall .dt-call-st { font-size: var(--w4-fs-small); font-weight: 300; letter-spacing: .14em; color: var(--w4-ink2); }
/* 声波：一排细竖线 */
body #dtCall .dt-call-wave { gap: 4px; }
body #dtCall .dt-call-wave b { width: 1px; border-radius: 0; background: rgb(var(--w4-arm)); opacity: .9; }
body #dtCall.dt-call[data-who="him"] .dt-call-wave b { background: var(--w4-ink-soft); opacity: .6; }
body #dtCall .dt-call-hint { font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .08em; color: var(--w4-ink3); opacity: 1; }
/* 挂断 / 接听：细线的圆 */
body #dtCall .dt-call-btn { width: 62px; height: 62px; border: 1px solid currentColor; background: none; box-shadow: none; }
body #dtCall .dt-call-btn svg { width: 22px; height: 22px; }
body #dtCall .dt-call-hang { color: rgb(var(--w4-warm)); }
body #dtCall .dt-call-ans { color: rgb(var(--w4-arm)); }
body #dtCall .dt-call-btn:focus-visible { outline: 1px solid var(--w4-ink2); outline-offset: 4px; }
body #dtCall .dt-call-lab { margin-top: 10px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .2em; text-indent: .2em; color: var(--w4-ink2); }
@media (prefers-reduced-motion: reduce) { body #dtCall .dt-call-avwrap { animation: none; } }
/* ================================================================
SEG:TAIMEN v4.1 —— 対面（视频通话，src/taimen.cjs）
整层 fixed，盖在语音通话那一屏（#dtCall，z-index 900）上面、看大图那层（99999）下面。
背景是线描的场景，中间是他（Live2D 模型；没起来的时候是那只占位的线描水母），右上是她自己的小画面，底下一排细线圆键。
电脑上是居中的一条手机比例的画面。颜色、字体都走 styles/w4-tokens.css；灯光那一点暖色是这页自己的。
小样：https://claude.ai/artifact/FkXbzmYnrSp161Sjp25gYF
================================================================ */
.w4v {
--w4v-lamp: 244, 213, 141;
--w4v-glint: 150, 190, 255; /* 他眼里那点蓝光 */
position: fixed; inset: 0; z-index: 950; display: none; overflow: hidden; user-select: none; -webkit-user-select: none;
background: var(--w4-bg); color: var(--w4-ink); font-family: var(--w4-sans);
}
.w4v.on { display: block; animation: w4vIn .3s ease-out; }
@keyframes w4vIn { from { opacity: 0; } to { opacity: 1; } }
body.w4-video-on { overflow: hidden; }
.w4v button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w4v button:focus-visible { outline: 1px solid rgb(var(--w4-arm)); outline-offset: 3px; }
/* 电脑上：画面收成中间一条 */
@media (min-width: 620px) { .w4v { left: 50%; right: auto; width: 440px; margin-left: -220px; box-shadow: 0 0 0 100vmax var(--w4-bg-deep); } }
/* 场景：线描，三张里显示一张 */
.w4v-scene, .w4v-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w4v-scene svg { display: none; }
.w4v[data-scene="room"] .s-room, .w4v[data-scene="night"] .s-night, .w4v[data-scene="cafe"] .s-cafe { display: block; }
.w4v-scene path, .w4v-scene line, .w4v-scene circle, .w4v-scene rect { fill: none; stroke: rgba(var(--w4-arm), .34); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.w4v-scene .dim { stroke: rgba(var(--w4-arm), .16); }
.w4v-scene .star { fill: rgba(var(--w4-ink-rgb), .7); stroke: none; }
/* 灯：开着一团暖光；关了整屏暗一层（他在暗层底下，键和字在上面） */
.w4v-glow { position: absolute; left: 50%; top: 20%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(var(--w4v-lamp), .2) 0%, rgba(var(--w4v-lamp), .06) 34%, transparent 62%); pointer-events: none; transition: opacity .6s; }
.w4v[data-lamp="off"] .w4v-glow { opacity: 0; }
.w4v-shade { position: absolute; inset: 0; background: var(--w4-bg-deep); opacity: 0; pointer-events: none; transition: opacity .6s; }
.w4v[data-lamp="off"] .w4v-shade { opacity: .45; }
/* 能点的小物件 */
.w4v .w4v-prop { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .14em; color: var(--w4-ink3); }
.w4v-prop svg { width: 34px; height: 40px; overflow: visible; }
.w4v-prop svg path, .w4v-prop svg line, .w4v-prop svg circle { fill: none; stroke: rgba(var(--w4-arm), .75); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.w4v-prop.lamp { left: 9%; top: calc(15% + env(safe-area-inset-top, 0px)); }
.w4v-prop.cup { right: 9%; bottom: 29%; }
.w4v:not([data-lamp="off"]) .w4v-prop.lamp .bulb { fill: rgba(var(--w4v-lamp), .85); stroke: rgba(var(--w4v-lamp), .9); }
/* 他（占位：线描水母） */
.w4v-him { position: absolute; left: 50%; top: 46%; width: min(62%, 270px); transform: translate(-50%, -50%); animation: w4vFloat 6s ease-in-out infinite; }
.w4v-him svg { display: block; width: 100%; height: auto; overflow: visible; }
.w4v-him .line { fill: none; stroke: rgb(var(--w4-arm)); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w4v-him .bell { fill: rgba(var(--w4-arm), .07); }
.w4v-him .arm { stroke: rgba(var(--w4-arm), .7); stroke-width: 1.2; transform-origin: 100px 118px; animation: w4vSway 5s ease-in-out infinite; }
.w4v-him .arm:nth-of-type(2n) { animation-duration: 6.2s; animation-direction: reverse; }
.w4v-him .blush { fill: rgba(var(--w4-warm), 0); transition: fill .4s; }
.w4v-him .face g { display: none; }
.w4v-him[data-face="calm"] .f-calm, .w4v-him[data-face="happy"] .f-happy, .w4v-him[data-face="shy"] .f-shy,
.w4v-him[data-face="sleepy"] .f-sleepy, .w4v-him[data-face="sulk"] .f-sulk, .w4v-him[data-face="want"] .f-want { display: block; }
/* 红晕、眼里的蓝光：各一层，几张脸共用。害羞红得最重，想要淡一点；蓝光平时暗，想要的时候调亮 */
.w4v-him[data-face="shy"] .blush { fill: rgba(var(--w4-warm), .5); }
.w4v-him[data-face="want"] .blush { fill: rgba(var(--w4-warm), .22); }
.w4v-him .glint { fill: rgb(var(--w4v-glint)); stroke: none; opacity: .55; }
.w4v-him[data-face="want"] .glint { opacity: 1; filter: drop-shadow(0 0 3px rgb(var(--w4v-glint))); }
.w4v-him .fang { fill: rgba(var(--w4-ink-rgb), .9); stroke-width: 1; }
.w4v-him[data-face="sleepy"] svg { translate: 0 3px; } /* 犯困：整个塌一点 */
.w4v-him .mouth { transform-origin: 100px 92px; }
.w4v-him.talking .mouth { animation: w4vTalk .26s ease-in-out infinite alternate; }
/* 口型：量得到他的声音时，嘴张多大跟着音量走（--mouth 0~1），不再按固定节奏 */
.w4v-him.lipsync .mouth, .w4v-him.talking.lipsync .mouth { animation: none; transform: scaleY(calc(.35 + var(--mouth, 0) * 1.9)); transition: transform .05s linear; }
.w4v-him.bump { animation: w4vBump .5s ease; }
.w4v-him.wiggle .arm { animation-duration: .9s; }
@keyframes w4vFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes w4vSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes w4vTalk { from { transform: scaleY(.4); } to { transform: scaleY(1.7); } }
@keyframes w4vBump { 0% { scale: 1; } 35% { scale: 1.06 .93; } 70% { scale: .98 1.03; } 100% { scale: 1; } }
/* 碰得到的三块（看不见，盖在他身上） */
.w4v-him .zone { position: absolute; }
.w4v-him .zone.head { left: 22%; top: 2%; width: 56%; height: 22%; border-radius: 50% 50% 0 0; }
.w4v-him .zone.cheek { left: 26%; top: 25%; width: 48%; height: 17%; }
.w4v-him .zone.hand { left: 20%; top: 46%; width: 60%; height: 50%; }
.w4v-pop { position: absolute; left: 50%; top: 19%; translate: -50% 0; font-family: var(--w4-kai); font-size: var(--w4-fs-body); letter-spacing: .14em; color: rgb(var(--w4-arm)); pointer-events: none; opacity: 0; white-space: nowrap; }
.w4v-pop.go { animation: w4vPop 1.3s ease-out; }
@keyframes w4vPop { 0% { opacity: 0; translate: -50% 8px; } 20% { opacity: 1; } 100% { opacity: 0; translate: -50% -22px; } }
/* 顶上：名字、时长；右上：她自己的画面（摄像头没开就不出现） */
.w4v-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.w4v-top .who b { display: block; font-family: var(--w4-kai); font-weight: 700; font-size: var(--w4-fs-head); letter-spacing: .14em; line-height: 1; }
.w4v-top .who .st { display: block; margin-top: 7px; min-height: 1em; font-size: var(--w4-fs-small); letter-spacing: .16em; color: var(--w4-ink2); font-variant-numeric: tabular-nums; }
.w4v-pip { position: relative; width: 78px; aspect-ratio: 3 / 4; overflow: hidden; outline: 1px solid rgba(var(--w4-ink-rgb), .3); background: var(--w4-bg-deep); display: none; }
.w4v[data-cam="on"] .w4v-pip { display: block; }
.w4v-pip video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } /* 镜像，像照镜子 */
.w4v-pip em { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal; font-size: 8.5px; letter-spacing: .14em; color: var(--w4-ink); text-shadow: 0 0 6px #000; }
.w4v-media-status { position: absolute; z-index: 5; left: 20px; right: 114px; top: calc(85px + env(safe-area-inset-top, 0px)); color: var(--w4-ink2); font-size: var(--w4-fs-small); line-height: 1.7; letter-spacing: .05em; pointer-events: none; }
.w4v-model-status { position: absolute; z-index: 5; left: 20px; right: 114px; top: calc(184px + env(safe-area-inset-top, 0px)); font-size: var(--w4-fs-small); line-height: 1.7; color: var(--w4-ink2); pointer-events: none; }
.w4v[data-bg="on"] .w4v-model-status { color: #f2f0ea; text-shadow: 0 1px 5px #07070d; }
.w4v .w4v-flip { position: absolute; z-index: 5; right: 16px; top: calc(128px + env(safe-area-inset-top, 0px)); min-height: 44px; padding: 8px 5px; font-size: var(--w4-fs-small); color: var(--w4-ink); }
.w4v:not([data-cam="on"]) .w4v-flip { display: none; }
.w4v[data-facing="environment"] .w4v-pip video { transform: none; }
.w4v[data-bg="on"] .w4v-media-status, .w4v[data-bg="on"] .w4v-flip { color: #f2f0ea; text-shadow: 0 1px 5px #07070d; }
.w4v-pip.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: w4vFlash .5s ease-out forwards; }
@keyframes w4vFlash { from { opacity: .85; } to { opacity: 0; } }
/* 他说的话（一两行字幕）；她攒着的那几笔（下一句话一起告诉他） */
.w4v-sub { position: absolute; left: 22px; right: 22px; bottom: calc(188px + env(safe-area-inset-bottom, 0px)); max-height: 6.8em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
text-align: center; font-family: var(--w4-kai); font-size: var(--w4-fs-title); line-height: 1.7; letter-spacing: .08em; color: var(--w4-ink); text-shadow: 0 1px 10px var(--w4-bg-deep), 0 0 2px var(--w4-bg-deep); pointer-events: none; transition: opacity .5s; }
.w4v-sub.fade { opacity: 0; }
.w4v-queue { position: absolute; left: 18px; right: 18px; bottom: calc(152px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: none; }
.w4v-queue span { padding: 2px 9px; font-family: var(--w4-kai); font-size: var(--w4-fs-small); letter-spacing: .1em; color: var(--w4-ink2); border-bottom: 1px solid rgba(var(--w4-arm), .5); }
/* 打字：键上面一行，一条底线，不想说话的时候用 */
.w4v-type { position: absolute; left: 26px; right: 26px; bottom: calc(106px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; margin: 0; border-bottom: 1px solid rgba(var(--w4-arm), .4); }
.w4v-type:focus-within { border-bottom-color: rgb(var(--w4-arm)); }
.w4v-type input { flex: 1; min-width: 0; padding: 7px 2px; border: 0; outline: 0; background: none; color: var(--w4-ink); font-family: var(--w4-kai); font-size: 16px; letter-spacing: .06em; user-select: text; -webkit-user-select: text; } /* 16px：再小 iOS 会把页面放大 */
.w4v-type input::placeholder { color: var(--w4-ink3); font-size: var(--w4-fs-body); letter-spacing: .14em; }
.w4v .w4v-type button { flex: none; padding: 4px 6px; font-family: var(--w4-kai); font-size: var(--w4-fs-body); letter-spacing: .1em; color: var(--w4-ink2); }
.w4v .w4v-type button:hover { color: var(--w4-ink); }
/* 底下一排键 */
.w4v-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 8px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-around; align-items: flex-end; }
.w4v .w4v-bar .key { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: var(--w4-fs-note); letter-spacing: .12em; color: var(--w4-ink2); }
/* 圆键：v4 通铺直角那条会把圆角归零，这里要压回去（跟语音通话那屏的细线圆一致） */
.w4v-bar .key i { width: 44px; height: 44px; border: 1px solid rgba(var(--w4-ink-rgb), .26); border-radius: 50% !important; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.w4v-bar .key svg { width: 20px; height: 20px; }
.w4v-bar .key svg path, .w4v-bar .key svg circle, .w4v-bar .key svg rect { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.w4v-bar .key[aria-pressed="true"] i { background: rgba(var(--w4-arm), .22); border-color: rgb(var(--w4-arm)); color: var(--w4-ink); }
.w4v-bar .key.hang i { width: 52px; height: 52px; border-color: rgb(var(--w4-warm)); color: rgb(var(--w4-warm)); }
.w4v-bar .key.hang svg { transform: rotate(134deg); }
.w4v-bar .key.hang svg path { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) { .w4v.on, .w4v-him, .w4v-him .arm, .w4v-him.talking .mouth, .w4v-him.bump { animation: none; } }
/* ── 动作（[[act:名字]]）：动的是水母这张图本身，跟漂浮（.w4v-him 的 translate）、被碰（scale）叠在一起不打架 ── */
.w4v-him svg { transform-origin: 50% 38%; }
.w4v-him.act-nod svg { animation: w4vNod 1.3s ease-in-out; }
.w4v-him.act-shake svg { animation: w4vShake 1.2s ease-in-out; }
.w4v-him.act-tilt svg { animation: w4vTilt 1.8s ease-in-out; }
.w4v-him.act-sway svg { animation: w4vSwayAll 1.8s ease-in-out; }
.w4v-him.act-lean_in svg { animation: w4vLean 1.9s ease-in-out; }
.w4v-him.act-shrink svg { animation: w4vShrink 1.6s ease-in-out; }
.w4v-him.act-turn_away svg { animation: w4vTurn 2s ease-in-out; }
@keyframes w4vNod { 0%, 100% { transform: none; } 20%, 60% { transform: translateY(4%) rotate(2deg); } 40%, 80% { transform: translateY(-1%); } }
@keyframes w4vShake { 0%, 100% { transform: none; } 15%, 55% { transform: translateX(-5%) rotate(-3deg); } 35%, 75% { transform: translateX(5%) rotate(3deg); } }
@keyframes w4vTilt { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(-12deg); } }
@keyframes w4vSwayAll { 0%, 100% { transform: none; } 20% { transform: rotate(7deg); } 45% { transform: rotate(-7deg); } 70% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } }
@keyframes w4vLean { 0%, 100% { transform: none; } 25%, 75% { transform: scale(1.14) translateY(5%); } }
@keyframes w4vShrink { 0%, 100% { transform: none; } 20%, 75% { transform: scale(.86) translateY(4%); } }
@keyframes w4vTurn { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(9%) scaleX(.9) rotate(5deg); } }
/* glow：胸口那层亮一下 */
.w4v-him .core { fill: rgb(var(--w4-arm)); stroke: none; opacity: 0; filter: blur(7px); }
.w4v-him.act-glow .core { animation: w4vGlow 1.7s ease-in-out; }
@keyframes w4vGlow { 0%, 100% { opacity: 0; } 35% { opacity: .75; } 60% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .w4v-him[class*="act-"] svg { animation: none; } }
/* ── Live2D：模型起来以后（.w4v[data-l2d="on"]，src/taimen.cjs 的 l2dLoad）他占满一屏，线描水母收起来 ──
画布、能碰的三块都在 .w4v-him 里：这一层铺满整屏，自己不挡点击，三块的位置由 l2dLayout 按模型摆。
胸口往下淡进底色，字幕和键压在淡出的那一段上；灯和杯子提到他上面，垫一圈暗边才看得清。 */
.w4v-l2d { display: none; position: absolute; left: 0; top: 0; pointer-events: none; }
.w4v[data-l2d="on"] .w4v-l2d { display: block; }
.w4v[data-l2d="on"] .w4v-him { left: 0; top: 0; width: 100%; height: 100%; transform: none; animation: none; pointer-events: none; transform-origin: 50% 30%; }
.w4v[data-l2d="on"] .w4v-him > svg { display: none; }
.w4v[data-l2d="on"] .w4v-him .zone { pointer-events: auto; border-radius: 0; }
.w4v[data-l2d="on"] .w4v-him::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to bottom, transparent, var(--w4-bg) 78%); pointer-events: none; }
.w4v[data-l2d="on"] .w4v-him.bump { animation: w4vBumpL .5s ease; } /* 被碰：整个人轻轻一顿（水母那种压扁弹回放在人身上太夸张） */
@keyframes w4vBumpL { 0%, 100% { scale: 1; } 40% { scale: 1.016; } }
.w4v[data-l2d="on"] .w4v-prop { z-index: 1; filter: drop-shadow(0 0 2px var(--w4-bg-deep)) drop-shadow(0 0 5px var(--w4-bg-deep)); }
.w4v[data-l2d="on"] .w4v-prop { color: var(--w4-ink); }
.w4v[data-l2d="on"] .w4v-prop svg path, .w4v[data-l2d="on"] .w4v-prop svg line, .w4v[data-l2d="on"] .w4v-prop svg circle { stroke: rgba(var(--w4-ink-rgb), .9); }
.w4v[data-l2d="on"] .w4v-shade { z-index: 2; }
.w4v[data-l2d="on"] .w4v-pop, .w4v[data-l2d="on"] .w4v-top, .w4v[data-l2d="on"] .w4v-sub, .w4v[data-l2d="on"] .w4v-queue,
.w4v[data-l2d="on"] .w4v-type, .w4v[data-l2d="on"] .w4v-bar { z-index: 3; }
.w4v[data-l2d="on"] .w4v-pop { top: 6%; text-shadow: 0 0 2px var(--w4-bg-deep), 0 0 8px var(--w4-bg-deep); }
@media (prefers-reduced-motion: reduce) { .w4v[data-l2d="on"] .w4v-him.bump { animation: none; } }
/* ── 场景图（同一间房的清晨 / 白天 / 黄昏 / 夜里，/v4m/ 里）：拉到了盖住线描；上下各压一段暗，字和键才看得清 ── */
.w4v-bg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w4v[data-bg="on"] .w4v-bg { display: block; }
.w4v[data-bg="on"] .w4v-scene svg { display: none; }
.w4v[data-bg="on"] .w4v-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7, 7, 13, .62) 0%, rgba(7, 7, 13, .12) 24%, rgba(7, 7, 13, .12) 52%, var(--w4-bg) 96%); }
.w4v[data-bg="on"] .w4v-top .who, .w4v[data-bg="on"] .w4v-prop { color: #f2f0ea; text-shadow: 0 0 6px rgba(7, 7, 13, .8); }
.w4v[data-bg="on"] .w4v-top .who .st { color: #d9d6cf; }
.w4v[data-bg="on"] .w4v-prop { filter: drop-shadow(0 0 2px rgba(7, 7, 13, .9)) drop-shadow(0 0 5px rgba(7, 7, 13, .7)); }
.w4v[data-bg="on"] .w4v-prop svg path, .w4v[data-bg="on"] .w4v-prop svg line, .w4v[data-bg="on"] .w4v-prop svg circle { stroke: #f2f0ea; }
/* ── 网格立绘（10-06）：画布的位置大小由 l2dLayout 摆；凑近 / 缩 是整张画放大缩小一点，发光是胸口一团光 ── */
.w4v-l2d { transform-origin: 50% 30%; transition: transform .45s ease; }
.w4v.l2d-lean_in .w4v-l2d { transform: scale(1.09); }
.w4v.l2d-shrink .w4v-l2d { transform: scale(.93); }
.w4v-chest { display: none; position: absolute; translate: -50% -50%; border-radius: 50% !important; pointer-events: none; opacity: 0;
background: radial-gradient(circle, rgba(236, 250, 255, .85) 0%, rgba(120, 180, 255, .45) 28%, transparent 62%); mix-blend-mode: screen; }
.w4v[data-l2d="on"] .w4v-chest { display: block; }
.w4v.l2d-glow .w4v-chest { animation: w4vGlow 1.7s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .w4v-l2d { transition: none; } }
/* 她刚做了什么的那排小字：几秒后淡掉 */
.w4v-queue { transition: opacity .7s ease; }
.w4v-queue.fade { opacity: 0; }
/* ================================================================
SEG:KADO v4.1 —— 通铺直角（2026-10-01 小槐：「改成不要框或者直角框吧」）
旧页留下来、还没单独换皮的东西（聊天的侧拉栏 / 转账弹窗 / 长按菜单 / 提示条 / 模型弹层、记忆审核、共读外壳…）
原来是一块块大圆角带投影的卡片。这里不一样一样去改，一条规矩铺到底：圆角归零、投影去掉。
★ v4 自己做的那几层（主页 / 記憶 / 暦 / 近況 / 封 / 遊び / 私、聊天的背景和状态行、通话界面）不在这条规矩里，
它们里面的圆（打孔、小圈、浮尘、挂断键）是故意画的。
★ 伪元素（::before / ::after）本来就不归这条管，所以設定页每节钉的那个小圈不受影响。
★ 留着圆的：单选的小圆点、外观页的色点、各种转圈的等待标记、滑杆。
================================================================ */
body :not(:is(.w4-home, .w4m, .w4c, .w4f, .w4s, .w4p, .w4w, .w4k-bg, .w4k-stat, #dtCall, #w4Cover) *):not(:is(.radio, .w3k-opts i, [class*="spin"], [class*="load"], input[type="range"])) {
border-radius: 0 !important;
box-shadow: none !important;
}
/* 浮在上面的那几块：一圈细边，免得和底下的页糊在一起 */
body .drawer, body .xf-sheet, body .bubble-menu, body .v2-modelpop, body .toast, body .v2-sheet > * {
border: 1px solid rgba(var(--w4-arm), .26) !important;
}
body .drawer { border-width: 0 0 0 1px !important; }
body .toast { font-family: var(--w4-kai); letter-spacing: .08em; }
/* 记忆审核：整页楷体（2026-10-01 小槐：「记忆审核也帮我改成楷体吧」）。字号、排法都没动 */
#v2-s-memrev, #v2-s-memrev button, #v2-s-memrev input, #v2-s-memrev select, #v2-s-memrev textarea { font-family: var(--w4-kai); }
#v2-s-memrev { letter-spacing: .04em; }
/* ================================================================
SEG:KAMI v4.1 —— 纸（浅色皮）（2026-10-01 小槐：「浅色做一下」）
颜色那一组早就定在 styles/w4-tokens.css 的 :root[data-w4-theme="paper"] 里（仿古籍的纸 + 紫墨），
各页的字、线、口腕都走 token，所以开关一开（src/yoru.cjs）大部分页自己就变了。
这里只放「光换颜色不够」的几处：
================================================================ */
/* 一、主页的水母是画在画布上的，里面的底色和叠法都是按深海写的。
纸色下不重画：把整张画布反相（深底变白、亮的口腕变深），色相转回来（不然紫会变黄绿），
再正片叠底叠在纸上 —— 白的地方就是纸，口腕成了纸上的墨。 */
:root[data-w4-theme="paper"] .w4-home { background: var(--w4-bg-deep); }
:root[data-w4-theme="paper"] .w4-sea { filter: invert(1) hue-rotate(180deg) contrast(1.08); mix-blend-mode: multiply; }
:root[data-w4-theme="paper"] #w4Cover { background: var(--w4-bg-deep) !important; }
/* 二、颗粒：深海上是亮的颗粒用滤色叠；纸上要反过来，暗的颗粒用正片叠底 */
:root[data-w4-theme="paper"] body[data-route="chat"] #dt-s-chat .w4k-grain,
:root[data-w4-theme="paper"] body #dtCall.dt-call::after { mix-blend-mode: multiply; filter: invert(1); opacity: .32; }
/* 三、旧页留下来的东西（侧拉栏 / 转账弹窗 / 长按菜单 / 记忆审核…）：旧的浅色是偏白的，接到纸色上 */
:root[data-w4-theme="paper"] body {
--bg: var(--w4-bg); --bg-2: var(--w4-bg-under); --card: var(--w4-bg); --surface: var(--w4-bg); --surface-tint: var(--w4-bg-under);
--ink: var(--w4-ink); --ink2: var(--w4-ink2); --ink-2: var(--w4-ink2); --ink-3: var(--w4-ink3); --sub: var(--w4-ink); --muted: var(--w4-ink2);
--line: var(--w4-line); --edge: var(--w4-line); --accent: rgb(var(--w4-arm)); --accent-rgb: var(--w4-arm);
}
/* 四、外观页最上面那一行「底色」（src/gaikan.cjs 画的） */
#w3-s-look .w4g-theme button { font: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--w4-kai); font-size: 17px; letter-spacing: .1em; line-height: 1.3; color: var(--w4-ink3); -webkit-tap-highlight-color: transparent; }
#w3-s-look .w4g-theme button[aria-pressed="true"] { font-weight: 700; color: var(--w4-ink); text-shadow: 0 0 12px rgba(var(--w4-arm), .9); }
#w3-s-look .w4g-theme .w4g-opts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
:root[data-w4-theme="paper"] #w3-s-look .w4g-theme button[aria-pressed="true"],
:root[data-w4-theme="paper"] body[data-route="look"] #w3-s-look .w3k-opts button.on,
:root[data-w4-theme="paper"] #w3-s-look .w4g-top .w4g-vols button[aria-selected="true"],
:root[data-w4-theme="paper"] body[data-route="settings"] #dt-s-settings .dt-subnav button.active { text-shadow: 0 0 10px rgba(var(--w4-arm), .35); }
/* 第 47 步：聊天抽屉里的便签。沿用抽屉色调，不增加卡片与圆角。 */
.drawer-tabs button[data-dw="notes"].on { color: var(--w4-on-accent); }
.w4hn { display: grid; gap: 24px; min-width: 0; font-family: var(--w4-sans); color: inherit; }
.w4hn form { display: grid; gap: 16px; min-width: 0; }
.w4hn label { display: grid; gap: 8px; min-width: 0; font-size: var(--w4-fs-small); }
.w4hn textarea, .w4hn input, .w4hn select { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-size: var(--w4-fs-body); color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 0; }
.w4hn textarea { resize: vertical; min-height: 110px; line-height: 1.8; }
.w4hn button { font: inherit; font-family: var(--w4-kai); font-size: var(--w4-fs-title); color: inherit; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 0; background: transparent; cursor: pointer; }
.w4hn button:disabled, .w4hn input:disabled, .w4hn textarea:disabled, .w4hn select:disabled { opacity: .5; }
.w4hn button:disabled { cursor: wait; }
.w4hn .w4hn-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.w4hn .w4hn-help { font-size: var(--w4-fs-small); line-height: 1.8; opacity: .7; margin: 0; }
.w4hn .w4hn-message { font-size: var(--w4-fs-small); line-height: 1.8; overflow-wrap: anywhere; }
.w4hn .w4hn-message:empty { display: none; }
.w4hn .w4hn-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--w4-kai); font-size: var(--w4-fs-title); }
.w4hn .w4hn-heading button { font-size: var(--w4-fs-small); }
.w4hn .w4hn-list { display: grid; gap: 24px; min-width: 0; }
.w4hn article { padding: 0; border: 0; background: none; box-shadow: none; overflow-wrap: anywhere; }
.w4hn .w4hn-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--w4-fs-note); opacity: .7; }
.w4hn .w4hn-text { font-size: var(--w4-fs-body); line-height: 1.8; white-space: pre-wrap; margin: 8px 0; }
.w4hn .w4hn-result { font-size: var(--w4-fs-small); line-height: 1.8; white-space: pre-wrap; opacity: .8; }
.w4hn :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* 第 47 步样式补丁：抽屉在 #dt-s-chat 外，需独立接入 v4 的 token。 */
body[data-route="chat"] #dtDrawer {
box-sizing: border-box; width: min(380px, 92vw); padding: calc(26px + env(safe-area-inset-top, 0px)) 28px calc(24px + env(safe-area-inset-bottom, 0px));
background: var(--w4-bg) !important; color: var(--w4-ink); border: 0 !important; border-left: 1px solid var(--w4-line) !important;
border-radius: 0; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--w4-sans); color-scheme: dark;
--ink-rgb: var(--w4-ink-rgb); --accent-rgb: var(--w4-arm);
}
:root[data-w4-theme="paper"] body[data-route="chat"] #dtDrawer { color-scheme: light; }
body[data-route="chat"] #dtDrawerMask { background: rgba(var(--w4-ink-rgb), .04); backdrop-filter: none; }
body[data-route="chat"] #dtDrawer .drawer-h { align-items: flex-start; margin: 0 0 28px; gap: 16px; }
body[data-route="chat"] #dtDrawerTitle { text-align: right; font: 400 var(--w4-fs-head)/1.5 var(--w4-kai); letter-spacing: .18em; color: var(--w4-ink); }
body[data-route="chat"] #dtDrawerTitle::after { content: 'CHAT NOTES'; display: block; margin-top: 5px; font: 300 var(--w4-fs-tiny)/1.7 var(--w4-sans); letter-spacing: .26em; color: var(--w4-ink2); }
body[data-route="chat"] #dtDrawerClose { order: -1; width: 30px; min-height: 30px; padding: 0; border: 0; background: none; color: var(--w4-ink2); font: 300 var(--w4-fs-head)/1 var(--w4-sans); }
body[data-route="chat"] #dtDrawer .drawer-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; padding: 0; border: 0; border-bottom: 1px solid var(--w4-line); border-radius: 0; background: none; }
body[data-route="chat"] #dtDrawer .drawer-tabs button { position: relative; padding: 10px 0 13px; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 var(--w4-fs-title)/1.5 var(--w4-kai); letter-spacing: .08em; color: var(--w4-ink2); transition: color var(--w4-t-fast) var(--w4-ease); }
body[data-route="chat"] #dtDrawer .drawer-tabs button.on,
body[data-route="chat"] #dtDrawer .drawer-tabs button:hover { background: none; color: var(--w4-ink); }
body[data-route="chat"] #dtDrawer .drawer-tabs button.on::after { content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 1px; background: rgb(var(--w4-arm)); }
body[data-route="chat"] #dtDrawerBody { gap: 28px; padding-right: 5px; scrollbar-width: thin; scrollbar-color: var(--w4-line) transparent; }
body[data-route="chat"] #dtDrawerBody::-webkit-scrollbar-thumb { background: var(--w4-line); }
body[data-route="chat"] #dtDrawer .dw-item { flex-shrink: 0; margin: 0; padding: 0 0 24px; border: 0 !important; border-bottom: 1px solid var(--w4-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body[data-route="chat"] #dtDrawer .dw-top { gap: 10px; margin-bottom: 12px; }
body[data-route="chat"] #dtDrawer .dw-who { padding: 0; background: none; color: var(--w4-ink2); font: 400 var(--w4-fs-small)/1.6 var(--w4-kai); letter-spacing: .1em; }
body[data-route="chat"] #dtDrawer .dw-time { font: 300 var(--w4-fs-note)/1.7 var(--w4-sans); color: var(--w4-ink2); opacity: 1; font-variant-numeric: tabular-nums; }
body[data-route="chat"] #dtDrawer .dw-x { width: 28px; min-height: 28px; padding: 0; color: var(--w4-ink2); font-size: var(--w4-fs-title); }
body[data-route="chat"] #dtDrawer .dw-text { color: var(--w4-ink-soft); font: 400 var(--w4-fs-body)/1.9 var(--w4-kai); letter-spacing: .04em; }
body[data-route="chat"] #dtDrawer .dw-item.sum .dw-text { font-family: var(--w4-sans); letter-spacing: .02em; }
body[data-route="chat"] #dtDrawer .dw-text img { border-radius: 0; }
body[data-route="chat"] #dtDrawer .dw-empty { padding: 28px 0; color: var(--w4-ink2); font: 400 var(--w4-fs-small)/2 var(--w4-sans); }
body[data-route="chat"] #dtDrawer .dw-empty svg { display: none; }
body[data-route="chat"] #dtDrawer .w4hn { gap: 30px; color: var(--w4-ink-soft); }
body[data-route="chat"] #dtDrawer .w4hn form { gap: 18px; }
body[data-route="chat"] #dtDrawer .w4hn label { color: var(--w4-ink2); }
body[data-route="chat"] #dtDrawer .w4hn textarea,
body[data-route="chat"] #dtDrawer .w4hn input,
body[data-route="chat"] #dtDrawer .w4hn select { border-color: var(--w4-line); color: var(--w4-ink); }
body[data-route="chat"] #dtDrawer .w4hn textarea { font-family: var(--w4-kai); letter-spacing: .04em; }
body[data-route="chat"] #dtDrawer .w4hn textarea::placeholder { color: var(--w4-ink2); opacity: 1; }
body[data-route="chat"] #dtDrawer .w4hn select option { background: var(--w4-bg); color: var(--w4-ink); }
body[data-route="chat"] #dtDrawer .w4hn button { border-color: var(--w4-line); color: var(--w4-ink-soft); letter-spacing: .1em; }
body[data-route="chat"] #dtDrawer .w4hn button:hover { color: var(--w4-ink); border-color: rgb(var(--w4-arm)); }
body[data-route="chat"] #dtDrawer .w4hn .w4hn-help,
body[data-route="chat"] #dtDrawer .w4hn .w4hn-top { color: var(--w4-ink2); opacity: 1; }
body[data-route="chat"] #dtDrawer .w4hn .w4hn-heading { color: var(--w4-ink); }
body[data-route="chat"] #dtDrawer .w4hn .w4hn-text { font-family: var(--w4-kai); }
body[data-route="chat"] #dtDrawer :focus-visible { outline: 1px solid rgb(var(--w4-arm)); outline-offset: 3px; }
@media (max-width: 375px) { body[data-route="chat"] #dtDrawer { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { body[data-route="chat"] #dtDrawer { animation: none; } body[data-route="chat"] #dtDrawer .drawer-tabs button { transition: none; } }
.w4sd{margin-top:32px;padding-top:20px;border-top:1px solid var(--w4-line);color:var(--w4-ink);font-family:var(--w4-sans);font-size:var(--w4-fs-body);overflow-wrap:anywhere;min-width:0}
.w4sd h3,.w4sd h4{font-family:var(--w4-kai);font-size:var(--w4-fs-title);font-weight:400}
.w4sd article{margin:28px 0}.w4sd p{white-space:pre-wrap;line-height:1.8}.w4sd small,.w4sd-reply{color:var(--w4-ink2)}
.w4sd img{display:block;max-width:100%;max-height:360px;object-fit:contain;margin:12px 0}.w4sd form{display:flex;gap:10px;flex-wrap:wrap}
.w4sd input{flex:1;min-width:0;width:120px;background:transparent;border:0;border-bottom:1px solid var(--w4-line);color:var(--w4-ink);padding:8px;font:inherit}
.w4sd button,.w4sd summary{color:var(--w4-ink-soft);font:inherit;cursor:pointer;background:transparent;border:0;padding:8px 0}.w4sd details{margin-top:18px}
.w4sd :focus-visible{outline:1px solid var(--w4-ink);outline-offset:3px}
#dtCall .w4-call-decline{display:none;gap:20px;flex-wrap:wrap;margin-top:18px;justify-content:center}
#dtCall[data-st="ringing"] .w4-call-decline{display:flex}
#dtCall .w4-call-decline button{background:transparent;border:0;border-bottom:1px solid var(--w4-line);color:var(--w4-ink2);font:inherit;padding:8px}
.w4sd{width:100%;box-sizing:border-box}.w4sd button:disabled{opacity:.5;cursor:default}
.w4nw{position:fixed;inset:0;z-index:1500;background:var(--w4-bg);color:var(--w4-ink);font-family:var(--w4-sans)}
.w4nw[hidden]{display:none}body.w4-nowhere-on{overflow:hidden}.w4nw button{font:inherit;color:var(--w4-ink-soft);background:none;border:0;cursor:pointer;padding:8px}
.w4nw header{position:absolute;right:24px;top:24px;text-align:right}.w4nw h2{margin:0;font:700 var(--w4-fs-head) var(--w4-kai);letter-spacing:.15em}.w4nw header small{font-size:var(--w4-fs-tiny);letter-spacing:.2em;color:var(--w4-ink2)}
.w4nw .w4nw-back{position:absolute;top:16px;left:14px;font-size:var(--w4-fs-glyph);z-index:1}.w4nw-scroll{position:absolute;inset:88px 0 0;overflow:auto;overscroll-behavior:contain}.w4nw-page{max-width:520px;margin:auto;padding:0 26px 72px;box-sizing:border-box;font-size:var(--w4-fs-body);overflow-wrap:anywhere}
.w4nw-intro{font:var(--w4-fs-title) var(--w4-kai);letter-spacing:.1em}.w4nw form{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:28px 0}.w4nw input{font:inherit;max-width:100%;box-sizing:border-box;background:transparent;color:var(--w4-ink);border:0;border-bottom:1px solid var(--w4-line);padding:8px 0;color-scheme:dark}
.w4nw article{margin:32px 0 52px;padding-top:20px;border-top:1px solid var(--w4-line)}.w4nw time,.w4nw small,.w4nw-status,.w4nw summary{color:var(--w4-ink2);font-size:var(--w4-fs-small)}.w4nw h3,.w4nw h4{font:var(--w4-fs-title) var(--w4-kai);letter-spacing:.12em}.w4nw p{line-height:1.9;white-space:pre-wrap}.w4nw-postcard{margin:26px 0 26px 18px;padding-left:16px;border-left:1px solid var(--w4-line)}.w4nw details{margin-top:20px}.w4nw summary{cursor:pointer}.w4nw :focus-visible{outline:1px solid var(--w4-ink);outline-offset:3px}.w4nw button:disabled{opacity:.5;cursor:default}
/* 乌有乡站：站牌与真实出行时间线；沿用 v4 的色彩和字体。 */
.w4nw{background:radial-gradient(ellipse at 85% 10%,rgba(var(--w4-arm),.09),transparent 60%),var(--w4-bg-deep)}
.w4nw-page{max-width:640px;padding-top:18px}.w4nw-board{border-top:3px solid rgb(var(--w4-arm));border-bottom:1px solid var(--w4-line);padding:22px 0 24px}.w4nw-board>small{font-size:var(--w4-fs-note);letter-spacing:.1em}.w4nw-board h1{font:var(--w4-fs-display) var(--w4-kai);letter-spacing:.15em;margin:22px 0 6px}.w4nw-board>p{color:var(--w4-ink-soft);margin:0;font-size:var(--w4-fs-small);letter-spacing:.2em}.w4nw-direction{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0;color:var(--w4-ink2);font-size:var(--w4-fs-note);line-height:2.4}.w4nw-direction b{font:var(--w4-fs-head) var(--w4-kai);color:var(--w4-ink)}.w4nw-direction>span:nth-child(2){flex:1;text-align:center;border-bottom:1px solid var(--w4-line);color:rgb(var(--w4-arm));font-size:var(--w4-fs-head)}
.w4nw-routehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:40px}.w4nw-routehead h3{margin:0}.w4nw form{margin:14px 0 28px}.w4nw-list{border-left:1px solid rgba(var(--w4-arm),.45);margin-left:5px;padding-left:23px}.w4nw article{position:relative;border-top:0;margin:0;padding:0 0 48px}.w4nw article:before{content:'';position:absolute;left:-28px;top:4px;width:7px;height:7px;border:1px solid rgb(var(--w4-arm));border-radius:50%;background:var(--w4-bg-deep)}.w4nw article:first-child:before{background:rgb(var(--w4-arm));box-shadow:0 0 12px rgba(var(--w4-arm),.4)}.w4nw article h3{margin:12px 0 4px}.w4nw-sign{letter-spacing:.12em}.w4nw-postcard{margin:24px 0;border-left:0;border-top:1px solid var(--w4-line);border-bottom:1px solid var(--w4-line);padding:16px 0}.w4nw-postcard summary{font:var(--w4-fs-title) var(--w4-kai);color:var(--w4-ink-soft);line-height:1.7}.w4nw-postcard>small{display:block;margin-top:14px}.w4nw-postcard p{margin-bottom:0}
@media(max-width:350px){.w4nw-page{padding-left:20px;padding-right:20px}.w4nw-routehead{display:block}.w4nw-routehead small{display:block;margin-top:8px}}
.w4mc{margin:24px 0 44px;font:var(--w4-fs-body)/1.7 var(--w4-sans);color:var(--w4-ink);overflow-wrap:anywhere}.w4mc h3,.w4mc h4{font:var(--w4-fs-head) var(--w4-kai);letter-spacing:.1em}.w4mc p{color:var(--w4-ink2);font-size:var(--w4-fs-small)}.w4mc .w4mc-status,.w4mc [data-error]{color:var(--w4-ink-soft);white-space:pre-wrap}.w4mc article{padding:20px 0;border-bottom:1px solid var(--w4-line)}.w4mc button{font:inherit;color:var(--w4-ink);padding:8px 10px;background:transparent;border:0;border-bottom:1px solid var(--w4-line);cursor:pointer}.w4mc button:disabled{opacity:.45;cursor:default}.w4mc-actions{display:flex;gap:12px;flex-wrap:wrap}.w4mc form{margin:30px 0;padding-top:14px;border-top:1px solid var(--w4-line)}.w4mc label{display:block;margin:18px 0;font-size:var(--w4-fs-body)}.w4mc input,.w4mc select,.w4mc textarea{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin-top:8px;padding:10px 2px;font:var(--w4-fs-body)/1.6 var(--w4-sans);color:var(--w4-ink);background:var(--w4-bg);border:0;border-bottom:1px solid var(--w4-line);border-radius:0}.w4mc textarea{resize:vertical}.w4mc label.w4mc-check{display:flex;align-items:center;gap:10px}.w4mc input[type=checkbox]{width:auto;margin:0}.w4mc :focus-visible{outline:1px solid rgb(var(--w4-arm));outline-offset:3px}.w4mc [hidden]{display:none!important}.w4mc summary{cursor:pointer;color:var(--w4-ink-soft);padding:14px 0}.w4mc input[readonly]{color:var(--w4-ink2)}
body[data-route="settings"] #dt-s-settings .w4mc select{width:100%;max-width:100%;text-align:left;text-align-last:left;font:var(--w4-fs-body)/1.6 var(--w4-sans)}