/* ============================================================
   SnapLab · by Ew4
   兼容优先：不用 color-mix / :has，Safari 14+ 可跑；动画只动 transform/opacity
   ============================================================ */
:root {
  /* 主操作色：黑蓝。跟标志同源（炭黑 + 青），不是通用的蓝紫 */
  --navy: #0e1926; --navy2: #1d2f42; --navy3: #27405a; --cyan: #29b6e8;
  --bg: #f7f7f9; --card: #fff; --soft: #f1f1f4; --soft2: #e6e6ea;
  --ink: #1c1c1e; --dim: #6b6b70; --dim2: #9a9aa0; --line: #e3e3e8;
  --blue: #0a7cff; --blue-s: #e9f2ff; --blue-d: #0060cc;
  --amber: #f59e0b; --amber-s: #fff5e6; --amber-d: #a35d00;
  --violet: #6c5ce7; --violet-s: #eeecff;
  --green: #12a150; --green-s: #e8f7ee;
  --red: #ef4444; --red-s: #ffecec;
  --sh: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px -12px rgba(0,0,0,.2);
  --sh2: 0 12px 32px -14px rgba(0,0,0,.28);
  --r: 16px; --pill: 999px;
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --e: cubic-bezier(.22,.8,.24,1);
  --bar: 0px;
  color-scheme: light;
}

/* 4.4 · A quiet reading surface, deliberate motion, account archive visibility. */
.reading-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:22px 0 8px; }
.reading-switch { display:inline-flex; padding:4px; background:var(--soft); border:1px solid var(--line); border-radius:12px; gap:3px; }
.reading-switch button { padding:8px 17px; border-radius:8px; font:inherit; font-size:14px; color:var(--dim); transition:background .2s, color .2s, box-shadow .2s; }
.reading-switch button.on { background:var(--card); color:var(--ink); font-weight:700; box-shadow:0 1px 4px #00000012; }
.reading-hint { margin:10px 0 16px; line-height:1.65; }
.archive-state { display:flex; gap:9px; align-items:center; color:var(--green); padding:13px 0; border-top:1px solid var(--line); font-size:13px; }
.archive-state small { color:var(--dim); margin-left:14px; }
.archive-state.pending { color:var(--amber-d); }
.archive-state .icon { width:16px; height:16px; }
.reading-toolbar + .reading-hint { max-width:70ch; }
#readingSummary p { margin:0; }
#readingSummary:empty { display:none; }
#readingContent { line-height:1.85; }
.source-json { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.7; color:var(--dim); max-height:450px; overflow:auto; }
.history-list { max-height:48vh; overflow:auto; margin:18px 0; }
.history-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line); color:var(--ink); }
.history-row:last-child { border-bottom:0; }   /* 末行不留线，贴着列表底边干净一点 */
.history-row span:last-child { display:flex; align-items:center; gap:7px; font-size:13px; }
.history-row small { display:block; color:var(--dim); margin-top:4px; font-size:12px; }
.weight-chart { margin:22px 0; padding:22px 0 5px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.chart-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
.chart-heading h3 { margin:0; font-size:21px; letter-spacing:-.03em; }
.chart-heading p { margin:4px 0; }
.chart-day { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); }
/* background 写成简写会把 select 自带的下拉箭头 background-image 一并重置掉
   （26px 右 padding 本来就是给箭头留的位）——改 background-color 保住箭头 */
