/* ============================================================
   VibeNote 官网 · 界面重绘（1:1 复刻 macOS 应用）
   结构：.mock-frame（响应式外框，aspect-ratio）> .mock（1728 逻辑px 设计稿，JS 等比缩放）
   全部颜色走 tokens.css 的 apple 主题变量，明暗自动成立
   ============================================================ */
.mock-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 外圆角随等比缩放适配：设计稿窗口圆角 12，缩小后同步变小 */
  border-radius: calc(12px * var(--mscale, .7));
  box-shadow: var(--shadow-win), 0 0 0 1px color-mix(in srgb, var(--vn-fg) 15%, transparent);
  background: var(--vn-bg);
}
.mock {
  --mtl: 40px;            /* 标题栏（真机 40） */
  --msb: 30px;            /* 状态栏（真机 30.5） */
  /* 表面分层取自 workbench_frame.rs from_theme：白底混入 fg/softer 的比例即真机取色 */
  --m-chrome: color-mix(in srgb, var(--vn-bg) 96%, var(--vn-fg));
  --m-psb: color-mix(in srgb, var(--vn-bg) 99.2%, var(--vn-fg));
  --m-line: color-mix(in srgb, var(--vn-fg) 7%, transparent);
  position: absolute;
  top: 0;
  left: 0;
  width: 1728px;
  transform-origin: 0 0;
  transform: scale(var(--mscale, .7));
  display: flex;
  flex-direction: column;
  background: var(--m-chrome);
  color: var(--vn-fg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  pointer-events: none;
}
html[data-theme="dark"] .mock {
  --m-chrome: color-mix(in srgb, var(--vn-bg) 97%, var(--vn-fg));
  --m-psb: color-mix(in srgb, var(--vn-bg) 98.8%, var(--vn-fg));
  --m-line: color-mix(in srgb, var(--vn-fg) 6%, transparent);
}
.mock.is-partial { background: var(--vn-bg); }
.mock-frame[data-ratio="1728x1084"] { aspect-ratio: 1728 / 1084; }
.mock-frame[data-ratio="1331x760"] { aspect-ratio: 1331 / 760; }
.mock-frame[data-ratio="1331x480"] { aspect-ratio: 1331 / 480; }
.mock-frame[data-ratio="1728x1245"] { aspect-ratio: 1728 / 1245; }
.mock-frame[data-ratio="1728x900"] { aspect-ratio: 1728 / 900; }
.mock-frame[data-ratio="1728x560"] { aspect-ratio: 1728 / 560; }
.mock-frame[data-ratio="1728x820"] { aspect-ratio: 1728 / 820; }
/* 内容必须装进固定高度：列表靠自身 overflow 裁剪，状态栏恒在底部 */
.mock-frame[data-ratio="1728x1084"] .mock { height: 1084px; }
.mock-frame[data-ratio="1331x760"] .mock { width: 1331px; height: 760px; }
.mock-frame[data-ratio="1331x480"] .mock { width: 1331px; height: 480px; }
.mock-frame[data-ratio="1728x1245"] .mock { height: 1245px; }
.mock-frame[data-ratio="1728x900"] .mock { height: 900px; }
.mock-frame[data-ratio="1728x560"] .mock { height: 560px; }
.mock-frame[data-ratio="1728x820"] .mock { height: 820px; }

/* ---------- 标题栏 ---------- */
.m-chrome {
  position: relative;
  height: var(--mtl);
  flex: none;
  display: flex;
  align-items: center;
  background: var(--m-chrome);
}
.m-lights { position: absolute; left: 13px; top: 0; height: 100%; display: flex; align-items: center; gap: 8px; }
.m-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.m-lights i:nth-child(1) { background: #ff5f57; }
.m-lights i:nth-child(2) { background: #febc2e; }
.m-lights i:nth-child(3) { background: #28c840; }
.m-tabs { display: flex; flex: 1; min-width: 0; align-items: center; gap: 2px; margin-left: 165px; height: 100%; padding: 0 8px; overflow: hidden; }
.m-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding-left: 8px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 16px;
  color: var(--vn-grey-1);
  white-space: nowrap;
  max-width: 230px;
}
.m-tab .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-tab svg { width: 14px; height: 14px; flex: none; }
.m-tab.is-active { background: var(--vn-bg-2); color: var(--vn-fg); }
html[data-theme="dark"] .m-tab.is-active { background: var(--vn-bg-1); }
.m-tab.is-active .m-x { visibility: visible; }
.m-tab.is-preview .t { font-style: italic; }
.m-x { visibility: hidden; width: 18px; height: 18px; margin-left: -2px; margin-right: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.m-chrome-end { flex: none; height: 100%; padding: 0 8px 0 6px; display: flex; align-items: center; color: var(--vn-grey-1); }
.m-chrome-end svg { width: 26px; height: 26px; padding: 5px; }
.m-backfwd { position: absolute; left: 78px; top: 0; height: 100%; display: flex; align-items: center; gap: 1px; color: var(--vn-grey-1); }
.m-backfwd svg { width: 26px; height: 26px; padding: 5.5px; }
.m-backfwd svg:first-child { padding: 5px; }
.m-backfwd .is-disabled { opacity: .45; }

/* ---------- 主体：rail + 最近面板 + 内容区（psb 圆左角、panes 圆右角，底部留 2px 窗底色） ---------- */
.m-main { flex: 1; display: flex; min-height: 0; }
.m-body { flex: 1; min-height: 0; display: flex; padding-bottom: 2px; }
.m-panes {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  margin-right: 2px;
  border: 1px solid var(--m-line); border-left: 0;
  border-radius: 0 12px 12px 0;
  background: var(--vn-bg);
}
.mock.is-partial .m-panes { margin: 0; border: 0; border-radius: 0; }
.m-content-row { flex: 1; min-height: 0; display: flex; }

/* 图标栏 */
.m-rail {
  width: 48px; flex: none;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 4px;
  background: var(--m-chrome);
  color: var(--vn-grey-1);
}
.m-identity { width: 36px; height: 40px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; flex: none; }
.m-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--vn-accent) 16%, transparent);
  color: var(--vn-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.m-rail svg { position: relative; width: 18px; height: 18px; }
.m-rail .ri { position: relative; width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; }
.m-rail .ri.is-active { color: var(--vn-fg); }
.m-rail .ri.is-active::before { content: ""; position: absolute; inset: 4px; border-radius: 6px; background: var(--vn-bg-2); }
.m-rail-separator { width: 28px; height: .5px; margin: 4px 0; background: var(--m-line); flex: none; }
.m-account { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex: none; }
.m-rail .spacer { flex: 1; }
.m-rail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-red); position: relative; top: -6px; left: 8px; }

/* ---------- 通用小件 ---------- */
.m-icon { width: 14px; height: 14px; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px; padding: 0 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  color: var(--chip-text, var(--c, var(--vn-grey-2)));
  background: var(--chip-bg, color-mix(in srgb, var(--c, var(--vn-grey-2)) 16%, transparent));
}
.chip svg { width: 12px; height: 12px; color: var(--chip-mark, var(--c)); }
.chip.is-status svg { color: var(--c); }
.chip.ghost { background: transparent; border: 1px solid var(--vn-bg-3); color: var(--vn-grey-2); }
html[data-theme="dark"] .chip:not(.ghost) {
  color: var(--chip-text, var(--vn-fg));
  background: var(--chip-bg, color-mix(in srgb, var(--c, var(--vn-grey-2)) 38%, transparent));
}
/* 选项底色、文字与字形取自 app 的 PropertyOptionColor。 */
.chip.c-grey { --c: #ada9a3; --chip-bg: rgba(42, 28, 0, 0.07); --chip-text: var(--vn-fg); --chip-mark: #ada9a3; }
.chip.c-hot { --c: #d5803b; --chip-bg: rgba(196, 88, 0, 0.204); --chip-text: #6a4222; --chip-mark: #d5803b; }
.chip.c-amber { --c: #d8a32f; --chip-bg: rgba(209, 156, 0, 0.282); --chip-text: #655121; --chip-mark: #d8a32f; }
.chip.c-green { --c: #46a171; --chip-bg: rgba(0, 96, 38, 0.157); --chip-text: #2a533c; --chip-mark: #46a171; }
.chip.c-blue { --c: #2783de; --chip-bg: rgba(0, 118, 217, 0.204); --chip-text: #264a72; --chip-mark: #2783de; }
.chip.c-purple { --c: #b577d6; --chip-bg: rgba(92, 0, 163, 0.14); --chip-text: #553b69; --chip-mark: #b577d6; }
.chip.c-red { --c: #e56458; --chip-bg: rgba(206, 24, 0, 0.165); --chip-text: #6d3531; --chip-mark: #e56458; }
html[data-theme="dark"] .chip.c-grey { --c: #ada9a3; --chip-bg: rgba(255, 255, 235, 0.1); --chip-text: var(--vn-fg); --chip-mark: #ada9a3; }
html[data-theme="dark"] .chip.c-hot { --c: #d5803b; --chip-bg: rgba(255, 143, 71, 0.482); --chip-text: #fbebde; --chip-mark: #fbebde; }
html[data-theme="dark"] .chip.c-amber { --c: #d8a32f; --chip-bg: rgba(255, 188, 53, 0.46); --chip-text: #f9f3dc; --chip-mark: #f9f3dc; }
html[data-theme="dark"] .chip.c-green { --c: #46a171; --chip-bg: rgba(113, 255, 175, 0.337); --chip-text: #e8f1ec; --chip-mark: #e8f1ec; }
html[data-theme="dark"] .chip.c-blue { --c: #2783de; --chip-bg: rgba(81, 166, 255, 0.494); --chip-text: #e5f2fc; --chip-mark: #e5f2fc; }
html[data-theme="dark"] .chip.c-purple { --c: #b577d6; --chip-bg: rgba(208, 147, 255, 0.427); --chip-text: #f3ebf9; --chip-mark: #f3ebf9; }
html[data-theme="dark"] .chip.c-red { --c: #e56458; --chip-bg: rgba(255, 116, 105, 0.525); --chip-text: #fce9e7; --chip-mark: #fce9e7; }
.seg { display: inline-flex; background: var(--vn-bg-1); border-radius: 7px; padding: 2px; gap: 2px; }
.seg > span { padding: 2px 10px; border-radius: 5px; font-size: 12px; color: var(--vn-grey-2); }
.seg > span.is-on { background: var(--vn-bg); color: var(--vn-fg); box-shadow: 0 1px 2px rgba(var(--vn-shadow-raw), .18); font-weight: 500; }
html[data-theme="dark"] .seg { background: transparent; box-shadow: inset 0 0 0 1px var(--m-line); }
html[data-theme="dark"] .seg > span.is-on { background: var(--vn-bg-1); box-shadow: none; }

/* ---------- 最近列表面板 ---------- */
.m-recent {
  width: 349px; flex: none;
  border: .5px solid var(--m-line);
  border-radius: 12px 0 0 12px;
  display: flex; flex-direction: column;
  background: var(--m-psb);
  min-height: 0;
  padding-top: 4px;
}
.m-recent-head { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 11px 16px 12px; border-bottom: .5px solid var(--m-line); }
.m-recent-h { height: 24px; display: flex; align-items: flex-start; gap: 8px; }
.m-scope { display: inline-flex; align-items: center; gap: 4px; }
.m-scope svg { width: 14px; height: 14px; stroke-width: 2; color: var(--vn-grey-0); }
.m-recent-h b { font-size: 14px; line-height: 18px; font-weight: 600; }
.m-recent-h .n { color: var(--vn-grey-1); font-size: 13px; line-height: 18px; }
.m-recent-h .end { position: relative; left: 6px; top: -3px; margin-left: auto; display: flex; gap: 8px; color: var(--vn-grey-1); }
.m-recent-h .end svg { width: 24px; height: 24px; padding: 4.5px; }
.m-recent-h .end .is-on { color: var(--vn-accent); }
.m-filterrow { margin-top: 5px; height: 22px; display: flex; align-items: center; gap: 6px; }
.m-filterrow .chip { height: 22px; padding: 0 6px 0 7px; gap: 3px; font-weight: 400; background: color-mix(in srgb, var(--vn-accent) 12%, transparent); color: var(--vn-accent); }
html[data-theme="dark"] .m-filterrow .chip { background: color-mix(in srgb, var(--vn-accent) 12%, transparent); color: var(--vn-accent); }
.m-filterrow .chip svg { width: 13px; height: 13px; stroke-width: 2; color: inherit; }
.m-filterrow .chip svg:last-child { width: 12px; height: 12px; }
.m-filter-add { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--vn-grey-1); }
.m-filter-add svg { width: 13px; height: 13px; }
.m-filterrow .reset { position: relative; left: 4px; margin-left: auto; padding: 0 4px; font-size: 12px; color: var(--vn-grey-1); }
.m-list { flex: 1; min-height: 0; overflow: hidden; padding: 4px 8px 6px; }
.m-group { font-size: 12px; line-height: 16px; color: var(--vn-grey-1); padding: 12px 8px 14px; font-weight: 600; }
.m-card { padding: 8px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.m-card + .m-card { margin-top: 2px; }
.m-card.is-active { background: color-mix(in srgb, var(--vn-fg) 10%, transparent); }
.m-card-t { display: flex; align-items: center; gap: 6px; }
.m-card-t b { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card-t time { flex: none; font-size: 12px; line-height: 16px; color: color-mix(in srgb, var(--vn-fg) 55%, transparent); }
.m-card-x {
  font-size: 12px; line-height: 16px; color: color-mix(in srgb, var(--vn-fg) 68%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card-c { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.m-card-c .chip { flex: none; height: 18px; padding: 1px 6px 1px 4px; gap: 3px; font-weight: 400; line-height: 16px; }
.m-card-c .chip:last-child { padding-left: 6px; }
.m-card-p { font-size: 12px; line-height: 16px; color: color-mix(in srgb, var(--vn-fg) 48%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 文档面板 ---------- */
.m-doc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-crumbbar { height: 40px; flex: none; min-width: 0; display: flex; align-items: center; padding: 0 8px; gap: 12px; border-bottom: .5px solid var(--m-line); }
.m-breadcrumb { flex: 1; min-width: 0; padding-left: 8px; display: flex; align-items: center; gap: 2px; }
.m-path { min-width: 0; display: flex; align-items: center; font-size: 13px; line-height: 13px; color: var(--vn-grey-1); }
.m-crumb { flex: none; white-space: nowrap; }
.m-crumb.is-here { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-crumb-sep { flex: none; padding: 0 6px; display: inline-flex; align-items: center; color: var(--vn-grey-0); }
.m-crumb-sep svg { width: 14px; height: 14px; }
.m-crumbbar .copy { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--vn-grey-1); }
.m-crumbbar .copy svg { width: 13px; height: 13px; }
.m-toolbar { flex: none; display: flex; align-items: center; gap: 4px; color: var(--vn-grey-1); }
.m-view-modes { height: 28px; padding: 2px; border-radius: 6px; display: inline-flex; align-items: stretch; gap: 2px; box-shadow: inset 0 0 0 1px var(--vn-bg-1); }
.m-view-modes > span { padding: 0 10px; border-radius: 4px; display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; white-space: nowrap; }
.m-view-modes > .is-on { background: var(--vn-bg-1); color: var(--vn-fg); }
.m-toolbar-separator { flex: none; width: 1px; height: 16px; margin: 0 8px; background: var(--vn-bg-2); }
.m-toolbar .tl { flex: none; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.m-toolbar .tl.is-on { background: var(--vn-bg-1); color: var(--vn-fg); }
.m-toolbar svg { width: 16px; height: 16px; }
.m-article { flex: 1; min-height: 0; overflow: hidden; padding: 56px 32px 0; max-width: 860px; margin: 0 auto; width: 100%; }
.m-article .h1 { font-size: 30px; line-height: 36px; font-weight: 700; }
.m-props { margin-top: 8px; padding: 0 6px; display: flex; flex-direction: column; }
.m-prop { min-height: 28px; margin-left: -4px; display: flex; align-items: center; font-size: 14px; line-height: 21px; }
.m-prop .k { width: 126px; flex: none; padding-left: 4px; color: var(--vn-grey-1); display: inline-flex; align-items: center; gap: 4.8px; font-size: 13px; line-height: 19.5px; }
.m-prop .k svg { width: 16px; height: 16px; flex: none; stroke-width: 1.75; }
.m-prop .v { color: var(--vn-fg); display: inline-flex; align-items: center; gap: 8px; }
.m-prop .chip { height: 24px; padding: 1px 6px; gap: 4px; border-radius: 6px; font-size: 14px; line-height: 21px; font-weight: 400; }
.m-prop .chip.is-status { border-radius: 999px; }
.m-prop .chip svg { width: 14px; height: 14px; }
/* 添加属性行：与属性名称共用 muted 色。 */
.m-prop-add { align-self: flex-start; height: 24.84px; display: inline-flex; align-items: center; gap: 4.8px; margin: 7.2px 0 0 -4.8px; padding: 0 4.8px; font-size: 13px; color: var(--vn-grey-1); }
.m-prop-add svg { width: 14.4px; height: 14.4px; }
.m-props-rule { border: 0; border-top: 1px solid color-mix(in srgb, var(--vn-bg-3) 32%, transparent); margin: 12px 0 0; }
.m-note { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--vn-accent) 25%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--vn-accent) 6%, transparent); padding: 8px 15px 8px 12px; }
.m-note-t { display: flex; align-items: center; gap: 7.5px; color: var(--vn-accent); line-height: 20.25px; }
.m-note-t b { font-weight: 400; }
.m-note-t svg { width: 15.75px; height: 15.75px; flex: none; }
.m-note p { margin-top: 6px; font-size: 15px; line-height: 25.5px; color: var(--vn-fg-1); }
.m-body-text { margin-top: 32px; font-size: 15px; line-height: 25.5px; }
/* 正文节奏 = ProseMetrics::reading_view：H2 24/30 顶32底8，H3 19.5/26 顶24底8，
   段间 6，普通块间 12，松列表项 4（host.rs 268-302，编辑器与阅读视图共用）。 */
.m-body-text .h2 { font-size: 24px; line-height: 30px; font-weight: 700; margin: 32px 0 8px; }
.m-body-text .h2:first-child { margin-top: 0; }
.m-body-text .h3 { font-size: 19.5px; line-height: 26px; font-weight: 700; margin: 24px 0 8px; }
.m-body-text p { font-size: 15px; line-height: 25.5px; color: var(--vn-fg-1); }
.m-body-text p + p { margin-top: 6px; }
.m-body-text a { color: var(--vn-accent); text-decoration: none; }
.m-body-text ul { margin: 12px 0 0 20px; list-style: disc; color: var(--vn-fg-1); font-size: 15px; }
.m-body-text ul li { margin-top: 4px; }
.m-body-text ul + p { margin-top: 12px; }
.m-code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--vn-bg-1); border: 1px solid var(--vn-bg-2);
  border-radius: 5px; padding: 1px 6px;
  color: var(--vn-fg-2);
}
html[data-theme="dark"] .m-code { background: color-mix(in srgb, var(--vn-bg-1) 80%, transparent); }

/* workflow 流程图（照真机渲染：竖排节点卡 + 连接点线） */
.m-flow { margin-top: 12px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.m-node {
  width: 204px;
  background: color-mix(in srgb, var(--vn-grey-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vn-grey-1) 20%, transparent);
  border-radius: 12px;
  padding: 5px 5px 7px;
  display: flex; flex-direction: column; gap: 3px;
}
.m-node-h { height: 36px; padding: 6px 4px 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-node-h .id { font-size: 14px; line-height: 24px; font-weight: 500; color: var(--vn-grey-1); }
.m-node-h .chip { height: 20px; padding: 1px 6px; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 400; }
.m-node-body { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--vn-grey-1) 14%, var(--vn-bg-1)); display: flex; flex-direction: column; gap: 4px; }
.m-node-t, .m-node-s { font-size: 13px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-node-t { font-weight: 600; }
.m-node-s { font-weight: 500; color: var(--vn-grey-1); }
.m-edge { height: 64px; margin-left: 102px; width: 1.5px; background: var(--vn-grey-1); position: relative; }
.m-edge::before, .m-edge::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--vn-grey-1); }
.m-edge::before { top: -4px; }
.m-edge::after { bottom: -4px; }

/* ---------- 资源管理器（项目树，对齐 tree_view.rs / explorer.rs 常数） ---------- */
.m-tree-top {
  height: 40px; flex: none;
  padding: 0 12px 0 14px;
  display: flex; align-items: center;
  gap: 6px;
}
.m-workspace { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.m-tree-top .m-icon { width: 13px; height: 13px; color: var(--vn-grey-0); }
.m-tree-top b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tree-top .cp { position: relative; top: 1px; width: 24px; height: 24px; margin-left: 4px; color: var(--vn-grey-0); flex: none; display: inline-flex; align-items: center; }
.m-tree-top .cp svg { width: 13px; height: 13px; }
.m-tree-top .acts { margin-left: auto; display: flex; align-items: center; gap: 4px; margin-right: 2px; }
.m-tree-top .acts > span { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: flex-end; }
.m-tree-top .acts svg { width: 14px; height: 14px; color: var(--vn-grey-0); }
.m-asset-row {
  margin: 2px 6px 0;
  height: 28px; padding: 0 10px;
  display: flex; align-items: center; gap: 4px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
}
.m-asset-row > svg { width: 12px; height: 12px; color: var(--vn-grey-1); flex: none; }
.m-asset-row span { flex: 1; min-width: 0; overflow: hidden; }
.m-asset-row .n { font-size: 11px; color: var(--vn-grey-0); flex: none; }
.m-tree-h {
  height: 28px; margin: 12px 6px 0;
  padding: 0 8px 0 10px;
  display: flex; align-items: center;
  gap: 4px;
}
.m-tree-h .lbl {
  font-size: 12px; font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--vn-grey-1);
}
.m-tree-h .m-icon { width: 10px; height: 10px; color: var(--vn-grey-0); stroke-width: 3; }
.m-tree-h .plus { width: 14px; height: 14px; margin-left: auto; color: var(--vn-grey-0); }
.m-tree-row {
  height: 28px;
  flex: none;
  margin: 0 6px;
  padding: 0 8px 0 calc(6px + var(--d, 0) * 12px);
  border-radius: 4px;
  display: flex; align-items: center;
  gap: 2px;
  font-size: 13px; line-height: 16px;
  color: var(--vn-fg);
  white-space: nowrap; overflow: hidden;
}
.m-tree-row.leaf { gap: 4px; }
.m-tree-row .caret {
  width: 18px; height: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--vn-grey-0);
}
.m-tree-row .caret svg { width: 10px; height: 10px; stroke-width: 3; }
.m-tree-row > svg {
  width: 18px; height: 18px; flex: none;
  margin-left: -4px;
  padding: 2px;
  box-sizing: border-box;
  color: var(--vn-grey-0);
}
.m-tree-row.leaf > svg { margin-left: 0; }
.m-tree-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-tree-row .n { margin-left: auto; font-size: 11px; color: var(--vn-grey-0); flex: none; padding-left: 4px; }
.m-tree-row.is-active { background: color-mix(in srgb, var(--vn-fg) 10%, transparent); color: var(--vn-fg); }

/* ---------- 状态栏 ---------- */
.m-status {
  height: var(--msb); flex: none;
  border-top: 1px solid var(--m-line);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px; padding: 0 16px;
  font-size: 11px; color: var(--vn-grey-1);
  background: var(--vn-bg);
}
.m-status span { display: inline-flex; align-items: center; gap: 5px; }
html[data-theme="dark"] .m-status { color: var(--vn-grey-2); }
.m-status svg { width: 12px; height: 12px; opacity: .8; }

/* ---------- 多维表格 mock ---------- */
.m-side {
  width: 300px; flex: none;
  border: 1px solid var(--m-line); border-left: 0;
  border-radius: 12px 0 0 12px;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--m-psb);
  overflow: hidden;
}
.m-side-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  font-size: 13px; color: var(--vn-fg-1);
  white-space: nowrap;
}
.m-side-row svg { width: 15px; height: 15px; color: var(--vn-grey-2); flex: none; }
.m-side-row .n { margin-left: auto; font-size: 11.5px; color: var(--vn-grey-0); }
.m-side-row.is-strong { font-weight: 600; color: var(--vn-fg); }
.m-side-row.is-head { color: var(--vn-grey-1); font-size: 12px; font-weight: 500; margin-top: 6px; }
.m-side-row.is-active { background: var(--vn-bg-1); }
html[data-theme="dark"] .m-side-row.is-active { background: color-mix(in srgb, var(--vn-bg-1) 72%, transparent); }
.m-side-row .ic { margin-left: auto; display: inline-flex; gap: 8px; color: var(--vn-grey-1); }
.m-side-row .ic svg { width: 13px; height: 13px; }
.m-board { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-board svg { stroke-width: 2; }
.m-spec-crumbbar .m-breadcrumb { flex: 0 1 auto; }
.m-view-name { flex: none; margin-left: 2px; white-space: nowrap; }
.m-board-top { height: 86px; flex: none; display: flex; align-items: flex-start; justify-content: center; position: relative; padding: 24px 96px 32px; }
.m-board-top > .seg { height: 30px; border: .5px solid var(--vn-bg-2); border-radius: 8px; padding: 2.5px; gap: 0; background: transparent; box-shadow: none; align-items: stretch; }
.m-board-top > .seg > span { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 6px; line-height: 12px; font-weight: 400; }
.m-board-top > .seg > .is-on { background: var(--vn-bg-1); box-shadow: none; }
html[data-theme="dark"] .m-board-top > .seg { box-shadow: none; }
.m-board-top .end { position: absolute; right: 96px; top: 24px; height: 30px; display: flex; align-items: center; padding: 4px 8px; line-height: 18px; }
.m-btn-accent {
  height: 28px; padding: 0 10px; border-radius: 6px;
  background: var(--vn-accent); color: #fff;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
}
.m-btn-accent svg { width: 12px; height: 12px; }
.m-board-tools { height: 40px; flex: none; display: flex; align-items: center; padding: 6px 96px; gap: 8px; color: var(--vn-grey-1); }
.m-board-tools .ton { color: var(--vn-accent); }
.m-board-tools .sp { flex: 1; }
.m-board-tools svg { width: 16px; height: 16px; }
.m-board-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.m-board-actions > span:not(.m-btn-accent) { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.m-board-actions .m-btn-accent { margin-left: 6px; }
/* 工具行分段：无外框容器，选中段自身带底（对齐真机） */
.m-board-tools .seg { background: transparent; box-shadow: none; padding: 0; gap: 2px; }
.m-board-tools .seg > span { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; font-size: 13px; line-height: 18px; }
.m-board-tools .seg svg { width: 14px; height: 14px; }
.m-board-tools .seg .m-view-add { width: 28px; padding: 0; justify-content: center; }
.m-board-tools .seg > span.is-on { background: var(--vn-bg-1); box-shadow: none; }
html[data-theme="dark"] .m-board-tools .seg { background: transparent; box-shadow: none; }
.m-chiprow { display: flex; align-items: center; gap: 8px; }
.m-board-query { min-height: 48px; flex: none; padding: 2px 96px 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 320px; height: 26px; padding: 0 8px; border-radius: 13px;
  font-size: 13px; line-height: 18px; color: var(--vn-grey-1);
}
.fchip svg { width: 14px; height: 14px; color: var(--vn-grey-1); flex: none; }
.fchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip.is-on { background: var(--vn-bg-2); color: var(--vn-fg); font-weight: 500; }
html[data-theme="dark"] .fchip.is-on { background: var(--vn-bg-1); box-shadow: 0 1px 3px rgba(var(--vn-shadow-raw), .4); }
.fchip.add { border-style: dashed; color: var(--vn-grey-1); }
.fchip.tint { background: color-mix(in srgb, var(--vn-accent) 16%, transparent); color: var(--vn-accent); }
.fchip.tint svg { color: var(--vn-accent); }
.reset-inline { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; font-size: 13px; color: var(--vn-grey-1); margin-left: 8px; }
.fadd { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; gap: 5px; font-size: 13px; color: var(--vn-grey-1); }
.fdiv { flex: none; width: 1px; height: 18px; background: var(--m-line); margin: 0 2px; }
.fadd svg { width: 13px; height: 13px; }
.m-thead svg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }
.m-thead .tt { font-style: normal; font-weight: 700; font-size: 10.5px; margin-right: 4px; }
.m-tgroup .caret { width: 11px; height: 11px; color: var(--vn-grey-1); flex: none; }
.m-me { width: 20px; height: 20px; border-radius: 50%; background: var(--vn-bg-1); color: var(--vn-fg-2); font-size: 8.57px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.plain-status { font-size: 12px; color: var(--vn-grey-1); display: inline-flex; align-items: center; height: 20px; }
.m-table { flex: 1; min-height: 0; overflow: hidden; }
.m-thead {
  display: grid; grid-template-columns: 416px repeat(6, 180px) 66px;
  gap: 0; align-items: center;
  width: max-content; height: 36px;
  font-size: 14px; line-height: 18px; color: var(--vn-grey-1);
  position: relative;
}
.m-thead::after { content: ""; position: absolute; left: 96px; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--vn-bg-2) 70%, transparent); }
.m-thead > span, .m-trow > span { min-width: 0; height: 100%; padding: 0 10px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.m-thead > span:first-child, .m-trow > span:first-child { padding-left: 106px; }
.m-thead svg { width: 14px; height: 14px; flex: none; margin: 0; }
.m-trow {
  display: grid; grid-template-columns: 416px repeat(6, 180px) 66px;
  gap: 0; align-items: center;
  width: max-content; height: 36px;
  font-size: 14px; line-height: 18px; position: relative;
}
.m-trow:not(.is-add)::after { content: ""; position: absolute; left: 96px; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--vn-bg-2) 30%, transparent); }
.m-trow:not(.is-add) > span { border-right: 1px solid color-mix(in srgb, var(--vn-bg-2) 40%, transparent); }
.m-trow .doc { gap: 6px; color: var(--vn-fg); font-weight: 500; }
.m-trow .doc svg { width: 14px; height: 14px; color: var(--vn-grey-1); flex: none; }
.m-trow .doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-trow .mut { color: var(--vn-grey-1); font-size: 14px; white-space: nowrap; }
.m-trow > .mut:nth-child(5) { color: var(--vn-fg); }
.m-trow .em { color: var(--vn-grey-0); }
.tacts { display: flex; align-items: center; gap: 12px; color: var(--vn-grey-1); flex: none; }
.tacts svg { width: 12px; height: 12px; }
.m-tgroup .chip, .m-trow .chip { height: 20px; padding: 1px 6px; gap: 4px; border-radius: 6px; font-size: 14px; line-height: 18px; font-weight: 400; }
.m-trow .chip.is-status { border-radius: 999px; }
.m-trow .chip svg { width: 14px; height: 14px; }
.m-tgroup { height: 52px; display: flex; align-items: center; gap: 8px; padding: 20px 0 4px 110px; }
.m-tgroup .caret { width: 12px; height: 12px; }
.m-tgroup b { font-size: 13px; font-weight: 600; }
.m-tgroup .cnt { font-size: 14px; color: var(--vn-grey-0); }
.m-trow.is-add { color: var(--vn-grey-0); font-size: 13px; }
.m-trow.is-add .doc { gap: 6px; }
.m-trow.is-blank { height: 36px; }

/* ---------- AI 批注 mock ---------- */
.m-threads {
  width: 348px; flex: none;
  border-left: 1px solid var(--m-line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.m-threads-h { padding: 12px 14px 8px; display: flex; align-items: center; gap: 10px; }
.m-threads-h b { font-size: 14px; font-weight: 600; }
.m-threads-h svg { width: 14px; height: 14px; color: var(--vn-grey-1); }
.m-threads-h .end { margin-left: auto; }
.m-threads .seg { margin: 0 14px 10px; }
.m-threadlist { flex: 1; overflow: hidden; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 9px; }
.m-thread {
  border-left: 2px solid var(--vn-accent);
  background: color-mix(in srgb, var(--vn-bg-1) 62%, transparent);
  border-radius: 4px 10px 10px 4px;
  padding: 9px 11px 8px;
}
.m-thread-h { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--vn-grey-2); }
.m-msg { margin-top: 8px; }
.m-msg-a { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--vn-fg-2); }
.m-msg-a .who { font-weight: 600; color: var(--vn-fg-1); }
.m-msg-a time { color: var(--vn-grey-0); font-size: 10.5px; margin-left: auto; }
.m-msg-a .ai { width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.m-msg-b {
  margin-top: 5px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-bg-2);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px; color: var(--vn-fg-2); line-height: 1.55;
}
html[data-theme="dark"] .m-msg-b { background: color-mix(in srgb, var(--vn-bg-2) 34%, transparent); }
.m-msg-acts { margin-top: 6px; display: flex; gap: 10px; color: var(--vn-grey-0); }
.m-msg-acts svg { width: 12px; height: 12px; }
.m-thread.is-folded { border-left-color: var(--vn-bg-3); }
.m-thread.is-folded .fold { color: var(--vn-grey-1); }
.m-hl {
  background: color-mix(in srgb, var(--vn-accent) 14%, transparent);
  border-left: 2px solid var(--vn-accent);
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
  margin-top: 9px;
}
.m-anno-list { flex: 1; overflow: hidden; padding: 2px 8px; }
.m-anno-item { padding: 9px 10px; border-radius: 9px; }
.m-anno-item.is-active { background: var(--vn-bg-1); }
html[data-theme="dark"] .m-anno-item.is-active { background: color-mix(in srgb, var(--vn-bg-1) 72%, transparent); }
.m-anno-t { display: flex; align-items: baseline; gap: 8px; }
.m-anno-t b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-anno-t .n { margin-left: auto; flex: none; min-width: 18px; height: 18px; border-radius: 9px; background: var(--vn-bg-2); color: var(--vn-grey-2); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.m-anno-p { margin-top: 3px; font-size: 11px; color: var(--vn-grey-1); }

/* ---------- Git 历史 mock（示例数据） ---------- */
.m-hist { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-hist-h { height: 46px; flex: none; display: flex; align-items: center; padding: 0 18px; gap: 10px; border-bottom: 1px solid var(--m-line); font-weight: 600; font-size: 14px; }
.m-hist-h .n { font-weight: 400; font-size: 12px; color: var(--vn-grey-1); }
.m-hist-h .end { margin-left: auto; display: flex; gap: 10px; color: var(--vn-grey-2); align-items: center; }
.m-hist-h .end svg { width: 15px; height: 15px; }
.m-hist-list { flex: 1; overflow: hidden; padding: 6px 18px; }
.m-commit { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--vn-bg-1); }
.m-commit .rail { width: 22px; flex: none; display: flex; justify-content: center; }
.m-commit .rail i { width: 9px; height: 9px; border-radius: 50%; background: var(--vn-green); display: block; }
.m-commit .rail i.alt { background: var(--vn-accent); }
.m-commit .msg { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-commit .doc { font-size: 11.5px; color: var(--vn-grey-1); flex: none; }
.m-commit .hash { font-family: var(--mono); font-size: 11px; color: var(--vn-grey-0); flex: none; }
.m-commit time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--vn-grey-1); }
.m-sync { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: var(--vn-green); background: color-mix(in srgb, var(--vn-green) 15%, transparent); }
.m-sync svg { width: 12px; height: 12px; }

/* 小窗 mock（理念条用不到，批注示例里也不用，仅备用） */
.mock.is-compact .m-tabs { margin-left: 90px; }
/* ---------- 入门文档（居中窄栏，无面包屑/状态栏） ---------- */
  margin-top: 16px;
  background: color-mix(in srgb, var(--vn-fg) 7%, transparent);
  border-radius: 10px;
  padding: 14px 16px 6px;
}