/* demo-home 样式：极简两屏起始页。配色对齐 Tophub：翠绿强调 + 中性冷灰面 + 近实心玻璃层。 */
:root {
color-scheme: light;
--acc: #10b981;
--acc-600: #059669;
--acc-ink: #047857;
--ink: #16161a;
--sub: #3d3d45;
--faint: #6b6b74;
--line: rgba(17, 24, 39, .09);
--line-2: rgba(17, 24, 39, .055);
--glass: #ffffff;
--glass-2: rgba(255, 255, 255, .86);
/* 玻璃面板一套到底：搜索壳 / 引擎下拉 / 启动台搜索胶囊 / 底部栏 / 顶栏 HUD / 备案条 / 文件夹玻璃板
全用这两个令牌，填充和虚化半径只在这一处定档。
用户口径是「拿 /start 那条顶部胶囊当参照，再透一点」——那条是 `--glass .78 × 76%` ≈ .59
的底 + `blur(26px)`，所以这边压到 ≈.33 的底 + `blur(10px)`：半径小才看得出背后有东西。
这是**默认（中）档**，也就是大多数用户看到的那一档；下面「玻璃浓度」那块里 high/low 会整条换掉
--glass-bf（4px / 26px），因为 2026-10-30 量过：只改 alpha 三档分不出来，亮色壁纸上白纱不改明度，
真正让人一眼看出厚薄的是背后的内容糊没糊开 */
--glass-bg: color-mix(in srgb, var(--dock) 46%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 66%, transparent);
/* 再往上一档：引擎胶囊 hover 那一种「明确告诉你按到了」的填充。
2026-10-28 玻璃浓度做成三档时把它从写死的 78% 提成令牌，否则用户选了「高透明」
这层还会自己跳回 78%，等于浓度的话只说了一半 */
--glass-bg-max: color-mix(in srgb, var(--dock) 78%, transparent);
--glass-bf: blur(10px) saturate(1.7);
/* 文件夹砖那层「白霜」：原来是 .30→.16 的渐变 + .34 的边，写死在两条规则里，
现在交给浓度三档一起调（暗色在下面那个块里换值）。ghost 虚影吃同一份令牌 */
--fb-a: rgb(255 255 255 / .30);
--fb-b: rgb(255 255 255 / .16);
--fb-line: rgb(255 255 255 / .34);
--tile-hover: #f7f8fa;
--pop: #ffffff;
/* 菜单气泡的实际底色：箭头三角必须跟它同参，否则半透明下会看出接缝。
74%→58% 是同一轮点名「右键菜单也差点意思」；气泡字多，比面板留得厚一档 */
--pop-glass: color-mix(in srgb, var(--pop) 58%, transparent);
--field: #f1f3f6;
/* 输入格、身份磁贴、工具图标格在半透玻璃板上不能吃实色（死白一块压上去，整屏玻璃感到这儿就断了）。
暗色不做对应衰减：它的 --field 本来就只有一档 .07 的白，再乘透明度就看不出格子在哪了。
2026-10-24 他第二次点名（「亮色模式就没有暗色模式设计的透明」）：原来这格是 #f1f3f6 的 58%，
压在白 33% 的板子上合成下来就是 72% 不透明，等于给玻璃板上又贴一张纸。
亮色玻璃要的是「看见后面的壁纸」，所以这里只提一档很薄的白，边界交给 --field-line 那道白霜环去说 */
--field-glass: rgb(255 255 255 / .3);
/* 玻璃板上的格子描边：亮色绝不用 --line（那是 17 24 39 的黑，写在半透板上就是打印上去的一圈灰边，
他一路打回过三次「灰边脏」）；暗色的 --line 本来就是白 .12，原样继承 */
--field-line: rgb(255 255 255 / .78);
/* 亮色壁纸本身就是浅色，白霜环 + 30% 的白底在浅壁纸上只差七八个亮度，边框会看不见。
凸起交给这一档 1px 落影去说（跟 --btn-sh 同一档），既不用把底填实，也不用拿黑描边 */
--field-sh: 0 1px 2px rgb(17 24 39 / .06);
/* 玻璃板上的中性按键（弹窗的取消、库的「自己填网址」、行内加号）。
2026-10-24 他点名「亮色下黑脏啊」：亮色绝不能拿 --ink（＝近黑）去调底和边，
那是在半透板上抹一层灰泥。亮色一律走白霜——白内环 + 一档很软的落影。
第二轮（同一晚）他再说「亮色没有暗色透明」，这一档才定死：亮色的底也只能比板子亮一点点。
板子是白 33%，按键再压 62% 的白，合成下来 75% 不透明，玻璃板后面什么都看不见；
给 30% 才是暗色那档「白 .06 压在黑 .20 板上」的同比例，凸起感靠白环和落影，不靠把底填实 */
--btn-bg: rgb(255 255 255 / .3);
--btn-bg-h: rgb(255 255 255 / .48);
/* 只留一条 1px 边。原来这里还叠了第二条 `inset 0 1px 0` 的顶边高光，
它跟那圈环在同一条上沿重合，看着就是 2px 粗边、不精致（2026-10-24 他点名）；
底色收薄之后边界全靠这一档白环撑着，所以环给到 .8 */
--btn-sh: inset 0 0 0 1px rgb(255 255 255 / .8), 0 1px 2px rgb(17 24 39 / .05);
/* 主键（保存 / 完成 / 确定）跟中性键同比例：暗色是 20% 主色，亮色也只用 20%，
再厚就成了他最早点名的那块「实心绿」 */
--btn-fill-bg: color-mix(in srgb, var(--acc) 20%, transparent);
--btn-fill-sh: inset 0 0 0 1px color-mix(in srgb, var(--acc) 46%, transparent), 0 1px 2px rgb(17 24 39 / .05);
--hover: rgba(17, 24, 39, .045);
--active: rgba(17, 24, 39, .085);
--muted: rgba(17, 24, 39, .035);
--shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 26px -12px rgba(17, 24, 39, .16);
--shadow-lg: 0 2px 6px rgba(17, 24, 39, .06), 0 22px 48px -18px rgba(17, 24, 39, .22);
--dock: rgba(255, 255, 255, .72);
--dock-line: rgba(17, 24, 39, .08);
--dock-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 26px -14px rgba(17, 24, 39, .15);
--dock-fade: rgba(17, 24, 39, .16);
--veil: 255 255 255;
/* 蒙版那一层洗白：暗色用黑 .34 把壁纸压暗，白霜边和玻璃底才有对比。
亮色原来同样吃 .34 的白，等于先在玻璃后面铺一张白纸，板子再透也透不出东西（2026-10-24 他点名「亮色没有暗色透明」）。
收到 .22：蒙版还是一层白，但壁纸的颜色能进到板子里、也能进到板子里那些更薄的格子里 */
--veil-a: .22;
--text-sh: none;
/* 图标投影：亮色下只留 1px 的一档立体感。原来是 6px/12px 的 30% 黑，压在白毛玻璃上
就是图标后面一团糊黑（用户点名「亮色模式投影太明显，黑乎乎一团」）；深色下那档要保留，
暗壁纸不吃黑投影，收掉图标就贴死在背景上了 */
--ic-sh: drop-shadow(0 1px 1px rgba(17, 24, 39, .13)) drop-shadow(0 1px 3px rgba(17, 24, 39, .07));
--ic-sh-hi: drop-shadow(0 1px 2px rgba(17, 24, 39, .15)) drop-shadow(0 2px 5px rgba(17, 24, 39, .09));
/* 只有拖起来那一瞬间悬在空中，投影可以给远一点，松手就没了 */
--ic-sh-lift: drop-shadow(0 2px 3px rgba(17, 24, 39, .14)) drop-shadow(0 7px 14px rgba(17, 24, 39, .11));
--bg-0: radial-gradient(72% 58% at 82% 6%, rgba(16, 185, 129, .17) 0%, rgba(16, 185, 129, 0) 62%),
radial-gradient(60% 50% at 8% 92%, rgba(59, 130, 246, .13) 0%, rgba(59, 130, 246, 0) 60%),
linear-gradient(168deg, #f1f3f7 0%, #e6eaf1 52%, #dce2ec 100%);
--scrim: .18;
--r1: 10px; --r2: 12px; --r3: 16px; --r4: 20px;
--ease: cubic-bezier(.25, .46, .45, .94);
/* 展开启动台时时间贴顶的距离；网格从时间下方另起一排，两处都用它算 */
--clock-fs: 74px; --lp-top: 26px;
}
[data-theme=dark] {
color-scheme: dark;
--acc: #10b981;
--acc-600: #34d399;
--acc-ink: #34d399;
--ink: #f5f5f7;
--sub: #c9c9d0;
--faint: #9c9ca6;
--line: rgba(255, 255, 255, .12);
--line-2: rgba(255, 255, 255, .07);
--glass: rgba(26, 26, 26, .92);
--glass-2: rgba(26, 26, 26, .78);
--tile-hover: rgba(255, 255, 255, .10);
--pop: rgba(26, 26, 26, .97);
--field: rgba(255, 255, 255, .07);
--field-glass: var(--field);
--field-line: var(--line);
/* 暗色不写 `none`：凡是把这一档拼进逗号列表的规则（`box-shadow: 白霜环, var(--field-sh)`）
都会因为列表里出现 `none` 而整条声明作废、环直接消失。给一档全透明的 0 阴影，等价且合法 */
--field-sh: 0 0 0 0 rgba(0, 0, 0, 0);
--btn-bg: rgb(255 255 255 / .06);
--btn-bg-h: rgb(255 255 255 / .1);
--btn-sh: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 1px 0 rgb(255 255 255 / .14);
--btn-fill-bg: color-mix(in srgb, var(--acc) 20%, transparent);
--btn-fill-sh: inset 0 0 0 1px color-mix(in srgb, var(--acc) 46%, transparent), inset 0 1px 0 rgb(255 255 255 / .12);
--hover: rgba(255, 255, 255, .07);
--active: rgba(255, 255, 255, .14);
--muted: rgba(255, 255, 255, .05);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
--shadow-lg: 0 4px 14px rgba(0, 0, 0, .5), 0 22px 52px rgba(0, 0, 0, .6);
--dock: rgba(30, 31, 34, .62);
/* 暗色同样收透明：原来搜索壳吃 --glass-2（26 26 26 的 .78），基本是一块死黑 */
--glass-bg: color-mix(in srgb, var(--dock) 32%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 46%, transparent);
--glass-bg-max: color-mix(in srgb, var(--dock) 60%, transparent);
--fb-a: rgb(255 255 255 / .13);
--fb-b: rgb(255 255 255 / .06);
--fb-line: rgb(255 255 255 / .16);
--dock-line: rgba(255, 255, 255, .10);
--dock-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 44px -18px rgba(0, 0, 0, .7);
--dock-fade: rgba(0, 0, 0, .38);
--veil: 10 10 12;
--veil-a: .34;
--text-sh: 0 1px 3px rgba(0, 0, 0, .6);
--ic-sh: drop-shadow(0 6px 12px rgba(0, 0, 0, .30)) drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
--ic-sh-hi: drop-shadow(0 9px 18px rgba(0, 0, 0, .34)) drop-shadow(0 1px 3px rgba(0, 0, 0, .24));
--ic-sh-lift: drop-shadow(0 12px 24px rgba(0, 0, 0, .40)) drop-shadow(0 2px 5px rgba(0, 0, 0, .28));
--bg-0: radial-gradient(68% 54% at 84% 4%, rgba(16, 185, 129, .20) 0%, rgba(16, 185, 129, 0) 60%),
radial-gradient(64% 52% at 6% 96%, rgba(20, 184, 166, .14) 0%, rgba(20, 184, 166, 0) 60%),
linear-gradient(168deg, #1a1a1c 0%, #141414 52%, #0c0c0e 100%);
}
/* ---------- 玻璃浓度：设置「主题 → 透明度」那三档（2026-10-28 定，2026-10-30 拉开） ----------
三档同时动**两个**东西：填充的 alpha + `--glass-bf` 的虚化半径。
原来只动 alpha，站长判「三个区别不明显」——量出来是有道理的：亮色三档的有效白纱只有
.23 / .33 / .45，而亮色壁纸本身就亮，往上盖一层白几乎不改明度，所以 alpha 差 10 个点眼睛根本读不出来。
macOS 那套厚薄能一眼分开，靠的是「背后的内容糊成一片 vs 还看得见细节」，也就是半径。
现在高 = blur(4px)（背后细节留着，读作「透」）、中 = blur(10px)（现值，默认档不动）、
低 = blur(26px)（壁纸抹平 + 厚白纱，读作「实」），半径 6.5 倍的跨度加上 alpha 一起走。
白边那一圈不跟着变：半径已经把轮廓拉开了，再动边就是一轮新的判据。
中档就是上面 :root / [data-theme=dark] 那两份现值，所以 `data-glass="mid"` 和不写这个属性完全等价
（首帧 home-boot.js 只在 high/low 才写属性，选「中」的用户刷新时不会二次改色）。
跟着走的面：搜索壳 / 引擎下拉 / 引擎胶囊 hover / 启动台搜索胶囊 / 底部栏 / 顶栏 HUD / 备案条 /
站内大列表 / 文件夹玻璃板 / 添加·编辑弹窗 / 站内库 / 提示条 / 右键菜单（含箭头三角）/ 文件夹砖。
故意没跟着走的四处，都是自带 blur 的另一套配方或尺寸太小看不出浓度：
.lp-v（隐私态标题条 blur 28px）· .dhint（拖放提示 blur 18px）· .lp-badge（20px 角标，本来就 88% 实心）·
.dock-bar（3px 滚动条药丸）。蒙版那几层（.lpf / .mwrap / .lib-wrap / .mask）是「背后的雾」不是「板子的浓度」，
它们各自挂在 veil + blur 上，改它们等于同时改展开文件夹和弹窗的手感，这一轮不碰。 */
[data-glass="high"] {
--glass-bg: color-mix(in srgb, var(--dock) 24%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 42%, transparent);
--glass-bg-max: color-mix(in srgb, var(--dock) 58%, transparent);
--glass-bf: blur(4px) saturate(1.35);
--pop-glass: color-mix(in srgb, var(--pop) 42%, transparent);
--fb-a: rgb(255 255 255 / .20);
--fb-b: rgb(255 255 255 / .08);
--fb-line: rgb(255 255 255 / .26);
}
[data-glass="low"] {
--glass-bg: color-mix(in srgb, var(--dock) 72%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 86%, transparent);
--glass-bg-max: color-mix(in srgb, var(--dock) 96%, transparent);
--glass-bf: blur(26px) saturate(1.9);
--pop-glass: color-mix(in srgb, var(--pop) 74%, transparent);
--fb-a: rgb(255 255 255 / .40);
--fb-b: rgb(255 255 255 / .26);
--fb-line: rgb(255 255 255 / .44);
}
[data-theme=dark][data-glass="high"] {
--glass-bg: color-mix(in srgb, var(--dock) 12%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 24%, transparent);
--glass-bg-max: color-mix(in srgb, var(--dock) 36%, transparent);
--pop-glass: color-mix(in srgb, var(--pop) 44%, transparent);
--fb-a: rgb(255 255 255 / .08);
--fb-b: rgb(255 255 255 / .02);
--fb-line: rgb(255 255 255 / .12);
}
[data-theme=dark][data-glass="low"] {
--glass-bg: color-mix(in srgb, var(--dock) 60%, transparent);
--glass-bg-hi: color-mix(in srgb, var(--dock) 74%, transparent);
--glass-bg-max: color-mix(in srgb, var(--dock) 86%, transparent);
--pop-glass: color-mix(in srgb, var(--pop) 72%, transparent);
--fb-a: rgb(255 255 255 / .20);
--fb-b: rgb(255 255 255 / .12);
--fb-line: rgb(255 255 255 / .22);
}
/* 只有真实壁纸才需要文字描影，纯色/渐变下加投影只会让字发虚。
而且它只给**直接压在壁纸上**的字用（时钟、品牌、启动台图标名）：亮色这一支是 0 1px 0 白 .9，
玻璃药丸（提示条、备案条）自己就是浅底板，再吃它就是一圈白边糊在字缘上 */
[data-theme=light][data-bgpic] { --text-sh: 0 1px 0 rgba(255, 255, 255, .9) }
* { box-sizing: border-box; margin: 0; padding: 0 }
button, input, select, textarea { font-family: inherit }
[hidden] { display: none !important }
html { height: 100% }
body {
min-height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--ink); background: #141414;
-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[data-theme=light] body { background: #e9edf3 }
a { color: inherit; text-decoration: none }
svg { display: block }
/* ---------- 背景三层 ---------- */
.bg, .scrim, .vig { position: fixed; inset: -30px; pointer-events: none }
.bg { z-index: -3; background: var(--bg-set, var(--bg-0)); background-size: cover; background-position: center; transition: background .35s var(--ease) }
.scrim { z-index: -2; background: rgb(var(--veil) / var(--scrim)); transition: background .2s }
.vig { z-index: -1; background: radial-gradient(120% 84% at 50% 42%, rgba(0, 0, 0, 0) 52%, rgb(var(--veil) / .38) 100%) }
/* ---------- 角标区：品牌在左上，主题/设置在右上 ---------- */
.brand { position: fixed; left: 22px; top: 18px; z-index: 36; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px }
.brand img { width: 27px; height: 27px; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow) }
.brand b { font-size: 15px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); text-shadow: var(--text-sh) }
.hud { position: fixed; right: 18px; top: 15px; z-index: 36; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 13px; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--shadow); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf) }
/* 2026-10-27 全站玻璃边统一到这一份白边（和 .lp-s / .dock 同档）：裸 --dock-line 亮色是 8% 的黑，压在浅壁纸上等于没边 */
[data-theme=dark] .hud { border-color: rgb(255 255 255 / .16) }
/* 角标只在启动台里出现：画布只留时间和搜索，展开总览才给出口和设置 */
.brand, .hud { opacity: 0; pointer-events: none; transition: opacity .22s var(--ease) }
[data-lp-on] .brand, [data-lp-on] .hud { opacity: 1; pointer-events: auto; z-index: 47 }
.h-i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--sub); display: grid; place-items: center; cursor: pointer; transition: .16s var(--ease); position: relative }
.h-i svg { width: 17px; height: 17px }
.h-i:hover { background: var(--active); color: var(--ink) }
.h-i[aria-expanded=true] { background: var(--active); color: var(--ink) }
.h-i[data-tip]:hover::after {
content: attr(data-tip); position: absolute; right: 0; top: 40px;
white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 5px 8px; border-radius: 8px;
background: var(--pop); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
}
/* ---------- 舞台：时间+搜索压在上部，底部一排卡片 ---------- */
.stage { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(104px, 18vh, 190px) 20px 168px; transition: padding-top .24s var(--ease) }
/* 启动台展开时时间贴到顶上，把腾出来的高度全给图标网格 */
[data-lp-on] .stage { padding-top: 26px }
.hero { position: relative; width: 100%; max-width: 660px; display: flex; flex-direction: column; align-items: center; gap: 4px }
.clock { border: 0; background: none; padding: 0; position: relative; z-index: 46; font-size: var(--clock-fs); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: var(--text-sh); cursor: pointer; border-radius: 16px; transition: opacity .16s, transform .2s var(--ease) }
.clock:hover { opacity: .72; transform: scale(.985) }
.clock[aria-expanded=true] { opacity: .6 }
/* 亮色主题配壁纸（预设深图或任意图片）：数字一律走白字暗描边（iOS 锁屏口径），其余文字仍跟着主题 */
[data-theme=light][data-bg-dk="1"] .clock, [data-theme=light][data-bgpic] .clock { color: #f7f8fb; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .2) }
.hero .sbox { width: 100%; margin-top: 28px; z-index: 36 }
/* 首屏画面上不出现标题：这行只给读屏和抓取用，时钟仍是第一屏唯一的字 */
.hero-tt { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
/* ---------- 站内面板 ---------- */
.site-menu { position: fixed; right: 18px; top: 62px; z-index: 60; width: min(320px, calc(100vw - 28px)); max-height: calc(100vh - 84px); overflow: auto; overscroll-behavior: contain; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--r3); box-shadow: 0 1px 2px rgb(17 24 39 / .05), 0 12px 28px -14px rgb(17 24 39 / .13), inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .2); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent }
[data-theme=dark] .site-menu { border-color: rgb(255 255 255 / .14); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.site-menu::-webkit-scrollbar { width: 8px }
.site-menu::-webkit-scrollbar-track { background: transparent }
.site-menu::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box }
.sm-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 11px }
.sm-links button { display: flex; align-items: center; gap: 7px; min-width: 0; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--sub); text-align: left; padding: 5px; border: 1px solid var(--field-line); box-shadow: var(--field-sh); border-radius: var(--r1); background: var(--field-glass); cursor: pointer; transition: .15s }
.sm-links button svg { flex: none; width: 14px; height: 14px; color: var(--acc-600) }
.sm-links button:hover { color: var(--ink); background: var(--btn-bg-h) }
.sm-links button.on { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 38%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent) }
/* 当前视图的小网址条目：一行两张，比上面那排页签明显小一圈、不带边框（否则会看成同一层东西） */
.sm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 4px; padding: 5px 8px 8px; border-top: 1px solid var(--line-2) }
.sm-grid a { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 6px; border-radius: 8px; transition: background .14s }
.sm-grid a:hover { background: var(--hover) }
/* 圆角跟启动台同一比例（60px 配 16px ≈ 27%），这里 16px 落 4px；img 用 inherit，容器裁一遍再自己圆，换成大图也不会露角 */
.sm-grid .ic { flex: none; width: 16px; height: 16px; display: grid; place-items: center; overflow: hidden; border-radius: 4px }
.sm-grid .ic img { width: 16px; height: 16px; object-fit: contain; border-radius: inherit }
.sm-grid .ic b { font-size: 10px; font-weight: 700; color: var(--sub) }
.sm-grid .t { min-width: 0; flex: 1; font-size: 12px; font-weight: 550; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sm-grid a:hover .t { color: var(--ink) }
.sm-nil { grid-column: 1 / -1; padding: 14px 4px; font-size: 12px; color: var(--faint); text-align: center }
/* ---------- 搜索条 ---------- */
/* 2026-10-24 第十五轮后他嫌这一根太长（「搜索框有点宽了」），660 收到 560。
只改 .sbox 这一处：`.hero` 那 660 是给时钟居中的容器，跟着收会把标题行一起挤窄。
同时搜那排 6 家全勾时实测 560 和 660 都是两行（居中铁行），收宽没有多折一行 */
.sbox { position: relative; width: 100%; max-width: 560px }
.shell {
position: relative;
border-radius: 999px; background: var(--glass-bg);
/* 圆角两端看不清边：1px --dock-line 太淡又被大投影吃掉，掺 --ink 提亮又被他判成「灰蒙蒙的很脏」（2026-10-25 搜索胶囊那一轮定的口径）。
现在和 .lp-s 同一份配方：外边走半透明白，浅色壁纸上与玻璃填充融合≈无边，彩色壁纸上读作高光；暗色换白 .16 */
border: 1px solid rgb(255 255 255 / .5);
box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 .5px rgb(255 255 255 / .10);
backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf);
overflow: hidden; transition: background .18s, border-color .18s, box-shadow .22s var(--ease);
}
[data-theme=dark] .shell { border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 .5px rgb(255 255 255 / .06) }
/* 聚焦只把填充提一档，不再描绿边、不再打绿色外环（2026-10-27 他点名把这两条声明删掉）。
外壳的投影和顶内高光不用在这里重写，`.shell` 基础那条一直在；「已选中」这件事现在由
变亮的填充 + 两侧图标和发送键浮现来说 */
.sbox.focus .shell { background: var(--glass-bg-hi) }
/* 搜索行叫 .sbar 是有意的：它绝不能蹭设置抽屉那套通用行类（以前叫 .srow、现在叫 .row），一蹭就被 padding/border/--field 底盖掉，胶囊里套出个圆角方框、两端弧线全糊 */
.sbar { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 7px; min-height: 46px }
/* 左边这颗只剩图标（2026-10-24 他点名「还有竖条 删除 左侧只显示图标」）：引擎名、下拉箭头、
那根 `.div` 竖条一起删了，所以它从一颗药丸收成 34px 的圆，hover 才起底。
2026-10-29 设置里的「可选引擎」改成直接摊开，那个下拉箭头连同 .drop-b/.drop-p 一起没了 */
.eng { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: .15s }
.eng img { display: block; width: 18px; height: 18px; object-fit: contain; border-radius: 5px }
.eng:hover, .eng[aria-expanded=true] { background: var(--hover) }
#q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14.5px; line-height: 1.4; padding: 8px 2px }
#q::placeholder { color: var(--faint); font-weight: 400 }
/* 空态这颗要有底（2026-10-24 第十五轮：「没有词的时候 只有一个上箭头 没有背景」），
但底色不再是那颗压实的墨灰圆片——2026-10-27 他点名「灰色不太协调，玻璃透明拟态改一下」，
改成和外壳同族的小玻璃片：半透明白打底 + 白高光 + 一圈半透明白内描边，箭头回落到 --ink。
描边走 inset box-shadow 而不是 border：`.send.on` 自己重写 box-shadow，绿片不会留一圈白边，
那三行也一个字不用动。这里绝不能加 backdrop-filter——.shell 已经带 blur，
祖先的 backdrop root 会让里层只能采到外壳那层死色（启动台文件夹砖踩过同一个坑）。 */
.send { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .5); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .2s var(--ease); box-shadow: 0 2px 8px -4px rgb(17 24 39 / .35), inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 0 1px rgb(255 255 255 / .6) }
.send svg { width: 17px; height: 17px }
.send:hover { background: rgb(255 255 255 / .66) }
.send:active { transform: scale(.94) }
[data-theme=dark] .send:not(.on) { background: rgb(255 255 255 / .14); color: var(--ink); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .16) }
[data-theme=dark] .send:not(.on):hover { background: rgb(255 255 255 / .22) }
.send.on { background: var(--acc-600); color: #fff; box-shadow: 0 6px 16px -8px rgba(16, 185, 129, .85) }
.send.on:hover { transform: scale(1.06); background: color-mix(in srgb, var(--acc-600) 88%, #000) }
.send.on:active { transform: scale(.94) }
/* 没展开且框里没词：整条收成一颗干净胶囊（2026-10-27 他点名「隐藏左侧百度图标和右侧的搜索按钮箭头，
只显示一个框，居中一个搜索文案；选中状态再反过来」）。收不收由 home.js 的 syncIdle() 挂在 form 上，
判据是「没词 + form 没有 .focus + 引擎菜单没摊开」，跟着描边一起翻，所以不会出现绿描边里空无一物；
两颗按钮是 display:none 而不是 opacity:0 —— 留着它们还会占住胶囊两端那 41px 的点击区 */
.sbox.idle .eng, .sbox.idle .send { display: none }
/* 提示位走一枚白色放大镜（2026-10-27 他先点名把灰字改白、紧接着改成「换成放大镜图标，不显示文字了」，
形状照他给的那份 macOS 样式 SVG）。白色压在浅玻璃上要有托底才读得出来，但这里**不能用 text-shadow**
——那是给文字用的，SVG 描边吃不到，得用 filter: drop-shadow 打在图形上。
也没用站内那套 1px 白色浮雕（--text-sh 是给深色字用的，白字叠白浮雕会糊成一团） */
.s-hint { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; color: #fff; filter: drop-shadow(0 1px 2px rgb(17 24 39 / .45)) drop-shadow(0 0 8px rgb(17 24 39 / .18)) }
.s-hint svg { display: block; width: 18px; height: 18px }
.sbox.idle .s-hint { display: block }
/* 引擎下拉：整块吃搜索壳那一套玻璃（--glass-bg + --glass-bf + 同一圈描边和内环），
亮暗两边都不再是死白 / 死黑的一块板。里面的格子改成掺 --ink 的半透明底，
这样亮色是浅灰、暗色是浅白，两边同一行规则，壁纸的色还能从底下透上来 */
.eng-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(340px, 92vw); background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .5); border-radius: var(--r3); padding: 7px; box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 .5px rgb(255 255 255 / .10); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf) }
[data-theme=dark] .eng-menu { border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 .5px rgb(255 255 255 / .06) }
.eng-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px }
.eng-list button { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 8px 9px; border-radius: 9px; cursor: pointer; text-align: left; transition: .15s }
.eng-list button img { width: 17px; height: 17px; flex: none; object-fit: contain; border-radius: 4px }
.eng-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.eng-list button:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: color-mix(in srgb, var(--ink) 14%, transparent) }
.eng-list button.on { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 42%, transparent); background: color-mix(in srgb, var(--acc) 16%, transparent) }
.eng-set { width: 100%; margin-top: 6px; padding-top: 7px; border: 0; border-top: 1px solid var(--line-2); background: none; color: var(--sub); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer }
.eng-set:hover { color: var(--ink) }
/* 聚合搜：搜索框下面那一排引擎胶囊（有词才出现）。每颗自己挂 backdrop-filter —— 它们是 .shell 的兄弟，
不嵌在别的毛玻璃里，所以各自都能采到壁纸，不会撞 backdrop root。
边不要掺 --ink 的灰描边：14% 的黑压在糊过的壁纸上会跟着壁纸变色、圆角处发脏。
白霜内描边（`--ring` 那圈 inset 0 0 0 1px）也已于 2026-10-24 第十七轮整条去掉（他的原话
「更多搜索的选项卡 去除 --ring: rgb(255 255 255 / .38); 这个描边」），`.xe` / `.xe-x` 亮暗两边都不再挂环 ——
现在这一排只靠顶边 1px 内高光 + 一个软投影立住，四个 `--ring` 声明全删了，别再照旧文档找它 */
.xeng { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 29; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }
.xe { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--glass-bg-hi); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 2px 8px rgb(17 24 39 / .10); color: var(--ink); font-size: 12.5px; font-weight: 650; text-decoration: none; transition: background .15s, box-shadow .15s, transform .15s var(--ease) }
.xe:hover { background: var(--glass-bg-max); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 4px 12px rgb(17 24 39 / .14); transform: translateY(-1px) }
.xe:active { transform: none }
[data-theme=dark] .xe { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 2px 10px rgb(0 0 0 / .45) }
/* 2026-10-24 第十六轮：行首那枚 `同时搜` 小标签整条删掉（他的原话
「搜索框下 同时搜 3 个字就不需要显示出来了」），`.xe-lb` 这条规则跟着删。这一排现在就是
引擎胶囊 + 行末一颗叉，谁都不解释自己 —— 第九轮那颗带主色的胶囊开关早就否掉了，
这一排的强调色一个都不留的口径不变 */
/* 行末这颗叉 = 就地关掉这一排。28px 圆 + 14px 图标那一档形状，原来属于搜索框里的清空按钮
（`#clearBtn` 2026-10-24 第十三轮被他删了：「不需要再多一个叉」），现在整页只剩这一颗，
所以形状直接写在 `.xe-x` 上，`.clr` 三条规则一并删掉，别留一个只有一个使用者的空壳类名。
材质吃这一排的玻璃（顶边高光 + 2px 软影，第十七轮之后连白霜环也没有了）：透明底直接放在壁纸上会像没做完。
图标用 `--sub` 而不是 `--faint`（压在壁纸上要吃不消），hover 才提到 `--ink`。
它只在「开」的时候存在 —— 点完整排消失，所以不需要 off 那一档样式 */
.xe-x { flex: none; align-self: center; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass-bg-hi); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 2px 8px rgb(17 24 39 / .10); color: var(--sub); cursor: pointer; transition: background .15s, box-shadow .15s, color .15s }
.xe-x svg { width: 14px; height: 14px }
.xe-x:hover { background: var(--glass-bg-max); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 4px 12px rgb(17 24 39 / .14) }
[data-theme=dark] .xe-x { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 2px 10px rgb(0 0 0 / .45) }
.xe img, .xe b { width: 16px; height: 16px; flex: none; object-fit: contain; border-radius: 4px }
.xe b { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--sub); background: color-mix(in srgb, var(--ink) 8%, transparent) }
.xe span { white-space: nowrap }
/* ---------- 启动台：点时间或右键展开全部图标，悬停图标改分类，再点时间收回 ---------- */
/* 收起启动台时让极简搜索框晚 180ms 再淡入：等图标那一屏淡干净，两屏不同时露脸。
延迟写在「回落到基础态」这一条上，所以只有收起有延迟；展开走下面那条 [data-lp-on]，延迟归零，不拖慢展开 */
.hero .sbox { transition: opacity .22s var(--ease) .18s }
/* 展开时画布只留时间可点，底部栏例外：它常驻，方便直接拖图标进来 */
[data-lp-on] .hero .sbox { opacity: 0; pointer-events: none; transition-delay: 0s }
.lp { position: fixed; inset: 0; z-index: 44; display: flex; flex-direction: column; padding-top: calc(var(--lp-top) + var(--clock-fs) * 1.02 + 12px); padding-bottom: 132px; touch-action: pan-y }
/* 展开启动台那层的「糊背景」不再用 backdrop-filter：那一层要在淡入的每一帧把整张壁纸重新采一遍
（4K 屏就是 830 万像素一帧），点时间那一下的卡顿、闪糊、像换了张图的感觉就是掉的这几帧。
改成把当前壁纸自己糊一份当背景层：--bg-set 是 home-boot / home.js 写进去的那一份，
内置图、本机上传、必应日图、在线链接四种来源都走它，所以 JS 一个字不用跟着改。
模糊只算一次进纹理，淡入回到纯合成器动画。
仍然挂在 ::before 这一层而不是 .lp 自己身上：带 backdrop-filter 的祖先会立起一个 backdrop root，
后代（文件夹砖、搜索胶囊）的 backdrop-filter 就只能采到 .lp 那层死色、糊不出壁纸 */
.lp::before { content: ''; position: absolute; inset: -36px; z-index: -1; background: var(--bg-set, var(--bg-0)); background-size: cover; background-position: center; filter: blur(20px) saturate(1.5); opacity: 0; transition: opacity .22s var(--ease) }
/* 压暗那一层单独走 ::after：纯颜色、不采样，跟糊层一起淡入 */
.lp::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(var(--veil) / .62); opacity: 0; transition: opacity .22s var(--ease) }
.lp.show::before, .lp.show::after { opacity: 1 }
/* 内容三块跟着糊层一起淡。整层 opacity 过渡拿掉之后不补这一笔的话：
收起时图标还满不透明地挂着，而极简那个搜索框同时在淡入 → 两层叠在一起闪一下（2026-10-26 他点名） */
.lp-top, .lp-body, .lp-dots { opacity: 0; transition: opacity .18s var(--ease) }
.lp.show .lp-top, .lp.show .lp-body, .lp.show .lp-dots { opacity: 1 }
.lp-top { position: relative; flex: none; display: flex; align-items: center; justify-content: center; padding: 4px 20px }
/* 搜索 = 一枚小胶囊，照 iOS 主屏底部那个「搜索」牌：平时只有放大镜 + 两个字，
点一下（或直接敲字）才长成输入框。玻璃底和底部栏同款：实心 --glass-2 在亮色下就是一块死白，
压到 --dock 的一半再叠内高光。展开宽度里那 200px 是给右上角顶栏让的位置 */
.lp-s { display: flex; align-items: center; justify-content: center; gap: 6px; width: 78px; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .28), inset 0 0 0 .5px rgb(255 255 255 / .12); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); transition: width .24s var(--ease), height .24s var(--ease) }
/* 描边用半透明白而不是掺 --ink 的灰：灰边压在彩色壁纸上发脏，白边读作玻璃高光 */
[data-theme=dark] .lp-s { border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.lp-s:hover { border-color: rgb(255 255 255 / .72) }
[data-theme=dark] .lp-s:hover { border-color: rgb(255 255 255 / .26) }
.lp-s svg { width: 14px; height: 14px; flex: none; color: var(--faint) }
.lp-sh { flex: none; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; color: var(--faint) }
.lp-s input { flex: 1 1 auto; width: 0; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; opacity: 0; transition: opacity .18s var(--ease) }
.lp-s input::placeholder { color: var(--faint) }
.lp-s.open { justify-content: flex-start; gap: 8px; width: min(320px, calc(100vw - 200px)); height: 40px; padding: 0 14px; cursor: text }
.lp-s.open svg { width: 15px; height: 15px }
.lp-s.open .lp-sh { display: none }
.lp-s.open input { width: auto; opacity: 1 }
/* 手机端「编辑」钮：和搜索胶囊同料的玻璃小牌，只在触屏上出现（微信内核压不住长按系统面板，
编辑入口得明着给）。开启后 html[data-lpedit]：格子出角标、点击不跳转、按下即拖 */
.lp-edit { display: none; flex: none; align-items: center; height: 30px; margin-left: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .5); background: var(--glass-bg); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .28); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); font-size: 12.5px; font-weight: 650; letter-spacing: .04em; color: var(--ink); cursor: pointer }
[data-theme=dark] .lp-edit { border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .14) }
/* hover 那条写在 .on 前面：编辑态点亮时（主色边）不该被白边的 hover 盖掉 */
.lp-edit:hover { border-color: rgb(255 255 255 / .72) }
[data-theme=dark] .lp-edit:hover { border-color: rgb(255 255 255 / .26) }
.lp-edit.on { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent) }
@media (hover: none) { .lp-edit { display: inline-flex } }
/* 内核谎报 hover 的兜底：home.js 探到触点就给 html 挂 data-touch */
html[data-touch] .lp-edit { display: inline-flex }
/* 编辑角标：铅笔小圆牌压在图标右上角，点了走的就是原来那发右键菜单 */
.lp-badge { display: none; position: absolute; top: -3px; right: -3px; z-index: 4; width: 20px; height: 20px; padding: 0; border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: color-mix(in srgb, var(--dock) 88%, transparent); color: var(--ink); box-shadow: 0 1px 4px rgb(17 24 39 / .18); place-items: center; cursor: pointer }
[data-theme=dark] .lp-badge { border-color: rgb(255 255 255 / .22) }
.lp-badge svg { width: 10px; height: 10px }
html[data-lpedit] .lp-badge { display: grid }
/* 分屏圆点：照 Mac/iPhone 启动台，当前那一屏是绿的、略大一圈。
它是 #lp 的最后一行、坐在底部栏让出来的那条带里，所以图标再多也不会把它顶下去或压在上面 */
.lp-dots { flex: none; display: flex; gap: 9px; justify-content: center; padding: 9px 0 2px; min-height: 19px }
/* 只有一屏时用 visibility 而不是 display:none：这条带一撤，.lp-body 就长高，
lpSize() 下次量屏就会多算出一行。
min-height 是另一半：圆点清空后只剩 padding，高度会从 19 掉到 11，avail 照样变 */
.lp-dots.off { visibility: hidden }
.lp-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 26%, transparent); cursor: pointer; transition: .16s var(--ease) }
.lp-dots button:hover { background: color-mix(in srgb, var(--ink) 52%, transparent) }
.lp-dots button.on { background: var(--acc-ink); transform: scale(1.3) }
.lp-body { --lp-pad-t: 14px; position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--lp-pad-t) 24px 10px }
/* 换屏时垫在旁边那一屏：只在动画里活着 300ms，不参与点击和弹出动画 */
.lp-nb { position: absolute; top: var(--lp-pad-t); left: 0; right: 0; pointer-events: none; will-change: transform }
.lp-nb .lp-cell { animation: none }
.lp.swiping { user-select: none }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 10px 4px; max-width: 960px; margin: 0 auto }
/* 宽屏固定一行 8 个，窄屏再回落到自动列数；960px 是「60px 图标不挤、两侧又留得出空白」的折中 */
@media (min-width: 981px) { .lp-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) } }
/* 默认让手指竖划归浏览器（滚屏），只有编辑态才把触摸全交给拖拽，手机上不会再误拖 */
.lp-cell { position: relative; display: flex; justify-content: center; touch-action: pan-y; transition: transform .18s var(--ease) }
/* 能拖的那两片网格（主桌面 + 摊开的文件夹）不吃浏览器手势：长按按满之后这一划要归 JS，
留给浏览器 pan-y 就会在半路被抢走变成滚屏。没按满就划走的那一划由 JS 交回给换页。
只写直接子级，「意外捕捞到」那一片还是要能正常滚 */
#lpGrid > .lp-cell, #lpfGrid > .lp-cell { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none }
/* 微信等手机内核长按 /![]()
会弹系统面板（转发/保存到手机/搜一搜），而且经常无视
contextmenu 的 preventDefault。这里双保险：callout 逐层点名（个别内核不跟继承），
图片不吃指针事件，长按落点只剩格子本身（.dk-ic img 同款做法） */
.lp-a, .lp-a * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }
.lp-a .ic img { pointer-events: none }
/* 长按按满那一下的浮起：再往外拖就是排序，原地松手是菜单（和底部栏 .dk.lift 一个意思） */
#lpGrid > .lp-cell.lift, #lpfGrid > .lp-cell.lift { z-index: 3 }
#lpGrid > .lp-cell.lift .ic, #lpfGrid > .lp-cell.lift .ic { transform: scale(1.14) }
#lpGrid > .lp-cell.lift .lp-a, #lpfGrid > .lp-cell.lift .lp-a { cursor: grabbing }
/* 拖拽时整张卡跟手走：图标连投影、名字一起进虚影，原位只留一个空格子 */
.lp-cell.drag-src .ic { opacity: 0 }
.lp-cell.drag-src .nm { opacity: 0 }
.lp-a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 11px 6px 10px; border-radius: 16px }
/* iOS 式图标：不要灰色底板和描边，靠随形的 drop-shadow 撑出立体感 */
.lp-a .ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; position: relative; transition: transform .2s var(--ease) }
.lp-a:hover .ic { transform: scale(1.07) }
.lp-a:active .ic { transform: scale(.96) }
.lp-a .ic img { width: 60px; height: 60px; border-radius: inherit; object-fit: contain; -webkit-user-drag: none; user-drag: none; filter: var(--ic-sh) }
.lp-a:hover .ic img { filter: var(--ic-sh-hi) }
/* 首字兜底没有图可投影，给它留一块小底板 */
.lp-a .ic b, .lp-ghost .ic b { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; font-size: 23px; font-weight: 700; color: var(--sub); background: var(--glass-2); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2) }
/* 行高写死：normal 时中文名 16.5px、纯英文名 14px，同一屏里两种行高（105.5/103），
换视图量到的行高就变，一屏几行也跟着变 */
.lp-a .nm { max-width: 100%; font-size: 12px; line-height: 17px; font-weight: 500; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lp-nil { grid-column: 1/-1; width: 100%; max-width: 640px; margin: 0 auto; padding: 64px 20px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--sub) }
/* ---------- 隐私空间：只有启动台这一屏，顶上那行是滚动文案不是搜索框 ---------- */
/* 特异度要压过 .lp-s 那条 display:flex，写 hidden 属性会被它盖掉 */
html[data-vault="1"] .lp-s { display: none }
/* 底部栏 z-index 比启动台高，隐私态下会露一条空的：这一屏只有启动台，整条收掉 */
html[data-vault="1"] .dock-wrap { display: none }
/* 「站内」那一格在隐私态没有意义（它列的是站内收录），原位置换成退出 */
html[data-vault="1"] #siteBtn { display: none }
/* 品牌位换成一把锁 + 「G123隐私空间」，一眼知道现在在哪一屏 */
.brand-lk, .brand-vt { display: none }
.brand-lk { width: 24px; height: 24px; color: var(--acc-600); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--acc) 45%, transparent)) }
.brand-vt { font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); text-shadow: var(--text-sh) }
html[data-vault="1"] .brand img, html[data-vault="1"] .brand b { display: none }
html[data-vault="1"] .brand-lk { display: block }
html[data-vault="1"] .brand-vt { display: inline }
/* 这一屏不糊背景：壁纸就是要露出来给人看，只留上下两道很轻的渐变压边。
拆成糊层(::before) + 压暗层(::after) 之后，这里两样都要关：不糊、也不压暗，
渐变直接落在糊层上并让它一直可见 */
html[data-vault="1"] .lp::before {
background: linear-gradient(rgb(var(--veil) / .34), rgb(var(--veil) / .09) 22%, rgb(var(--veil) / .09) 74%, rgb(var(--veil) / .40));
filter: none; opacity: 1;
}
html[data-vault="1"] .lp::after { opacity: 0 }
/* 隐私空间里的图标名和普通启动台完全一样（500 字重、无投影）：
原先这里给了一档 700 字重 + 同色光晕，理由是「背景露出来了字要自己站得住」，
2026-10-26 他看了实际效果说反而糊、不清晰，所以撤掉覆盖，跟普通那套保持一致。
图标本身的投影（下面那条 .ic img）保留 —— 那个是让砖从壁纸里分出来的，不糊字 */
html[data-vault="1"] .lp-a .ic img { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .40)) drop-shadow(0 10px 20px rgb(0 0 0 / .42)) }
html[data-vault="1"] .lp-a .ic b { box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2), 0 8px 18px rgb(0 0 0 / .34) }
/* 顶上那一行：玻璃胶囊 + 一枚绿锁章 + 四句轮着上滑的文案，右边四个点标到第几句 */
.lp-v { display: flex; align-items: center; gap: 9px; height: 34px; max-width: min(560px, 92vw); padding: 0 7px 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--dock) 56%, transparent); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .26), inset 0 0 0 .5px rgb(255 255 255 / .10); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8) }
[data-theme=dark] .lp-v { background: color-mix(in srgb, var(--dock) 44%, transparent); border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .13), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.lp-v-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(155deg, var(--acc), var(--acc-600)); box-shadow: 0 3px 9px color-mix(in srgb, var(--acc) 42%, transparent), inset 0 1px 0 rgb(255 255 255 / .34) }
.lp-v-ic svg { width: 12px; height: 12px }
.lp-v-tx { flex: 1; min-width: 0; height: 15px; margin: 0; overflow: hidden }
.lp-v-tx b { display: block; font-size: 11.8px; font-weight: 650; line-height: 15px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-shadow: var(--text-sh); animation: lpvUp .44s var(--ease) }
@keyframes lpvUp { from { opacity: 0; transform: translateY(11px) } 55% { opacity: 1 } to { opacity: 1; transform: none } }
.lp-v-dots { flex: none; display: flex; gap: 4px; align-items: center }
.lp-v-dots i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: .32s var(--ease) }
.lp-v-dots i.on { width: 12px; border-radius: 3px; background: var(--acc-600) }
/* 收掉这条提示的叉，尺寸和搜索框那条 .dhint 的叉同一档 */
.lp-v-x { flex: none; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer }
.lp-v-x svg { width: 9px; height: 9px }
.lp-v-x:hover { color: var(--ink); background: var(--active) }
/* 空隐私空间只有一格「＋ 添加」 */
.lp-cell.v-add .lp-a { cursor: pointer }
.lp-cell.v-add .ic b { color: var(--acc); font-size: 27px }
@keyframes lpIn { from { opacity: 0; transform: scale(.86) } }
.lp.show .lp-cell { animation: lpIn .22s var(--ease) backwards }
/* ---------- 启动台搜索兜底：库里相关的条目 ---------- */
/* 标签和分割线合成同一个对象：两段横线左右等分，标签和鱼钉在正中间，
下面直接接网格，不再单独占一段说明文字的位置 */
.lp-site { margin: 20px auto 4px; max-width: 960px }
.ls-hr { display: flex; align-items: center; gap: 14px; margin: 0 0 13px }
.ls-h { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--faint) }
.ls-n { color: var(--acc); font-weight: 700; font-variant-numeric: tabular-nums }
.ls-r { flex: 1; height: 1px; background: var(--line) }
.ls-fw { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--acc) }
.ls-fw svg { width: 18px; height: 18px; overflow: visible; animation: lsSwim 5.4s ease-in-out infinite }
/* 悬停时鱼受惊窜一下：游得更快，两端的转身幅度也收紧 */
.lp-site:hover .ls-fw svg { animation-duration: 2s }
@keyframes lsSwim {
0% { transform: translate(-4px, 1px) }
25% { transform: translate(0, -1.5px) }
45% { transform: translate(4px, 1px) }
53% { transform: translate(4px, 0) scaleX(-1) }
78% { transform: translate(0, -1.5px) scaleX(-1) }
96% { transform: translate(-4px, 1px) scaleX(-1) }
100% { transform: translate(-4px, 1px) }
}
/* 有兜底列时那句「启动台里没有」不该再占 64px 上下留白，否则相关条目被推到看不见的地方 */
.lp-body:has(.lp-site:not([hidden])) .lp-nil { padding: 26px 20px 6px }
/* 从启动台往底部栏拖时的跟手虚影：图标钉在指针上，名字用绝对定位挂在下面，
不参与盒子高度，否则图标会被名字顶得偏离指针 */
.lp-ghost { position: fixed; z-index: 84; pointer-events: none; width: 60px; transform: translate(-50%, -50%) scale(1.06); opacity: .92 }
/* 拖出文件夹玻璃板的那一下：虚影再放大一点，告诉用户这一下松手是放到桌面 */
.lp-ghost.out { transform: translate(-50%, -50%) scale(1.16); opacity: 1 }
.lp-ghost .ic { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; overflow: hidden }
.lp-ghost .ic img { width: 60px; height: 60px; object-fit: contain; filter: var(--ic-sh-lift) }
.lp-ghost .nm { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 9px); max-width: 132px; font-size: 12px; font-weight: 600; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--text-sh) }
/* 虚影里拖的是文件夹时，跟着走的是整块砖：玻璃底要补回来，小图标不能被 .lp-ghost .ic img 那条撑成 60px。
填充/边框吃 --fb-* 那三个令牌，和砖本身是同一份，浓度三档一调两处一起动（原来这里连暗色一起写死过两遍） */
.lp-ghost .ic.fb { background: linear-gradient(var(--fb-a), var(--fb-b)); border: 1px solid var(--fb-line) }
.lp-ghost .fm img, .lp-ghost .fm b { width: 12px; height: 12px; border-radius: 3.5px; object-fit: contain; filter: none; box-shadow: none; font-size: 7.5px }
/* 底部栏那颗也走这层虚影：图标是 50px 不是 60px，盒子跟着收，否则虚影会偏离指针 5px。
标记类不能叫 .dk（那条带 position:relative，会顶掉这里的 fixed），投影要显式抬一档 */
.lp-ghost.gh-dk { width: 50px }
.lp-ghost.gh-dk .dk-ic img { filter: var(--ic-sh-lift) }
/* ---------- 文件夹：一块毛玻璃方砖里 3×3 摆九个小图标，照 iOS 桌面 ---------- */
.lp-fc .lp-a { cursor: pointer }
/* 尺寸和圆角沿用散图标那套 .lp-a .ic，这里只补玻璃底；写在它后面，同特异度靠顺序赢。
玻璃是「白霜」不是 dock 那套深色玻璃：iOS 的文件夹砖在两种主题下都比壁纸亮一档，
拿 --dock 混出来的深色底压在暗壁纸上看着就是一块实心黑砖（用户点名「不是透明的」）。
边框只给 1px 低透明度、不再叠 inset 描边圈——叠了就显得粗，不像 iOS 那么通透。
填充压到 .30→.16 的渐变：以前是 .38 的平色，加上 backdrop-filter 被 .lp 废掉（见上面那条
backdrop root），亮色下叠在白色毛玻璃上就成了一块不透的奶白方块。现在糊得动壁纸了，
档位再低一点，让壁纸的色偏从砖里透出来，上亮下暗那一档是 iOS 板子的高光方向 */
.lp-a .ic.fb { background: linear-gradient(var(--fb-a), var(--fb-b)); border: 1px solid var(--fb-line); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .5); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8) }
[data-theme=dark] .lp-a .ic.fb { box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .12) }
/* 砖里那一小块固定是 44×44 的九宫格（3×12 + 2×4），整块在 58px 砖面里居中（place-self），
格子里的小图标从**第一行往下填**（align-content:start）—— 2 个、3 个、6 个都贴顶，
装满九个时正好铺满这一块，上下各余 8px，不会因为行数少而整体往下坠。
原来写的是 place-content:center，装满是居中的，但只有两三个图标时那一行会掉到砖面正中（上边空 24px），
看着像图标掉下去了；线上更旧那一版是 padding:7px + align-content:start，行高一旦被撑过 12px，
多出来的量全落到下面，装满九个反而整体偏下（他这次点名的就是这个）。 */
.lp-fc .fg { display: grid; grid-template-columns: repeat(3, 12px); grid-auto-rows: 12px; gap: 4px; width: 44px; height: 44px; place-self: center; align-content: start; justify-content: center }
/* 小图标写成真的 （不跑 JS 的抓取端能顺着爬进去），但不接点击：整块砖点哪儿都是「打开文件夹」 */
.lp-fc .fm { pointer-events: none; display: block; width: 12px; height: 12px }
.lp-fc .fm img, .lp-fc .fm b { width: 12px; height: 12px; border-radius: 3.5px; object-fit: contain; filter: none; box-shadow: none; font-size: 7.5px }
/* 隐私空间不糊背景，砖里的小图标得自己有一点投影才不至于贴在壁纸上 */
html[data-vault="1"] .lp-fc .fm img { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .40)) }
/* 拖拽时压在谁身上，谁就整块变大：告诉用户这一下松手是合成/放进它，不是排到它前后。
原来是一圈主色描边（.ic::after），2026-10-25 他照 Mac Launchpad 否掉了描边、要的是「目标鼓起来」，
所以只留放大；1.2 而不是原来的 1.13，是要一眼看得出比旁边那块大 */
.lp-cell.stack-t .ic { transform: scale(1.2) }
/* ---------- 文件夹摊开的那一层：照 iOS 主屏，整屏糊掉、名字在玻璃板上方 ---------- */
/* z-index 45 = 启动台(44) 之上、底部栏(46) 之下，所以底部栏要靠 [data-fold] 整条收掉才不压在这层上面 */
/* 糊只糊在这一层蒙版上（iOS 糊的是整张主屏）；玻璃板自己不再 blur，只靠半透打底，
否则背景糊一遍、板子再糊一遍，里面的图标会发脏。
档位收过三次，别再往上调：56px 抹成一张纯色白纸（「看不出透明玻璃感」），24px 又糊得
「太厉害」——桌面那 18px 已经叠在这一层上面了，所以这一层只补 10px 左右，
背后还能看出壁纸的色块和明暗，板子的半透才演得出玻璃。veil 和板子的 alpha 都不动 */
.lpf { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; background: rgb(var(--veil) / .3); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); opacity: 0; transition: opacity .18s var(--ease) }
.lpf.show { opacity: 1 }
/* 从文件夹里往外拖：蒙版淡下去，桌面格子露出来才看得清要落在哪 */
.lpf.show.drop-out { opacity: .45 }
.lpf-col { --lpf-w: min(288px, 88vw); display: flex; flex-direction: column; width: var(--lpf-w); max-height: min(88vh, 620px); animation: lpfIn .2s var(--ease) }
/* 名字在板子上方，照 iOS / Mac Launchpad 的文件夹标题：大字、居中。
以前是左对齐并靠一条 calc 把缩进算到跟第一列图标齐平，现在改居中就不用再跟着列数改了 */
.lpf-t { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 12px }
#lpfN { flex: 1; min-width: 0; padding: 4px 9px; margin: -4px -9px; border: 0; outline: 0; border-radius: 10px; background: none; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.015em; text-align: center; text-shadow: 0 1px 16px rgb(var(--veil) / .6) }
#lpfN:focus { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 60%, transparent); text-shadow: none }
/* 玻璃板：高透打底 + 顶边一道亮内高光，圆角照 iOS 文件夹给到 30px。
高度不再 flex:1 撑满，而是包着「三行图标 + 一排圆点」，所以装 3 个和装 9 个一样大 */
.lpf-box { flex: none; min-height: 0; display: flex; flex-direction: column; padding: 14px 8px 6px; border-radius: 30px; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .38); box-shadow: 0 1px 2px rgb(17 24 39 / .05), 0 12px 28px -14px rgb(17 24 39 / .13), inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .2) }
[data-theme=dark] .lpf-box { border-color: rgb(255 255 255 / .14); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
@keyframes lpfIn { from { opacity: 0; transform: scale(.9) } }
/* 一页几个由 home.js 的 foldPage() 说了算，跟下面那条 @media 必须同一口径：
触屏/窄窗口 = 3 列 × 三行 9 个，桌面宽版 = 8 列 × 三行 24 个。
278px = 三行 86px（5+56+5+16+4）+ 两道 10px 行距，两种版式都是三行所以高度不用变；
屏太矮就按比例收，收不下的那部分板内竖滚 */
.lpf-pgw { position: relative; flex: none; overflow: hidden; height: min(278px, 42vh) }
.lp-grid.lpf-grid { height: 100%; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px 2px; max-width: none; margin: 0; padding: 2px 2px 4px; scrollbar-width: none }
.lp-grid.lpf-grid::-webkit-scrollbar { display: none }
/* 桌面端把摊开的文件夹改成宽版一行八个（照 Mac Launchpad 那个文件夹面板）：
板宽 820px = 8 列 × 85px + 边框 2 + 板内边 16 + 网格内边 4 + 七道列距 112，
图标仍是 56px，所以每格左右各留约 14px 的空气，不像原来两列距 2px 那么挤。
触屏一律不进来（手机横屏也能超过 720px，所以判 html:not([data-touch])），
窄窗口也留在原来的窄九宫格，免得八列把 56px 图标挤成 52px */
@media (min-width: 720px) {
html:not([data-touch]) .lpf-col { --lpf-w: min(820px, 92vw) }
/* 行距从 10 提到 14：一页三行的总高就是 3×86 + 2×14 = 286px */
html:not([data-touch]) .lpf-pgw { height: min(286px, 42vh) }
html:not([data-touch]) .lp-grid.lpf-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 16px }
}
/* 板子里的格子比桌面紧一档：图标 56px、名字 11.5px，行内上下留白也收（用户点名「不要太松散」） */
.lpf-grid .lp-a { padding: 5px 2px 4px; gap: 5px }
.lpf-grid .lp-a .ic, .lpf-grid .lp-a .ic img { width: 56px; height: 56px }
.lpf-grid .lp-a .nm { font-size: 11.5px; line-height: 16px }
/* 换页时垫在旁边的那一页：主桌面那条 .lp-nb 用 --lp-pad-t 定位，这儿没有那个变量，重新钉一次 */
.lpf-pgw .lp-nb { top: 0; height: 100% }
/* 圆点复用主桌面那套 .lp-dots（含 .off 隐藏和 button.on 高亮），这里只把它压进玻璃板里 */
.lpf-dots { padding: 8px 0 2px }
.lpf-nil { padding: 36px 14px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--sub) }
/* 底部栏比这一层高，摊开文件夹时整条收掉（Mac 的 Launchpad 里也没有 Dock） */
html[data-fold="1"] .dock-wrap { visibility: hidden }
/* ---------- 底部栏：常驻的自定义网址，启动台展开时也在 ---------- */
/* macOS 27 玻璃：高斯模糊 + 饱和提亮 + 上下内高光边，框体只留图标本身的高度 */
.dock-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 14px 14px; pointer-events: none }
.dock { pointer-events: auto; position: relative; display: flex; align-items: flex-end; gap: 12px; max-width: min(1180px, 100%); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 14px 15px; border-radius: 26px; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .28), inset 0 0 0 .5px rgb(255 255 255 / .12); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf); transition: box-shadow .18s, border-color .18s }
[data-theme=dark] .dock { border-color: rgb(255 255 255 / .16); box-shadow: var(--dock-shadow), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.dock::-webkit-scrollbar { display: none }
.dock-wrap.over .dock { border-color: color-mix(in srgb, var(--acc) 60%, var(--dock-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent), var(--dock-shadow) }
/* 窄屏装不下 16 个：玻璃条本来就能横滚，缺的是「右边还有东西」这件事。
两端各一道渐隐，只在还能往那边滚的时候亮；进度条只在触屏出现，桌面装得下就不该有。 */
.dock-hold { position: relative; max-width: min(1180px, 100%) }
.dock-fade { position: absolute; top: 1px; bottom: 1px; width: 20px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease) }
.dock-fade.l { left: 1px; border-radius: 25px 0 0 25px; background: linear-gradient(90deg, var(--dock-fade), transparent) }
.dock-fade.r { right: 1px; border-radius: 0 25px 25px 0; background: linear-gradient(270deg, var(--dock-fade), transparent) }
.dock-hold.f-l .dock-fade.l { opacity: 1 }
.dock-hold.f-r .dock-fade.r { opacity: 1 }
.dock-bar { display: none; position: relative; overflow: hidden; pointer-events: none; width: 74px; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--dock) 70%, transparent) }
.dock-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: color-mix(in srgb, var(--ink) 42%, transparent) }
@media (hover: none) { .dock-bar:not([hidden]) { display: block } }
/* 手机上手指落在图标既可能是滑条也可能是排序，两种都由 JS 判（touch-action 必须留 none，
留给浏览器 pan-x 就没法在长按按满之后接管这一划） */
.dk { position: relative; flex: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .18s var(--ease) }
.dk.dragging { z-index: 5; transition: none }
.dk-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; cursor: grab; transition: transform .2s var(--ease) }
.dk-ic img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; -webkit-user-drag: none; user-drag: none; pointer-events: none; filter: var(--ic-sh) }
.dk:hover .dk-ic img { filter: var(--ic-sh-hi) }
.dk-ic b { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: var(--sub); background: var(--glass-2); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2) }
.dk:hover .dk-ic { transform: translateY(-6px) scale(1.12) }
.dk:active .dk-ic { transform: translateY(-2px) scale(1.03) }
/* 长按按满那一下的浮起：再往外拖就是排序，原地松手是菜单 */
.dk.lift .dk-ic { transform: translateY(-7px) scale(1.1); cursor: grabbing }
/* 拖起来的是 body 上那块 .lp-ghost，带里这一颗只留成空位（原来这里靠真节点跟手，
一往上拖就被 .dock 的 overflow 裁掉） */
.dk.dragging .dk-ic { opacity: 0; transform: none }
.dk.add .dk-ic { background: transparent; border: 1.5px dashed var(--line); box-shadow: none; color: var(--faint); cursor: pointer }
.dk.add .dk-ic svg { width: 17px; height: 17px }
.dk.add:hover .dk-ic { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 58%, var(--line)); background: color-mix(in srgb, var(--acc) 9%, transparent) }
/* 备案条：贴在玻璃 Dock 下方，点叉后本机记住不再显示 */
.beian { pointer-events: auto; display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--shadow); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf) }
[data-theme=dark] .beian { border-color: rgb(255 255 255 / .16) }
.beian a { font-size: 11.5px; font-weight: 600; color: var(--sub); text-decoration: none; white-space: nowrap }
.beian a:hover { color: var(--ink); text-decoration: underline }
.beian button { flex: none; width: 19px; height: 19px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer }
.beian button svg { width: 9px; height: 9px }
.beian button:hover { color: var(--ink); background: var(--active) }
/* 极简模式提示条：点搜索框才浮出来，贴在玻璃 Dock 上沿之外（bottom 由 JS 量），小字淡轮播，点叉本机记住不再显示 */
.dhint { position: fixed; left: 50%; z-index: 45; display: flex; align-items: center; gap: 7px; max-width: min(430px, 90vw); padding: 3px 4px 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--dock) 52%, transparent); border: 1px solid rgb(255 255 255 / .5); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); opacity: 0; transform: translate(-50%, 6px); transition: opacity .26s var(--ease), transform .26s var(--ease) }
[data-theme=dark] .dhint { border-color: rgb(255 255 255 / .16) }
.dhint.show { opacity: 1; transform: translate(-50%, 0) }
.dhint .d { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--acc-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent) }
.dhint .t { min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .24s var(--ease), transform .24s var(--ease) }
.dhint .t.out { opacity: 0; transform: translateY(5px) }
.dhint button { flex: none; width: 19px; height: 19px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer }
.dhint button svg { width: 9px; height: 9px }
.dhint button:hover { color: var(--ink); background: var(--active) }
/* 名字气泡浮在玻璃框上沿之外 */
.dk-tip { position: fixed; z-index: 47; pointer-events: none; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 650; color: var(--ink); background: color-mix(in srgb, var(--pop) 82%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(1.7); -webkit-backdrop-filter: blur(16px) saturate(1.7); opacity: 0; transform: translate(-50%, calc(-100% + 4px)); transition: opacity .14s, transform .14s }.dk-tip.show { opacity: 1; transform: translate(-50%, -100%) }
/* 气泡下沿的尖角指向它所属的图标：和菜单箭头同一手法，外圈描边色 + 内圈气泡色 */
.dk-tip::before, .dk-tip::after { content: ''; position: absolute; left: 50%; width: 0; height: 0; pointer-events: none }
.dk-tip::before { bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top: 10px solid var(--line); border-bottom: 0 }
.dk-tip::after { bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top: 8px solid color-mix(in srgb, var(--pop) 82%, transparent); border-bottom: 0 }
/* ---------- 网址库：小搜索框 + 结果列表 + 右侧加号 ---------- */
.lib-wrap { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 20px; background: rgb(var(--veil) / .2); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); opacity: 0; transition: opacity .18s }
.lib-wrap.show { opacity: 1 }
/* 这一张是从「新加网址」板上点站内工具叠上来的第二层，蒙版底下那层已经糊过一遍也压过一次色，
所以自己的 veil 只补 .20（面板比文件夹板宽得多，靠板子自己的 --glass-bg 收对比），
再叠 .34 就把一整屏压成一张灰纸了。玻璃配方照 .mbox 那一套 */
.lib { width: min(480px, 100%); max-height: min(76vh, 620px); display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--r4); box-shadow: 0 1px 2px rgb(17 24 39 / .05), 0 12px 28px -14px rgb(17 24 39 / .13), inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .2); overflow: hidden; transform: translateY(10px) scale(.99); transition: transform .22s var(--ease) }
[data-theme=dark] .lib { border-color: rgb(255 255 255 / .14); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.lib-wrap.show .lib { transform: none }
.l-top { display: flex; align-items: center; gap: 8px; padding: 12px 13px; border-bottom: 1px solid var(--line-2) }
.l-top .l-i { width: 16px; height: 16px; flex: none; color: var(--faint) }
.l-top input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; line-height: 1.4 }
.l-top input::placeholder { color: var(--faint) }
.l-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer }
.l-x svg { width: 13px; height: 13px }
.l-x:hover { background: var(--hover); color: var(--ink) }
/* 板子上的小标签一律 `--ink`，不要用 `--faint`：这两处都是 11px 特粗压在玻璃板上，
底下透出的是跟着壁纸变的糊色，`--faint`（亮色 #6b6b74）在那个表面上直接被判「太灰 看不清」 */
.l-note { padding: 9px 13px 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink) }
.l-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 7px 10px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent }
/* 滚动条原来吃系统默认那套：亮色下是一条不透明的白杠子压在玻璃上。
标准属性（Chrome / Edge / Firefox）把轨道设成 transparent 让 --glass-bg 透出来，滑块用 --ink 调 20%；
--ink 两套主题各有值，所以不用另写 dark 规则。
下面那组 ::-webkit-scrollbar 只给 Safari 和老内核用 —— Chrome 一旦看到 scrollbar-width 就走标准渲染，
会忽略 webkit 规则，实测 Chrome 里生效的是上面那两行（槽宽 11px）。 */
.l-body::-webkit-scrollbar { width: 8px }
.l-body::-webkit-scrollbar-track { background: transparent }
.l-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box }
.l-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); background-clip: padding-box }
.l-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 6px; border-radius: var(--r1); transition: background .14s }
.l-row:hover { background: var(--hover) }
.l-row .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--field); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-line) 60%, transparent) }
.l-row .ic img { width: 20px; height: 20px; object-fit: contain }
.l-row .ic b { font-size: 12.5px; font-weight: 700; color: var(--sub) }
.l-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px }
.l-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.l-nm em { font-style: normal; color: var(--acc-ink); background: color-mix(in srgb, var(--acc) 16%, transparent); border-radius: 3px; padding: 0 1px }
.l-ds { font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* 加号原来是 --pop 那坨不透明白，搁在玻璃板上像贴了张纸片；改成跟面板同材质的中性按键令牌（--btn-*），
hover 染成主色玻璃而不是实心绿，跟 .mbtn.fill 一个口径 */
.l-add { flex: none; width: 28px; height: 28px; border: 0; border-radius: 9px; background: var(--btn-bg); box-shadow: var(--btn-sh); color: var(--acc-ink); display: grid; place-items: center; cursor: pointer; transition: .15s var(--ease) }
.l-add svg { width: 14px; height: 14px }
.l-add:hover { background: color-mix(in srgb, var(--acc) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent); color: var(--acc-ink); transform: scale(1.06) }
.l-row.has .l-add { color: var(--faint); background: transparent; box-shadow: var(--btn-sh); cursor: default }
.l-row.has .l-add:hover { transform: none; color: var(--faint); background: transparent }
.l-nil { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--sub) }
.l-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); background: var(--muted) }
/* 库底下这一排同理（「自己填网址」原来是实心白、「完成」原来是实心绿），配方跟 .mbtn 同一套 */
.l-man { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: var(--btn-bg); box-shadow: var(--btn-sh); color: var(--ink); font-size: 12.5px; font-weight: 650; line-height: 1; padding: 9px 13px; border-radius: var(--r1); cursor: pointer; transition: .16s var(--ease) }
.l-man svg { width: 13px; height: 13px }
.l-man:hover { background: var(--btn-bg-h) }
.l-done { margin-left: auto; border: 1px solid transparent; background: var(--btn-fill-bg); box-shadow: var(--btn-fill-sh); color: var(--acc-ink); font-size: 12.5px; font-weight: 650; line-height: 1; padding: 10px 16px; border-radius: var(--r1); cursor: pointer; transition: .16s var(--ease) }
.l-done:hover { background: color-mix(in srgb, var(--acc) 40%, transparent) }
body.lock { overflow: hidden }
/* ---------- 导入浏览器书签：勾选清单（照 .lib 那套玻璃，多了勾选框、分组吸顶和滚动条） ---------- */
.bm-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgb(var(--veil) / .28); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility .18s }
.bm-wrap.show { opacity: 1; visibility: visible; pointer-events: auto }
.bm { width: min(520px, 100%); max-height: min(82vh, 700px); display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--r4); box-shadow: 0 1px 2px rgb(17 24 39 / .05), 0 18px 40px -16px rgb(17 24 39 / .2), inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .2); overflow: hidden; transform: translateY(10px) scale(.99); transition: transform .22s var(--ease) }
[data-theme=dark] .bm { border-color: rgb(255 255 255 / .14); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.bm-wrap.show .bm { transform: none }
.bm-top { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--line-2) }
.bm-top .bm-i { width: 17px; height: 17px; flex: none; color: var(--faint) }
.bm-top b { flex: none; font-size: 14.5px; font-weight: 700 }
.bm-file { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right }
.bm-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--sub); display: grid; place-items: center; cursor: pointer; transition: .15s }
.bm-x svg { width: 15px; height: 15px }
.bm-x:hover { background: var(--hover); color: var(--ink) }
.bm-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--pop) 40%, transparent) }
.bm-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink); cursor: pointer; user-select: none }
.bm-cnt { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--sub); font-variant-numeric: tabular-nums }
.bm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 8px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent }
.bm-body::-webkit-scrollbar { width: 9px }
.bm-body::-webkit-scrollbar-track { background: transparent }
.bm-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 99px; border: 2.5px solid transparent; background-clip: padding-box }
.bm-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); background-clip: padding-box }
.bm-gh { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 9px 14px 8px; cursor: pointer; user-select: none; background: color-mix(in srgb, var(--pop) 84%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--line-2) }
.bm-gn { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bm-gc { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--faint); background: var(--field); padding: 2px 8px; border-radius: 99px }
.bm-glist { padding: 3px 7px 8px }
.bm-r { display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: var(--r1); cursor: pointer; transition: background .13s; position: relative }
.bm-r:hover { background: var(--hover) }
.bm-r.on { background: color-mix(in srgb, var(--acc) 9%, transparent) }
.bm-r .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--field-glass); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-line) 60%, transparent) }
.bm-r .ic img { width: 19px; height: 19px; object-fit: contain }
.bm-r .ic b { font-size: 12px; font-weight: 700; color: var(--sub) }
.bm-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px }
.bm-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bm-u { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bm-r.dup { cursor: default }
.bm-r.dup:hover { background: transparent }
.bm-r.dup .bm-tx, .bm-r.dup .ic { opacity: .45 }
.bm-dup { flex: none; font-size: 10.5px; font-weight: 650; color: var(--faint); background: var(--field); padding: 3px 8px; border-radius: 99px }
/* 勾选框：藏掉原生 input（保留可聚焦），用 .bm-cb 画圆角对勾，选中吃主色、半选用一横 */
.bm-r input, .bm-gh input, .bm-all input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none }
.bm-cb { flex: none; width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--field-line); background: var(--field-glass); display: grid; place-items: center; transition: background .14s, border-color .14s, box-shadow .14s }
.bm-cb::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 1px; transform: rotate(-45deg) scale(.3); opacity: 0; transition: transform .14s var(--ease), opacity .14s }
input:checked + .bm-cb { background: var(--acc); border-color: var(--acc); box-shadow: var(--btn-fill-sh) }
input:checked + .bm-cb::after { opacity: 1; transform: rotate(-45deg) scale(1) }
input:indeterminate + .bm-cb { background: color-mix(in srgb, var(--acc) 42%, transparent); border-color: color-mix(in srgb, var(--acc) 60%, transparent) }
input:indeterminate + .bm-cb::after { width: 9px; height: 0; margin: 0; border: 0; border-top: 2px solid #fff; transform: none; opacity: 1 }
input:focus-visible + .bm-cb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent) }
.bm-foot { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line-2); background: var(--muted) }
.bm-note { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sub) }
.bm-imp { flex: none; border: 1px solid transparent; background: var(--btn-fill-bg); box-shadow: var(--btn-fill-sh); color: var(--acc-ink); font-size: 13px; font-weight: 650; line-height: 1; padding: 10px 18px; border-radius: var(--r2); cursor: pointer; transition: .16s var(--ease) }
.bm-imp:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 40%, transparent) }
.bm-imp:disabled { opacity: .45; cursor: default; box-shadow: none }
@media (max-width: 480px) { .bm { max-height: 86vh } .bm-file { display: none } }
/* ---------- 添加常用挑选器（.dp）：和书签面板共用 .bm 那副玻璃壳和 .bm-r 行版式，这里只补差异 ---------- */
.dp-q { flex: 1; min-width: 0; background: var(--field-glass); border: 1px solid var(--field-line); box-shadow: var(--field-sh); border-radius: 999px; color: var(--ink); font-size: 13px; line-height: 1; padding: 9px 14px; outline: none; transition: border-color .15s, box-shadow .15s }
.dp-q:focus { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: var(--field-sh), 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent) }
.dp-q::placeholder { color: var(--faint) }
.dp-list { padding: 5px 9px 6px }
.dp-r { cursor: default }
.dp-add { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--field-line); background: var(--field-glass); color: var(--sub); display: grid; place-items: center; cursor: pointer; transition: .14s }
.dp-add svg { width: 13px; height: 13px }
.dp-add:hover { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 16%, transparent) }
/* 已在底部栏：整行压灰、圆钮换成绿色对勾不再响应 */
.dp-r.has .bm-tx, .dp-r.has .ic { opacity: .48 }
.dp-r.has:hover { background: transparent }
.dp-r.has .dp-add { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 12%, transparent); cursor: default }
.dp-none { margin: 26px 18px; font-size: 12.5px; color: var(--sub); text-align: center; line-height: 1.7 }
/* ---------- 网址图标编辑条 ---------- */
.ti-row { display: flex; align-items: center; gap: 9px }
.ti-pv { flex: none; width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--field); display: grid; place-items: center; overflow: hidden }
.ti-pv img { width: 100%; height: 100%; object-fit: contain }
.ti-pv b { font-size: 19px; font-weight: 700; color: var(--sub) }
.ic-hint { margin-top: 8px; font-size: 11.5px; color: var(--faint) }
/* ---------- 弹层菜单 / 弹窗 ---------- */
.pop { position: fixed; z-index: 78; min-width: 172px; background: var(--pop-glass); border: 1px solid var(--line); border-radius: var(--r2); padding: 5px; box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf) }
.pop button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left }
.pop button svg { flex: none; width: 15px; height: 15px; margin-left: -1px; opacity: .72 }
.pop button:hover svg { opacity: 1 }
.pop button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pop button:hover { background: var(--hover) }
.pop button.danger { color: #dc2626 }
.pop button.danger:hover { background: color-mix(in srgb, #dc2626 12%, transparent) }
.pop .sep { height: 1px; margin: 4px 6px; background: var(--line-2) }
/* 箭头指向被右键的那个图标：--ax / --ay 由 JS 按锚点算好。
两层三角：::before 是边框色的大号（外圈），::after 是菜单底色的小号（盖在里面，
只让外圈露出 1px 斜边），于是箭头的描边和菜单边框是同一条线，看着像边框拐了个弯。
基座比菜单外沿多探进 2px，正好把箭头根部那道 1px 下边框盖掉。 */
.pop::before, .pop::after { content: ''; position: absolute; width: 0; height: 0; pointer-events: none }
.pop[data-arrow=down]::before { bottom: -11px; left: var(--ax); margin-left: -8px; border: 8px solid transparent; border-top: 12px solid var(--line); border-bottom: 0 }
.pop[data-arrow=down]::after { bottom: -9px; left: var(--ax); margin-left: -7px; border: 7px solid transparent; border-top: 10px solid var(--pop-glass); border-bottom: 0 }
.pop[data-arrow=up]::before { top: -11px; left: var(--ax); margin-left: -8px; border: 8px solid transparent; border-bottom: 12px solid var(--line); border-top: 0 }
.pop[data-arrow=up]::after { top: -9px; left: var(--ax); margin-left: -7px; border: 7px solid transparent; border-bottom: 10px solid var(--pop-glass); border-top: 0 }
.pop[data-arrow=left]::before { left: -11px; top: var(--ay); margin-top: -8px; border: 8px solid transparent; border-right: 12px solid var(--line); border-left: 0 }
.pop[data-arrow=left]::after { left: -9px; top: var(--ay); margin-top: -7px; border: 7px solid transparent; border-right: 10px solid var(--pop-glass); border-left: 0 }
.pop[data-arrow=right]::before { right: -11px; top: var(--ay); margin-top: -8px; border: 8px solid transparent; border-left: 12px solid var(--line); border-right: 0 }
.pop[data-arrow=right]::after { right: -9px; top: var(--ay); margin-top: -7px; border: 7px solid transparent; border-left: 10px solid var(--pop-glass); border-right: 0 }
.mwrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgb(var(--veil) / var(--veil-a)); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s }
.mwrap.show { opacity: 1; visibility: visible; pointer-events: auto }
/* 和文件夹弹层同一套做法：模糊挂在 .mwrap 这一整块蒙版上，板子自己不再挂 backdrop-filter
（带 backdrop-filter 的祖先会立起 backdrop root，后代只能采到祖先那层，采不到壁纸）。
板子只负责把 --glass-bg 这层半透填充压在那张已经糊过的壁纸上，边框和内高光跟 .lpf-box 同参 */
.mbox { width: min(380px, 100%); background: var(--glass-bg); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--r4); padding: 20px; box-shadow: 0 1px 2px rgb(17 24 39 / .05), 0 12px 28px -14px rgb(17 24 39 / .13), inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .2); transform: translateY(10px) scale(.985); transition: transform .24s var(--ease) }
[data-theme=dark] .mbox { border-color: rgb(255 255 255 / .14); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .07) }
.mwrap.show .mbox { transform: none }
.mbox h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px }
/* 标题那一行：左边标题，右边小胶囊（添加框的「站内添加 / 书签导入」、身份框的「跳过」共用 .m-lib）。h3 的 margin 交给行本身，否则标题下留两段空 */
.m-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.m-hd h3 { margin-bottom: 0 }
/* 右上角胶囊可能并排两枚：space-between 只有两个子项时才把标题顶左、胶囊顶右，所以胶囊先装进这一个 span */
.m-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; flex: none }
.m-lib { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 10px; border: 1px solid var(--field-line); box-shadow: var(--field-sh); border-radius: 999px; background: var(--field-glass); color: var(--ink); font-size: 11.5px; font-weight: 650; line-height: 1; cursor: pointer; transition: .15s }
.m-lib svg { width: 11px; height: 11px }
.m-lib:hover { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: var(--btn-bg-h) }
.m-lib[hidden] { display: none }
.mbox .f { margin-bottom: 12px }
/* 只管 .f 里那三个字段标题（名称/网址/图标）。原来写成 `.mbox label` 会连
图标行里那颗 一起套进去：
display:block 打掉它的 inline-flex 居中、margin-bottom:6px 又把它在 flex 行里顶高 3px，看着就是错位 */
.mbox .f > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px }
.mbox input { width: 100%; background: var(--field-glass); border: 1px solid var(--field-line); box-shadow: var(--field-sh); border-radius: var(--r2); color: var(--ink); font-size: 14px; line-height: 1; padding: 11px 12px; outline: none; transition: border-color .15s, box-shadow .15s }
.mbox select { width: 100%; background: var(--field-glass); border: 1px solid var(--field-line); box-shadow: var(--field-sh); border-radius: var(--r2); color: var(--ink); font-size: 14px; line-height: 1.4; padding: 11px 12px; outline: none }
.mbox input:focus { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: var(--field-sh), 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent) }
/* 剩下的两处（身份磁贴、库里每行那颗图标格）跟着同一档走，输入格和「站内添加」胶囊已经在上面自己声明了 */
.role-box .role, .l-row .ic { background: var(--field-glass) }
.mfill { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 8px 11px; border: 1px dashed var(--field-line); border-radius: var(--r2); background: none; color: var(--sub); font-size: 12.5px; cursor: pointer; text-align: left; transition: .15s }
.mfill:hover { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent) }
.mfill[hidden] { display: none }
.mfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px }
/* 弹窗底下那一排按键（取消 / 保存 / 确认删除）2026-10-24 被点名「要么是白色 要么是绿色，不够匹配 UI」：
原来是 `--pop` 不透明白和实心绿两块，搁在 `--glass-bg` 的半透板上就是贴了张纸片。
统一改成同板材质的调底 + 白霜内描边，靠色调分主次而不是靠实心色块。
边框留 1px 透明而不是删掉，否则 border-box 下按键会整体缩 2px、跟旁边不同高了。 */
.mbtn { border: 1px solid transparent; background: var(--btn-bg); box-shadow: var(--btn-sh); color: var(--ink); border-radius: var(--r2); padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s }
.mbtn:hover { background: var(--btn-bg-h) }
.mbtn.fill { background: var(--btn-fill-bg); box-shadow: var(--btn-fill-sh); color: var(--acc-ink) }
.mbtn.fill:hover { background: color-mix(in srgb, var(--acc) 40%, transparent) }
.mbtn.warn { background: color-mix(in srgb, #dc2626 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 40%, transparent); color: #dc2626 }
.mbtn.warn:hover { background: color-mix(in srgb, #dc2626 23%, transparent) }
[data-theme=dark] .mbtn.warn { color: #f87171 }
.mbox .cfm-p { margin: -6px 0 2px; font-size: 12px; line-height: 1.65; color: var(--sub) }
/* 网址接收确认框（?add= 深链 / 粘贴共用）：图标在左、名字在右同一行，底下通栏主键。
格子里一律不铺底：.mbox 已经是那张玻璃卡，再叠一层实色 --field 就是贴上去的白块，
只有图标块和输入框吃玻璃控件那套令牌（--field-glass / --field-line / --field-sh） */
.ad-h { display: flex; align-items: flex-start; gap: 8px }
.ad-h h3 { flex: 1; min-width: 0 }
.ad-list { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; margin: 4px 0 2px }
.ad-r { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px }
.ad-r .ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; background: var(--field-glass); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-line) 60%, transparent) }
.ad-r .ic img { width: 32px; height: 32px; object-fit: contain }
.ad-r .ic b { font-size: 20px; font-weight: 700; color: var(--sub) }
.ad-r .ad-n { font-size: 13.5px; font-weight: 600; padding: 12px 14px }
.ad-r.dup .ic { opacity: .55 }
.ad-r.dup em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink) }
.ad-go { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px }
/* 这一颗不走 .mbtn.fill 的 20% 主色玻璃：确认添加是整块板上唯一要人落下去的动作，实心才收得住视线 */
.ad-go.mbtn.fill { border-color: transparent; background: var(--acc); box-shadow: 0 6px 16px -8px rgb(16 185 129 / .85); color: #04211a }
.ad-go.mbtn.fill:hover { background: var(--acc); filter: brightness(1.07) }
.ad-go svg { width: 15px; height: 15px }
/* ---------- 首次访问的身份引导：八枚彩色磁贴，4×2，图标在上名字在下 ---------- */
/* .mwrap 是 place-items:center 的网格，轨道宽度不定：这个框不能用百分比宽度，min(470px,100%) 会退化成 shrink-to-fit，两张卡被压成 26px 宽的竖条（实测量过） */
.role-box { width: 486px; max-width: calc(100vw - 40px); padding: 22px 22px 18px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain }
.role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px }
/* 每档一个专色（--rc 由 home.js 从 ROLES 带进来）：选中态跟着自己那枚色走，八格才不像同一张卡复制八遍 */
.role {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0;
font: inherit; text-align: center; padding: 13px 6px 11px; border: 1px solid var(--field-line);
border-radius: var(--r3); background: var(--field); cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s, transform .15s var(--ease);
}
.role:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--rc) 8%, transparent) }
.role:active { transform: none; box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--rc) 14%, transparent) }
.role:focus-visible { outline: none; border-color: var(--rc); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--rc) 8%, transparent), 0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent) }
.role.on { border-color: color-mix(in srgb, var(--rc) 82%, transparent); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--rc) 13%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rc) 34%, transparent) }
.role-ic {
flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, var(--pop));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 20%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--rc) 55%, transparent);
}
.role-ic svg { width: 26px; height: 26px }
/* 暗底上原色发闷，图形单独亮一档，磁贴底色不变 */
[data-theme=dark] .role-ic { color: color-mix(in srgb, var(--rc) 76%, #fff) }
.role-t { min-width: 0; max-width: 100% }
.role-t b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.role-ck { position: absolute; right: 7px; top: 7px; color: var(--rc) }
.role-ck svg { width: 14px; height: 14px }
/* ---------- 隐私空间 ---------- */
.v-box { width: 400px; max-width: calc(100vw - 40px) }
/* 密码框必须 16px：iOS 对更小的 input 会在聚焦时把整页放大，一放大就回不去 */
.v-box input[type=password], .v-box #vHintIn { font-size: 16px }
.v-hint { margin: -2px 0 10px; padding: 8px 10px; border-radius: var(--r1); background: var(--field); font-size: 12px; color: var(--sub) }
.v-err { margin: -2px 0 10px; font-size: 12.5px; font-weight: 600; color: #dc2626 }
[data-theme=dark] .v-err { color: #f87171 }
.bxb.danger { color: #dc2626 }
.bxb.danger:hover { border-color: color-mix(in srgb, #dc2626 45%, var(--line)); background: color-mix(in srgb, #dc2626 9%, var(--pop)) }
[data-theme=dark] .bxb.danger { color: #f87171 }
/* 顶栏那颗牌只在隐私态出现：正在看的是哪一套，得一眼分得清，不然日常收藏会加错地方 */
.vchip { align-self: center; margin-right: 2px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap }
@media (max-width: 460px) {
.role-box { padding: 18px 16px 14px }
.role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
.role { padding: 12px 6px 10px }
.role-ic { width: 42px; height: 42px; border-radius: 13px }
.role-ic svg { width: 24px; height: 24px }
}
/* ---------- 设置抽屉 ---------- */
.mask { position: fixed; inset: 0; z-index: 48; background: rgb(var(--veil) / .42); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .22s }
.mask.show { opacity: 1; pointer-events: auto }
/* ---------- 设置窗口（2026-10-28 从右侧单栏抽屉改成 macOS 系统设置那种「左目录 + 右单段」） ----------
为什么换：原来一屏流水要滚 2.2 屏，其中壁纸那张卡 744px、占首屏可见区的 89%，天天用的搜索段埋在 1043px 以下。
七段里六段单独拿出来都不到一屏（外观 102 / 隐私 73 / 搜索 138 / 重置 132 / 关于 131 / 备份 185），
换成一次只看一段之后右栏零滚动，只有壁纸段自己滚那面缩略图墙（macOS 的 Wallpaper 段也是这样）。
借结构不借皮：它的行高 52、段间 28 是 800px 宽窗口撑出来的，我们总共 18 行，照抄每段都会空。 */
.drawer {
position: fixed; left: 50%; top: 50%; z-index: 49;
width: min(780px, calc(100vw - 28px)); height: min(620px, calc(100vh - 36px));
display: flex; flex-direction: column; background: var(--pop);
border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
overflow: hidden; opacity: 0; pointer-events: none;
transform: translate(-50%, calc(-50% + 10px)) scale(.988);
transition: opacity .2s var(--ease), transform .24s var(--ease);
}
.drawer.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1) }
/* 顶栏铺成目录那档灰，和左栏连成一个 L 形「框」，右栏才是白「面」。
以前顶栏跟着窗口是纯白，整窗只剩框/面两级、而顶栏两头都不像，所以看着「一片白没层次」 */
.d-h { display: flex; align-items: center; gap: 10px; padding: 13px 14px 11px; background: var(--field) }
/* 窗口题退成小标签：它和段标题原先都是 15px/650/var(--ink)，同屏两个一模一样的标题＝没有层级 */
.d-h h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--sub) }
.d-x { margin-left: auto; width: 28px; height: 28px; border: 1px solid transparent; border-radius: var(--r2); background: none; color: var(--sub); display: grid; place-items: center; cursor: pointer; transition: background-color .14s, border-color .14s, color .14s }
.d-x svg { width: 15px; height: 15px }
/* 灰框上 --hover 那 4.5% 黑几乎看不出，所以 hover 是「浮起一块白」不是「压暗一点」 */
.d-x:hover { color: var(--ink); background: var(--pop); border-color: var(--line) }
/* 暗色要反着来：那边 --pop 比 --field 更黑，照搬会「浮」出一个坑。暗色的抬升一律是加白 */
[data-theme=dark] .d-x:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2) }
/* 目录列：底色走 --field，跟右栏那块纯白分开一层（macOS 侧栏就是比正文暗一档） */
/* 灰框内角：白面左上角那 270° 直角用一小块同色灰 + 圆弧垫过去（macOS「框包着面」的接法）。
圆心落在补丁自己的右下角 = 白面的角，圆内透明露出白、圆外铺灰，凹出来的就是 R 圆角。
--field 在暗色是半透明白，补丁和 .d-nav 垫的都是同一张 --pop 窗口底，所以两边走出来的颜色一致。
要更软或更硬只改 --nav-r 这一颗。 */
.d-body { display: flex; flex: 1; min-height: 0; position: relative; --nav-w: 188px; --nav-r: 12px }
.d-body::before { content: ''; position: absolute; left: var(--nav-w); top: 0; width: var(--nav-r); height: var(--nav-r); pointer-events: none; background: radial-gradient(circle var(--nav-r) at 100% 100%, transparent calc(100% - .5px), var(--field) 100%) }
.d-nav { flex: none; width: var(--nav-w); display: flex; flex-direction: column; gap: 2px; padding: 2px 10px 14px; overflow-y: auto; background: var(--field) }
.ni { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .14s, color .14s }
.ni:hover { background: var(--hover) }
.ni-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--pop); color: var(--sub); transition: background-color .14s, color .14s }
.ni-ic svg { width: 13px; height: 13px }
/* 选中态铺实色主色：这是纯白窗口里的实心板，不是浮在壁纸上的玻璃，按实心那套走（玻璃那套在这里会糊成一团灰） */
.ni.on { background: var(--acc-600); color: #fff }
.ni.on .ni-ic { background: rgb(255 255 255 / .24); color: #fff }
.d-main { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 20px 26px; --rail: 188px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent }
/* 全站另外两处滚动区（.l-body / .bm-body）早就做了这套，唯独这里是裸的原生粗条，右缘一根灰杠很扎眼 */
.d-main::-webkit-scrollbar { width: 9px }
.d-main::-webkit-scrollbar-track { background: transparent }
.d-main::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 99px; border: 2.5px solid transparent; background-clip: padding-box }
/* 卡片不再铺灰底，右栏的控件就全是「白面上画一道边」，描边要比全站那一档 9% 站出来一点才分得开 */
.d-main { --line: rgba(17, 24, 39, .14) }
[data-theme=dark] .d-main { --line: rgba(255, 255, 255, .18) }
.pane { display: none }
.pane.on { display: block }
/* 段标题是白面上唯一的大字：18/700 对 12.5 窗口题、13 行标签、12 注释，四档才拉得开 */
.p-t { margin: 2px 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 12px }
/* 右控件轨道：控件一律包进 .ctl，宽度钉死一档、内部右对齐。
原来没有这一层，`.rl` 吃 flex:1 就把标签右缘顶到控件左沿，而控件有 46/101/126/188/190 五种宽度，
实测标签右缘从 229 一路跳到 431——每行的文字断点和控件起点都在变，眼睛要重新找一遍。
现在标签列同宽、控件列同宽，开关这种天然窄的就自己贴右沿。 */
.ctl { flex: none; width: var(--rail); display: flex; align-items: center; justify-content: flex-end }
.d-main .ctl > .seg { width: var(--rail) }
.d-main .ctl > .seg button { flex: 1; padding: 0 }
.d-main .ctl > .sel.w1 { width: var(--rail) }
/* 纯说明行（卡片末行）：以前是卡片外的一条 .note，字号跟段标题只差 0.5px，读着像漏掉的小标题 */
.row-note { align-items: flex-start; padding-top: 10px; padding-bottom: 10px }
.row-note .rs { flex: 1; min-width: 0 }
/* 关于段：一句主张 + 正文段落 */
.about-h { margin: 0 0 9px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink) }
.about-p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--sub) }
.about-p + .about-p { margin-top: 7px }
.about-p strong { font-weight: 600; color: var(--ink) }
/* 段内行内链接（那封邮箱）：只上强调色，悬停才出下划线，别在浅灰说明行里显脏 */
.about-p a, .lk { color: var(--acc) }
.about-p a:hover, .lk:hover { text-decoration: underline }
.about-p a:hover, .lk:hover { text-decoration: underline }
.lb { margin: 16px 0 7px; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--faint) 78%, transparent); scroll-margin-top: 12px }
.card { border: 0; border-radius: var(--r2); background: var(--field); overflow: hidden }
.card.pad { padding: 13px 14px }
.row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; min-height: 44px }
.card > * + * { position: relative }
.card > * + *::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--line) }
/* 右栏把「灰卡片 + 行间横线」这层皮去掉（2026-10-28 他要干净利落）：列表直接铺在窗口面上，
分组只剩 .lb 小标签和间距。行自己留 10px 内缩、配同值负外边距，文字仍和段标题对齐（都在 20px 道），
悬停/点按那条高亮却往里收一圈圆角，不再顶到列边缘。
负边距要求卡片不能裁（原来卡片的 overflow:hidden 是给灰底收边的，现在没有底可收）。 */
.d-main .card { background: none; overflow: visible }
.d-main .card.pad { padding-inline: 0 }
.d-main .card > * + *::before { content: none }
.d-main .row { padding-inline: 10px; margin-inline: -10px; border-radius: 10px }
.rl { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink) }
.rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.rmain .rl { flex: none }
/* 描述最多两行：更长的文案在 HTML 里改短，这里只兜底防止撑高行 */
.rs { font-size: 11.5px; line-height: 1.45; color: var(--faint); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
/* 上对齐的图 + 文行（自定义壁纸、必应每日） */
.row-b { align-items: flex-start; padding: 13px 14px; min-height: 0 }
.row-b .bxside { flex: 1; min-width: 0 }
/* 标签在上、整块内容在下（缩略图网格、排序说明） */
.row-c { flex-direction: column; align-items: stretch; gap: 9px }
.row-c > .rl { flex: none }
/* 「进一步了解」七条链接摊成一行（2026-10-29 他把站内弹窗那排链接挪了进来）。
必须写在 .row 之后、还得带双类：同为「改 .row 的一个属性」的修饰类，
单类又写在前面会被 .row 的 gap:12px 按同特异性后声明盖回去。 */
.row.about-links { flex-wrap: wrap; gap: 5px 16px }
.about-links a { font-size: 13px; font-weight: 500; color: var(--acc); white-space: nowrap }
.about-links a:hover { text-decoration: underline }
/* .sel 自己带 width:100%，这里必须双类抬特异性才压得住 */
.sel.w1 { flex: none; width: 190px }
.row .seg { flex: none }
.row .seg button { flex: none; height: 100%; padding: 0 13px }
.note { margin: 8px 3px 0; font-size: 11.5px; line-height: 1.6; color: var(--faint) }
.rank { font-size: 12px; line-height: 1.55; color: var(--sub) }
/* 壁纸行：卡片底是 --field，所以行内的控件一律用 --pop 才分得出层 */
.bxtile { position: relative; flex: none; width: 118px; aspect-ratio: 16/10; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--pop) center/cover no-repeat; color: var(--faint); cursor: pointer; transition: .16s var(--ease) }
.bxtile:hover { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); color: var(--sub) }
.bxtile svg { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; transition: opacity .15s }
.bxtile.has svg { opacity: 0 }
.bxtile.on { border-style: solid; border-color: var(--acc) }
.bxside { flex: 1; min-width: 0 }
.bxside h4 { font-size: 13.5px; font-weight: 700; line-height: 1.45 }
.bxside p { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--faint) }
.bxbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px }
.bxb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; box-sizing: border-box; border: 1px solid var(--line); background: var(--pop); color: var(--ink); border-radius: 999px; padding: 0 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s }
.bxb:hover { background: var(--hover); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)) }
.bxb svg { width: 14px; height: 14px; opacity: .8 }
.bxurl { display: flex; gap: 6px; margin-top: 8px }
.bxurl input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--pop); color: var(--ink); border-radius: var(--r1); padding: 8px 10px; font-size: 12px }
.bxurl input:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 55%, var(--line)) }
.bxurl button { flex: none; border: 1px solid transparent; background: var(--acc-600); color: #fff; border-radius: var(--r1); padding: 0 13px; font-size: 12px; font-weight: 650; cursor: pointer }
.bxurl button:hover { background: color-mix(in srgb, var(--acc-600) 88%, #000) }
/* 必应每日那行的预览图：清单没取到时 img 是空的，靠 .has 决定要不要露出来 */
.bingpv { flex: none; width: 118px; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: var(--hover) }
.bingpv img { display: block; width: 100%; height: 100%; object-fit: cover; visibility: hidden }
.has .bingpv img { visibility: visible }
.sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--hover); cursor: pointer; padding: 0; transition: .16s }
.sw i { position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .32); transition: .18s var(--ease) }
/* 关闭态的轨道得看得见：亮色下 --field 几乎是白的，白圆钮放上去等于隐形（写在 .sw.on 之前，开启态照样覆盖） */
[data-theme=light] .sw { background: #d9dee7; border-color: #d9dee7 }
[data-theme=dark] .sw { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16) }
.sw:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)) }
.sw.on { background: var(--acc-600); border-color: transparent }
.sw.on i { left: 20px }
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.bgrid .bpick { position: relative; aspect-ratio: 16/10; border-radius: 12px; border: 0px; background-size: cover; background-position: center; cursor: pointer; transition: .16s var(--ease); overflow: hidden }
.bgrid .bpick:hover { transform: translateY(-2px); box-shadow: var(--shadow) }
.bgrid .bpick span { position: absolute; inset: auto 0 0; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 0; opacity: 0; transition: .15s }
.bgrid .bpick:hover span { opacity: 1 }
.bgrid .bpick.on::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 21px; height: 21px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; box-shadow: 0 1px 5px rgba(0, 0, 0, .4) }
/* 必应历史那一排（现在自己一段，见 index.html 的 data-p=bing）：
格子先只带 data-p，滚进 #dMain 视野附近才由 bhLazy() 挂上 _320x180 那张（一张 11KB，攒几十张就是几百 KB），
没挂上之前铺一层淡灰当占位；格子后面的哨兵靠同一条 scroll 判断「快滚到底了，补下一页」，这颗只要有个 1px 高度能测位置。
提示行只在「更早的清单没取到」时露一面，滚到必应给的最早那张是安静收住（站长明确不要「到底了」那种说明）。
触屏没有 hover，日号那条黑带就一直挂着，否则手机上根本分不清哪格是哪天——只给这一排开，
内置那两排的悬停显隐保持原样 */
#bgBing .bpick { background-color: color-mix(in srgb, var(--ink) 7%, transparent) }
.bmore { display: block; height: 1px }
.bhint { font-size: 11.5px; line-height: 1.5; color: var(--faint); text-align: center }
@media (hover: none) { #bgBing .bpick span { opacity: 1 } }
.upb { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 28px; box-sizing: border-box; border: 1px solid var(--field-line); box-shadow: var(--field-sh); background: var(--field-glass); color: var(--ink); border-radius: var(--r1); padding: 0 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s }
.upb:hover { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: var(--btn-bg-h) }
/* 玻璃控件那套白霜环是给「浮在壁纸上的面」用的；设置窗右栏现在是纯白面，白环等于没描边，
所以这一段里的按钮回到 --line 描边那一档，和 .sel / .bxb 同一族 */
.d-main .upb { border-color: var(--line); background: var(--pop); box-shadow: none }
.d-main .upb:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); background: var(--hover) }
/* 重置那三颗是「长得像行的按钮」，只有清空全部本机设置才算危险操作 */
.rbtn { width: 100%; border: 0; background: none; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s, color .15s }
.rbtn:hover { background-color: var(--hover) }
.rbtn.danger { color: #dc2626 }
.rbtn.danger:hover { background-color: color-mix(in srgb, #dc2626 9%, transparent) }
[data-theme=dark] .rbtn.danger { color: #f87171 }
.sel { width: 100%; height: 28px; box-sizing: border-box; appearance: none; -webkit-appearance: none; background-color: var(--pop); border: 1px solid var(--line); border-radius: var(--r1); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; padding: 0 30px 0 11px; outline: none; cursor: pointer; transition: background-color .15s, border-color .15s }
.sel:hover { background-color: var(--hover) }
.sel:focus-visible { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)) }
select.sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px }
/* 可选引擎那一排：2026-10-29 从「已选 5 个」那颗下拉里摊出来，常驻在搜索段（他原话「空间足够显示的，
现在反而显得单调」）。三列一格，图标 + 名字 + 右端勾选，勾上就进首屏那排聚合搜胶囊。
.drop-b / .drop-p 这两个类当时只有这一个使用者，规则并到 #engOn 上，不留空壳类名 */
.ehd { display: flex; align-items: baseline; gap: 8px }
#engOn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px }
#engOn label { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--sub); cursor: pointer; transition: .15s }
#engOn label:hover { background: var(--hover); color: var(--ink) }
#engOn label.on { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--ink) }
#engOn input { order: 3; flex: none; margin-left: auto; accent-color: var(--acc); width: 14px; height: 14px }
#engOn img, #engOn b { flex: none; width: 18px; height: 18px; object-fit: contain; border-radius: 4px }
#engOn b { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--sub); background: color-mix(in srgb, var(--ink) 8%, transparent) }
#engOn span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.seg { display: flex; gap: 3px; height: 28px; box-sizing: border-box; padding: 2px; border-radius: 9px; background: var(--hover) }
.seg button { flex: 1; border: 0; background: none; color: var(--sub); font-size: 12.5px; font-weight: 600; padding: 0; border-radius: 7px; cursor: pointer; transition: .15s }
.seg button.on { background: var(--pop); color: var(--ink); box-shadow: var(--shadow) }
/* 提示条钉在左下角：正下方那颗会压住底部栏，删除/移出这类要回头点「撤销」的提示更不该挡在屏幕中间。
只有一个槽位（JS 里新提示直接替换旧的那条并重放一次上滑），所以连续操作不会堆成一列。
材质跟底部栏同一块玻璃（--glass-bg-hi + --glass-bf + 半透明白外边），原来这里吃的是 --pop
那坨不透明白，挂在壁纸上像贴了张纸片，整屏玻璃感到这儿就断了（2026-10-26 他点名） */
.tst { position: fixed; left: 18px; bottom: 26px; z-index: 80; display: flex; align-items: center; gap: 14px; max-width: min(440px, calc(100vw - 36px)); background: var(--glass-bg-hi); border: 1px solid rgb(255 255 255 / .5); color: var(--ink); border-radius: var(--r2); padding: 11px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--dock-shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); backdrop-filter: var(--glass-bf); -webkit-backdrop-filter: var(--glass-bf) }
[data-theme=dark] .tst { border-color: rgb(255 255 255 / .16) }
.tst.show { opacity: 1; transform: none; pointer-events: auto }
/* 撤销那颗：跟正文同一行、主色纯文字，不做成大按钮（它只在 5 秒里存在）。
字色走 --acc-ink 不走 --acc：亮色 --acc 是 #10b981，压在这层玻璃上读不动 */
.tst-x { flex: none; border: 0; background: none; padding: 3px 8px; margin-right: -6px; border-radius: 9px; color: var(--acc-ink); font: inherit; font-weight: 700; cursor: pointer; transition: background .14s }
.tst-x:hover { background: color-mix(in srgb, var(--acc) 18%, transparent) }
/* ---------- 断点 ---------- */
@media (max-width: 980px) {
.stage { padding: clamp(84px, 15vh, 150px) 16px 158px }
:root { --clock-fs: 62px }
}
@media (max-width: 720px) {
.brand b { display: none }
.brand { left: 14px; top: 14px }
/* 顶栏胶囊收小一号：三个钮 34→29，给中间的大时钟让出横向空间 */
.hud { right: 10px; top: 10px; gap: 1px; padding: 3px; border-radius: 11px }
.h-i { width: 29px; height: 29px; border-radius: 9px }
.h-i svg { width: 15px; height: 15px }
.site-menu { right: 12px; top: 52px }
/* 手机上把时钟＋搜索框钉到顶部：输入法弹起时视口被压矮，
老的偏居中摆法会被贴键盘上沿的底栏和提示条顶到，搜索框反而看不见 */
.stage { padding: 58px 14px 150px }
:root { --clock-fs: 54px }
.hero .sbox { margin-top: 22px }
/* 输入法开着（搜索框聚焦，home.js 给 html 挂 data-kb）时窄屏暂收底栏和提示条：
压矮的视口里这俩贴键盘上沿顶到搜索框跟前，提示条会直接盖住输入区。
桌面端同挂属性但没有这条样式，观感不变 */
html[data-kb="1"] .dock-wrap, html[data-kb="1"] .dhint { display: none }
.sbar { min-height: 44px; padding: 4px 4px 4px 6px }
.eng { width: 32px; height: 32px }
#q { font-size: 16px; padding: 6px 2px }
/* 空态那枚放大镜不跟着字号走：18px 和两侧 `.eng img`/`.send svg` 同一档，窄屏也不用放大 */
.dock-wrap { padding: 0 8px 10px; gap: 5px }
.dock { gap: 8px; padding: 10px 9px; border-radius: 20px }
.dk { flex: none }
.dk-ic { width: 46px; height: 46px; border-radius: 12px }
.dk-ic b { font-size: 17px }
.dk:hover .dk-ic { transform: translateY(-5px) scale(1.08) }
.dk.add .dk-ic svg { width: 15px; height: 15px }
.beian { padding: 2px 3px 2px 10px }
.beian a { font-size: 10.5px }
/* 窄屏没有两栏这回事：窗口铺满整屏，目录横向滚成一排 chips，带轨道的行改成纵向堆叠。
同一份 DOM、同一套事件，只换排法——不另做一套手机版控件 */
.drawer { width: 100vw; height: 100vh; height: 100dvh; left: 0; top: 0; border: 0; border-radius: 0; box-shadow: none; transform: translateY(12px) }
.drawer.show { transform: none }
/* 窄屏把「标题条 + tab 条」两层压成一层（实测 56+43=99px chrome → 46px，第一行控件从 147px 提到 94px）。
.d-h 出流浮到右上角，只剩关闭键；「设置」二字在这屏是冗余——段标题已经说明你在哪，
而且它和 tab 条、正文连着叠了三个标题。顶栏的灰底也跟着撤掉，让 tab 条自己当那条灰框。 */
.d-h { position: absolute; right: 0; top: 0; z-index: 3; height: 52px; padding: 0 12px 0 0; background: none }
.d-h h3 { display: none }
.d-body { flex-direction: column }
/* 窄屏灰带横贯整宽、白面在它下面，没有「框的内角」这回事，补丁撤掉 */
.d-body::before { content: none }
/* 右端 56px 留给浮着的关闭键，再配一道渐变遮罩：被切掉的「备份与重置／关于」自己说明还能滑 */
.d-nav { width: auto; flex-direction: row; gap: 6px; padding: 10px 56px 10px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 56px), transparent) }
.d-nav::-webkit-scrollbar { display: none }
/* 灰底上一条白胶囊才是「可点的 tab」，透明文字浮在灰带上像一排小标题。
选中仍是实色主色（2026-10-28 定的「实心那套」不动），图标块在窄屏省掉：6 段全靠文字认，
省下的 29px/颗让整条轨道从 616 收到 442，一屏能多见一段 */
.ni { flex: none; width: auto; height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; background: var(--pop) }
.ni.on { border-color: transparent }
.ni-ic { display: none }
.d-x { background: var(--pop); border-color: color-mix(in srgb, var(--ink) 12%, transparent) }
/* 同上，暗色的胶囊改成加白，否则六颗是六个坑。:not(.on) 是必须的——
[data-theme=dark] .ni 和 .ni.on 同为 (0,2,0)，写在后面就会把选中那颗的实色主色顶掉 */
[data-theme=dark] .ni:not(.on) { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .17) }
[data-theme=dark] .d-x { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .17) }
.d-main { --rail: 100%; padding: 12px 14px 26px }
.row-r { flex-direction: column; align-items: stretch; gap: 9px }
.row-r .ctl { width: auto; justify-content: flex-start }
/* iOS 会对 font-size < 16px 的 select 自动放大整页，触屏上必须顶到 16 */
.sel { font-size: 16px }
#engOn { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px 12px }
#engOn label { padding: 9px 11px; font-size: 13px }
.row { gap: 10px; padding: 10px 12px }
.row-b { padding: 12px }
.card > * + *::before { left: 12px }
.card.pad { padding: 12px }
.row-stack { flex-direction: column; align-items: stretch }
/* 虚线预览块收成整行宽：118/220 的方块右侧留一大截空，换行后看着是残的 */
.row-stack .bxtile { width: 100% }
.row-wrap { flex-wrap: wrap }
.row-wrap .bxside { order: 3; flex: 1 1 100% }
.row-wrap .bingpv { width: min(220px, 100%) }
/* 开关和预览图同线时垂直居中，别顶在图的上沿 */
.row-wrap .sw { align-self: center }
.tst { bottom: 100px }
.lp { padding-bottom: 112px }
.lp-body { --lp-pad-t: 8px; padding: 8px 10px 6px }
.lp-top { padding: 22px 14px 2px }
/* 圆点带往下是贴着底部栏的：底部留 20px 把它从 dock 上推开 */
.lp-dots { padding: 4px 0 20px }
.lp-s.open { width: min(300px, calc(100vw - 148px)) }
.lp-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px 2px }
.lp-a { padding: 8px 4px 7px; gap: 6px }
/* 只压直接子级：写成 .lp-a .ic img 会把文件夹砖里那 9 个 12px 小图标一起撑成 52px（浮出砖外） */
.lp-a .ic, .lp-a .ic > img { width: 52px; height: 52px; border-radius: 14px }
/* 砖小了一号，3×3 小图跟着收（36px 的块在 50px 砖面里居中，上下各余 7px）；
这一块的高度和内边距都跟着上面那条定稿的写法走：块自己居中，图标从第一行往下填 */
.lp-fc .fg { grid-template-columns: repeat(3, 10px); grid-auto-rows: 10px; gap: 3px; width: 36px; height: 36px }
.lp-fc .fm, .lp-fc .fm img, .lp-fc .fm b { width: 10px; height: 10px; border-radius: 3px; font-size: 6.5px }
.lp-a .nm { font-size: 11.5px; line-height: 16px }
}
@media (hover: none) {
/* 触屏也走那块跟手虚影：它挂在 body 上、z-index 84，浮在启动台(44)/文件夹(45)/底部栏(46) 之上，
上下拖到边框外也不会被 .lp-body 的 overflow 裁掉。
原先这里写 display:none，触屏拖到一半图标就彻底不见了（原位是 opacity:0 的空格子） */
.lp-cell.drag-src .nm { opacity: .5 }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition-duration: .01ms !important }
}