.chart-day select { width:auto; padding:7px 26px 7px 10px; margin:0; font:inherit; border:1px solid var(--line); border-radius:9px; color:var(--ink); background-color:var(--card); }
.weight-canvas { overflow-x:auto; scrollbar-width:thin; margin:10px -2px 0; }
.weight-canvas svg { display:block; width:100%; height:auto; max-height:360px; }
.weight-canvas svg.many-groups { width:auto; height:325px; max-width:none; }
#v-item { max-width:1040px; margin-left:auto; margin-right:auto; }
.chart-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.group-label { fill:var(--ink); font-size:13px; font-weight:600; }
.weight-label { fill:var(--ink); font:600 14px var(--f); font-variant-numeric:tabular-nums; }
.weight-bar { transform-box:fill-box; transform-origin:center bottom; }
/* 裸 :hover 在触屏上会粘住，统一包 hover 媒体查询 */
@media (hover:hover) { .weight-bar:hover { filter:brightness(1.12); } }
.weight-error { stroke:var(--ink); stroke-width:1.4; fill:none; }
.chart-caption { line-height:1.75; margin:8px 0 16px; }
.card { transition:box-shadow .24s ease, border-color .24s ease; }
dialog[open] { animation:dialog-enter .22s ease-out both; }
@keyframes dialog-enter { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
  .archive-state small { display:block; margin:3px 0 0; }
  .reading-toolbar { align-items:stretch; gap:10px; }
  .reading-toolbar .acts-r { flex-wrap:wrap; }
  .chart-heading > .acts-r { flex-wrap:wrap; }
  .chart-heading h3 { font-size:19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
[data-theme="dark"] {
  --bg: #000; --card: #17171a; --soft: #232327; --soft2: #2f2f35;
  --ink: #f2f2f5; --dim: #9d9da4; --dim2: #75757c; --line: #2c2c31;
  --blue: #3d9bff; --blue-s: #102740; --blue-d: #7cbcff;
  --amber: #ffb340; --amber-s: #33260f; --amber-d: #ffc86b;
  --violet: #9b8cff; --violet-s: #232052;
  --green: #34d07a; --green-s: #102a1b;
  --red: #ff5f57; --red-s: #331a1a;
  --sh: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.9);
  --sh2: 0 12px 32px -14px rgba(0,0,0,.95);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--f); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; padding-bottom: var(--bar);
}
@supports (min-height: 100dvh) { body { min-height: 100dvh; } }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; background: none; border: 0; }
a { color: var(--blue); text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.dim { color: var(--dim); }
.sm { font-size: 13.5px; }
.center { text-align: center; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
code { font-family: var(--mono); font-size: .9em; background: var(--soft2); padding: 1px 5px; border-radius: 5px; letter-spacing: 0; }
/* 焦点环：描边自动跟随元素自己的圆角（现代浏览器行为）。原来这里写死 border-radius:8px，
   等于在聚焦时把 .btn 胶囊的圆角也掰成 8px —— 那是改元素本身，不是改环，删掉。 */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* 选中文本：蒂芙尼蓝底 + 深青字，深浅主题下都成立（--cyan 两边都是浅色青） */
::selection { background: var(--cyan); color: #14302c; }
/* 占位符统一弱一档；Firefox 会自己再调淡，opacity:1 钉住 */
::placeholder { color: var(--dim2); opacity: 1; }

/* 细滚动条：桌面端窄条，颜色跟主题变量走；iOS 是 overlay 滚动条，这几行不生效 */
* { scrollbar-width: thin; scrollbar-color: var(--dim2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--dim2); border: 2px solid transparent;
  border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

@keyframes sp { to { transform: rotate(360deg); } }
@keyframes fi { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
@keyframes shm { to { transform: translate3d(100%,0,0); } }

/* ---------- 顶栏 ---------- */
.top { position: -webkit-sticky; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 max(18px, calc((100vw - 880px) / 2)); background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
/* 标志：固定配色 + 浅底板。深浅主题下长得一模一样，不跟着夜间模式翻转。 */
.mark .icon, .lmark .icon { stroke: none; }
.mark, .lmark { background: #fbfbfd; border: 1px solid #e6e6ec; border-radius: 26%; }
.mark { padding: 3px; }
.lmark { padding: 7px; border-radius: 24%; }
.mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; }
.mark .icon { width: 100%; height: 100%; }
.name { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.name b { font-weight: 800; }
.nav { display: flex; gap: 2px; margin-left: 6px; }
.nav a { padding: 7px 14px; border-radius: var(--pill); color: var(--dim); font-size: 15.5px; font-weight: 500; transition: background .16s, color .16s; }
.nav a.on { background: var(--ink); color: var(--bg); }
#themeBtn { margin-left: auto; }
.ib { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--dim); flex: none; transition: background .16s, color .16s, transform .1s; }
.ib:active { transform: scale(.9); }
.ib.danger:active { color: var(--red); }
@media (hover: hover) { .ib:hover { background: var(--soft2); color: var(--ink); } .nav a:hover { background: var(--soft2); color: var(--ink); } .nav a.on:hover { background: var(--ink); color: var(--bg); } }
[data-theme="light"] .s-moon, [data-theme="dark"] .s-sun { display: none; }

/* ---------- 布局 ---------- */
main { width: min(880px, calc(100% - 28px)); margin: 20px auto 36px; }
.view { animation: fi .24s var(--e) both; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 18px 20px; margin-bottom: 14px; }
.chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.chead h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.acts-r { display: flex; gap: 8px; align-items: center; }
.acts-r.wrap { flex-wrap: wrap; }
.none { text-align: center; color: var(--dim); padding: 42px 16px; }
.foot { text-align: center; color: var(--dim2); font-size: 12.5px; padding: 0 0 26px; letter-spacing: .02em; }
.sig { color: var(--dim2); font-size: 13px; margin: 14px 0 0; }
.sig b { color: var(--dim); }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink);
  font-size: 15.5px; font-weight: 550; white-space: nowrap; transition: transform .12s var(--e), background .16s; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: default; }   /* 禁用态不再给手型，免得看起来像能点 */
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.small { height: 34px; padding: 0 13px; font-size: 14.5px; }
.btn.danger { color: var(--red); border-color: var(--line); }
.btn.block { width: 100%; }
.btn.back { margin-bottom: 12px; padding-left: 14px; }
@media (hover: hover) { .btn:hover { background: var(--soft); } .btn.primary:hover { background: var(--blue-d); } .btn.danger:hover { background: var(--red-s); } }

/* ---------- 首页两个大按钮 ---------- */

/* ---------- 搜索 / 分段 ---------- */
.tools { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.find { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--pill);
  background: var(--card); border: 1px solid var(--line); color: var(--dim); flex: 1; min-width: 0;
  cursor: text; transition: border-color .16s, box-shadow .18s, color .16s; }
/* 聚焦反馈和表单输入框同一套语言：蓝描边 + 淡青光圈 */
.find:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-s); color: var(--ink); }
/* 特异度必须压过下面的 input[type=search]（同权重但排在文件后面）——
   不然搜索框会在胶囊里再画一层自己的边框和底色。 */
.tools .find input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; height: 100%;
  padding: 0; color: var(--ink); -webkit-appearance: none; }
/* 视图切换钮 #viewBtn：和搜索胶囊同高、同描边，两个控件才像一组 */
.tools .ib { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--card); }
#moreWrap { margin: 16px 0 6px; }

