/* SnapLab 9.9.6 外观：一套颜色、一种材质。最后加载，统一盖住前面各版留下的零散配色。
 *
 * 颜色（用户定的）：深蓝 · 紫 · 红 · 浅亚麻灰，加白。
 *   取的是莫兰迪那一档（灰蓝、灰紫、灰粉红、亚麻）：几种颜色亮度接近、都掺了灰，放一起谁也不突兀。
 *   饱和的宝蓝 / 薰衣草紫看起来土，太深的墨蓝 / 茄紫又一块块太重；图标只留很淡的顶光（哑光）。
 *   图标可以浅，字不行：链接 / 选中的字用比图标深一档的 --blue。
 *   深蓝是主色（按钮、链接、选中）；紫是第二色（完成、AI）；红只给要注意的（计时、到点、蛋白）；
 *   浅亚麻灰是底色和浅色图标，白是卡片和面板。浅色图标（亚麻 / 白）里的线条用深蓝或红，不用白。
 *   每个图标只用同一色相从上到下一点点渐变，加一道很淡的顶部高光；阴影是中性灰，不是彩色光晕。
 *   老名字 --sys-* 保留，全部指到这几色上，别的样式不用改。
 * 材质：「透明感」用半透明白 + 一圈亮边做出来，背后铺一层很淡的晕染。
 *   **不用 backdrop-filter**（全站规矩：iOS 上滚动掉帧的主因），所以玻璃底下是静止的晕染，不是实时模糊。
 * 不用 color-mix() / :has()（老 iOS 不认）。
 */
:root, :root[data-theme="light"] {
  --pal-navy-1: #8c9bb3; --pal-navy-2: #6f7e98;
  --pal-purple-1: #aa96a8; --pal-purple-2: #8d788b;
  --pal-red-1: #cf9c98; --pal-red-2: #b47c79;
  --pal-linen-1: #f6f2eb; --pal-linen-2: #ddd5c8;
  --pal-white-1: #ffffff; --pal-white-2: #efeff2;
  --bg: #f4f5f8; --card: #ffffff; --soft: #eef0f4; --soft2: #e3e6ec; --line: #e4e7ec;
  --glass: rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .84);
  --glass-bar: rgba(250, 251, 253, .94);
  --glass-sheet: rgba(253, 253, 254, .985);
  --glass-rim: rgba(255, 255, 255, .85);
  --glass-line: rgba(40, 34, 24, .08);
  --glass-shadow: 0 8px 28px rgba(29, 49, 99, .08), 0 1px 2px rgba(29, 49, 99, .05);
  --icon-shadow: drop-shadow(0 3px 6px rgba(60, 64, 80, .10));
}
:root[data-theme="dark"] {
  --pal-navy-1: #6f7e98; --pal-navy-2: #55637b; --pal-purple-1: #8f7b8d; --pal-purple-2: #705f6f;
  --pal-red-1: #b28280; --pal-red-2: #916563; --pal-linen-1: #efe9df; --pal-linen-2: #cfc6b7;
  --bg: #0e1220; --card: #171c2b; --soft: #1f2536; --soft2: #283048; --line: #283048;
  --glass: rgba(30, 36, 54, .62); --glass-strong: rgba(26, 31, 48, .86); --glass-bar: rgba(16, 20, 33, .94); --glass-sheet: rgb(24, 29, 44); --glass-rim: rgba(255, 255, 255, .09);
  --glass-line: rgba(255, 255, 255, .06); --glass-shadow: 0 8px 28px rgba(0, 0, 0, .35); --icon-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pal-navy-1: #6f7e98; --pal-navy-2: #55637b; --pal-purple-1: #8f7b8d; --pal-purple-2: #705f6f;
    --pal-red-1: #b28280; --pal-red-2: #916563; --pal-linen-1: #efe9df; --pal-linen-2: #cfc6b7;
    --bg: #0e1220; --card: #171c2b; --soft: #1f2536; --soft2: #283048; --line: #283048;
    --glass: rgba(30, 36, 54, .62); --glass-strong: rgba(26, 31, 48, .86); --glass-bar: rgba(16, 20, 33, .94); --glass-sheet: rgb(24, 29, 44); --glass-rim: rgba(255, 255, 255, .09);
    --glass-line: rgba(255, 255, 255, .06); --glass-shadow: 0 8px 28px rgba(0, 0, 0, .35); --icon-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
  }
}
/* 老名字全指到这几色上 */
:root {
  --sys-blue-1: var(--pal-navy-1); --sys-blue-2: var(--pal-navy-2);
  --sys-indigo-1: var(--pal-navy-1); --sys-indigo-2: var(--pal-navy-2);
  --sys-purple-1: var(--pal-purple-1); --sys-purple-2: var(--pal-purple-2);
  --sys-teal-1: var(--pal-purple-1); --sys-teal-2: var(--pal-purple-2);
  --sys-green-1: var(--pal-purple-1); --sys-green-2: var(--pal-purple-2);
  --sys-pink-1: var(--pal-red-1); --sys-pink-2: var(--pal-red-2);
  --sys-orange-1: var(--pal-red-1); --sys-orange-2: var(--pal-red-2);
  --sys-yellow-1: var(--pal-linen-1); --sys-yellow-2: var(--pal-linen-2);
  --sys-gray-1: var(--pal-linen-1); --sys-gray-2: var(--pal-linen-2);
}

