/* Beayy 网页界面：壳和页面按墨线（vendor/moxian/，令牌和组件），作息图、一天的形状、读数按设计系统「人生记录」，
   实现取自 网站/static/style.css，变量加 rec- 前缀，免得和墨线同名。这里不写墨线已有的样式。 */

/* 人生记录的数据颜色：只编码数据源（电脑、手机、手表、位置）和越界（熬夜）。
   2026-10-29 起照 Claude 设置页的配色——电脑用 Claude 的蓝（墨线 focus）、手机用 Claude 的琥珀（墨线 warn）、
   说话用同样轻重的绿、熬夜用墨线 risk；轨道是不带色偏的中性灰，路上（--rec-go）深一档的灰。
   地点 6 种淡色（--pl-1…6：薰衣草、玫瑰、青、珊瑚、暖石、橄榄），色相避开电脑蓝、手机琥珀、说话绿，按地名固定分配（app.js placeTones）
   每种淡色配一档同色相的实色（--pl-N-s，路上、其他地方是 --rec-go-s）：淡色只作带文字的底，细条和色块边用实色，
   和轨道、页底的对比不低于 3:1（WCAG 1.4.11，2026-10-30）
   收支的图给消费类型上色借地点的实色（--mn-1…5，按这个顺序相邻的色差最大；暖石太灰不用），别的类并成灰色的「其余」（--mn-rest）；
   用 dataviz 的 validate_palette 查过：相邻色正常视力都分得开，红绿色弱有两对偏近，靠图例和 2px 间隔区分（2026-11-04） */
:root {
  --mn-1: var(--pl-3-s); --mn-2: var(--pl-4-s); --mn-3: var(--pl-1-s); --mn-4: var(--pl-6-s); --mn-5: var(--pl-2-s); --mn-rest: var(--rec-go);
  --rec-computer: #2a78d6; --rec-phone: #fab219; --rec-night: #d03b3b; --rec-track: #efefed;
  --rec-watch: #26a269; --rec-place: #dededb; --rec-place-alt: #cbcac6;
  --rec-go: #cbcac6;
  --pl-1: #dcd5f6; --pl-2: #f4d5de; --pl-3: #cfe8ea; --pl-4: #f3d9cc; --pl-5: #e7ddd2; --pl-6: #e2e8c8;
  --pl-1-s: #8a7dd6; --pl-2-s: #c25e7d; --pl-3-s: #3a8c92; --pl-4-s: #c26d4a; --pl-5-s: #94806a; --pl-6-s: #7a873a; --rec-go-s: #8b8a85;
  --crayon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-2%25' y='-40%25' width='104%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.8 2.1' result='g'/%3E%3CfeComposite in='d' in2='g' operator='in'/%3E%3C/filter%3E%3Cpath filter='url%28%23c%29' fill='%238fb5a4' fill-opacity='0.6' d='M2 9C40 7.6 90 7.2 140 7.8S210 8.4 238 7.6v14.4C200 23.2 150 22.4 100 22.8S30 23.4 2 22.2z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rec-computer: #4a90e8; --rec-phone: #f5b532; --rec-night: #f06a6a; --rec-track: #262626; --rec-watch: #3ec07f; --rec-place: #3a3a39; --rec-place-alt: #4b4b49;
    --rec-go: #4b4b49; --pl-1: #3f3868; --pl-2: #5c3444; --pl-3: #285152; --pl-4: #5e3e30; --pl-5: #4d4238; --pl-6: #46502c;
    --pl-1-s: #8a80d0; --pl-2-s: #c9708a; --pl-3-s: #4f9ea3; --pl-4-s: #c97d5c; --pl-5-s: #9e8b76; --pl-6-s: #8f9b4e; --rec-go-s: #7a7973;
    --crayon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-2%25' y='-40%25' width='104%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.8 2.1' result='g'/%3E%3CfeComposite in='d' in2='g' operator='in'/%3E%3C/filter%3E%3Cpath filter='url%28%23c%29' fill='%238fb5a4' fill-opacity='0.45' d='M2 9C40 7.6 90 7.2 140 7.8S210 8.4 238 7.6v14.4C200 23.2 150 22.4 100 22.8S30 23.4 2 22.2z'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] { --rec-computer: #4a90e8; --rec-phone: #f5b532; --rec-night: #f06a6a; --rec-track: #262626; --rec-watch: #3ec07f; --rec-place: #3a3a39; --rec-place-alt: #4b4b49;
  --rec-go: #4b4b49; --pl-1: #3f3868; --pl-2: #5c3444; --pl-3: #285152; --pl-4: #5e3e30; --pl-5: #4d4238; --pl-6: #46502c;
    --pl-1-s: #8a80d0; --pl-2-s: #c9708a; --pl-3-s: #4f9ea3; --pl-4-s: #c97d5c; --pl-5-s: #9e8b76; --pl-6-s: #8f9b4e; --rec-go-s: #7a7973;
  --crayon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-2%25' y='-40%25' width='104%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.8 2.1' result='g'/%3E%3CfeComposite in='d' in2='g' operator='in'/%3E%3C/filter%3E%3Cpath filter='url%28%23c%29' fill='%238fb5a4' fill-opacity='0.45' d='M2 9C40 7.6 90 7.2 140 7.8S210 8.4 238 7.6v14.4C200 23.2 150 22.4 100 22.8S30 23.4 2 22.2z'/%3E%3C/svg%3E"); }

/* ---------- 壳：侧栏＋正文，没有顶栏 ---------- */
html, body { height: 100%; }
body { padding: 0; overflow: hidden; }
.shell { display: flex; height: 100vh; }
.mx-side { flex: none; height: 100vh; overflow: hidden; }
.mx-side-head { height: 44px; flex: none; }
/* 照 Claude：侧栏收起就整个藏起来；窗口按钮右边固定一组 收起／后退／前进 */
:root[data-side="collapsed"] .mx-side { display: none; }
.titlebar { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 5; }
/* 三个按钮 28 点高，中线对齐红绿灯（Overlay 标题栏里红绿灯中心在第 16 点） */
.win-tools { position: fixed; top: 8px; left: 12px; z-index: 6; display: flex; gap: 4px; }
.is-tauri .win-tools { top: 2px; left: 80px; }
.is-tauri.is-win .win-tools { top: 8px; left: 12px; }
.win-tools .mx-iconbtn { width: 28px; height: 28px; color: var(--ink-2); }
.win-tools .mx-iconbtn:disabled { color: var(--ink-4); opacity: .45; cursor: default; background: none; }
.win-tools .mx-ico { width: 18px; height: 18px; }
.mx-side-foot { display: flex; gap: var(--space-2); align-items: flex-start; padding: 12px 8px 4px; }
.dot { width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: var(--radius-pill); background: var(--ink-4); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }

.body { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; background: var(--page); }
.page { max-width: calc(var(--reading-width) + 80px); margin: 0 auto; padding: 56px 40px var(--space-7); box-sizing: border-box; }
.page > .mx-head { margin-bottom: var(--space-6); }
.mx-head-row { min-height: 32px; }
.reading { max-width: var(--reading-width); }
.form { max-width: var(--form-width); }
/* 设置页：左边分区导航（设计系统 SubNav）＋右边正文；窄屏分区收成页名下面一排 */
.set-wrap { display: flex; align-items: flex-start; gap: var(--space-6); }
.set-wrap > .form { flex: 1; min-width: 0; }
@media (max-width: 759px) {
  .set-wrap { flex-direction: column; gap: var(--space-4); }
  .set-wrap > .mx-subnav { flex-direction: row; width: auto; max-width: 100%; overflow-x: auto; }
  .set-wrap > .mx-subnav button { flex: none; }
}
.note { font-size: 13px; line-height: 17px; color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mx-sec-head h2 { font-size: 15px; }
.mx-empty-inline { margin: 0; }
/* 今天页「全面」：段与段之间只靠留白，不画分割线（2026-10-29 起；墨线这里是留白加细线） */
.secs-plain > .mx-sec + .mx-sec { margin-top: var(--space-7); padding-top: 0; border-top: 0; }
.mx-confirm { margin-bottom: var(--space-5); }

/* 键盘焦点：墨线只给自己的组件配了焦点框，这里补上页面自己的按钮、链接、可聚焦元素，不留浏览器默认的（会是系统强调色） */
:where(button, a[href], summary, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 一天的形状里的格子挨得紧，焦点框画在格子上面 */
.strip-wrap [role="button"]:focus-visible { outline-offset: 0; position: relative; z-index: 1; }
.place-bar i[role="button"]:focus-visible { position: absolute; }

/* ---------- Readout 读数（人生记录） ---------- */
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-5); }
.ro .label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.ro .v { font: 500 30px/34px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: var(--space-1) 0; }
.ro .v small { font: 400 13px/20px var(--font-sans); color: var(--ink-3); margin-left: var(--space-1); }
.ro.none .v { color: var(--ink-4); }
/* 只给读屏念的字 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ro.over .v { color: var(--rec-night); }

/* ---------- DayStrip 一天的形状、Actogram 作息图（人生记录） ---------- */
.strip, .strip-axis { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 2px; }
.strip { row-gap: 3px; }
.strip-rows { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; row-gap: 3px; }
.strip-rows:lang(en) { grid-template-columns: max-content minmax(0, 1fr); }  /* 英文行名（Computer、Conversations）比两个汉字宽 */
.strip-rows > .k { font-size: 11px; line-height: 16px; color: var(--ink-4); white-space: nowrap; }
.strip span { height: 22px; border-radius: 2px; background: var(--rec-track); }
/* 今天还没到的小时格只留空框 */
.strip span.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--rec-track); }
/* 地点：一整条，底色是轨道，每段停留按起止画在上面，颜色跟着地方走；两段之间的路上是灰色块 */
.place-bar { position: relative; height: 22px; border-radius: 2px; background: var(--rec-track); }
.place-bar i { position: absolute; top: 0; bottom: 0; box-sizing: border-box; padding: 0 6px; border-radius: 2px; font: 11px/22px var(--font-sans); font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--edge, transparent); }  /* 淡色底上压一道实色边（--edge＝那个地方的 --pl-N-s），细段也认得出颜色 */
.place-bar i:hover { outline: 1px solid var(--ink-4); outline-offset: -1px; }
.place-bar i.go { background: var(--rec-go); color: var(--ink-3); --edge: var(--rec-go-s); }
/* 最近 14 天（照 Wise 支出洞察）：每天两根柱子，看的这一天实色、其他天淡 */
.rd { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: var(--space-1); }
.rd-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-1) 0 0; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; }
.rd-col:hover:not(:disabled) { background: var(--hover); }
.rd-col:disabled { cursor: default; }
.rd-bars { display: flex; justify-content: center; align-items: flex-end; gap: 2px; height: 56px; border-bottom: 1px solid var(--line); }
.rd-bars i { width: 30%; max-width: 10px; border-radius: 2px 2px 0 0; opacity: 0.35; }
.rd-bars i.c { background: var(--rec-computer); }
.rd-bars i.p { background: var(--rec-phone); }
.rd-col.is-cur .rd-bars i { opacity: 1; }
.rd-d { font-size: 11px; line-height: 16px; color: var(--ink-4); text-align: center; font-variant-numeric: tabular-nums; }
.rd-col.is-cur .rd-d { color: var(--ink); font-weight: 600; }
.rd-col.none:disabled .rd-d { opacity: 0.5; }  /* 只淡掉点不了的；今天还能点，字不淡 */
.strip-axis { margin-top: var(--space-1); font: 11px/16px var(--font-mono); color: var(--ink-4); }
/* 一天的形状的钟点：每 3 小时一个，写成 03:00，左对齐那个小时格的左边（不画刻度线） */
.strip-axis { margin-top: var(--space-1); font-size: 12px; color: var(--ink-3); }
.strip-axis span.t { white-space: nowrap; }
.strip-axis span.t small { font-size: inherit; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-3); font-size: 13px; line-height: 20px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-1); vertical-align: -1px; }