/* ---------- 日期分组 ---------- */
/* 修：这行上面原来悬着一个没写完的 [data-theme="dark"] 选择器，
   会把 .day 吞成「深色才生效」——浅色模式下日期分组一直是零间距粘在一起的。 */
.day { margin-bottom: 18px; }
.day-h { display: flex; align-items: baseline; gap: 9px; margin: 0 2px 9px; }
.day-h b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.day-h span { font-size: 13px; color: var(--dim2); }
.rows { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 列表卡片 ---------- */
.it { display: flex; gap: 13px; align-items: center; padding: 11px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); color: var(--ink); transition: transform .14s var(--e), box-shadow .18s var(--e); }
.it:active { transform: scale(.985); }
@media (hover: hover) { .it:hover { box-shadow: var(--sh2); } }
.it.bad { border-color: var(--red); }
.th { position: relative; width: 70px; height: 70px; border-radius: 12px; overflow: hidden; flex: none;
  background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--dim2); }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th .icon { width: 26px; height: 26px; }
.ring { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 3px solid rgba(128,128,128,.3); border-top-color: var(--blue); border-radius: 50%; animation: sp .8s linear infinite; }
.tx { flex: 1; min-width: 0; }
.t1 { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 { color: var(--dim); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3 { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.kb { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); background: var(--soft2); color: var(--dim); }
.kb.data { background: var(--blue-s); color: var(--blue-d); }
.kb.note { background: var(--amber-s); color: var(--amber-d); }
.kb.protocol { background: var(--violet-s); color: var(--violet); }
.tag { font-size: 12px; padding: 2px 8px; border-radius: var(--pill); background: var(--soft); color: var(--dim); }
.tt { margin-left: auto; font-size: 12.5px; color: var(--dim2); white-space: nowrap; }

/* ---------- 相册 ---------- */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gi { position: relative; display: block; border-radius: 13px; overflow: hidden; background: var(--soft); box-shadow: var(--sh); transition: transform .14s var(--e); }
.gi:active { transform: scale(.97); }
.gi .box { position: relative; width: 100%; padding-top: 100%; }
.gi .box > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 上面那条通配会把 .ring 也拉成满格（转圈变成盖满缩略图的大椭圆），单独钉回中心 */
.gi .box > .ring { left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.gi img { object-fit: cover; display: block; }
.gi .ph { display: flex; align-items: center; justify-content: center; color: var(--dim2); }
.gi .ph .icon { width: 30px; height: 30px; }
.gi .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 8px; color: #fff; font-size: 13px; font-weight: 600;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi .kb { position: absolute; left: 7px; top: 7px; background: rgba(255,255,255,.94); color: #1c1c1e; }

/* ---------- 骨架 ---------- */
.sk { position: relative; overflow: hidden; background: var(--soft2); border-radius: 8px; height: 15px; }
.sk::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate3d(-100%,0,0);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); animation: shm 1.1s infinite; }
[data-theme="dark"] .sk::after { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0)); }
.skc { display: flex; flex-direction: column; gap: 9px; }
.sk.b { height: 22px; width: 52%; }
.sk.w { width: 78%; }