/* ---------------------------------------------------------------- 底：9.9.7 起是干净的冷灰白（用户嫌亚麻底发黄），角上一点点灰蓝 / 灰紫的晕染 */
body {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(58, 75, 107, .08), transparent 62%),
    radial-gradient(760px 480px at 108% 6%, rgba(132, 98, 127, .09), transparent 60%),
    radial-gradient(900px 620px at 60% 112%, rgba(140, 155, 179, .08), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(70, 90, 130, .16), transparent 62%),
    radial-gradient(760px 480px at 108% 6%, rgba(130, 95, 125, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- 玻璃：顶栏、底栏、输入条、分段开关、计时条、计时器面板
 * 规矩：不用 backdrop-filter（iOS 卡），所以压在「会滚动的内容」上面的层（顶栏、底栏、输入条、计时条、面板）
 * 只能 94% 以上不透明，不然下面的字透上来很廉价。真正的半透明只给贴在静止底色上的小东西（今日小标签、折叠条、分段底）。 */
header.top, nav.bar {
  background: var(--glass-bar) !important;
  box-shadow: inset 0 -1px 0 var(--glass-line) !important;
  border-color: transparent !important;
}
nav.bar { box-shadow: inset 0 1px 0 var(--glass-line), 0 -6px 24px rgba(28, 38, 74, .04) !important; }
.chat-main .chat-bar {
  background: var(--glass-bar) !important; border: 1px solid var(--glass-rim) !important;
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-line) !important;
}
.chat-main .chat-bar:focus-within { box-shadow: 0 10px 32px rgba(28, 38, 74, .12), inset 0 0 0 1px rgba(47, 63, 95, .35) !important; }
.seg-ctl { background: rgba(120, 130, 160, .14); }
.seg-thumb { background: var(--glass-strong); box-shadow: 0 2px 6px rgba(20, 30, 60, .10), inset 0 0 0 .5px var(--glass-rim); }
.mini { background: var(--glass-bar) !important; box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-rim) !important; }
.tm-card { background: var(--glass-sheet); box-shadow: 0 -10px 40px rgba(20, 30, 60, .14), inset 0 1px 0 var(--glass-rim); }
.tm-row { background: rgba(120, 130, 160, .10); }
.hz-fold > summary { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-rim), 0 2px 8px rgba(28, 38, 74, .05); }
.hz-now a { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.hz-g, .hx-more .hz-g { border-bottom-color: var(--glass-line); }

/* ---------------------------------------------------------------- App 图标：同色相渐变 + 淡淡顶光 + 中性投影 */
.hz-app-sh { filter: var(--icon-shadow) !important; }
.hz-app-ic, .mini-art, .bh-sec .bh-card .bt-ic.sm {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--c1), var(--c2)) !important;
}
/* 主页四个：拍照 深蓝 · 实验 紫 · 小鼠 亚麻（深蓝线） · 计时 红 */
.hz-app.a-cam { --c1: var(--pal-navy-1); --c2: var(--pal-navy-2); }
.hz-app.a-lab { --c1: var(--pal-purple-1); --c2: var(--pal-purple-2); }
.hz-app.a-mice { --c1: var(--pal-linen-1); --c2: var(--pal-linen-2); --ic-fg: var(--pal-navy-2); }
.hz-app.a-timer { --c1: var(--pal-red-1); --c2: var(--pal-red-2); }
/* 实验台四个：AI 设计 紫 · 计算器 深蓝 · 计时器 红 · 日历 白底红线（像 iOS 日历） */
.bh-apps .hz-app.a-lab { --c1: var(--pal-purple-1); --c2: var(--pal-purple-2); }
.bh-apps .hz-app.a-cam { --c1: var(--pal-navy-1); --c2: var(--pal-navy-2); }
.hz-app.a-rose { --c1: var(--pal-white-1); --c2: var(--pal-white-2); --ic-fg: var(--pal-red-2); }
/* 实验类别：细胞 深蓝 · 分子 紫 · 蛋白 红 · 免疫 亚麻 · 通用 白 */
.bt-app.k-cell, .bh-sec .bh-card.c-cell, .br-head .bt-ic.c-cell { --c1: var(--pal-navy-1); --c2: var(--pal-navy-2); --ic-fg: #fff; }
.bt-app.k-mol, .bh-sec .bh-card.c-mol, .br-head .bt-ic.c-mol { --c1: var(--pal-purple-1); --c2: var(--pal-purple-2); --ic-fg: #fff; }
.bt-app.k-prot, .bh-sec .bh-card.c-prot, .br-head .bt-ic.c-prot { --c1: var(--pal-red-1); --c2: var(--pal-red-2); --ic-fg: #fff; }
.bt-app.k-imm, .bh-sec .bh-card.c-imm, .br-head .bt-ic.c-imm { --c1: var(--pal-linen-1); --c2: var(--pal-linen-2); --ic-fg: var(--pal-navy-2); }
.bt-app.k-gen, .bh-sec .bh-card.c-gen, .br-head .bt-ic.c-gen { --c1: var(--pal-white-1); --c2: var(--pal-white-2); --ic-fg: var(--pal-navy-2); }
/* 浅色图标里的线条换成深色，白线在亚麻 / 白上看不见 */
.hz-app-ic, .mini-art, .bh-sec .bh-card .bt-ic.sm, .br-head .bt-ic { color: var(--ic-fg, #fff) !important; }
/* 计时条：在计 深蓝，暂停 亚麻，到点 红 */
.mini-art { --c1: var(--pal-navy-1); --c2: var(--pal-navy-2); }
.mini.s-paused .mini-art { --c1: var(--pal-linen-1); --c2: var(--pal-linen-2); --ic-fg: var(--pal-navy-2); }
.mini.s-done .mini-art { --c1: var(--pal-red-1); --c2: var(--pal-red-2); }
.mini.s-done .mini-time { color: var(--pal-red-2); }
.tm-row.s-run .tm-bar i { background: var(--pal-navy-1); opacity: 1; }

/* Snappy：一块亮一点的玻璃底 */
.hz-snappy { background: linear-gradient(180deg, #ffffff, #f4f0e9) !important; filter: drop-shadow(0 8px 18px rgba(29, 40, 70, .12)); }

/* ---------------------------------------------------------------- 输入条的「+」：圆形（和右边发送键一样），放在圆头胶囊里才对得齐
   上一版是超椭圆，方的角顶着圆的边，看起来像歪了。 */
.chat-main .chat-bar #chatImg.chat-plus {
  -webkit-mask: none !important; mask: none !important; border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--sys-blue-1), var(--sys-blue-2)) !important;
  box-shadow: 0 3px 8px rgba(60, 70, 95, .18);
}

/* ---------------------------------------------------------------- 强调色：链接、选中、进度用深蓝；完成用紫；性别 雄 深蓝 / 雌 红 */
:root, :root[data-theme="light"] { --ui-link: #4d5b74; --blue: #4d5b74; --blue-d: #3a4559; --blue-s: #eef0f3; --green: #7a6478; --green-s: #f3eff2; }
:root[data-theme="dark"] { --ui-link: #b7c0d0; --blue: #b7c0d0; --blue-d: #d3d9e3; --blue-s: #1e2330; --green: #c4b0c1; --green-s: #262026; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-link: #b7c0d0; --blue: #b7c0d0; --blue-d: #d3d9e3; --blue-s: #1e2330; --green: #c4b0c1; --green-s: #262026; } }
.sx-m, .sx.sx-m { color: var(--v-m) !important; }
.sx-f, .sx.sx-f { color: var(--v-f) !important; }

/* 主按钮（发送、开始、完成本步）和计算结果那块深色卡：以前是近乎纯黑 #15181c，和四种浅灰调颜色放一起最扎眼，
   改成同一家族的深灰蓝（还是够深，白字照样清楚）。正文字色不动，字要读得清。 */
:root, :root[data-theme="light"] { --navy: #3b4558; --navy2: #4a5468; --navy3: #5d6779; --ui-navy: #3b4558; --ui-navy-d: #2d3545; --ui-navy-l: #5d6779; }
:root, :root[data-theme="light"] { --k-ink: #3b4558; --k-ink-d: #2d3545; }
/* 发送键、计算结果卡：浅色下深灰蓝，深色下维持原来的浅色块 */
:root, :root[data-theme="light"] { --press: #3b4558; }
:root[data-theme="dark"] { --press: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --press: var(--ink); } }
.chat-main .chat-bar #chatGo, .br-key { background: var(--press); }
/* 实验台的类别色（标签、细条）和分组色（孔板、组号）：同样掺灰。分组要能一眼分开，所以还是 8 个色相，只是一起压到同一个安静的亮度 */
:root {
  --bc-cell: #5d6f91; --bc-cell-s: #eef0f4;
  --bc-mol: #7d6a7b; --bc-mol-s: #f3eff2;
  --bc-prot: #a56e6b; --bc-prot-s: #f6eeed;
  --bc-imm: #8a7c66; --bc-imm-s: #f3efe8;
  --bc-gen: #6b7280; --bc-gen-s: #eff0f2;
  --g0: #7286ab; --g1: #c29d72; --g2: #bf878c; --g3: #79a0a5; --g4: #9a86a8; --g5: #8ba386; --g6: #b5a265; --g7: #9a9fa8;
}
:root[data-theme="dark"] { --bc-cell: #a9b6cf; --bc-cell-s: #1e2433; --bc-mol: #bba9b9; --bc-mol-s: #262027; --bc-prot: #cfa3a0; --bc-prot-s: #2c2221; --bc-imm: #c3b59c; --bc-imm-s: #29251e; --bc-gen: #aeb3bd; --bc-gen-s: #24272d; --press: #cdd3de; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bc-cell: #a9b6cf; --bc-cell-s: #1e2433; --bc-mol: #bba9b9; --bc-mol-s: #262027; --bc-prot: #cfa3a0; --bc-prot-s: #2c2221; --bc-imm: #c3b59c; --bc-imm-s: #29251e; --bc-gen: #aeb3bd; --bc-gen-s: #24272d; --press: #cdd3de; } }
/* ---------------------------------------------------------------- 审计修正 */
/* 输入条的投影收紧：大阴影会被页面容器的边裁掉，留下一圈若有若无的方框 */
.chat-main .chat-bar { box-shadow: 0 1px 2px rgba(28, 38, 74, .06), 0 3px 10px rgba(28, 38, 74, .05), inset 0 0 0 .5px var(--glass-line) !important; }
.chat-main .chat-bar:focus-within { box-shadow: 0 1px 2px rgba(28, 38, 74, .06), 0 3px 10px rgba(28, 38, 74, .06), inset 0 0 0 1px rgba(47, 63, 95, .35) !important; }
/* 底栏：照 iOS / Apple Music —— 选中的那一项着系统蓝，不画顶上那根线（手机上）；电脑上的胶囊底色保留 */
@media (max-width: 760px) { nav.bar .fx-tab-ind { display: none !important; } }
nav.bar a.on, nav.bar a.on b { color: var(--blue) !important; }
nav.bar a { -webkit-tap-highlight-color: transparent; }
/* 日历：手机上网格那一列被最宽的内容撑开（比屏幕宽 11px，整页能左右晃） */
@media (max-width: 899px) { .jlayout { grid-template-columns: minmax(0, 1fr); } }
.jlayout > * { min-width: 0; }
/* 日历顶栏一排按钮统一 36 高 */
.jnav > .tk-pill, .jnav > .ib, .jnav > .btn { height: 36px; min-height: 36px; }
.jnav > .ib { width: 36px; }
/* 相册顶上的「看卡片 / 看列表」：老规则把它压成了图标宽，字跑到按钮外面 */
.tools #viewBtn { width: auto !important; min-width: 0; flex: none; padding: 0 13px; height: 40px; gap: 5px; }
.tools #viewBtn .icon { width: 16px; height: 16px; }
/* 实验页：粘顶的「计算 / 步骤 / 结果」以前画一圈实色底来盖住下面滚过的内容，换了晕染背景后变成一道横条，把上面的输入条切掉一截 */
.br-tabs { box-shadow: none !important; }
/* 实验页标题前的图标：和实验台、模板同一种 App 图标 */
/* 实验页头上的图标：和主页一样的渐变圆角方块。遮罩加在方块本身上，图形是里面一笔白线 */
.br-head .bt-ic { width: 54px !important; height: 54px !important; flex: 0 0 54px; display: grid; place-items: center; border-radius: 0 !important; color: #fff !important;
  -webkit-mask: url(/assets/squircle.svg) center / 100% 100% no-repeat; mask: url(/assets/squircle.svg) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--c1, var(--sys-blue-1)), var(--c2, var(--sys-blue-2))) !important; }
.br-head .bt-ic svg { width: 28px !important; height: 28px !important; stroke: currentColor; fill: none; stroke-width: 1.9; }
/* 选项多的分段（转染试剂五个）不再折成「四个 + 孤零零一个」，一行横着滑 */
.bf-seg { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.bf-seg::-webkit-scrollbar { display: none; }
.bf-seg > button { flex: 1 0 auto; white-space: nowrap; }
/* 同一行的控件一样高：返回和 ⋯ 都 40；图库搜索框和「看列表」按钮都 44 */
.br-top > .btn.back, .br-top > .br-more { height: 40px; min-height: 40px; }
.br-top > .br-more { width: 40px; }
.tools > #viewBtn { height: 44px !important; min-height: 44px; }
/* 剩下几处扎眼的旧色：提醒的琥珀色、危险红、雌雄小点、日历标记、会员徽章 —— 一起掺灰。危险 / 提醒的字仍然要读得清 */
:root, :root[data-theme="light"] {
  --red: #a8605c; --red-s: #f6eeed; --ui-red: #a8605c;
  --amber: #a07a45; --amber-s: #f5efe4; --amber-d: #7a5a2e;
  --v-f: #b07c79; --v-f-s: #f6eeed; --v-m: #6c7d9b; --v-m-s: #eef0f4;
}
:root[data-theme="dark"] {
  --red: #d29a96; --red-s: #2c2221; --ui-red: #d29a96;
  --amber: #cdb08a; --amber-s: #2a2419; --amber-d: #dcc4a2;
  --v-f: #cfa3a0; --v-f-s: #2c2221; --v-m: #a9b6cf; --v-m-s: #1e2433;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #d29a96; --red-s: #2c2221; --ui-red: #d29a96;
    --amber: #cdb08a; --amber-s: #2a2419; --amber-d: #dcc4a2;
    --v-f: #cfa3a0; --v-f-s: #2c2221; --v-m: #a9b6cf; --v-m-s: #1e2433;
  }
}
.jd .jmarks i.jm-plan, .jlegend i.jm-plan { background: var(--pal-purple-2); }
.plan-ultra .plan-badge { background: rgba(255, 255, 255, .18); color: #fff; }
:root[data-theme="dark"] .btn.danger, [data-theme="dark"] .btn.danger { background-color: #8e5551; }
.jd.on b { background: var(--press); }

/* ---------------------------------------------------------------- 实心深色块 */
/* 自动生成（tests/test_look.py 的 test_ink_blocks_use_press 盯着；新加这种规则要把选择器补进来）：各处拿正文字色 var(--ink) 当实心底的地方 —— 选中的筛选、步骤序号、主按钮、对话气泡……
   浅色下近乎纯黑，和莫兰迪色放一起太扎眼，统一换成 --press（深色模式下 --press 就是原来的 --ink，不变）。 */
.lab-start,
.bs-bar i,
.bench-pill,
.bt-tile.is-custom .bt-ic,
.dz-steps li.past span,
.dz-rank,
.dz-tabs button::after,
.dz-tabs button.on em,
.dz-st-acts button.on,
.fp-steps li::before,
.ff-msg.you,
.ff-send,
.br-key,
.tm-bar i,
.lr-badge,
.me-avatar,
.chat-main .chat-bar #chatGo,
.jd.on,
.jd.on:hover,
.act-card .chat-yes,
.tr-done,
.gh-meta em,
.slash-it.on .slash-ic,
.cw-bar i,
.tk-add,
.chart-key.on,
.metric-tabs button.on,
.mv-step-head > b,
.xf-tabs i,
.qa button.main .qa-ic,
.qa button.main:hover .qa-ic,
.askhere,
.askhere:hover,
.jd.on b,
.plan-tag.admin,
.chat-steps .st-ok .n,
.ai-now,
.vc-side.strong,
.vc[data-state="idle"] .vc-go,
.job-pill { background-color: var(--press); }
.bs.on .bs-ck,
.bt-tm.run,
.bh-filter button.on,
.bo-sec.editing .bo-edit,
.fc-tabs button.on,
.slot.has i,
.agent-tab.on,
.fchip.on,
.movement-filters button.on,
.tk-pill.primary,
.animal-tools .fchip.on,
.af-seg button.on,
.ai-presets button.on { background-color: var(--press); border-color: var(--press); }
/* 选中那天上的小点：底已经是深灰蓝，点用白的 */
.jd.on i { background: rgba(255, 255, 255, .85) !important; }
/* 会员卡：近乎纯黑 → 深灰蓝渐变，徽章跟着收 */
.plan-ultra { background: linear-gradient(160deg, #4a5468, #2f3746); border-color: transparent; }
/* 旧主题留下的青绿强调色（--cyan / --accent，选中文字、少数标记）也收进同一家族 */
:root, :root[data-theme="light"] { --cyan: #a9b6cf; --accent: #8c9bb3; }
:root[data-theme="dark"] { --cyan: #6f7e98; --accent: #8c9bb3; }
::selection { background: rgba(140, 155, 179, .35); color: inherit; }
/* 笼位页顶栏多了「导出」：手机上四颗按钮要和「笼位」两个大字放一行，胶囊收窄一点，标题不许折行 */
.tk-top h1 { white-space: nowrap; }
@media (max-width: 420px) {
  .tk-top-acts { gap: 6px; }
  .tk-top-acts .tk-pill:not(.icon) { padding: 0 10px; gap: 4px; }
}
/* 首页「试试这样问」：老规则（.hz .hx-more > summary）比新胶囊更具体，把左右内边距压成 2px、把箭头转成 90°，
   字贴着胶囊左边、箭头朝右 —— 看起来歪。这里用同样的具体度改回：左右等距，箭头收起朝下、展开朝上。 */
.hz .hx-more.hz-fold > summary { padding: 8px 14px 8px 16px; gap: 4px; }
.hz .hx-more.hz-fold > summary .icon:last-child { margin-left: 0; transform: none; }
.hz .hx-more.hz-fold[open] > summary .icon:last-child { transform: rotate(180deg); }
/* 展开后的分类：四个一行放得下就别横着滑（滑的话右边被切一半，左右不对称），放不下自动换行，居中 */
.hz-fold .agent-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 8px; }
/* 弹窗左上的返回键比标题高 12px：返回键钉在 top 14px，标题从 22px 开始、行高 40px，两条中线对不上。
   标题行高定成和返回键一样的 32px，返回键也从 22px 开始 —— 两个中心都在 38px。 */
.mo h2 { line-height: 32px; }
.mo .dlg-back { top: 22px; }
/* 9.9.7「用自己的 API Key」三步提示 */
.ai-steps { margin: 2px 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; color: var(--dim); }
.ai-steps li::marker { color: var(--blue); font-weight: 700; }

/* ---------------------------------------------------------------- 9.9.7 对话侧栏（电脑上首页左边那一栏）
   以前是一颗按钮 + 一个光秃秃的输入框 + 一句灰字，用户说「看的都很简陋」。
   现在是一块浮起来的面板：标题、新对话、带图标的搜索、按日子分组的对话、底部常用页面；空的时候给三句点了就能问的话。 */
@media (min-width: 761px) {
  .chatview { gap: 16px; }
  .chat-side { width: 16.5rem; margin: 4px 0 10px; padding: 14px 12px 10px; border: 0 !important;
    background: var(--card); border-radius: 20px; box-shadow: 0 1px 2px rgba(30, 40, 60, .05), 0 8px 28px rgba(30, 40, 60, .06); }
  .chat-main { padding-left: 0; }
}
.chat-side-top { gap: 10px; }
.chat-side-h { display: flex; align-items: baseline; gap: 6px; padding: 0 4px; }
.chat-side-h b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.chat-side-h span { font-size: 12px; color: var(--dim2); font-variant-numeric: tabular-nums; }
.chat-side-new { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; color: #fff; border: 0;
  background: var(--press); box-shadow: 0 2px 8px rgba(60, 70, 95, .18); }
.chat-side-new .icon { width: 16px; height: 16px; }
.chat-find { position: relative; display: block; }
.chat-find .icon { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--dim2); pointer-events: none; }
.chat-find #chatFind { padding: 9px 12px 9px 32px; border-radius: 12px; background: var(--soft); border: 1px solid transparent; }
.chat-find #chatFind:focus { background: var(--card); border-color: var(--line); outline: none; box-shadow: 0 0 0 3px rgba(140, 155, 179, .18); }
.chat-grp { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 700; color: var(--dim2); letter-spacing: .04em; }
.chat-grp:first-child { margin-top: 2px; }
.chat-sess { border-radius: 12px; position: relative; }
.chat-sess-open { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border-radius: 12px; }
.chat-sess-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--dim); }
.chat-sess-ic .icon { width: 15px; height: 15px; }
.chat-sess-t { display: grid; gap: 1px; min-width: 0; }
.chat-sess-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sess-t small { font-size: 11.5px; color: var(--dim2); }
.chat-sess.on { background: var(--blue-s); }
.chat-sess.on .chat-sess-ic { background: var(--pal-navy-1); color: #fff; }
.chat-sess.on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--pal-navy-1); }
.chat-side-empty { display: grid; justify-items: center; text-align: center; gap: 6px; margin: 18px 4px; }
.chat-side-empty .cse-art { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--soft); }
.chat-side-empty b { font-size: 14px; color: var(--ink); }
.chat-side-empty p { font-size: 12.5px; color: var(--dim); margin: 0 0 4px; }
.cse-qs { display: grid; gap: 6px; width: 100%; }
.cse-qs button { font: inherit; font-size: 13px; text-align: left; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); }
@media (hover: hover) { .cse-qs button:hover { border-color: var(--pal-navy-1); } }
.chat-side-go { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-side-go a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; font-size: 11.5px;
  color: var(--dim); text-decoration: none; }
.chat-side-go .icon { width: 18px; height: 18px; }
@media (hover: hover) { .chat-side-go a:hover { background: var(--soft); color: var(--ink); } }

/* ---------------------------------------------------------------- 9.9.7 实验台：四张功能卡 + 实验方卡
   用户：「实验里面的那几个方块，你不能是数列的这样排，而是得方块排，有什么什么功能，每一个做一个单独的 UI」 */
.bh-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 26px; }
@media (max-width: 760px) { .bh-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.bh-feat { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 128px;
  padding: 14px 14px 12px; border-radius: 20px; overflow: hidden; text-align: left; font: inherit; cursor: pointer; border: 0;
  text-decoration: none; color: #fff; box-shadow: 0 1px 2px rgba(30, 40, 60, .06), 0 8px 22px rgba(30, 40, 60, .08); }
.bh-feat .bf-txt { display: grid; gap: 3px; position: relative; z-index: 1; }
.bh-feat .bf-txt b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.bh-feat .bf-txt small { font-size: 12.5px; line-height: 1.4; opacity: .88; }
.bh-feat .bf-art { position: relative; z-index: 1; align-self: flex-end; }
.f-ai { background: linear-gradient(150deg, var(--pal-purple-1), var(--pal-purple-2)); }
.f-calc { background: linear-gradient(150deg, var(--pal-navy-1), var(--pal-navy-2)); }
.f-timer { background: linear-gradient(150deg, var(--pal-red-1), var(--pal-red-2)); }
.f-cal { background: var(--card); color: var(--ink); }
.f-cal .bf-txt small { color: var(--dim); opacity: 1; }
/* AI：三颗越来越亮的点 = 一句话 → 三步方案 */
.f-ai-art { display: flex; gap: 6px; align-items: center; }
.f-ai-art i { width: 26px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.f-ai-art i:nth-child(2) { width: 34px; background: rgba(255, 255, 255, .6); }
.f-ai-art i:nth-child(3) { width: 18px; background: #fff; }
/* 计算器：一小块键盘 */
.f-calc-art { display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; }
.f-calc-art i { height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .2); font-style: normal; font-size: 10.5px;
  font-weight: 700; display: grid; place-items: center; color: rgba(255, 255, 255, .9); }
.f-calc-art i:nth-child(4n) { background: rgba(255, 255, 255, .4); }
/* 计时器：进度环（在计时转起来） */
.f-timer-art { width: 44px; height: 44px; display: grid; place-items: center; }
.f-timer-art svg.ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.f-timer-art circle { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 3; }
.f-timer-art circle.arc { stroke: #fff; stroke-dasharray: 94.2; stroke-dashoffset: 62; stroke-linecap: round; }
.f-timer-art.on svg.ring { animation: bfSpin 2.4s linear infinite; }
.f-timer-art .icon { width: 18px; height: 18px; }
@keyframes bfSpin { to { transform: rotate(270deg); } }
/* 日历：撕页日历 */
.f-cal-art { width: 52px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); text-align: center; background: var(--card); }
.f-cal-art em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--pal-red-2); padding: 2px 0; }
.f-cal-art b { display: block; font-size: 22px; font-weight: 800; line-height: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .bh-feat:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(30, 40, 60, .06), 0 14px 30px rgba(30, 40, 60, .12); } }
.bh-feat { transition: transform .18s ease, box-shadow .18s ease; }

/* 实验方卡 */
.bt-tiles.bt-apps { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 12px !important; margin: 8px 0 26px; }
@media (max-width: 760px) { .bt-tiles.bt-apps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }
.bt-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); text-decoration: none;
  color: var(--ink); box-shadow: 0 1px 2px rgba(30, 40, 60, .05), 0 6px 18px rgba(30, 40, 60, .06); transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .bt-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(30, 40, 60, .06), 0 12px 26px rgba(30, 40, 60, .1); } }
.bt-card-top { position: relative; display: block; height: 84px; background: linear-gradient(150deg, var(--c1), var(--c2)); color: var(--ic-fg, #fff); }
.bt-card .bt-art { position: absolute; right: 6px; bottom: 6px; width: 64%; height: auto; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.bt-card .bt-art .fl { fill: currentColor; stroke: none; }
.bt-card-ic { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); }
.bt-card.k-imm .bt-card-ic, .bt-card.k-gen .bt-card-ic { background: rgba(60, 70, 95, .08); }
.bt-card-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bt-card-b { display: grid; gap: 3px; padding: 10px 12px 12px; }
.bt-card-b b { font-size: 14.5px; font-weight: 700; }
.bt-card-b small { font-size: 12px; color: var(--dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-card-b em { font-style: normal; font-size: 11.5px; color: var(--blue); font-weight: 600; margin-top: 2px; }
.bt-card.k-gen .bt-card-top { box-shadow: inset 0 -1px 0 var(--line); }
/* 老的 .bt-app（图标网格）把子元素居中收窄：方卡上半只有绝对定位的东西，被收成 0 宽 —— 这里撑满 */
.bt-tiles .bt-card { align-items: stretch !important; justify-content: flex-start !important; text-align: left !important;
  padding: 0 !important; gap: 0 !important; min-height: 0; }
.bt-tiles .bt-card .bt-card-top { width: 100%; flex: none; }
.bt-tiles .bt-card .bt-card-b { width: 100%; }
/* 老 .hz-app b 给名字定了 76px 宽 + 居中（图标网格时代），方卡里要靠左、占满 */
.bt-tiles .bt-card .bt-card-b b, .bt-tiles .bt-card .bt-card-b small { width: auto !important; max-width: none !important;
  text-align: left !important; margin: 0 !important; }

/* ---------------------------------------------------------------- 9.9.7 独立小窗（peek.js）
   看别的页面：电脑上从右边滑出一块，手机上底部升起；问一句：电脑上右下角的小窗，手机上底部抽屉。
   起始位移小（动画不跑也不会卡在屏幕外，4.3 栽过） */
.peek { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.peek-bg { position: absolute; inset: 0; background: rgba(20, 24, 36, .32); opacity: 0; transition: opacity .22s ease; pointer-events: auto; }
.peek.on .peek-bg { opacity: 1; }
.peek-win { position: absolute; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; pointer-events: auto;
  box-shadow: 0 18px 60px rgba(20, 24, 36, .28), 0 0 0 1px rgba(20, 24, 36, .06); opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1); }
.peek.on .peek-win { opacity: 1; transform: none; }
.peek-page .peek-win { right: 12px; top: 12px; bottom: 12px; width: min(560px, calc(100vw - 24px)); border-radius: 22px; }
.peek-chat .peek-win { right: 20px; bottom: 20px; width: 400px; height: min(640px, calc(100vh - 40px)); border-radius: 22px; }
@media (max-width: 760px) {
  .peek-page .peek-win, .peek-chat .peek-win { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 92vh; border-radius: 22px 22px 0 0; }
  .peek-chat .peek-win { height: 78vh; }
}
.peek-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: var(--card);
  border-bottom: 1px solid var(--line); position: relative; }
.peek-h b { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-grip { display: none; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
@media (max-width: 760px) { .peek-grip { display: block; } .peek-h { padding-top: 14px; } }
.peek-full, .peek-x { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; border-radius: 10px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--dim); background: var(--soft); padding: 0 10px; }
.peek-x { width: 34px; padding: 0; justify-content: center; }
.peek-full svg, .peek-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .peek-full:hover, .peek-x:hover { color: var(--ink); background: var(--soft2); } }
.peek-body { position: relative; flex: 1; min-height: 0; }
.peek-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); opacity: 0; transition: opacity .18s ease; }
.peek.ready .peek-frame { opacity: 1; }
.peek-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.peek-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim2); animation: peekDot 1s ease-in-out infinite; }
.peek-wait i:nth-child(2) { animation-delay: .15s; } .peek-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes peekDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.peek.ready .peek-wait { display: none; }
body.peek-open { overflow: hidden; }

/* 小窗里那份应用：没有顶栏、底栏、悬浮按钮、对话侧栏，内容贴着窗口边 */
html.embed header.top, html.embed nav.bar, html.embed #askHere, html.embed footer.foot, html.embed .chat-side,
html.embed .chat-shade, html.embed #chatSideBtn, html.embed .chat-compose-label { display: none !important; }
html.embed body { padding: 0 !important; }
html.embed main { padding-top: 12px !important; padding-bottom: 16px !important; margin-top: 0 !important; }
html.embed .chatview { gap: 0; }
html.embed .chat-main { padding-left: 0 !important; }
html.embed .chat-empty.today.hz .hz-snappy { width: 56px; height: 56px; }
html.embed .chat-empty.today.hz .hz-apps, html.embed .chat-empty.today.hz .hz-guide { display: none; }