/* ---------- 时间线：电脑、手机按时间穿插，新的在上 ---------- */
.tl-row { position: relative; border-bottom: 1px solid var(--line); }
.tl-row > summary, div.tl-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 16px; gap: var(--space-3); padding: 12px; }
.tl-row > summary { border-radius: var(--radius-lg); }
div.tl-row { grid-template-columns: 92px minmax(0, 1fr); }
.tl-row > summary { list-style: none; cursor: pointer; }
.tl-row > summary::-webkit-details-marker { display: none; }
.tl-row > summary:hover { background: var(--hover); }
.tl-row .t { font: 12px/20px var(--font-mono); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tl-row .name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 500; }
.tl-row .desc { margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--ink-3); }
.tl-row.idle, .tl-row.brief { padding-top: 8px; padding-bottom: 8px; color: var(--ink-4); font-size: 13px; line-height: 20px; }
.tl-row.brief .name { font-weight: 400; }
.tl-row .where { margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.tl-row.place .name { font-weight: 400; }
.tl-row .talk-line { margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--ink-3); }
.utts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 20px; }
.utts li { display: grid; grid-template-columns: 64px 52px minmax(0, 1fr); gap: var(--space-2); }
.utts .ut { font: 12px/20px var(--font-mono); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.utts .who { color: var(--ink-3); white-space: nowrap; }
.utts .who.self { color: var(--ink); font-weight: 500; }
/* 去了哪：上面按地点合计的条，下面一个停留一行（点了起名） */
.pl-bars { margin-bottom: var(--space-4); }
.bar i.pl { background: var(--rec-go-s); }
.bar i.go { background: var(--rec-go-s); }
.bar i.none { background: var(--line); }
.bar-name.dim { color: var(--ink-4); }
.visits { display: flex; flex-direction: column; }
.visits .v-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 36px; gap: var(--space-3); align-items: baseline; width: 100%; margin: 0; padding: 8px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.visits .v-row:hover { background: var(--hover); border-radius: var(--radius-lg); }
.visits .v-row .t, .visits .v-row .d { font: 12px/20px var(--font-mono); color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visits .v-row .sub { margin-left: var(--space-2); font-size: 12px; color: var(--ink-4); }
.visits .v-row .act { font-size: 13px; color: var(--ink-4); text-align: right; }
.visits .v-row:hover .act { color: var(--accent-ink); }
.visits div.v-row { cursor: default; }
.visits div.v-row:hover { background: none; }
.visits .v-row .nm { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.visits .v-row .nm:hover { color: var(--accent-ink); }
.visits .v-row .act { border: 0; background: none; padding: 0; font: 13px/20px var(--font-sans); cursor: pointer; }
.visits .v-row .act:hover { color: var(--accent-ink); }
.visits .v-row .doing { margin-left: var(--space-2); font-size: 12px; color: var(--ink-3); }
.visits .v-row .tag { margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink-3); font: 11px/18px var(--font-sans); cursor: pointer; }
.visits .v-row .tag:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.visits .v-row .ok { margin-left: var(--space-2); color: var(--ok, #009300); }
.visits .v-row .ok .mx-ico { width: 14px; height: 14px; vertical-align: -2px; }
/* 前三个候选：点一下就确认 */
.visits .v-row .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.visits .v-row .chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 12px/20px var(--font-sans); cursor: pointer; }
.visits .v-row .chip span { font: 11px/20px var(--font-mono); color: var(--ink-4); }
.visits .v-row .chip:hover { border-color: var(--ink-3); background: var(--hover); }
.visits .v-row .chip.more { color: var(--ink-4); border-style: dashed; }
.visits .v-row .guess { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--ink-3); white-space: normal; }
/* 地图视图：高德静态图，下面一个停留一行（编号对上图里的标注） */
.pl-map-img { margin-bottom: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; background: var(--rec-track); min-height: 120px; }
.pl-map-img img { display: block; width: 100%; height: auto; }
.pl-map-img .note { padding: var(--space-4); margin: 0; }
.visits .v-row.map { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.visits .v-row .k { font: 12px/20px var(--font-mono); color: var(--ink-2); text-align: center; border: 1px solid var(--line-strong); border-radius: 999px; height: 20px; }
/* 这次在哪、添加地方：一行一个地点，点了就选 */
.pick-list { display: flex; flex-direction: column; margin-top: 4px; max-height: 300px; overflow: auto; }
.pick-row { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.pick-row:hover { background: var(--hover); border-radius: var(--radius-md); }
.pick-row .pk-n { flex: 1; min-width: 0; }
.pick-row .pk-t { margin-left: var(--space-2); font-size: 12px; color: var(--ink-4); }
.pick-row .pk-r { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
/* 设置里的常去的地方：一行一个，点了改 */
.pl-labels { display: flex; flex-direction: column; margin: 8px 0; }
.mx-setting.pl-label { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mx-setting.pl-label:hover { background: var(--hover); border-radius: var(--radius-lg); }
.mx-setting.pl-label .act { font-size: 13px; color: var(--ink-4); }
/* 手机页签按地点分组：每组一行标题 */
.tl-place { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: var(--space-5) 12px 6px; border-bottom: 1px solid var(--line); }
.tl-place .t, .tl-place .d { font: 12px/20px var(--font-mono); color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-place .n { font-size: 15px; line-height: 20px; font-weight: 600; }
.tl-place .n i { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 2px; background: var(--rec-go-s); vertical-align: -1px; }
.tl-place.gap .n { font-size: 13px; font-weight: 400; color: var(--ink-4); }
.tl > .tl-place:first-child { padding-top: var(--space-2); }
.tl-row .chev { margin-top: 2px; color: var(--ink-4); transition: transform .15s; }
.tl-row[open] > summary .chev { transform: rotate(90deg); }
.tl-row .more { padding: 0 12px var(--space-4) calc(92px + 36px); display: flex; flex-direction: column; gap: var(--space-4); }
.tl-row .more .more-k { margin: 0 0 var(--space-2); font-size: 12px; line-height: 17px; font-weight: 400; color: var(--ink-4); }
.tl-row.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--hover); } to { background: transparent; } }
.apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ico { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--hover); color: var(--ink-3); font: 600 10px/1 var(--font-sans); overflow: hidden; }
.ico.has-img { background: none; }
/* 「全部」每小时一行里：电脑、手机用过的 app 图标 */
.hour-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.hour-apps .apps { margin-top: 0; }
.hour-apps .lbl { font-size: 11px; color: var(--ink-4); }
.hour-apps .apps + .lbl { margin-left: 6px; }
/* 「怎么设置」链接和弹层里的步骤 */
.howto { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.howto:hover { color: var(--ink); }
.steps { margin: 0 0 var(--space-3); padding-left: 20px; line-height: 1.7; }
.dot.warn { background: var(--warn); }
/* 设置「连接」官方服务的用量条 */
.usebar { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--hover); overflow: hidden; max-width: 360px; }
.usebar i { display: block; height: 100%; background: var(--ink-3); }
.usebar i.hot { background: var(--warn); }
/* 收支页：工具栏照 Claude 的（页签｜分段 … 看哪个月、搜索、筛选、排序、主按钮）；概览的趋势、每天、分类条；明细表；弹层里改类型 */
.empty-acts { display: flex; align-items: center; gap: var(--space-4); }
.bill-toolbar .toolbar-right { gap: var(--space-1); }
.bill-search { width: 176px; }
.bill-month { gap: 4px; padding: 0 8px 0 12px; font-variant-numeric: tabular-nums; }
.bill-month .mx-ico, .bill-pickbtn .mx-ico { width: 14px; height: 14px; color: var(--ink-3); }
.pick .mx-menu .bill-year { font-weight: 500; }
.bill-add .mx-btn { gap: 6px; padding-right: 10px; }
.bill-add .mx-btn .mx-ico { width: 14px; height: 14px; }
.bill-chips { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.bill-chips[hidden] { display: none; }
.bill-sum { margin: 0 0 var(--space-4); font-size: 13px; color: var(--ink-3); }
/* 读数五个一排（支出、消费、收入、结余、储蓄率），窄了字小一号，不让储蓄率单独掉到第二行 */
#bill-body .readouts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mx-table.bills tbody tr, .mx-table.bills-to tbody tr, .mx-table.bills-ct tbody tr:not(.bill-open), .mx-table.bills-who tbody tr, .mx-table.bill-imports tbody tr { cursor: pointer; }
.mx-table.bills .b-time { width: 88px; }
.mx-table.bills .b-cat { width: 80px; }
.mx-table.bills .b-method { width: 120px; }
.mx-table.bills .b-src { width: 48px; }
.mx-table.bills .b-amt { width: 104px; }
.mx-table.bills-to th:not(:first-child), .mx-table.bills-who th:not(:first-child) { width: 112px; }
.mx-table.bills-who .b-time { width: 72px; }
.mx-table.bills-ct th:not(:first-child):not(.b-bar) { width: 104px; }
.mx-table.bill-imports .b-range { width: 168px; }
.mx-table.bill-imports .b-n { width: 56px; }
.mx-table.bill-imports .b-chk { width: 88px; }
.mx-table.bill-imports .b-at { width: 120px; }
.mx-table .is-num small { margin-left: 6px; font-size: 12px; color: var(--ink-4); }
.mx-table .bill-void { color: var(--ink-4); text-decoration: line-through; }
.mx-table .bill-muted td, .mx-table td.bill-dim { color: var(--ink-4); }
.mx-table .mx-tag { margin-left: 6px; }
.bill-up { color: var(--warn-ink); }
.bill-tag-up { color: var(--warn-ink); }
.bill-new { font-size: 12px; color: var(--ink-3); }
.bills-more { margin-top: var(--space-4); }
.bill-err { color: var(--risk-ink); }
.bill-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 分类条：占比，墨色细条 */
.bill-bar { display: block; height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.bill-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.bill-bar-td { vertical-align: middle; }
/* 分类页展开的一行：近 12 个月的小柱、主要商户 */
.mx-table tr.bill-open td { height: auto; padding: 12px; white-space: normal; background: var(--sunken); }
.mx-table tr.bill-open:hover td { background: var(--sunken); }
.bill-open-in { display: flex; gap: var(--space-6); align-items: flex-end; flex-wrap: wrap; }
.bill-spark { display: flex; gap: 4px; align-items: flex-end; height: 48px; }
.bill-spark i { display: block; width: 10px; border-radius: 2px; background: var(--c, var(--ink-3)); opacity: 0.45; }
.bill-spark i:last-child { opacity: 1; }
.bill-open-top { display: flex; flex-direction: column; gap: 2px; min-width: 240px; flex: 1; }
.bill-open-top > button:not(.mx-btn) { display: flex; justify-content: space-between; gap: var(--space-4); padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: 13px/18px var(--font-sans); text-align: left; cursor: pointer; }
.bill-open-top > button:not(.mx-btn):hover { background: var(--hover); }
.bill-open-top .mx-btn { align-self: flex-start; margin-top: 4px; }
/* 近 12 个月的消费：墨色柱，截断的顶上写实际金额 */
/* 收支的竖柱：每根按消费类型堆起来，类和类之间留 2px（透明边，悬停的底色透过来）；截断的柱顶上写金额 */
.mn-cols { display: flex; gap: var(--space-2); }
.mn-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.mn-col:disabled { cursor: default; }
.mn-col:not(:disabled):hover, .mn-col.is-on { background: var(--hover); }
.mn-stack { position: relative; display: flex; flex-direction: column-reverse; width: min(28px, 64%); height: 120px; box-shadow: 0 1px 0 var(--line); }
.mn-stack i { display: block; flex: none; box-sizing: border-box; }
.mn-stack i + i { border-bottom: 2px solid transparent; background-clip: padding-box; }
.mn-stack i:last-child { border-radius: 3px 3px 0 0; }
.mn-stack.is-cut::after { content: ""; position: absolute; left: -3px; right: -3px; top: 10px; height: 3px; background: var(--page); transform: skewY(-14deg); }
.mn-col:hover .mn-stack.is-cut::after, .mn-col.is-on .mn-stack.is-cut::after { background: color-mix(in srgb, var(--ink) 5%, var(--page)); }
.mn-cut { position: absolute; top: 2px; font-size: 11px; line-height: 14px; color: var(--ink-2); white-space: nowrap; }
.mn-l { padding-bottom: 4px; font: 11px/14px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-4); }
.mn-col.is-on .mn-l { color: var(--ink); font-weight: 600; }
.mn-days { gap: 2px; }
.mn-days .mn-col { padding-top: 16px; }
.mn-days .mn-stack { width: min(14px, 72%); height: 72px; }
.mn-days .mn-col.is-later .mn-l { color: var(--ink-disabled); }
.mn-legend { margin-top: var(--space-3); gap: var(--space-4); }
.mn-view { height: 28px; }
.mn-view button { padding: 0 8px; font-size: 13px; }

/* 占比：圆环（块和块之间 2px 页底色），中间写合计，右边一行一块 */
.mn-donut { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.mn-ring { position: relative; width: 168px; height: 168px; }
.mn-ring svg { display: block; width: 100%; height: 100%; }
.mn-ring path { stroke: var(--page); stroke-width: 2; stroke-linejoin: round; }
.mn-ring path[data-ctype] { cursor: pointer; }
.mn-ring path[data-ctype]:hover { opacity: 0.85; }
.mn-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.mn-ring-c span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.mn-ring-c b { font-size: 18px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mn-dl { display: flex; flex-direction: column; }
.mn-dl-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 48px 112px; align-items: center; gap: var(--space-3); padding: 8px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; }
button.mn-dl-row { cursor: pointer; }
button.mn-dl-row:hover { background: var(--hover); border-radius: var(--radius-md); }
.mn-dl-row i { width: 10px; height: 10px; border-radius: 2px; }
.mn-dl-row .mx-num { text-align: right; }
.mn-dl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-dl-name small { margin-left: var(--space-2); font-size: 12px; color: var(--ink-3); }

.bill-alerts { display: flex; flex-direction: column; }
.bill-alert { display: flex; align-items: center; gap: var(--space-3); padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.bill-alert:hover { background: var(--hover); border-radius: var(--radius-md); }
.bill-alert .mx-status { flex: none; }
.bill-alert-act { margin-left: auto; font-size: 13px; color: var(--accent-ink); white-space: nowrap; }
/* 这个月的钱（AI 写的） */
.bill-insight { margin-top: 0; }
.bill-insight h2, .bill-insight h3 { font-size: 15px; }
.bill-insight-empty { display: flex; align-items: center; gap: var(--space-4); color: var(--ink-3); font-size: 14px; }
/* 预算 */
.bill-budgets { display: flex; flex-direction: column; gap: var(--space-3); }
.bill-budget { display: grid; grid-template-columns: minmax(0, 1fr) 160px 200px; align-items: center; gap: var(--space-4); font-size: 14px; }
.bill-budget > span:last-child { text-align: right; }
/* 一笔的详情、一份账单的详情（弹层） */
.bill-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bill-facts .is-wide { grid-column: 1 / -1; }
.bill-facts dd { overflow-wrap: anywhere; }
.bill-edit { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bill-edit .mx-field[hidden] { display: none; }
.bill-edit .mx-field label { display: flex; align-items: center; gap: var(--space-2); }
.bill-by { font-size: 12px; font-weight: 400; color: var(--ink-4); }
.bill-pickbtn { gap: 6px; min-width: 160px; justify-content: space-between; }
.bill-edit .pick .mx-menu { left: 0; right: auto; }
.bill-remember { padding: 0; }
.bill-raw-h { margin: var(--space-5) 0 var(--space-2); padding: 0; }
.bill-raw { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; font-size: 13px; }
.bill-raw dt { color: var(--ink-4); }
.bill-raw dd { margin: 0; overflow-wrap: anywhere; user-select: text; }
.bill-del { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bill-del-btn { color: var(--risk-ink); }
.bill-meta { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-2); user-select: text; }
@media (max-width: 1099px) { #bill-body .readouts .v { font-size: 24px; } .mx-table.bills .b-method, .mx-table.bills td:nth-child(5) { display: none; } .mx-table.bills-to th:not(:first-child), .mx-table.bills-who th:not(:first-child) { width: 96px; } .mx-table.bills-who .b-time { width: 56px; } .mx-table.bills-ct th:not(:first-child):not(.b-bar) { width: 88px; } .bill-budget { grid-template-columns: minmax(0, 1fr) 120px; } .bill-budget .bill-bar { display: none; } }
@media (max-width: 759px) { .mx-table.bills-to th:not(:first-child), .mx-table.bills-who th:not(:first-child), .mx-table.bills-ct th:not(:first-child):not(.b-bar) { width: 72px; } .mx-table.bills .b-time { width: 88px; } .mx-table.bills .b-amt { width: 96px; } .mx-table.bills th:nth-child(3), .mx-table.bills td:nth-child(3), .mx-table.bills .b-cat, .mx-table.bills td:nth-child(4), .mx-table.bills .b-src, .mx-table.bills td:nth-child(6) { display: none; } .mx-table.bill-imports .b-range, .mx-table.bill-imports td:nth-child(2), .mx-table.bill-imports .b-at, .mx-table.bill-imports td:nth-child(6) { display: none; } .mx-table.bills-ct .b-bar, .mx-table.bills-ct td:nth-child(2) { display: none; } .mn-donut { grid-template-columns: 1fr; justify-items: center; } .mn-dl { width: 100%; } .mn-days .mn-col:not(.is-tick) .mn-l { visibility: hidden; } .mn-cols { gap: 4px; } .mn-days { gap: 1px; } }
/* 侧栏入口按条件藏起来（游戏关着、手机上的收支）：设计系统给 a 写了 display，盖过了 hidden */
.mx-nav a[hidden] { display: none; }
/* 游戏页：账号写在页头右边；读数五个一排；每天的柱沿用收支的 mn-days；什么时候玩（一天一行、24 小时横轴，时刻等宽）；对局表；一局的弹层 */
.gm-who { margin-right: var(--space-3); font-size: 13px; color: var(--ink-3); }
#gm-body .readouts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#gm-body .readouts.gm-ro4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-tl { display: grid; gap: 6px; }
.gm-tl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.gm-tl-d { font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tl-track { position: relative; height: 14px; border-radius: 3px; background: var(--rec-track); }
.gm-tl-track i { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 2px; background: var(--rec-computer); }
.gm-tl-track i.is-night { background: var(--rec-night); }
.gm-tl-ticks { position: relative; height: 16px; }
.gm-tl-ticks span { position: absolute; transform: translateX(-50%); font: 11px/16px var(--font-mono); color: var(--ink-4); }
.gm-tl-ticks span:first-child { transform: none; }
.gm-tl-ticks span:last-child { transform: translateX(-100%); }
.mx-table.gm-t tbody tr[data-game], .mx-table.gm-t tbody tr[data-gchamp] { cursor: pointer; }
.mx-table.gm-t th:first-child { width: auto; }
.mx-table.gm-champs .g-n { width: 40px; }
.mx-table.gm-champs .g-kda { width: 104px; }
.mx-table.gm-champs .g-dmg, .mx-table.gm-champs .g-dur { width: 64px; }
.mx-table.gm-apps .g-n { width: 56px; }
.mx-table.gm-apps .g-dur { width: 80px; }
.mx-table.gm-games .g-time { width: 40px; }
.mx-table.gm-games .g-res { width: 32px; }
.mx-table.gm-games th.is-num { width: 64px; }
.mx-table.gm-games th.is-num:nth-child(6) { width: 88px; }
.mx-table.gm-players th.is-num { width: 64px; }
.mx-table.gm-players th.is-num:last-child { width: 40px; }
.mx-table.gm-games tr.is-remake td { color: var(--ink-4); }
.gm-sub { margin-left: 6px; font-size: 12px; color: var(--ink-4); }
.mx-dialog.gm-dlg { width: min(720px, 100%); }
.gm-dlg .mx-dialog-body > * { flex: none; }
.gm-facts { margin-bottom: var(--space-2); }
.gm-team { margin: var(--space-5) 0 var(--space-2); font-size: 13px; line-height: 20px; font-weight: 600; }
.mx-table.gm-players tr.is-me td { font-weight: 600; }
.gm-bans { margin: var(--space-2) 0 0; font-size: 12px; color: var(--ink-4); }
@media (max-width: 759px) { #gm-body .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm-tl-row { grid-template-columns: 76px minmax(0, 1fr); } .mx-table.gm-games th:nth-child(2), .mx-table.gm-games td:nth-child(2), .mx-table.gm-games th:nth-child(7), .mx-table.gm-games td:nth-child(7) { display: none; } .mx-table.gm-players th:nth-child(5), .mx-table.gm-players td:nth-child(5), .mx-table.gm-players th:nth-child(6), .mx-table.gm-players td:nth-child(6) { display: none; } }
/* 设置「数据」页的表 */
.mx-table.store th:last-child { width: 32%; }
.mx-table.store .num { width: 15%; text-align: right; }
.mx-table.store td:first-child, .mx-table.store td:last-child { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
.mx-table.store td:last-child { color: var(--ink-3); padding-left: 24px; }
.mx-table.store th:last-child { padding-left: 24px; }
.ico img { width: 100%; height: 100%; object-fit: contain; }
.ico[data-p="1"] img { border-radius: 4px; }
.strip [data-h] { cursor: pointer; }
.strip [data-h]:hover { outline: 1px solid var(--ink-4); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .tl-row .chev { transition: none; } .tl-row.flash { animation: none; } }

/* ---------- Markdown（日总结、经过） ---------- */
.md { font-size: 14px; line-height: 24px; max-width: 42em; }
.md p { margin: 0 0 var(--space-2); }
.md h5 { margin: var(--space-3) 0 var(--space-1); font-size: 13px; line-height: 17px; font-weight: 600; color: var(--ink-3); }
.md h5:first-child { margin-top: 0; }
.md ol, .md ul { margin: 0 0 var(--space-2); padding-left: 1.4em; }
.md li { margin: 0 0 var(--space-1); }
.md code { font: 13px var(--font-mono); background: var(--hover); padding: 1px 4px; border-radius: 4px; }
.quote { margin: 0; font-size: 18px; line-height: 30px; max-width: 36em; }
/* 总结页的导语（一句话）：“” 包住，大字加粗、不配图标；生成时间等说明在悬停里 */
.lead { margin: var(--space-6) 0 0; max-width: 42em; font-size: 17px; line-height: 26px; font-weight: 600; }
/* 一句话下半截压一道蜡笔横线：颗粒、毛边，字照样看得清；折行时每行各画一道。颜色是主题色鼠尾草绿，同设计系统 brand-wash（10-30 由淡黄改：黄和手机数据的琥珀撞色）；
   画在 data URI 里引用不到变量，所以色值写在 --crayon 里，改主题色要两处一起改 */
.lead .crayon { padding: 0 0.2em; margin: 0 -0.2em; background: var(--crayon) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 点评：一句话（引号包住）下面，宋体，读起来像一段批注：引用一行、出处小字，下面正文 */
.remark { margin: var(--space-4) 0 0; max-width: 42em; font: 15px/26px var(--font-sans); color: var(--ink-2); }  /* 10-30 宋体改黑体：一页只有一种字 */
.remark p { margin: 0; }
.remark .rm-quote { color: var(--ink); font-size: 16px; }
.remark .rm-src { margin-left: var(--space-2); font: 12px/20px var(--font-sans); color: var(--ink-4); }
.remark .rm-quote + p { margin-top: var(--space-1); }
/* 总结的叙述段：段名在上、条目在下，段与段之间只靠留白；段名宋体（字距略开）、几项灰色小字跟在后面，
   条目正文略浅、行距宽，每条前挂一道细短横 */
.story { margin-top: var(--space-6); }
.story > .lg-row + .lg-row { margin-top: var(--space-6); }
.secs-plain > .story + .mx-sec { margin-top: var(--space-7); }
.lg-k { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.lg-k h2 { margin: 0; font: 600 15px/24px var(--font-sans); color: var(--ink); }
.lg-k span { font-size: 12px; line-height: 18px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.lg-list { list-style: none; margin: 0; padding: 0; max-width: 42em; font-size: 14px; line-height: 26px; color: var(--ink-2); }
.lg-list li { position: relative; padding-left: 18px; }
.lg-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--ink-4); }
.lg-list li + li { margin-top: var(--space-1); }
.lg-row > .md { max-width: 42em; color: var(--ink-2); }
.daynav > span.dn-date { display: inline-flex; align-items: center; }

/* ---------- 下拉：看哪一份 ---------- */
.pick { position: relative; }
.pick .mx-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; max-height: 360px; overflow-y: auto; }
.pick .mx-menu[hidden] { display: none; }
.pick .mx-menu button { font-variant-numeric: tabular-nums; }

/* ---------- 规矩 ---------- */
.rule { border-bottom: 1px solid var(--line); }
.rule .mx-row { height: auto; min-height: var(--list-row); padding: 8px 12px; border-bottom: 0; }
.rule .mx-row-name { white-space: normal; }
.rule.off .mx-row-name { color: var(--ink-3); }
.rule .acts { display: flex; gap: 2px; opacity: 0; }
.rule .mx-row:hover .acts, .rule .mx-row:focus-within .acts { opacity: 1; }
.rule .mx-confirm { margin: 0 0 var(--space-3); }

/* ---------- 设置 ---------- */
.form .mx-sec + .mx-sec { margin-top: var(--space-6); }
.form .mx-setting:last-child { border-bottom: 0; }
.mx-input { width: 100%; }
.mx-input.mono { font: 13px/20px var(--font-mono); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.inline { display: flex; gap: var(--space-2); }
.inline .mx-input { flex: 1; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.block { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.btns { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.adv { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.adv > summary { cursor: pointer; font-size: 13px; line-height: 20px; color: var(--ink-3); margin-bottom: var(--space-4); }
.adv:not([open]) > summary { margin-bottom: 0; }
/* 规矩对照结果：守住用正常墨色，没守住用越界色（人生记录：越界才上色） */
.verdict { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.verdict b { font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; }
.verdict.over, .verdict.over b { color: var(--rec-night); }
.verdict.muted { color: var(--ink-4); }

/* ---------- 侧栏：左下角照 Claude（头像＋名字·状态＋下拉，点开向上弹菜单）；设备有异常时导航上挂一个点 ---------- */
.side-fill { flex: 1; }
.me-wrap { position: relative; display: block; }
.me { position: relative; }
.me-dot { position: absolute; left: 28px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--sidebar); }
.mx-subnav .sub-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--warn); }
.me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-md, 8px); background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.me:hover, .me[aria-expanded="true"] { background: var(--hover); }
.avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--page); font-size: 12px; font-weight: 600; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 44px; height: 44px; font-size: 18px; }
.me .me-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .me-sub { color: var(--ink-4); }
.me .me-chev { flex: none; color: var(--ink-4); }
.me-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); width: auto; z-index: 20; }
.me-menu[hidden] { display: none; }
.me-menu button .mx-ico { flex: none; color: var(--ink-3); }
.mx-nav a { position: relative; }
.nav-dot { position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--warn); }

/* ---------- 设备 ---------- */
.devs { display: flex; flex-direction: column; }
.dev { border-bottom: 1px solid var(--line); }
.dev-head { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: var(--space-3); align-items: center; padding: 14px 12px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-lg); font: inherit; color: inherit; }
.dev-head:hover { background: var(--hover); }
.dev-ico { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--hover); color: var(--ink-2); }
.dev-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dev-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.dev-status { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.dev-status .dot { margin-top: 0; }
.dev .chev { color: var(--ink-4); transition: transform .15s; }
.dev.open .chev { transform: rotate(90deg); }
.dev-body { padding: 0 12px var(--space-5) calc(32px + 24px); }
.kv { display: grid; grid-template-columns: 80px 1fr; gap: 6px var(--space-3); margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; }
.kv dt { color: var(--ink-4); } .kv dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kv-wide { grid-template-columns: 140px 1fr; }
.kv-wide dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sleep-bar { height: 14px; }
.sleep-bar i { padding: 0; }
.dev-sub { font-size: 13px; line-height: 20px; color: var(--ink-3); margin-bottom: var(--space-3); }
.dev-h { margin: var(--space-4) 0 0; font-size: 12px; font-weight: 400; color: var(--ink-4); }
.add-dev { display: flex; flex-direction: column; gap: var(--space-4); }
.add-opt { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); font-size: 13px; line-height: 20px; }
.add-opt .mx-ico { margin-top: 2px; color: var(--ink-3); }
.add-opt b { display: block; font-weight: 500; color: var(--ink); }
.add-opt span { color: var(--ink-3); }

/* ---------- 多设备同步卡片 ---------- */
.sync-card { padding: var(--space-4); margin-bottom: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.sync-card .note { margin: 0; }
.sync-head { display: flex; align-items: center; justify-content: space-between; }
.sync-head b { font-weight: 500; }
.sync-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.sync-btns { justify-content: flex-start; }
.code-box { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); background: var(--hover); border-radius: var(--radius-md, 8px); }
.code-box code { flex: 1; min-width: 0; word-break: break-all; font-size: 12px; line-height: 18px; }
.warn-text { color: var(--rec-night); }

/* ---------- 页签行（照 Claude「自定义」页）：标题下面一行，左边纯文字页签、选中的带浅灰底，右边操作 ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.toolbar-right .tb-note { margin: 0 var(--space-2) 0 0; font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.toolbar-right { display: flex; align-items: center; gap: var(--space-1, 4px); margin-left: auto; }
.tabs { display: flex; align-items: center; gap: 2px; }
.tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-md, 8px); background: none; color: var(--ink-3); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.tabs button:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.tabs button.is-on { color: var(--ink); background: var(--hover); }
.tabs button:disabled { color: var(--ink-disabled, var(--ink-4)); cursor: default; }

/* Lucide 图标：24 格画布缩到 16 点，线宽 1.75（实际约 1.2 点），比手画的 16 格简笔更细更匀 */
.mx-ico.lu { stroke-width: 1.75; }

/* ---------- 时间花在哪：两列横条 ---------- */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.work h3 { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 400; color: var(--ink-4); }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 112px 1fr 40px 32px; gap: var(--space-2); align-items: center; padding: 2px 0; font-size: 13px; line-height: 20px; }
button.bar-row { width: 100%; margin: 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.bar-row:hover { background: var(--hover); }
.bar-kids { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bar-kids[hidden] { display: none; }
.bar-p { text-align: right; color: var(--ink-4); font-size: 12px; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bar { height: 8px; border-radius: 4px; background: var(--rec-track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--rec-computer); }
.bar-v { text-align: right; color: var(--ink-3); font-size: 12px; }
.work + .note { margin: var(--space-3) 0 0; }

/* ---------- 时间线「全部」：按小时 ---------- */
.tl-row.hour .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-row.hour .ph-line { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.tl-row.hour .name.dim { color: var(--ink-4); font-weight: 400; }
.hour-in { margin: 0 0 var(--space-3) calc(92px + 12px); border-left: 1px solid var(--line); }
.hour-in .tl-row:last-child { border-bottom: 0; }
.toolbar-left { display: flex; align-items: center; gap: var(--space-3); }
.tb-sep { width: 1px; height: 20px; background: var(--line); }
.toolbar .mx-seg .n { margin-left: 6px; font: 11px/16px var(--font-mono); color: var(--ink-4); }

/* ---------- 账号 ---------- */
.acct { display: flex; flex-direction: column; gap: var(--space-3); }
.acct .note { margin: 0; }
.sess { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sess-h { padding: 8px 0 4px; font-size: 12px; color: var(--ink-4); }
.sess-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; min-height: 32px; font-size: 13px; }
.sess-row > span:first-child { display: flex; align-items: center; gap: var(--space-2); }
.sess-row .note { margin: 0; font-size: 12px; }
a.mx-btn { text-decoration: none; }
.bar-row.kid { font-size: 12px; color: var(--ink-3); }
.bar-row.kid .bar-name { padding-left: 12px; color: var(--ink-3); }
.bar-row.kid .bar { height: 5px; }
.bar-row.kid .bar i { opacity: .55; }

/* ---------- 头像和名称、项目 ---------- */
.profile { display: flex; align-items: center; gap: var(--space-3); }
.pj-group { padding: var(--space-4) 0 4px; font-size: 12px; color: var(--ink-4); }
.pj-row { display: flex; gap: var(--space-2); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pj-main { flex: 1; min-width: 0; }
.pj-row [data-pj-edit] { opacity: 0; }
.pj-row:hover [data-pj-edit], .pj-row [data-pj-edit]:focus-visible { opacity: 1; }
.pj + .mx-field-error { margin-top: var(--space-2); }
.ac-msg { margin: var(--space-3) 0 0; }
.mx-setting > .profile { flex: 1; min-width: 0; }
/* 还没有总结：墨线的空状态底占满一行，说明在左、「现在生成」在右（说明单独缩成一块时像一条弹出的通知） */
/* 总结末尾：口径说明＋「重新生成」，一行小字，不抢正文 */
.sum-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.secs-plain > .sum-foot + .mx-sec { margin-top: var(--space-7); }
.week-days { display: flex; flex-direction: column; }
.week-days a { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; }
.week-days a:hover { background: var(--hover); }
.week-days .muted { color: var(--ink-3); }

/* ---------- 首次启动引导：盖住侧栏，居中一栏 ---------- */
:root.onboarding .mx-side, :root.onboarding .win-tools { display: none; }
.ob { max-width: 620px; margin: 0 auto; padding-top: 24px; display: flex; flex-direction: column; gap: var(--space-5); }
.ob-steps { display: flex; gap: var(--space-4); font-size: 12px; color: var(--ink-4); }
.ob-steps .is-on { color: var(--ink); font-weight: 500; }
.ob-steps .done { color: var(--ink-3); }
.ob-title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 600; }
.ob .mx-illus { margin: 0 0 var(--space-4); }
.mx-dialog .mx-illus--sm { margin: 0 auto; }
.ob h2 { margin: 0 0 var(--space-2); font-size: 20px; font-weight: 600; }
.ob-lead { margin: var(--space-2) 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-2); }
.ob-list { display: flex; flex-direction: column; gap: var(--space-4); }
.ob-list div { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); font-size: 14px; line-height: 22px; }
.ob-list span { color: var(--ink-2); }
.ob-nav { display: flex; justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* ---------- 弹层（墨线 Dialog 小窗口）：盖住整个窗口，标题栏也盖住 ---------- */
.dlg-root { position: fixed; inset: 0; z-index: 50; }
.mx-dialog .note { margin: 0; }
.mx-dialog [hidden] { display: none !important; }
.dlg-ta { height: auto; min-height: 88px; padding: 8px 10px; resize: vertical; font: 14px/22px var(--font-sans); }
.dlg-links { display: flex; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 0 -8px; }
.mx-dialog .mx-seg { align-self: flex-start; }
/* 弹层里的单选列表：照墨线 Menu 的行，选中的打勾（不用系统下拉框） */
.pick-list { display: flex; flex-direction: column; max-height: 216px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.pick-list button { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.pick-list button:hover { background: var(--hover); }
.pick-list button > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list .mx-menu-val { color: var(--ink-4); font-size: 13px; }
.pick-list .mx-ico { flex: none; color: var(--accent-ink); visibility: hidden; }
.pick-list [aria-selected="true"] .mx-ico { visibility: visible; }

/* ---------- 同步进度 ---------- */
.sync-prog { display: flex; flex-direction: column; gap: 6px; }
.sync-prog-text { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.sync-prog .bar { height: 6px; }
.dev-acts { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }

/* ---------- 设备：列表页（设备一组、同步一组）和设备详情页（概况、事件） ---------- */
.reading > .mx-notice { margin-bottom: var(--space-5); }
.mx-list .mx-row-name .mx-tag { margin-left: var(--space-2); }
.mx-row-desc .dot, .dev-detail .mx-detail-main p .dot { display: inline-block; margin: 0 6px 0 0; vertical-align: 0; }
.rows .mx-setting:last-child { border-bottom: 0; }
.mx-row-side .mx-ico { color: var(--ink-4); }
.sync-bar-row { padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
#sess-open { gap: 2px; }
.dev-detail { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.dev-detail .mx-back { align-self: flex-start; }
.dev-detail .mx-detail-main { flex: 1; min-width: 0; }
.dev-detail .pick .mx-menu { min-width: 160px; }
.dev-stats { margin-bottom: var(--space-6); }
.dev-recs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dev-recs li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.dev-recs li:last-child { border-bottom: 0; }
.dev-id { margin-top: var(--space-6); color: var(--ink-4); }
.dev-id .mono { color: var(--ink-3); }
/* 事件：一行一条，点开看原始 JSON */
.ev-bar { margin: 0 0 var(--space-3); }
.ev-bar .pick .mx-menu { left: 0; right: auto; min-width: 160px; }
.ev-list { display: flex; flex-direction: column; }
.ev-row { border-bottom: 1px solid var(--line); }
.ev-row > summary { display: grid; grid-template-columns: 64px 72px 18px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: 7px 8px; list-style: none; cursor: pointer; border-radius: var(--radius-md); font-size: 13px; line-height: 20px; }
.ev-row > summary::-webkit-details-marker { display: none; }
.ev-row > summary:hover { background: var(--hover); }
.ev-row .t { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ev-row .mx-tag { justify-self: start; white-space: nowrap; }
.ev-row .ico-none { background: none; }
.ev-say { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row[open] .ev-say { white-space: normal; }
.ev-more { padding: 0 8px 12px calc(64px + 12px); display: flex; flex-direction: column; gap: var(--space-2); }
.ev-more pre { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--sunken); border: 1px solid var(--line); font-size: 12px; line-height: 18px; color: var(--ink-2); white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; }
.ev-more .ev-text { font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.ev-older { justify-content: center; margin: var(--space-4) 0; }
.mx-sec .mx-list .mx-row:last-child { border-bottom-color: transparent; }
.pick-list:empty { display: none; }

/* 去了哪：上面一行汇总，左边竖线时间线（停留、路上交替），右边地图（选中那段强调色） */
.ptl-sum { margin: 0 0 var(--space-4); font-size: 13px; color: var(--ink-3); }
.ptl { max-width: 720px; }
/* 地点 · 地图：左边简短清单，右边大地图（跟着滚） */
.pm-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-lg); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pm-row:hover { background: var(--hover); }
.pm-row .ptl-dot { margin-top: 0; }
.pm-row.is-sel { background: var(--selected); }
.pm-row.is-sel .ptl-dot { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--page); }
.pm-b { display: flex; flex-direction: column; min-width: 0; }
.pm-n { font-size: 14px; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-m { font-size: 12px; line-height: 18px; color: var(--ink-4); }
.pm-map { position: sticky; top: 16px; }
.pm-map .pl-map-img { margin-bottom: 6px; min-height: 360px; }
.pm-map .note { margin: 0; }
.ptl { list-style: none; margin: 0; padding: 0; }
.ptl > li { position: relative; display: grid; grid-template-columns: 52px 24px minmax(0, 1fr) auto; column-gap: 10px; }
.ptl > li::before { content: ""; position: absolute; left: 73px; top: 0; bottom: 0; width: 2px; background: var(--line); }
/* 英文时刻列要放得下 Yesterday：列宽和竖线一起挪 */
.ptl > li:lang(en) { grid-template-columns: 68px 24px minmax(0, 1fr) auto; }
.ptl > li:lang(en)::before { left: 89px; }
.ptl > li:first-child::before { top: 14px; }
.ptl > li:last-child::before { bottom: calc(100% - 14px); }
.ptl-t { padding-top: 6px; font: 12px/18px var(--font-mono); color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; }
.ptl-dot { position: relative; z-index: 1; align-self: start; margin-top: 4px; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--ink-3); background: var(--page); font: 11px/19px var(--font-mono); text-align: center; color: var(--ink-2); box-sizing: border-box; }
.ptl-stay { padding: 0 0 var(--space-4); }
.ptl-stay .ptl-b { padding: 5px 0 0; min-width: 0; }
.ptl-stay.is-sel .ptl-dot { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--page); }
.ptl-stay.is-sel .ptl-name { color: var(--accent-ink); }
.ptl-stay.now .ptl-dot { background: var(--ink); border-color: var(--ink); color: var(--page); }
.ptl-name { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); }
.ptl-name .ok { margin-left: 6px; color: var(--ok); }
.ptl-name .ok .mx-ico { width: 14px; height: 14px; vertical-align: -2px; }
.ptl-meta { margin-top: 1px; font-size: 12px; line-height: 18px; color: var(--ink-4); }
.ptl-guess { margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--ink-3); }
.ptl-guess button { margin-left: 8px; padding: 0; border: 0; border-bottom: 1px dashed var(--line-strong); background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.ptl-guess button:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.ptl-guess button.other { color: var(--ink-4); border-bottom: 0; }
.ptl-act { padding-top: 2px; opacity: 0; }
.ptl-stay:hover .ptl-act, .ptl-stay:focus-within .ptl-act { opacity: 1; }
.ptl-go, .ptl-none { padding: 0 0 var(--space-4); }
.ptl-go .ptl-dot, .ptl-none .ptl-dot { width: 8px; height: 8px; margin: 6px 0 0 7px; border: 0; background: var(--ink-4); }
.ptl-none .ptl-dot { background: var(--line-strong); }
.ptl-go::before { background: repeating-linear-gradient(var(--ink-4) 0 4px, transparent 4px 8px) !important; }
.ptl-none::before { background: repeating-linear-gradient(var(--line-strong) 0 2px, transparent 2px 6px) !important; }
.ptl-go .ptl-b, .ptl-none .ptl-b { padding-top: 2px; font-size: 12px; line-height: 18px; color: var(--ink-4); }
.ptl-talk { margin-top: 6px; }
.ptl-talk > summary { display: inline-block; cursor: pointer; font-size: 12px; line-height: 18px; color: var(--ink-3); list-style: none; }
.ptl-talk > summary::-webkit-details-marker { display: none; }
.ptl-talk > summary::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 999px; background: var(--rec-watch); vertical-align: 1px; }
.ptl-talk .tl { margin-top: 4px; }
/* 改地点：挂在那一行下面 */
.ptl-edit { position: absolute; z-index: 20; right: 0; top: 34px; width: 320px; max-height: 420px; overflow: auto; }
.ptl-edit .mx-input { width: 100%; margin-bottom: 4px; box-sizing: border-box; }
.ptl-edit button .pk-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptl-edit button .pk-t { margin-left: 6px; font-size: 12px; color: var(--ink-4); }
.ptl-edit .pe-wait { margin: 4px 8px; }
@media (max-width: 900px) { .pm-wrap { grid-template-columns: minmax(0, 1fr); } .pm-map { position: static; order: -1; } }

/* 翻日期：一个整体，左右箭头夹着日期（照地图类产品的「‹ 日期 ▾ ›」），高度同页签旁的分段 */
.daynav { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-sizing: border-box; }
.daynav > button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2); font: 13px/20px var(--font-sans); cursor: pointer; }
.daynav > button:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.daynav > button:disabled { color: var(--ink-4); opacity: 0.45; cursor: default; }
.daynav .dn-step { width: 28px; justify-content: center; padding: 0; }
.daynav .dn-step:first-child { border-radius: 7px 0 0 7px; }
.daynav .dn-step:nth-child(3) { border-radius: 0 7px 7px 0; }
.daynav .dn-date { padding: 0 10px; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.daynav .mx-ico { width: 14px; height: 14px; }
.dn-today { height: 30px; margin-right: 6px; }

/* 地点 · 常去：一行一个地方 */
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pf-k { font-size: 12px; color: var(--ink-3); text-align: center; border: 1px solid var(--line-strong); border-radius: 999px; line-height: 22px; }
.pf-k.dim { border-color: transparent; color: var(--ink-4); }
.pf-b { display: flex; flex-direction: column; min-width: 0; }
.pf-n { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); }
.pf-a { font-weight: 400; color: var(--ink-3); }
.pf-m { font-size: 12px; line-height: 18px; color: var(--ink-4); }

/* 角标：起过名的写种类，常去的写「常去」 */
.pl-badge { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; font: 11px/16px var(--font-sans); font-weight: 400; color: var(--ink-3); vertical-align: 1px; }
.pl-badge.often { border-style: dashed; }
.pf-k.often { border-style: dashed; }
.pe-chain { padding: 4px 8px 8px; font-size: 12px; line-height: 17px; color: var(--ink-3); }

/* 还没认定：名字后面最可能的一家，候选带把握 */
.ptl-likely { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.ptl-likely .p, .ptl-guess button .p { margin-left: 3px; font: 11px/16px var(--font-mono); color: var(--ink-4); }

/* 地点 · 地图：铺满窗口，能缩放的高德地图 */
.page.wide { max-width: none; }
.page.wide .reading { max-width: none; }
.pm-wrap { grid-template-columns: 300px minmax(0, 1fr); }
.pm-list { max-height: calc(100vh - 230px); overflow-y: auto; }
.pl-live { width: 100%; min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: var(--rec-track); }
.pl-live > .note { padding: var(--space-4); margin: 0; }
.lm-pin { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--surface); background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); font: 600 12px/22px var(--font-mono); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); box-sizing: border-box; cursor: pointer; }
.lm-pin.often { background: color-mix(in srgb, var(--ink) 30%, var(--surface)); }
.lm-pin.now { background: var(--primary); color: var(--on-primary); }
.lm-pin.sel { background: var(--accent-ink); color: var(--on-primary); transform: scale(1.2); }  /* 颜色都取墨线令牌，跟着深浅色走 */
/* OpenStreetMap（Leaflet）：去掉 Leaflet 自带的白底方框和气泡外壳，点和小卡片用同高德的样式 */
.leaflet-div-icon.lm-osm { background: none; border: 0; }
.lm-osm-card .leaflet-popup-content-wrapper { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.lm-osm-card .leaflet-popup-content { margin: 0; }
.lm-osm-card .leaflet-popup-tip-container { display: none; }
.lm-osm-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }

/* 一段停留认定了好几家：认定的候选打 ✓、实线墨色，再点取消 */
.ptl-guess button.on { color: var(--ink); border-bottom: 1px solid var(--ink-3); }
.ptl-guess button.on .mx-ico { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; color: var(--ok); }
/* 地图点上的小卡片（高德 InfoWindow 自定义内容），墨线的浮层样式 */
.lm-card { min-width: 200px; max-width: 320px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.14); font-size: 13px; line-height: 20px; }
.lm-card-n { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.lm-card-n .ptl-dot { flex: none; margin-top: 0; }
.lm-card-m { color: var(--ink-3); font: 12px/18px var(--font-mono); }
.lm-card-s { color: var(--ink-2); font-size: 12px; }

/* ---------- 手机（宽不到 760，也就是 iPhone 版）：同一套界面，侧栏变成底部页签，正文铺满。
   电脑窗口最窄就是 760（main.rs min_inner_size），所以断点写 759，电脑版缩到最窄仍是侧栏布局 ---------- */
@media (max-width: 759px) {
  html, body { background: var(--page); }
  body { overflow: auto; }
  .shell { display: block; height: auto; }
  .titlebar, .win-tools, .mx-side-head, .side-fill, .me-menu { display: none !important; }
  :root[data-side="collapsed"] .mx-side { display: flex; }
  .mx-side { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto; flex-direction: row; align-items: stretch; gap: 0;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); background: var(--sidebar); }
  .mx-nav { flex: 4; display: flex; flex-direction: row; gap: 0; }
  .mx-nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0; font-size: 11px; line-height: 14px; }
  .mx-nav a.is-on { background: none; color: var(--ink); font-weight: 600; }
  .mx-nav a:not(.is-on) { color: var(--ink-3); }
  .mx-nav a .mx-ico { width: 22px; height: 22px; }
  .mx-side-foot { flex: 1; margin: 0; padding: 0; border-top: 0; }
  .me { width: 100%; height: 50px; flex-direction: column; justify-content: center; gap: 2px; padding: 0; }
  .me { color: var(--ink-3); } .me:hover { background: none; } .me.is-on { color: var(--ink); font-weight: 600; }
  .me .avatar { width: 22px; height: 22px; font-size: 11px; }
  .me .avatar--icon { background: none; color: inherit; border-radius: 0; } .avatar--icon .mx-ico { width: 22px; height: 22px; }
  .me .me-name { flex: none; font-size: 11px; line-height: 14px; } .me-sub, .me-chev { display: none; }  /* 不 flex:1，免得在竖排里撑高、把图标顶上去 */
  .body { height: auto; overflow: visible; }
  .page { max-width: none; padding: calc(16px + env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom)); }
  .mx-title { font-size: 24px; line-height: 32px; }
  .toolbar { margin-bottom: var(--space-4); }
  .toolbar-left { flex-wrap: wrap; row-gap: var(--space-2); max-width: 100%; }  /* 页签放不下（英文更宽）就在栏里横滑，不撑宽整页 */
  .tabs { overflow-x: auto; max-width: 100%; }
  .tb-sep { display: none; }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .strip-axis span.t small { display: none; } /* 窄屏只写小时，免得挤在一起 */
  .mx-setting { flex-wrap: wrap; }
  .mx-setting .btns { flex-wrap: wrap; }
  .mx-setting:has(#roast) .mx-setting-main { flex-basis: 100%; }  /* 棒喝六档太宽，放下一行，免得说明挤成一字一行 */
  .mx-dialog { width: calc(100vw - 24px) !important; max-width: none; }
}

/* 模型用量（设置 → 连接 → 模型 → 用量）：30 天柱子、按用途的表 */
.ub-ro { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: var(--space-4); }
.ub-cols { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; align-items: end; height: 72px; }
.ub-cols span { height: 100%; display: flex; align-items: flex-end; }
.ub-cols i { display: block; width: 100%; min-height: 1px; background: var(--rec-computer); border-radius: 2px 2px 0 0; }
.ub-axis { display: flex; justify-content: space-between; margin: var(--space-1) 0 var(--space-4); font-size: 12px; color: var(--ink-3); }
.ub-table { margin-bottom: var(--space-3); table-layout: auto; width: 100%; }
.ub-table td:first-child, .ub-table th:first-child { white-space: nowrap; overflow: visible; }
.code-box code { white-space: pre-wrap; word-break: break-all; }

/* 字体（设置 → 通用 → 字体）：切换两处字体、预览、搜索、列表（每个字体用它自己写名字） */
.fp-kind { align-self: flex-start; }
.fp-preview { padding: 12px 16px; border-radius: var(--radius-lg); background: var(--sunken); font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.fp-how { margin: 0; color: var(--ink-3); }
.fp-list { display: flex; flex-direction: column; gap: 1px; height: 248px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.fp-item { display: flex; flex: none; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-md); padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 32px; }  /* 几百个字体：只画看得见的几行 */
.fp-item:hover { background: var(--hover); }
.fp-item[aria-checked="true"] { background: var(--selected); }
.fp-item:focus-visible { outline-offset: -2px; }
.fp-n { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-f { flex: none; max-width: 40%; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-item .mx-ico { color: var(--accent-ink); }
.fp-wait { margin: 0; padding: 8px; color: var(--ink-3); }

/* 新版本下好的弹层：插画居中、更新要点 1. 2. 一行一件、最后一行灰字写当前版本 */
.up-meta { margin: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.up-notes { margin: 0; padding: 0; list-style: none; counter-reset: up; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink); }
ol.up-notes li { position: relative; padding-left: 20px; counter-increment: up; }
ol.up-notes li::before { content: counter(up) "."; position: absolute; left: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.raw-note { margin: 0 0 var(--space-3); }

/* 换页（app.js 的 route）：摆出来的是这页上次的样子，数据到了才能点；没看过的页旧页先停着，过 0.12 秒还没好再淡下去，快的时候不闪 */
#app.is-stale, #app.is-wait { pointer-events: none; }
#app.is-wait { opacity: .45; transition: opacity .15s .12s; }

/* ---------- 设置弹层（照 Claude：盖在当前页上，左边分区、右边内容；窄屏仍是整页） ---------- */
.set-root { position: fixed; inset: 0; z-index: 40; }
.set-dialog { width: min(960px, 100%); height: min(88vh, 860px); }
.set-dialog .mx-dialog-body { padding: 4px 24px 24px; }
.set-dialog .set-wrap > .mx-subnav { position: sticky; top: 0; }

/* ---------- 同步方式卡片 ---------- */
.sync-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.sync-way { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: none; color: var(--ink); font: 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.sync-way:hover { background: var(--hover); }
.sync-way b { font-weight: 500; }
.sync-way span { font-size: 12px; line-height: 18px; color: var(--ink-3); }
.sync-way.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sync-way:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sync-adv { margin: var(--space-2) 0 0 -8px; }
.sync-ways + .rows, .sync-adv + .rows { margin-top: var(--space-4); }
@media (max-width: 759px) { .sync-ways { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 方向：规矩、项目两个页签 ---------- */
.dir-tabs { margin-bottom: var(--space-5); }
.pj-note { margin-top: 0; }