/* ---------- 详情 ---------- */
.h1row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.h1row h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.24; }
.lead { margin: 8px 0 0; font-size: 16px; color: var(--dim); line-height: 1.6; }
.shot { text-align: center; }
.shot img { max-height: 58vh; border-radius: 13px; cursor: zoom-in; display: block; margin: 0 auto 8px; }
.bar-note { display: flex; gap: 9px; align-items: flex-start; padding: 12px 15px; border-radius: 12px; font-size: 15px; }
.bar-note .icon { flex: none; margin-top: 2px; }
.bar-note.warn { background: var(--amber-s); color: var(--amber-d); }
.bar-note.bad { background: var(--red-s); color: var(--red); }
.bar-note.ok { background: var(--green-s); color: var(--green); }
.bar-note ul { margin: 4px 0 0; padding-left: 18px; }
.bar-note b { display: block; }
.doc h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.doc h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--blue); flex: none; }
.doc h4 { font-size: 15px; margin: 14px 0 6px; }
.doc .sec { margin-bottom: 18px; }
.doc .sec:last-child { margin-bottom: 0; }
.doc p { margin: 8px 0; line-height: 1.75; }
.doc ul, .doc ol { padding-left: 23px; margin: 8px 0; }
.doc li { margin: 5px 0; line-height: 1.7; }
.ch { font-size: 16px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.kv { padding: 10px 13px; border-radius: 12px; background: var(--soft); }
.kv .k { font-size: 12.5px; color: var(--dim); }
.kv .v { font-size: 16.5px; font-weight: 700; margin-top: 2px; word-break: break-all; }
.kv .v small { font-size: 12.5px; font-weight: 500; color: var(--dim); margin-left: 3px; }
/* .pill 不带修饰类时给个兜底底色，不然是裸文字 */
.pill { font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: var(--pill);
  background: var(--soft); color: var(--dim); }
.pill.ok { background: var(--green-s); color: var(--green); }
.pill.warn { background: var(--amber-s); color: var(--amber-d); }
.fig { margin: 12px 0; }
.fig img { width: 100%; max-width: 480px; border-radius: 12px; background: #fff; cursor: zoom-in; display: block; }
.fig figcaption { font-size: 12.5px; color: var(--dim2); margin-top: 6px; }
.fmt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fmt a { font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--pill); background: var(--soft); color: var(--ink);
  transition: background .16s, transform .12s var(--e); }
.fmt a:active { transform: scale(.95); }
@media (hover: hover) { .fmt a:hover { background: var(--soft2); } .raw summary:hover { color: var(--ink); } }
.raw { margin-top: 12px; }
.raw summary { cursor: pointer; color: var(--dim); font-size: 15px; transition: color .15s; }
.raw .tw { margin-top: 10px; }
.wait { text-align: center; padding: 44px 20px; }
.wait .ring { position: static; width: 36px; height: 36px; margin: 0 auto 14px; }
.wait b { display: block; font-size: 17px; margin-bottom: 5px; }

/* ---------- 表格 ---------- */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
th, td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { background: var(--soft); color: var(--dim); font-weight: 600; font-size: 13px; }
tr:last-child td { border-bottom: 0; }
td.n { text-align: right; }
td.hi { color: var(--blue-d); font-weight: 700; }
td.lo { color: var(--dim2); }

/* ---------- Protocol ---------- */
.pcard:active { transform: scale(.985); }
.pcat { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--violet); }
.pread { padding: 26px 30px 32px; }
.pread h1 { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.16; margin: 5px 0 9px; }
.pread .lead { font-size: 17.5px; max-width: 60ch; }
.srci { width: 100%; max-width: 500px; border-radius: 13px; margin: 14px 0 4px; cursor: zoom-in; display: block; }
.pbody { font-size: 17px; line-height: 1.85; max-width: 64ch; margin-top: 16px; }
.pbody h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 30px 0 11px; padding-left: 13px; border-left: 4px solid var(--blue); }
.pbody h3 { font-size: 18px; margin: 20px 0 8px; }
.pbody p { margin: 11px 0; }
.pbody ul { padding-left: 24px; margin: 11px 0; }
.pbody li { margin: 8px 0; }
.pbody ol { counter-reset: st; list-style: none; padding-left: 0; margin: 13px 0; }
.pbody ol > li { counter-increment: st; position: relative; padding: 12px 15px 12px 53px; margin: 9px 0; background: var(--soft); border-radius: 13px; }
.pbody ol > li::before { content: counter(st); position: absolute; left: 14px; top: 11px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- 表单 ---------- */
.f { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--dim); margin-bottom: 13px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* date / datetime-local 以前没进这份名单：tracker.js、journal.js、recognition.js 都在用，
   一直吃的是浏览器默认样式（高度、描边、圆角全都对不上），这次补上。 */
input[type=text], input[type=search], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], select, textarea {
  height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink);
  font-size: 16px; width: 100%; -webkit-appearance: none; appearance: none;
  transition: border-color .16s, box-shadow .18s; }
/* 复选框统一主题色（Safari 15.4+ 生效，旧系统退回默认蓝，无妨） */
input[type=checkbox] { accent-color: var(--blue); }
textarea { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.65; font-family: var(--mono); font-size: 14.5px; letter-spacing: 0; }
select { padding-right: 32px; background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b70' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); }
/* 深色下原来的中灰箭头在暗底上近乎看不见，换亮一档 */
[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%239d9da4' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-s); }

/* ---------- 传输 ---------- */
.drop2 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 16px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--soft); color: var(--dim); }
.drop2.over { border-color: var(--blue); background: var(--blue-s); }
.drop2 span { flex: 1; min-width: 130px; }
/* 上传队列：拍完立刻看见自己那张图 + 一条进度条。
   进度只改 .s 的文本和 .qbar i 的宽度，整块 DOM 不重建，滚动和图片都不会被打断。 */
.q { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.qi { display: flex; gap: 11px; align-items: center; padding: 9px 11px; border-radius: 12px; background: var(--soft); font-size: 14px; }
.qi .qth { width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg);
  display: flex; align-items: center; justify-content: center; color: var(--dim); }
.qi .qth img { width: 100%; height: 100%; object-fit: cover; }
.qi .qth .icon { width: 20px; height: 20px; }
.qi .qb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qi .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qi .s { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi .qbar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.qi .qbar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--cyan); transition: width .18s linear; }
.qi.ok .s { color: var(--green); }
.qi.ok .qbar i { background: var(--green); }
.qi.bad .s { color: var(--red); }
.qi.bad .qbar i { background: var(--red); }

/* Snap 面板底下那句话：解释为什么没有「选类型」这一步 */
.sheet-tip { margin: 10px 2px 2px; font-size: 12.5px; line-height: 1.6; color: var(--dim); }

/* 分类归位条：判错了点一下就搬走 */
.kindbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.kindbar .kbx { display: flex; gap: 10px; align-items: center; min-width: 0; }
.kindbar .kbx .icon { width: 20px; height: 20px; flex: none; color: var(--dim); }
.kindbar .kbx b { display: block; font-size: 15px; }
.kindbar .kbx i { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.kindbar.ask { border-color: var(--amber); }
.kindbar.ask .kbx .icon { color: var(--amber); }
/* 列表卡片上的「分类待确认」小标 */
.tag.ask { background: var(--amber-s); color: var(--amber-d); }
.fr { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.fr:last-child { border-bottom: 0; }
.fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.fs { color: var(--dim); font-size: 13.5px; }
.up { margin-top: 12px; padding: 14px 15px; border-radius: 13px; background: var(--blue-s); }
.up .row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.up .row:last-child { margin-bottom: 0; }

/* ---------- 弹窗 ---------- */
.mo { border: 0; border-radius: 18px; padding: 0; background: var(--card); color: var(--ink); width: min(430px, calc(100vw - 26px)); box-shadow: var(--sh2); }
.mo::backdrop, .lb::backdrop { background: rgba(0,0,0,.55); }
.mo form { padding: 22px; }
.mo h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; }
.mo p { margin: 0 0 13px; color: var(--dim); }
.acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.err { color: var(--red); font-size: 13.5px; margin: 0 0 10px; }
.login { text-align: center; }
.lmark { width: 66px; height: 66px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.lmark .icon { width: 100%; height: 100%; }
/* 这条 .login input 曾被后面那条 margin:9px 0 0 完全覆盖，是死规则；
   但删掉前注意：旧规则有下 margin，删了后输入框和「进入」按钮会贴上 —— 所以底下那条补回下 margin。 */
.lb { border: 0; padding: 0; background: none; max-width: 96vw; max-height: 96vh; }
.lb img { max-width: 96vw; max-height: 90vh; border-radius: 12px; background: #fff; display: block; }
.lbx { position: fixed; top: 14px; right: 14px; background: var(--card); color: var(--ink); width: 42px; height: 42px; }
.lbwm { text-align: right; color: rgba(255,255,255,.55); font-size: 11px; padding-top: 6px; letter-spacing: .04em; }
/* bottom 原来漏了 iPhone 的下巴：底栏高度是 --bar + safe-area，toast 只抬了 --bar，
   带 home 指示条的机器上会压进导航条里。 */
.toast { position: fixed; left: 50%; bottom: calc(22px + var(--bar) + env(safe-area-inset-bottom, 0px)); z-index: 100; transform: translate3d(-50%, 10px, 0);
  max-width: min(500px, calc(100vw - 30px)); padding: 11px 19px; border-radius: var(--pill);
  background: #1c1c1e; color: #fff; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--e); }
[data-theme="dark"] .toast { background: #f2f2f5; color: #1c1c1e; }
.toast.on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.toast.bad { background: var(--red); color: #fff; }
.toast.good { background: var(--green); color: #fff; }

/* ---------- 手机 ---------- */
.bar { display: none; }
@media (max-width: 760px) {
  :root { --bar: 62px; }
  body { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); }
  .top { height: 52px; padding: 0 14px; gap: 10px; }
  .nav { display: none; }
  main { width: calc(100% - 22px); margin: 14px auto 16px; }
  .card { padding: 15px; border-radius: 15px; }
            .th { width: 62px; height: 62px; }
  .t1 { font-size: 15.5px; }
  .t2 { font-size: 13.5px; }
  .h1row h1 { font-size: 22px; }
  .gal { grid-template-columns: repeat(2, 1fr); }
    .pread { padding: 18px 16px 24px; }
  .pread h1 { font-size: 26px; }
  .pbody { font-size: 16.5px; }
  .pbody h2 { font-size: 20px; }
  .f2 { grid-template-columns: 1fr; }
  .foot { padding-bottom: 10px; }
  .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; height: var(--bar); padding-bottom: env(safe-area-inset-bottom);
    background: var(--card); border-top: 1px solid var(--line); }
  .bar a, .bar button:not(#fab) { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--dim2); font-size: 11.5px; font-weight: 600; height: 100%; }
  .bar a .icon, .bar button:not(#fab) .icon { width: 22px; height: 22px; }
  .bar a.on { color: var(--blue); }
  .bar button:not(#fab):active { color: var(--blue); }
  #fab { width: 54px; height: 54px; margin-top: -16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 32% 20%, var(--navy3), var(--navy)); color: #fff;
    box-shadow: 0 6px 16px -6px rgba(14,25,38,.9), 0 0 0 1px rgba(129,216,208,.3) inset;
    transition: transform .12s var(--e); }
  #fab .icon { width: 25px; height: 25px; stroke-width: 2; }
  #fab:active { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Protocol 页的拍照区（比首页矮一点） */

/* 阅读页里的提示块：AI 补全 / 待核对 */
.nb { margin-top: 22px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--soft); }
.nb h3 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.nb h3 .icon { width: 18px; height: 18px; }
.nb p { margin: 0 0 8px; }
.nb ul { margin: 0; padding-left: 20px; }
.nb li { font-size: 15.5px; line-height: 1.7; margin: 4px 0; }
.nb.ai { border-color: var(--blue); background: var(--blue-s); }
.nb.ai h3 { color: var(--blue-d); }
.nb.warn { border-color: var(--amber); background: var(--amber-s); }
.nb.warn h3 { color: var(--amber-d); }

/* 章节标题后的「AI 补」小标 */
.aib { display: inline-block; margin-left: 9px; padding: 2px 8px; border-radius: var(--pill); vertical-align: middle;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--blue-d); background: var(--blue-s); border: 1px solid var(--blue); }

/* ---------- 电脑端 ---------- */
.dcols > .dmain > .card:last-child { margin-bottom: 0; }

@media (min-width: 1000px) {
  main { width: min(1180px, calc(100% - 56px)); margin: 26px auto 48px; }
  .top { padding: 0 26px; }

  /* 首页：投放区压扁，列表两列铺开，别在宽屏上拉成一条条长面 */
    .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .kvs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

  /* 详情：正文一栏，原图单独一栏并跟着滚 */
  .dcols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
  .dside { position: -webkit-sticky; position: sticky; top: 74px; }
  .dside .shot img { max-height: 60vh; }

  .fig img { max-width: 620px; }
  .pread { padding: 32px 36px 36px; }

  /* 设置：三张卡两列排，不再一条竖到底 */
  #v-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  #v-settings .card { margin-bottom: 0; }
}

@media (min-width: 1400px) {
  main { width: min(1320px, calc(100% - 64px)); }
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dcols { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* 手机上侧栏内容排回标题下面 */
@media (max-width: 999px) {
  .dcols { display: flex; flex-direction: column; }
  .dside { order: -1; }
}

/* 整页拖放时的提示 */
body.dragging::after {
  content: "释放以上传"; position: fixed; inset: 10px; z-index: 90; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--blue); border-radius: 22px; background: var(--blue-s);
  color: var(--blue-d); font-size: 20px; font-weight: 700; opacity: .96;
}

/* ============================================================
   4.0 —— 中间一个巨大的 SNAP，剩下的都收进相册
   ============================================================ */

/* ---------- 拍照页 ---------- */
.snapview { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 210px); }
@supports (min-height: 100dvh) { .snapview { min-height: calc(100dvh - 210px); } }
.snapwrap { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px; border-radius: 40px; }
.snapwrap.over { outline: 2px dashed var(--blue); outline-offset: 14px; }

.snap { position: relative; width: min(64vw, 268px); height: min(64vw, 268px); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(120% 120% at 32% 20%, var(--navy3) 0%, var(--navy2) 44%, var(--navy) 100%);
  color: #fff;
  box-shadow: 0 26px 56px -20px rgba(14, 25, 38, .85), 0 0 0 1px rgba(129, 216, 208, .22) inset,
              0 1px 0 rgba(255, 255, 255, .12) inset;
  transition: transform .16s var(--e), box-shadow .2s var(--e); }
.snap .icon { width: 42%; height: 42%; fill: currentColor; stroke: none; }
.snap b { font-size: clamp(21px, 6.4vw, 28px); font-weight: 650; letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase; color: #fff; }
/* 深色主题下背景是纯黑，圆钮得靠青色描边把自己从底上拎起来 */
[data-theme="dark"] .snap {
  box-shadow: 0 26px 56px -22px rgba(0, 0, 0, .9), 0 0 0 1.5px rgba(129, 216, 208, .5) inset,
              0 0 46px -14px rgba(129, 216, 208, .55);
}
[data-theme="dark"] .halo { opacity: .42; }

.snap:active { transform: scale(.955); box-shadow: 0 12px 26px -16px rgba(14, 25, 38, .9), 0 0 0 1px rgba(129, 216, 208, .3) inset; }
@media (hover: hover) {
  .snap:hover { transform: translate3d(0, -2px, 0);
    box-shadow: 0 32px 64px -20px rgba(14, 25, 38, .9), 0 0 0 1px rgba(129, 216, 208, .45) inset,
                0 0 34px -6px rgba(129, 216, 208, .35); }
}

/* 一圈很淡的青色呼吸光，只动 transform / opacity，不掉帧 */
.halo { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--cyan);
  opacity: .3; animation: halo 3.4s var(--e) infinite; pointer-events: none; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.07); opacity: .08; } }

.snaptip { margin: 0; color: var(--dim); font-size: 15.5px; }
.snapview .q { width: min(460px, 100%); margin-top: 20px; }
body.on-snap .foot { opacity: 0; }

/* 八套配色，文件夹一眼分得开 */
.t0 { --tone: #0a7cff; --tint: #e9f2ff; }
.t1 { --tone: #12a150; --tint: #e8f7ee; }
.t2 { --tone: #a35d00; --tint: #fff5e6; }
.t3 { --tone: #6c5ce7; --tint: #eeecff; }
.t4 { --tone: #c0392b; --tint: #ffecec; }
.t5 { --tone: #0e7c86; --tint: #e4f6f7; }
.t6 { --tone: #9b1b6e; --tint: #fdeaf5; }
.t7 { --tone: #4a5568; --tint: #eef0f4; }
[data-theme="dark"] .t0 { --tint: #102740; } [data-theme="dark"] .t1 { --tint: #102a1b; }
[data-theme="dark"] .t2 { --tint: #33260f; } [data-theme="dark"] .t3 { --tint: #232052; }
[data-theme="dark"] .t4 { --tint: #331a1a; } [data-theme="dark"] .t5 { --tint: #0d2b2e; }
[data-theme="dark"] .t6 { --tint: #33132a; } [data-theme="dark"] .t7 { --tint: #23262c; }
[data-theme="dark"] .t0 { --tone: #3d9bff; } [data-theme="dark"] .t1 { --tone: #34d07a; }
[data-theme="dark"] .t2 { --tone: #ffb340; } [data-theme="dark"] .t3 { --tone: #9b8cff; }
[data-theme="dark"] .t4 { --tone: #ff7b6f; } [data-theme="dark"] .t5 { --tone: #4ecdc4; }
[data-theme="dark"] .t6 { --tone: #ff7ac4; } [data-theme="dark"] .t7 { --tone: #a7b0c0; }

/* ---------- 底栏：相册 · SNAP · 文件 ---------- */
/* 底栏的 display:none 在上面第 315 行；这里不能再写一遍 —— 它排在手机端 media query 之后，会把手机底栏整个关掉 */
.login .swap { text-align: center; margin: 12px 0 0; }
.login .swap button { color: var(--blue); font-size: 14.5px; font-weight: 550; }
.login input { margin: 9px 0; }   /* 见上面注释：保留下 margin，别和按钮贴上 */

@media (min-width: 761px) {
  .bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
    display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: var(--pill);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh2); }
  .bar a, .bar button:not(#fab) { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
    border-radius: var(--pill); color: var(--dim); font-size: 15px; font-weight: 600; }
  .bar a.on { background: var(--soft2); color: var(--ink); }
  @media (hover: hover) { .bar a:hover, .bar button:not(#fab):hover { background: var(--soft); color: var(--ink); } }
  #fab { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 32% 20%, var(--navy3), var(--navy)); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(14, 25, 38, .9), 0 0 0 1px rgba(129, 216, 208, .3) inset;
    transition: transform .12s var(--e); }
  #fab .icon { width: 22px; height: 22px; stroke-width: 2; }
  #fab:active { transform: scale(.92); }
  body { padding-bottom: 96px; }
  .snapview { min-height: calc(100vh - 300px); }
  /* 宽屏底栏是 fixed 悬浮胶囊（bottom:22px），toast 按 --bar=0 算会压上去，抬到它顶上 */
  .toast { bottom: 92px; }
}

/* ============================================================
   4.1 —— Snap 面板 · 相册重做 · 过渡
   ============================================================ */

/* ---------- Snap 选择面板 ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(12, 16, 22, .42); opacity: 0;
  transition: opacity .22s var(--e); }
.sheet.on .sheet-bg { opacity: 1; }
.sheet-card { position: relative; width: min(460px, 100%); margin: 0 8px calc(8px + env(safe-area-inset-bottom));
  padding: 10px 14px 14px; border-radius: 26px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--sh2); transform: translate3d(0, 22px, 0); opacity: 0;
  transition: transform .26s var(--e), opacity .2s var(--e); }
.sheet.on .sheet-card { transform: none; opacity: 1; }
.grab { width: 38px; height: 4px; border-radius: 2px; background: var(--soft2); margin: 2px auto 12px; }
.sheet-card h3 { margin: 0 4px 12px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.opt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px; margin-bottom: 7px;
  border-radius: 17px; background: var(--soft); color: var(--ink); text-align: left;
  transition: transform .12s var(--e), background .16s; }
.opt:active { transform: scale(.975); background: var(--soft2); }
@media (hover: hover) { .opt:hover { background: var(--soft2); } }
.oi { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: 14px; color: #fff; }
.oi .icon { width: 22px; height: 22px; }
.c1 { background: linear-gradient(140deg, #27405a, #0e1926); }
.c2 { background: linear-gradient(140deg, #29b6e8, #1585b4); }
.c3 { background: linear-gradient(140deg, #12a150, #0b7038); }
.c4 { background: linear-gradient(140deg, #6c5ce7, #4835c4); }
.ot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot b { font-size: 16px; font-weight: 650; }
.ot i { font-style: normal; font-size: 13px; color: var(--dim); }
.sheet-card .btn.block { margin-top: 5px; }

/* ---------- 相册 ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.fold { position: relative; display: block; padding: 16px; border-radius: 20px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden;
  transition: transform .16s var(--e), box-shadow .2s var(--e); }
/* 左上角一抹本文件夹的色，认得快；没配 tone 的兜底成 --soft，不会整条样式失效 */
.fold::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 96px;
  background: radial-gradient(circle at 0 0, var(--tint, var(--soft)), transparent 70%); pointer-events: none; }
.fold > * { position: relative; }
.fold:active { transform: scale(.975); }
@media (hover: hover) { .fold:hover { box-shadow: var(--sh2); transform: translate3d(0, -3px, 0); } }
.fic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 14px; background: var(--tint, var(--soft)); color: var(--tone, var(--blue)); margin-bottom: 11px; }
.fic .icon { width: 22px; height: 22px; }
/* 长文件夹名 / 元信息截断，不换行不撑爆卡片 */
.fname { font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmeta { font-size: 13px; color: var(--dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsub { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 11px; }
.fsub span { font-size: 12px; padding: 3px 9px; border-radius: var(--pill); background: var(--soft); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fcov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 68px; margin-bottom: 11px;
  border-radius: 13px; overflow: hidden; background: var(--soft); }
.fcov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcov img:only-child { grid-column: 1 / -1; }
/* 恰好两张封面时第一张占两格，别在右边留一块空 */
.fcov img:first-child:nth-last-child(2) { grid-column: span 2; }
.fcov .fic { margin: 0; grid-column: 1 / -1; width: 100%; height: 100%; border-radius: 0; }
.fbar { margin-bottom: 13px; }

/* 卡片依次浮上来，只动 transform / opacity */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.fgrid > *, .rows > *, .gal > * { animation: rise .32s var(--e) both; }
.fgrid > :nth-child(1), .rows > :nth-child(1), .gal > :nth-child(1) { animation-delay: 0ms; }
.fgrid > :nth-child(2), .rows > :nth-child(2), .gal > :nth-child(2) { animation-delay: 28ms; }
.fgrid > :nth-child(3), .rows > :nth-child(3), .gal > :nth-child(3) { animation-delay: 56ms; }
.fgrid > :nth-child(4), .rows > :nth-child(4), .gal > :nth-child(4) { animation-delay: 84ms; }
.fgrid > :nth-child(5), .rows > :nth-child(5), .gal > :nth-child(5) { animation-delay: 112ms; }
.fgrid > :nth-child(n+6), .rows > :nth-child(n+6), .gal > :nth-child(n+6) { animation-delay: 140ms; }

.crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 2px 15px; font-size: 15px; }
.crumb a { color: var(--dim); font-weight: 550; }
.crumb span { color: var(--ink); font-weight: 700; }
.crumb i { color: var(--dim2); font-style: normal; }
@media (hover: hover) { .crumb a:hover { color: var(--ink); } }

/* ===========================================================================
   图像分析插件
   =========================================================================== */

/* 详情页里那排插件按钮 */
.plugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 4px; }
.plug { text-align: left; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.plug b { display: block; font-size: 15px; font-weight: 640; }
.plug i { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.plug.on { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.plug:active { transform: scale(.985); }
@media (hover: hover) { .plug:hover { border-color: var(--cyan); } }
.plugmore { grid-column: 1 / -1; margin-top: 2px; }
.plugmore summary { cursor: pointer; font-size: 13px; color: var(--dim); padding: 6px 2px; }
.plugmore .plugs { margin-top: 8px; }

/* 问答对话框 */
.plugdlg { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.plugdlg::backdrop { background: rgba(0, 0, 0, .55); }
.pd { width: min(940px, 100vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  animation: pdIn .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes pdIn { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }

.pd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pd-top b { display: block; font-size: 17px; font-weight: 660; }
.pd-top i { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 2px; }

.pd-body { display: flex; gap: 18px; padding: 16px 18px; overflow: auto; flex-wrap: wrap; }
.pd-shot { flex: 1 1 340px; min-width: 0; margin: 0; }
.pd-shot img { width: 100%; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.pd-shot figcaption { font-size: 12px; color: var(--dim); margin-top: 7px; text-align: center; }
.pd-qs { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.pq h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 640; }
.pq-help { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-bottom: 9px; }
.pq-opts { display: flex; flex-direction: column; gap: 7px; }
.pq-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.pq-opt .pq-crop { flex: none; width: 96px; height: 34px; border-radius: 6px; overflow: hidden;
  background: var(--soft); display: flex; align-items: center; justify-content: center; }
.pq-opt .pq-crop img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pq-tx { flex: 1; min-width: 0; }
.pq-tx b { display: block; font-size: 14.5px; font-weight: 600; }
.pq-tx i { display: block; font-style: normal; font-size: 12px; color: var(--dim); margin-top: 1px; }
.pq-tick { flex: none; opacity: 0; color: var(--cyan); transition: opacity .12s ease; }
.pq-tick .icon { width: 18px; height: 18px; }
.pq-opt.on { border-color: var(--cyan); background: var(--card); box-shadow: inset 0 0 0 1px var(--cyan); }
.pq-opt.on .pq-tick { opacity: 1; }
@media (hover: hover) { .pq-opt:hover { border-color: var(--dim2); } }

.pq-in { display: flex; align-items: center; gap: 8px; }
.pq-in input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.pq-in input:focus { outline: none; border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.pq-unit { font-size: 13px; color: var(--dim); flex: none; }

.pd-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 18px;
  border-top: 1px solid var(--line); background: var(--soft); }

/* 结果 */
.pr { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-head b { font-size: 15.5px; font-weight: 640; }
.pr-shot { margin: 11px 0; }
.pr-shot img { width: 100%; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.pr-meth { margin-top: 11px; }
.pr-meth summary { cursor: pointer; font-size: 13px; color: var(--dim); }
.pr-meth p { font-size: 14px; line-height: 1.75; margin: 8px 0; }

@media (max-width: 620px) {
  /* 手机上做成底部抽屉，和 Snap 面板同一个手势语言：从下往上来，拇指够得着按钮。
     注意 column + wrap 会往右换列把问题甩出屏幕，必须 nowrap。 */
  .plugdlg { position: fixed; inset: auto 0 0 0; margin: 0; width: 100vw; max-height: 92vh; }
  .pd { width: 100vw; max-height: 92vh; border-radius: 20px 20px 0 0;
        animation: pdUp .24s cubic-bezier(.2, .9, .3, 1); }
  .pd-body { flex-direction: column; flex-wrap: nowrap; }
  .pd-shot, .pd-qs { flex: 0 0 auto; width: 100%; }
  .pd-shot img { max-height: 30vh; width: auto; margin: 0 auto; }
  .pd-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}
@keyframes pdUp { from { opacity: .4; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

/* 超窄屏（320–360px 档）：文件夹格子再缩一档保住两列，条目缩略图也收小。
   必须放在文件末尾 —— .fgrid / .fcov / .it 的基础规则在前面，同权重靠顺序赢。 */
@media (max-width: 420px) {
  .fgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .fold { padding: 13px; border-radius: 17px; }
  .fcov { height: 60px; margin-bottom: 9px; }
  .tools { gap: 8px; }
  .it { gap: 11px; padding: 10px; }
  .th { width: 56px; height: 56px; }
}