wendang-react 0.0.0-stage → 0.5.6

package/dist/styles.css

@@ -0,0 +1,2615 @@
+.wendang {
+  --color-bg: #f6f8fc; --color-surface: #fff; --color-surface-subtle: #f5f7fa;
+  --color-text: #1f2937; --color-text-muted: #667085; --color-text-faint: #7c8798;
+  --color-border: #dce2eb; --color-border-strong: #b9c3d2;
+  --color-accent: var(--wendang-accent, #2f6feb); --color-accent-soft: #eaf1ff;
+  --color-danger: #cf3d48; --color-success: #21814b; --color-warning: #ad6b12;
+  /*
+   * 行内评论标记色：**同一黄色系的三档**，不引入第二种色相。
+   *
+   * 早先"有回复"的评论用蓝色区分，用户反馈蓝色与黄色差别太大、容易误读成
+   * 两类不同的东西（"可以搞多色，但是不要影响用户心智"）。现在三档都在黄色
+   * 家族里，靠**深浅**表达强弱：
+   *   - 普通评论：亮黄底 + 深琥珀下划线；
+   *   - 有回复：底色加深一档（表示这里更"热"）；
+   *   - 当前激活：再深一档。
+   * 下划线取深琥珀（#d48806）而不是亮黄：底色变亮后，浅色下划线在浅蓝/白
+   * 背景上都看不清（用户反馈"这个看不清，底部和背景色"）。
+   */
+  --comment-mark-bg: #ffe58f; --comment-mark-line: #d48806;
+  --comment-mark-bg-reply: #ffd66688; --comment-mark-line-reply: #ff9900;
+  --comment-mark-bg-active: #ffc53d; --comment-mark-line-active: #ad6800;
+  --content-font-size: 16px; --content-line-height: 1.75; --content-text-color: var(--color-text);
+  --content-width: 100%; --shadow-pop: 0 10px 32px #14284a20;
+  /*
+   * 内容排版 token（表格、标题、间距、媒体）。
+   *
+   * 这些变量原先只存在于 YWiki 的 web/src/styles/global.css，抽成 SDK 时
+   * 消费方（shared/content-style.css）留下了、定义方漏掉了。CSS 变量取到
+   * 无效值会让整条声明在计算值阶段失效，于是表格边框变成 none、表头背景
+   * 变透明、段落与标题的间距塌成 0。颜色用绝对值，间距跟随 --content-font-size。
+   */
+  --content-heading-color: #101828;
+  --content-table-header-bg: #edf3fc;
+  --content-table-grid-color: #d5dfed;
+  --content-table-font-size: calc(var(--content-font-size) * 13 / 14);
+  --content-table-line-height: 1.5;
+  --content-media-radius: 8px;
+  --content-scroll-offset: 80px;
+  /**
+   * 块间距（段落之间）。
+   *
+   * 从 `3/7`（16px 字号下 6.86px）调到 `5/7`（11.43px）。原因有两个：
+   *  1. 6.86px 对中文正文偏紧，段与段之间读起来粘连（用户反馈"行间距处理下"）；
+   *  2. 块选中时会沿块上下各外扩一段做高亮带，而外扩必须给相邻块之间保留
+   *     可见的白缝——间距太小时这段预算不够，两个块的底色会糊成一整块
+   *     （用户实测："带了选中背景后上下间距没了"）。
+   */
+  --space-block: calc(var(--content-font-size) * 5 / 7);
+  --space-module: calc(var(--content-font-size) * 9 / 7);
+  --space-heading-top: calc(var(--content-font-size) * 2);
+  --space-heading-bottom: calc(var(--content-font-size) * 5 / 7);
+  --space-list-item: calc(var(--content-font-size) * 0.25);
+  --space-list-block: calc(var(--content-font-size) * 0.5);
+  --space-divider: calc(var(--content-font-size) * 2);
+  --color-code-bg: #f1f5fa;
+  color: var(--color-text); background: var(--color-surface);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
+  min-width: 0; min-height: 0;
+}
+.wendang[data-wendang-theme="dark"] {
+  --color-bg: #17191e; --color-surface: #202329; --color-surface-subtle: #292d35;
+  --color-text: #e5e9f0; --color-text-muted: #b2bdcd; --color-text-faint: #8f9cb0;
+  --color-border: #3b4350; --color-border-strong: #606c7e; --color-accent-soft: #243653;
+  --content-text-color: #e8e8ec;
+  --content-heading-color: #f0f0f3;
+  --content-table-header-bg: #2a2e38;
+  --content-table-grid-color: #424753;
+  --color-code-bg: #20242c;
+  /* 深色底上用低明度琥珀底 + 高明度下划线，保持同一黄色系的三档深浅 */
+  --comment-mark-bg: #4a3a12; --comment-mark-line: #e8b923;
+  --comment-mark-bg-reply: #5c4813; --comment-mark-line-reply: #ffc53d;
+  --comment-mark-bg-active: #6b5416; --comment-mark-line-active: #ffc53d;
+}
+.wendang-root { min-height: 0; min-width: 0; height: 100%; }
+/**
+ * 浮层挂载根。必须建层叠上下文：正文 `.tiptap` 自己是 `position: relative`，
+ * 若 portal 没有 z-index，它会被正文里的图片等元素盖住——实测拖拽插入线
+ * 就因此完全看不见（mouse 命中的是图片）。
+ */
+.wendang-portal {
+  position: relative;
+  z-index: 1000;
+}
+/*
+ * 基础元素样式同时作用于 `.wendang` 正文与 `.wendang-popup-scope` 弹层内容。
+ *
+ * 弹层（对话框、右键菜单）teleport 到 body 后不在 `.wendang` 内，只带了一份
+ * token 副本；如果这些规则只写在 `.wendang` 下，弹层里的 input 会退回浏览器
+ * 默认样式、`.muted`/`.small`/`.error-banner` 全部失效。用 `:is()` 让两处共用
+ * 同一组声明，避免再复制一遍。
+ */
+/* Inline topic editors own their font metrics and appearance in both canvas hosts. */
+:is(.wendang, .wendang-popup-scope) :where(button, input, textarea):not(:where(.mind-topic-input)) { font: inherit; box-sizing: border-box; }
+:is(.wendang, .wendang-popup-scope) :where(a) { color: var(--color-accent); }
+:is(.wendang, .wendang-popup-scope) :where(button) { cursor: pointer; }
+:is(.wendang, .wendang-popup-scope) .muted { color: var(--color-text-muted); }
+:is(.wendang, .wendang-popup-scope) .small { font-size: 12px; }
+:is(.wendang, .wendang-popup-scope) :where(input:not([type=checkbox]):not([type=radio]), textarea):not(.worksheet-grid *):not(:where(.mind-topic-input)) {
+  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
+  border-radius: 6px; padding: 6px 8px;
+}
+:is(.wendang, .wendang-popup-scope) :where(.error-banner, .error) { color: var(--color-danger); }
+:is(.wendang, .wendang-popup-scope) :where(.notice) { color: var(--color-text-muted); }
+
+/* 文档调色板：与存储值分开，切换主题不会改写正文或触发保存。 */
+.wendang {
+  --doc-text-gray: #646a73;
+  --doc-text-red: #d92c2c;
+  --doc-text-orange: #b95d0b;
+  --doc-text-yellow: #8a6c0a;
+  --doc-text-green: #237b35;
+  --doc-text-blue: #1971c2;
+  --doc-text-purple: #7048e8;
+  --doc-highlight-gray-soft: #f1f3f5;
+  --doc-highlight-red: #ffe3e3;
+  --doc-highlight-orange: #fff0db;
+  --doc-highlight-yellow: #fff3bf;
+  --doc-highlight-green: #d3f9d8;
+  --doc-highlight-blue: #d0ebff;
+  --doc-highlight-purple: #e5dbff;
+  --doc-highlight-gray: #dee2e6;
+  --doc-highlight-gray-strong: #ced4da;
+  --doc-highlight-red-strong: #ffc9c9;
+  --doc-highlight-orange-strong: #ffd8a8;
+  --doc-highlight-yellow-strong: #ffec99;
+  --doc-highlight-green-strong: #b2f2bb;
+  --doc-highlight-blue-strong: #a5d8ff;
+  --doc-highlight-purple-strong: #d0bfff;
+}
+
+.wendang[data-wendang-theme='dark'] {
+  --doc-text-gray: #b8beca;
+  --doc-text-red: #ff9b9b;
+  --doc-text-orange: #ffc078;
+  --doc-text-yellow: #f6d37a;
+  --doc-text-green: #8ce99a;
+  --doc-text-blue: #91caff;
+  --doc-text-purple: #d0bfff;
+  --doc-highlight-gray-soft: #32353d;
+  --doc-highlight-red: #563138;
+  --doc-highlight-orange: #523a2a;
+  --doc-highlight-yellow: #4a4226;
+  --doc-highlight-green: #294737;
+  --doc-highlight-blue: #293f5b;
+  --doc-highlight-purple: #42335b;
+  --doc-highlight-gray: #424650;
+  --doc-highlight-gray-strong: #555b66;
+  --doc-highlight-red-strong: #713f47;
+  --doc-highlight-orange-strong: #6a4b31;
+  --doc-highlight-yellow-strong: #635732;
+  --doc-highlight-green-strong: #355c44;
+  --doc-highlight-blue-strong: #355476;
+  --doc-highlight-purple-strong: #554273;
+}
+/**
+ * 只读渲染器**专属**样式。
+ *
+ * 说明：内容排版（标题/列表/表格/代码/引用/高亮块/行内元素……）已收敛到
+ * `@/shared/content-style.css` 的单一真源，编辑端与只读端共用；本文件只保留
+ * **只有只读端才有**的东西：图片懒加载占位、公式占位/错误、附件卡片。
+ *
+ * 历史教训：曾因渲染器从 .vue 迁为 .ts 而丢失整个样式文件，排版静默退回浏览器
+ * 默认——结构正常、观感没生效，是很容易漏掉的回归。因此这里显式 import。
+ */
+/* One shell for the editor node view and the read-only renderer. */
+.ywiki-content .ywiki-code-panel {
+  --code-bg:#ffffff;--code-header:#f7f8fa;--code-border:#e2e5e9;--code-text:#303640;--code-muted:#8a9099;
+  --code-keyword:#d13b52;--code-string:#2e8764;--code-number:#a66e12;--code-title:#8250b5;--code-property:#476f9c;--code-comment:#8a9099;--code-tag:#bf3c51;
+  position:relative;min-width:0;max-width:100%;border:1px solid var(--code-border);border-radius:7px;
+  background:var(--code-bg);color:var(--code-text);isolation:isolate;
+}
+.ywiki-content .ywiki-code-panel.code-theme-soft {
+  --code-bg:#f5f8fc;--code-header:#edf2f8;--code-border:#dce4ef;--code-text:#34445b;--code-muted:#8492a7;
+  --code-keyword:#3478bd;--code-string:#318b6d;--code-number:#9b7a1e;--code-title:#9851c4;--code-property:#516c9f;--code-comment:#8492a7;--code-tag:#b14c6c;
+}
+[data-wendang-theme='dark'] .ywiki-content .ywiki-code-panel.code-theme-auto,
+.ywiki-content .ywiki-code-panel.code-theme-night {
+  --code-bg:#20242c;--code-header:#272c35;--code-border:#373e49;--code-text:#d7dde7;--code-muted:#929cac;
+  --code-keyword:#f58196;--code-string:#a5cf8b;--code-number:#efbc82;--code-title:#c6a0ee;--code-property:#89b9ee;--code-comment:#919cab;--code-tag:#f08a9d;
+}
+.code-toolbar {display:flex;align-items:center;gap:7px;min-height:38px;padding:4px 9px;background:var(--code-header);border-bottom:1px solid var(--code-border);border-radius:6px 6px 0 0;font:12px/1.5 var(--font-sans,system-ui,sans-serif);color:var(--code-muted);user-select:none;}
+.code-toolbar-host {position:relative;z-index:2;}
+.code-toolbar-actions {display:flex;align-items:center;gap:7px;margin-left:auto;min-width:0;}
+.code-toolbar-summary {font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
+/*
+ * 语言选择器在代码块的深色标题栏里，必须把 wui 的语义变量改指向代码块色板，
+ * 否则会是一块白底控件。面板本身渲染在 portal 根（正文之外），不继承这些
+ * 变量，因此下拉列表仍是普通的浅色菜单 —— 与其它菜单一致。
+ */
+.code-language-select {width:146px;font-size:12px;--w-surface:var(--code-header);--w-text:var(--code-text);--w-text-faint:var(--code-muted);--w-border-strong:var(--code-border);--w-border:var(--code-border);--w-surface-subtle:color-mix(in srgb,var(--code-text) 10%,transparent);}
+.code-language-label {max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
+.code-toolbar-divider {height:15px;border-left:1px solid var(--code-border);margin:0 2px;}
+.code-toolbar .code-copy-button,.code-toolbar .code-settings-button,.code-toolbar .code-fold-button {color:var(--code-muted);background:transparent;}
+.code-toolbar .code-copy-button {min-width:86px;}
+.code-toolbar .code-copy-button:hover,.code-toolbar .code-settings-button:hover,.code-toolbar .code-fold-button:hover {color:var(--code-text);background:color-mix(in srgb,var(--code-text) 6%,transparent);}
+.code-copy-button svg {vertical-align:middle;}
+.code-copy-announcement {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
+.code-option-check {float:right;margin-left:24px;}
+.code-theme-swatch {display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:8px;border:1px solid #c7ccd4;border-radius:3px;background:#fff;}
+.code-theme-swatch[data-code-swatch='auto'] {background:linear-gradient(90deg,#fff 50%,#303743 50%);}
+.code-theme-swatch[data-code-swatch='soft'] {background:#e6effa;}
+.code-theme-swatch[data-code-swatch='night'] {background:#272c35;}
+.ywiki-content .ywiki-code-panel .code-scroll {display:flex;align-items:stretch;position:relative;overflow:auto;max-height:464px;border-radius:0 0 6px 6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--code-muted) 45%,transparent) transparent;background:var(--code-bg);}
+.ywiki-content .ywiki-code-panel .code-scroll[hidden] {display:none;}
+.ywiki-content .ywiki-code-panel.is-unlimited .code-scroll {max-height:none;}
+.ywiki-content .ywiki-code-panel .code-line-numbers,
+.ywiki-content .ywiki-code-panel pre.doc-code {font:13px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-variant-ligatures:none;tab-size:2;white-space:pre;}
+.ywiki-content .ywiki-code-panel .code-line-numbers {position:sticky;left:0;z-index:1;align-self:stretch;flex:0 0 auto;min-width:42px;box-sizing:border-box;padding:12px 10px 12px 12px;text-align:right;color:var(--code-muted);background:var(--code-bg);border-right:1px solid color-mix(in srgb,var(--code-border) 65%,transparent);user-select:none;pointer-events:none;}
+.ywiki-content .ywiki-code-panel pre.doc-code {flex:1 0 auto;min-width:0;max-width:none;margin:0!important;padding:12px 16px;border:0;border-radius:0;background:var(--code-bg);color:var(--code-text);overflow:visible;}
+.ywiki-content .ywiki-code-panel pre.doc-code code {display:block;margin:0;padding:0;border:0;background:none;color:var(--code-text);font:inherit;white-space:inherit;tab-size:inherit;border-radius:0;}
+.ywiki-content .ywiki-code-panel.is-collapsed .code-toolbar {border-bottom:0;border-radius:6px;}
+.ywiki-content .ywiki-code-panel:focus-within {border-color:color-mix(in srgb,var(--color-accent) 45%,var(--code-border));}
+.ywiki-content .ywiki-code-panel .code-scroll:focus-visible {outline:2px solid var(--color-accent);outline-offset:-2px;}
+.ywiki-content .ywiki-code-panel :where(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-meta) {color:var(--code-keyword);}
+.ywiki-content .ywiki-code-panel :where(.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute) {color:var(--code-string);}
+.ywiki-content .ywiki-code-panel :where(.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-variable,.hljs-template-variable) {color:var(--code-number);}
+.ywiki-content .ywiki-code-panel :where(.hljs-title,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-type) {color:var(--code-title);}
+.ywiki-content .ywiki-code-panel :where(.hljs-built_in,.hljs-attr,.hljs-property) {color:var(--code-property);}
+.ywiki-content .ywiki-code-panel :where(.hljs-comment,.hljs-quote) {color:var(--code-comment);font-style:normal;}
+.ywiki-content .ywiki-code-panel :where(.hljs-tag,.hljs-name,.hljs-deletion) {color:var(--code-tag);}
+@media(max-width:600px){.code-toolbar{gap:4px;padding-inline:6px}.code-toolbar-actions{gap:4px}.code-language-select{width:108px}.code-toolbar-summary{display:none}.code-toolbar-divider{margin:0}.code-language-label{max-width:100px}.code-copy-button{min-width:72px!important}}
+@media print{.ywiki-content .ywiki-code-panel .code-scroll{max-height:none!important;overflow:visible!important;display:flex!important}.code-toolbar-actions,.code-fold-button{display:none!important}.ywiki-content .ywiki-code-panel{break-inside:avoid}.ywiki-content .ywiki-code-panel pre.doc-code{white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:1}}
+/* Tokens are document presentation; saved attributes never contain free CSS values. */
+[data-wendang-theme] {
+  --callout-border-gray:#c7cbd1;--callout-border-red:#f0a2a2;--callout-border-orange:#ffc078;--callout-border-yellow:#e3ca71;
+  --callout-border-green:#91d4a0;--callout-border-blue:#9ac5ef;--callout-border-purple:#c0a4ed;
+}
+[data-wendang-theme='dark'] {
+  --callout-border-gray:#697181;--callout-border-red:#a7606b;--callout-border-orange:#a97843;--callout-border-yellow:#97844a;
+  --callout-border-green:#5c8b6c;--callout-border-blue:#587fa9;--callout-border-purple:#8667af;
+}
+.ywiki-content .doc-callout {
+  --callout-first-line-height:calc(var(--content-font-size) * var(--content-line-height));
+  position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:start;
+  border:1px solid var(--callout-border,var(--callout-border-blue));border-radius:9px;
+  background:var(--callout-fill,var(--doc-highlight-blue));color:var(--callout-text,var(--content-text-color));
+  padding:16px 18px;
+}
+.ywiki-content .doc-callout[data-icon-hidden='true'] {grid-template-columns:minmax(0,1fr);}
+.callout-controls-host {display:contents;}
+.ywiki-content .doc-callout-content {grid-column:2;grid-row:1;min-width:0;color:inherit;}
+.ywiki-content .doc-callout[data-icon-hidden='true']>.doc-callout-content {grid-column:1;}
+.ywiki-content .doc-callout .callout-icon {
+  grid-column:1;grid-row:1;align-self:start;display:inline-flex;align-items:center;justify-content:center;
+  width:30px;min-width:30px;height:var(--callout-first-line-height);min-height:0;padding:0;
+  font-size:22px;line-height:1;user-select:none;color:inherit;
+}
+/* A heading on the first line has its own size and leading; later paragraphs do not move the icon. */
+.ywiki-content .doc-callout:has(>.doc-callout-content>h1:first-child){--callout-first-line-height:calc(var(--content-font-size) * 1.625 * 1.3);}
+.ywiki-content .doc-callout:has(>.doc-callout-content>h2:first-child){--callout-first-line-height:calc(var(--content-font-size) * 1.375 * 1.3);}
+.ywiki-content .doc-callout:has(>.doc-callout-content>h3:first-child){--callout-first-line-height:calc(var(--content-font-size) * 1.125 * 1.3);}
+.ywiki-content .doc-callout:has(>.doc-callout-content>:is(h4,h5,h6):first-child){--callout-first-line-height:calc(var(--content-font-size) * 1.3);}
+.ywiki-content .doc-callout>.doc-callout-content>:first-child {margin-top:0;}
+.ywiki-content .doc-callout>.doc-callout-content>:last-child {margin-bottom:0;}
+.ywiki-content .doc-callout-content :where(h1,h2,h3,h4,h5,h6) {color:inherit;}
+@media(max-width:600px){.ywiki-content .doc-callout{padding:12px;column-gap:9px;}}
+
+/**
+ * 内容排版**单一真源**。
+ *
+ * 为什么单独一个文件（对齐《Wiki好用技术方案》1.1 的「单一 schema 真源」）：
+ * 正文的观感必须在**编辑态与只读态完全一致**。此前编辑端样式写在
+ * `EditorPane.vue` 的 `.ywiki-prose`、只读端写在 `renderer/renderer.css`
+ * 的 `.doc-renderer`，两份各改各的——实测已经漂移（标题上间距 1.2em vs 1.6em、
+ * h5/h6 两端都没定义）。这里收敛为一份，两端只在根元素上带同一个类
+ * `ywiki-content`：
+ *   - 编辑端：`editorProps.attributes.class = 'ywiki-prose ywiki-content'`
+ *   - 只读端：`DocRenderer` 根节点 `class="doc-renderer ywiki-content"`
+ *
+ * 只保留「只有一端才有」的规则在各自文件里（如编辑端的块手柄、只读端的
+ * 图片懒加载占位）。凡是两端都会渲染的元素，样式只写在这里。
+ *
+ * 尺度以 docs/Wiki内容区域规范.md 为准；数值是 YWiki 的产品基线。
+ * 块间距由文件末尾的 flow 规则统一处理，容器结构使用 :where()，确保编辑根
+ * 与阅读根以及兼容 .doc-body 容器的选择器优先级相同。元素规则不再各自声明纵向 margin。
+ */
+
+/* ---------------------------------------------------------------- 根与节奏 */
+.ywiki-content {
+  min-width: 0;
+  container-type: inline-size;
+  container-name: wiki-content;
+  font-size: var(--content-font-size);
+  line-height: var(--content-line-height);
+  color: var(--content-text-color);
+  /* 标点空白裁剪（支持的浏览器生效）；不修改正文中的中英文空格。 */
+  text-spacing-trim: space-all;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+/* reset 与 flow 都只有 .ywiki-content 的一份 class 权重。
+   避免 p/ul/pre 的 margin: 0 压过编辑端的相邻块间距。 */
+.ywiki-content :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table, hr, img) {
+  margin-block: 0;
+}
+/* 用户输入的空段落也必须在阅读端保留一行，不能只在编辑端占高度。 */
+.ywiki-content p:empty {
+  min-height: calc(1em * var(--content-line-height));
+}
+.ywiki-content :where(h1, h2, h3, h4, h5, h6):empty {
+  min-height: 1.3em;
+}
+
+/* ---------------------------------------------------------------- 标题层级
+   标题字号随正文 token 等比缩放。
+   字重统一 600（原 650 偏重），标题带轻微负字距更像正文排版而非 UI 文本。 */
+.ywiki-content h1,
+.ywiki-content h2,
+.ywiki-content h3,
+.ywiki-content h4,
+.ywiki-content h5,
+.ywiki-content h6 {
+  font-weight: 600;
+  color: var(--content-heading-color);
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  /* 目录跳转时留出顶部空间，避免标题被页头挡住 */
+  scroll-margin-top: var(--content-scroll-offset);
+}
+.ywiki-content h1 { font-size: calc(var(--content-font-size) * 1.625); }
+.ywiki-content h2 { font-size: calc(var(--content-font-size) * 1.375); }
+.ywiki-content h3 { font-size: calc(var(--content-font-size) * 1.125); }
+.ywiki-content h4 { font-size: var(--content-font-size); }
+.ywiki-content h5 { font-size: var(--content-font-size); }
+.ywiki-content h6 {
+  font-size: var(--content-font-size);
+  color: var(--color-text-muted);
+  letter-spacing: 0;
+}
+
+/* ---------------------------------------------------------------- 列表 */
+.ywiki-content ul,
+.ywiki-content ol {
+  padding-left: 1.5em;
+}
+.ywiki-content ul { list-style: disc; }
+.ywiki-content ol { list-style: decimal; }
+/* 层级用不同符号区分，长嵌套下更容易看清层级。 */
+.ywiki-content ul ul { list-style: circle; }
+.ywiki-content ul ul ul { list-style: square; }
+.ywiki-content li + li { margin-top: var(--space-list-item); }
+.ywiki-content li::marker { color: var(--color-text-muted); }
+/* 列表项段落的 reset 与内部间距同样由 flow 规则提供。 */
+
+/* 待办列表：编辑端是 ul[data-type='taskList']，只读端是 ul.doc-task-list。
+   勾选框与正文左缘齐平、且与首行文字垂直居中（此前水平缩进 4px、垂直偏低约 5px，
+   用户反馈"不对齐"）。刻意不用普通列表的 1.5em 缩进——待办项希望勾选框与
+   上方段落左对齐，读起来是一条直线。 */
+.ywiki-content ul.doc-task-list,
+.ywiki-content ul[data-type='taskList'] {
+  list-style: none;
+  padding-left: 0;
+}
+.ywiki-content li.doc-task-item,
+.ywiki-content ul[data-type='taskList'] > li {
+  display: flex;
+  gap: 0.5em;
+  align-items: flex-start;
+  line-height: var(--content-line-height);
+}
+.ywiki-content li.doc-task-item > input[type='checkbox'],
+.ywiki-content ul[data-type='taskList'] > li > label > input[type='checkbox'] {
+  flex: none;
+  font: inherit;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  accent-color: var(--color-accent);
+}
+/* 阅读端的 input 直接参与任务项布局，用上边距对齐首行。
+   编辑端由首行等高的 label 居中，不能再给 input 叠加这段偏移。 */
+.ywiki-content li.doc-task-item > input[type='checkbox'] {
+  margin-top: calc((var(--content-line-height) - 1) * 0.5em);
+}
+.ywiki-content li.doc-task-item > span,
+.ywiki-content ul[data-type='taskList'] > li > div {
+  min-width: 0;
+  flex: 1;
+}
+
+/* ---------------------------------------------------------------- 引用 */
+.ywiki-content blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding: 0.1em 0 0.1em 1em;
+  color: var(--color-text-muted);
+}
+
+/* 代码块外观由 code-block.css 统一；裸 pre 用于兼容内容。 */
+.ywiki-content pre { overflow:auto; padding:12px 16px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-code-bg); font:13px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+.ywiki-content code { background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:4px;padding:.1em .35em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em; }
+
+/* ---------------- 编辑端：公式就地编辑（nodeView） ---------------- */
+.math-node { cursor: pointer; }
+/* 渲染结果就位后，把它包在带淡底的容器里，提示"这是一段可点击编辑的公式" */
+.math-node .math-render { border-radius: 4px; }
+.math-node:hover .math-render {
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+.math-node.is-editing .math-render { display: none; }
+.math-latex-input {
+  width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 2px 6px;
+  border: 1px solid var(--color-accent);
+  border-radius: 4px;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+/* ---------------------------------------------------------------- 表格
+   文档网格：白色内容区、浅色表头、圆角外框；读写端共用。 */
+.ywiki-content table,
+.ywiki-content .doc-table {
+  --table-grid-color: var(--content-table-grid-color);
+  --table-header-bg: var(--content-table-header-bg);
+  border-collapse: separate;
+  border-spacing: 0;
+  /* 无显式列宽时按内容分配，避免说明列与短标签列被强制等分。
+     有 colwidth 的表格仍通过两端共同的 colgroup + 表宽保留作者尺寸。 */
+  table-layout: auto;
+  width: 100%;
+  font-size: var(--content-table-font-size);
+  background: var(--color-surface);
+  border: 1px solid var(--table-grid-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.ywiki-content :where(.doc-table-wrap, .tableWrapper) {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+.ywiki-content th,
+.ywiki-content td {
+  border: none;
+  border-right: 1px solid var(--table-grid-color);
+  border-bottom: 1px solid var(--table-grid-color);
+  padding: 6px 8px;
+  line-height: var(--content-table-line-height);
+  min-width: 60px;
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+.ywiki-content th {
+  background: var(--table-header-bg);
+  color: var(--content-heading-color);
+  font-weight: 600;
+}
+.ywiki-content tr:last-child > :where(td, th) { border-bottom: none; }
+.ywiki-content tr > :where(td, th):last-child { border-right: none; }
+.ywiki-content tr:first-child > :where(td, th):first-child { border-top-left-radius: 5px; }
+.ywiki-content tr:first-child > :where(td, th):last-child { border-top-right-radius: 5px; }
+.ywiki-content tr:last-child > :where(td, th):first-child { border-bottom-left-radius: 5px; }
+.ywiki-content tr:last-child > :where(td, th):last-child { border-bottom-right-radius: 5px; }
+
+/* ---------------------------------------------------------------- 分割线 */
+.ywiki-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+}
+
+/* ---------------------------------------------------------------- 图片 */
+/* 图注（阅读端由 DocRenderer 渲染在图片下方） */
+.ywiki-content .doc-image-caption {
+  margin-top: 6px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ywiki-content .doc-image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+.ywiki-content .doc-image-gallery > .doc-image[data-sized] {
+  /* 图库内的图由容器统一排布，忽略作者对单图设置的宽度。 */
+  margin-inline: 0;
+}
+/**
+ * 图片行：按比例铺满整行（与编辑态同一口径）。
+ *
+ * 列宽由 `flex-grow: 比例` 分配，高度由 `aspect-ratio` 自动产生，
+ * 因此同行几乎等高、右侧没有空白。
+ */
+.ywiki-content .doc-image-gallery {
+  gap: 12px;
+  align-items: flex-start;
+}
+.ywiki-content .doc-image-gallery > .doc-image {
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  margin: 0;
+  aspect-ratio: var(--doc-image-aspect-ratio, 1.3333);
+  object-fit: contain;
+  /* 权重 = 原始比例 × 用户拖角设定的相对缩放 */
+  flex-grow: calc(var(--doc-image-aspect-ratio, 1) * var(--doc-image-weight, 1));
+}
+/**
+ * 带图注的图片在图片行里被一层 `<figure>` 包住，因此 **figure 才是 flex 子项**。
+ *
+ * 缺了这条规则时 figure 用默认 `flex: 0 1 auto`，按内部图片的固有宽度占位，
+ * 整行被挤成多行（实测两张 4:3 图变成上下两行、右侧留白），与"按比例铺满"
+ * 的口径不一致。变量由渲染器同时写到 figure 上（见 DocRenderer 的 galleryVars）。
+ */
+.ywiki-content .doc-image-gallery > .doc-image-figure {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  flex-grow: calc(var(--doc-image-aspect-ratio, 1) * var(--doc-image-weight, 1));
+}
+.ywiki-content .doc-image-gallery > .doc-image-figure > .doc-image {
+  /* 图注容器已按比例分到列宽，图片铺满容器即可。 */
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+.ywiki-content .doc-image-gallery > .doc-image-figure > .doc-image-caption {
+  /* 行内已有 12px 列间距，图注不再额外缩进，跟随图片列宽。 */
+  margin-inline: 0;
+}
+.ywiki-content img,
+.ywiki-content .doc-image {
+  display: block;
+  margin-inline: auto;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--content-media-radius);
+}
+
+/**
+ * 图片读取中：**渐变沿边框流动**的加载指示。
+ *
+ * ## 为什么不再用"整块灰底 + 微光"
+ *
+ * 静态灰块在浅色页面上几乎看不出是在加载，看起来更像"图丢了"或"这里是一块
+ * 空白"（用户多轮反馈）。改成一条沿边框奔跑的渐变——像贪吃蛇那样顺着圆角
+ * 绕圈，既明确表达"正在取"，又不会往图片区域里填任何东西。
+ *
+ * ## 实现要点
+ *
+ * 1. **conic-gradient + 遮罩挖空**：整块铺一个锥形渐变，再用
+ *    `mask-composite: exclude` 把中间挖掉，只留 2px 的一圈。
+ *    `<img>` 是替换元素、`::before` 不渲染，所以不能像普通元素那样做双层。
+ * 2. **旋转靠 `@property` 注册角度变量**：conic-gradient 的 `from` 角度是离散值，
+ *    只有注册成 `<angle>` 类型才能被 `@keyframes` 平滑插值。不支持 `@property`
+ *    的浏览器会停在静态渐变上（仍有边框，只是不转）。
+ * 3. **加载完成时 `data-loading` 消失** → 遮罩一并移除，图片正常显示，
+ *    不会因为残留的 mask 把图片裁掉。
+ */
+@property --ywiki-image-flow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.ywiki-content .doc-image[data-loading] {
+  box-sizing: border-box;
+  /* 这 3px 就是"边框"的厚度：遮罩只保留它，中间透明 */
+  padding: 3px;
+  border-radius: var(--content-media-radius);
+  background-image: conic-gradient(
+    from var(--ywiki-image-flow-angle),
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 0turn 55%,
+    color-mix(in srgb, var(--color-accent) 55%, transparent) 78%,
+    var(--color-accent) 92%,
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 100%
+  );
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-clip: content-box, border-box;
+  mask-composite: exclude;
+  animation: ywiki-image-flow 1.4s linear infinite;
+  /* 独立图片没有 aspect-ratio 可撑高：给一个最小高度，否则框不可见 */
+  min-height: 120px;
+}
+/* 图片行内的高度由 aspect-ratio 决定，不要再叠加最小高度（会把行撑高） */
+.ywiki-content .doc-image-gallery > .doc-image[data-loading] {
+  min-height: 0;
+}
+@keyframes ywiki-image-flow {
+  to { --ywiki-image-flow-angle: 360deg; }
+}
+/**
+ * 加载失败：一条很淡的实线边框 + 极浅底色，**不流动**。
+ *
+ * 与"加载中"靠"有没有在转"区分：正在转 = 还在取，静止 = 取不到。不需要图标
+ * 或文字（它们在大块图片里比图片本身还抢眼，用户实测反馈更丑）。
+ * 不用虚线：虚线在缩略图上会碎成一段段，看起来像边框画错了。
+ */
+.ywiki-content .doc-image[data-image-error] {
+  box-sizing: border-box;
+  min-height: 72px;
+  background-color: color-mix(in srgb, var(--color-surface-subtle) 70%, var(--color-border));
+  border-radius: var(--content-media-radius);
+  outline: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
+  outline-offset: -1px;
+  /*
+   * 破图图标不在这里处理：组件在失败时给 `<img>` 换上透明像素（见
+   * `LazyAttachmentImage` 的 `TRANSPARENT_PIXEL`）。CSS 侧的 `content: ''`、
+   * `text-indent`、`font-size: 0` 都盖不住浏览器为失败图片绘制的那个图标。
+   */
+}
+.ywiki-content .doc-image-gallery > .doc-image[data-image-error] {
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  /* 减少动效：保留渐变的光段，只是不再旋转 */
+  .ywiki-content .doc-image[data-loading] {
+    animation: none;
+  }
+}
+
+/*
+ * 作者显式缩放过的图片（data-sized）：**左对齐**，宽度即作者设定值。
+ * 与编辑端同一口径（EditorPane 的 .ywiki-image-frame[data-sized]）：
+ * 缩放锚点固定在左缘，编辑端与阅读端观感一致；未缩放的图仍居中。
+ */
+.ywiki-content .doc-image[data-sized] {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/*
+ * 图片工具条设置的显式对齐（data-align）优先于上面的默认规则。
+ * 三端共用同一语义：编辑端用 flex 对齐容器，阅读端用 margin 对齐图片。
+ */
+.ywiki-content .doc-image[data-align='left'] { margin-left: 0; margin-right: auto; }
+.ywiki-content .doc-image[data-align='center'] { margin-left: auto; margin-right: auto; }
+.ywiki-content .doc-image[data-align='right'] { margin-left: auto; margin-right: 0; }
+
+/* ---------------------------------------------------------------- 链接与行内 chip */
+.ywiki-content a,
+.ywiki-content .doc-link {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+.ywiki-content a:hover,
+.ywiki-content .doc-link:hover { text-decoration: underline; }
+
+/* 页面引用：蓝色文字 + 淡下划线。 */
+.ywiki-content .doc-page-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+.ywiki-content .doc-page-link:hover {
+  border-bottom-color: var(--color-accent);
+  text-decoration: none;
+}
+.ywiki-content .doc-page-link-plain { color: var(--color-text); }
+
+/* @提及：蓝色药丸 */
+.ywiki-content .doc-mention {
+  color: var(--color-accent);
+  background: var(--color-accent-soft);
+  border-radius: 4px;
+  padding: 0.05em 0.35em;
+  font-size: 0.95em;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 文字高亮：无自定义颜色时的默认底色（自定义色走内联 style 覆盖） */
+.ywiki-content mark,
+.ywiki-content .doc-mark-highlight {
+  background: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  border-radius: 2px;
+  padding: 0.05em 0.1em;
+  color: inherit;
+}
+
+/* ---------------------------------------------------------------- 分栏 */
+.ywiki-content .doc-columns {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.ywiki-content .doc-column { flex: 1 1 0; min-width: 0; }
+.ywiki-content .doc-column > *:first-child { margin-top: 0; }
+@media (max-width: 560px) {
+  .ywiki-content .doc-columns { flex-direction: column; gap: 10px; }
+}
+@container wiki-content (max-width: 560px) {
+  .ywiki-content .doc-columns { flex-direction: column; gap: 10px; }
+}
+
+/* ---------------------------------------------------------------- 公式 */
+.ywiki-content .doc-math-inline { display: inline-block; vertical-align: middle; }
+.ywiki-content .doc-math-block {
+  display: block;
+  overflow-x: auto;
+  padding: 8px 0;
+  text-align: center;
+}
+.doc-math-pending {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  color: var(--color-text-muted);
+}
+.doc-math-error {
+  border: 1px dashed color-mix(in srgb, var(--color-danger) 50%, transparent);
+  border-radius: 4px;
+  padding: 0 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  color: var(--color-danger);
+}
+.doc-math-error-hint { margin-left: 6px; font-size: 0.85em; opacity: 0.8; }
+
+/* ---------------------------------------------------------------- 文件与媒体
+   编辑 NodeView 与阅读卡片的结构类不同，盒模型与正文均由这一份样式提供。 */
+.ywiki-content :where(.doc-file, .doc-file-attachment) {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: var(--color-surface-subtle);
+  font-size: 14px;
+  color: var(--color-text-muted);
+}
+.ywiki-content .doc-file-head { display: flex; align-items: center; gap: 8px; }
+.ywiki-content .doc-file-icon { flex: none; }
+.ywiki-content .doc-file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ywiki-content .doc-file-size { flex: none; font-size: 12px; color: var(--color-text-faint); }
+.ywiki-content .doc-file-action {
+  flex: none;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: 6px;
+  padding: 2px 10px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.ywiki-content .doc-file-action:hover { color: var(--color-accent); border-color: var(--color-accent); }
+.ywiki-content video.doc-file-video {
+  display: block;
+  width: 100%;
+  max-height: 420px;
+  margin-top: 8px;
+  border-radius: 6px;
+  background: #000;
+}
+.ywiki-content img.doc-file-image {
+  display: block;
+  max-width: 100%;
+  margin: 8px 0 0;
+  border-radius: 6px;
+}
+
+/* ---------------------------------------------------------------- 行内评论高亮
+   编辑端与只读端共用同一套观感。
+
+   ## 同一黄色系三档，靠深浅表达强弱
+
+   早先用 `--color-warning`（偏橙棕）叠 22%，是脏橘色、与正文高亮分不清；
+   后来改淡米黄又太浅（"看不到评论的选中区"）；再后来"有回复"用蓝色区分，
+   用户反馈与黄色差别太大、容易误读成两类东西（"可以搞多色，但是不要影响
+   用户心智"）。
+
+   现在三档都在黄色家族里：普通评论亮黄底 + 深琥珀下划线，有回复加深一档，
+   激活再深一档。下划线用深琥珀而不是亮黄——底色变亮后，浅色下划线在浅蓝
+   或白色背景上都看不清（用户反馈"这个看不清，底部和背景色"）。
+
+   ## 方角，不用圆角
+
+   `border-radius: 0`（用户明确要求）。标记是"文字底下的一条色带"，
+   圆角会让它在行内显得像按钮。
+
+   ## 提示不用原生 title
+
+   `title` 由浏览器绘制、样式不可控，这里由 `shared/comment-hint.ts` 自绘。 */
+.ywiki-content .doc-inline-comment {
+  background: var(--comment-mark-bg, #ffe58f);
+  border-bottom: 2px solid var(--comment-mark-line, #d48806);
+  border-radius: 0;
+  /* 让底色与文字之间留一点空隙，读起来像"标记"而不是"文字被染色" */
+  padding-bottom: 1px;
+  cursor: pointer;
+}
+.ywiki-content .doc-inline-comment.has-replies {
+  background: var(--comment-mark-bg-reply, #ffd666);
+  border-bottom-color: var(--comment-mark-line-reply, #ad6800);
+}
+.ywiki-content .doc-inline-comment.is-active {
+  background: var(--comment-mark-bg-active, #ffc53d);
+  border-bottom-color: var(--comment-mark-line-active, #ad6800);
+  /* 激活项加一圈同色细边：与"有评论"区分开，一眼看出当前在看哪条 */
+  outline: 1px solid var(--comment-mark-line-active, #ad6800);
+  outline-offset: 1px;
+}
+/* 原文被改动：零宽落点用左侧竖线标记，避免伪装成正常高亮 */
+.ywiki-content .doc-inline-comment.is-shifted {
+  border-left: 2px solid var(--color-danger);
+  padding-left: 1px;
+  background: transparent;
+}
+
+/* ---------------------------------------------------------------- 块流
+   两端的结构路径放进 :where()，统一为 (0,1,0) 权重。规则放在元素 reset 之后，
+   不以 !important 或逐个给 h/p 添加 class 来补偿 DOM 包装差异。
+   引用、高亮块、分栏、单元格内部使用同一节奏，首尾不产生额外空白。 */
+.ywiki-content > * + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > * + * {
+  margin-top: var(--space-block);
+}
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--space-heading-top);
+}
+/* 标题与其后的内容是一组，连续标题也保持紧凑。 */
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > :where(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: var(--space-heading-bottom);
+}
+/* 待办项的 label 和内容容器横向排列，不在二者之间加纵向块间距。 */
+/* TaskItem 的编辑 node view 没有 data-type，必须根据父 taskList 识别。 */
+.ywiki-content :where(li:not(.doc-task-item):not(ul[data-type='taskList'] > li), li > div, li > span) > * + * {
+  margin-top: var(--space-list-block);
+}
+/* 结构模块与普通段落分开：两边都留模块间距，不能由短段距挤在一起。
+   编辑 nodeView 与阅读包装分别列明，单元格最后再按其内部紧凑规则覆盖。 */
+.ywiki-content > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) ,
+.ywiki-content > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) + * {
+  margin-top: var(--space-module);
+}
+/* 标题是章节边界；即使前面是表格、代码或媒体，也保留足够章节留白。 */
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--space-heading-top);
+}
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: var(--space-heading-bottom);
+}
+.ywiki-content > hr,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > hr {
+  margin-block: var(--space-divider);
+}
+.ywiki-content > :first-child,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th, li, li > div, li > span) > :first-child {
+  margin-top: 0;
+}
+.ywiki-content > :last-child,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th, li, li > div, li > span) > :last-child {
+  margin-bottom: 0;
+}
+
+/* 文档表格有自己的紧凑节奏，仍保留作者输入的空段落与显式加粗。 */
+.ywiki-content :where(td, th) > * + * { margin-top: 0.25em; }
+.ywiki-content :where(td, th) > :first-child { margin-top: 0; }
+.ywiki-content :where(td, th) > :where(p, ul, ol) { font-weight: inherit; }
+.ywiki-content :where(td, th) > p:empty { min-height: calc(1em * var(--content-table-line-height)); }
+
+/* 阅读端内容宽度交给 token（外观菜单可调） */
+.doc-renderer {
+  width: 100%;
+  max-width: var(--content-width);
+  margin-inline: auto;
+}
+
+/* ---------------------------------------------------------------- 图片懒加载占位
+   还没取到字节（接近视口时才取，见 LazyAttachmentImage）：
+   给一个最小占位高度，避免图片陆续到达时正文不断被顶下去。 */
+.doc-image {
+  cursor: zoom-in;
+}
+.doc-image[data-loading] {
+  min-width: 160px;
+  min-height: 60px;
+  background: var(--color-surface-subtle);
+  border-radius: 8px;
+}
+.doc-image-loading,
+.doc-image-missing,
+.doc-unknown {
+  color: var(--color-text-muted);
+  font-size: 0.9em;
+}
+.doc-unknown {
+  border: 1px dashed var(--color-border-strong);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
+/* 文件卡片的共同样式在 shared/content-style.css。 */
+.doc-file.is-missing { color: var(--color-text-faint); }
+/* 编辑态图片：src 由 node view 按 attachmentId 解析而来（正文不存存储地址）。
+   给个最小样式，避免加载中/缺失时排版跳动。 */
+.ywiki-prose img.ywiki-image {
+  max-width: 100%;
+  border-radius: var(--content-media-radius);
+  display: block;
+}
+/**
+ * 图片容器（node view）的**三层结构**：
+ *   frame（块级、占满整行）→ 水平对齐（flex justify-content）
+ *     inner（贴合图片尺寸）→ 选中框 / 四角手柄 / 块选中高亮
+ *       img
+ *
+ * 选中框必须画在 **inner** 上（用户反馈"编辑图片大小时外框没有跟随图片
+ * 大小变化"）：frame 占满整行，蓝框会横跨整行、右边空出一大片，看起来
+ * 像框没跟着图片走。
+ */
+.ywiki-prose .ywiki-image-frame {
+  display: flex;
+  justify-content: center;
+  /* 图注在图片下方：纵向排列，图片仍按 justify-content 水平对齐 */
+  flex-direction: column;
+  align-items: center;
+}
+/* 有图注时，图片与图注各自成行；图片的水平对齐交给内层 */
+.ywiki-prose .ywiki-image-frame.has-caption > .ywiki-image-inner { align-self: center; }
+/* 图注：一行灰色小字，超出省略（完整内容见 title） */
+.ywiki-prose .ywiki-image-caption {
+  max-width: 100%;
+  margin-top: 6px;
+  padding: 0 2px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: text;
+}
+.ywiki-prose .ywiki-image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+/**
+ * 图片行**整行选中**：给整行加一圈描边。
+ *
+ * 只给每张图铺底色是不够的——图片之间的间隙、行首行尾的留白都没有任何
+ * 选中信号，整行看起来和未选中几乎一样（用户实测反馈："一行全选中也要有
+ * 选中效果"）。
+ *
+ * 不能用普通块的 `::before` 蓝带：图片行是 flex 容器，绝对定位的伪元素
+ * 会参与 flex 布局计算，外扩的 6px 也容易被行高吃掉。改为与其它自带外观
+ * 的块一致的实色描边；圆角取 6px，与表格的选中框对齐。
+ */
+.ywiki-prose .ywiki-image-gallery.is-block-selected {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+/**
+ * 单张图片（独立图片块）被**整块选中**：给图片本身加一圈描边。
+ *
+ * 图片块没有自带外观，走的是"普通块铺蓝带"分支，结果只有一条半透明底色
+ * 与图片上的淡色覆盖，**没有边框**——与表格、高亮块、文件卡片的选中观感
+ * 不一致（用户实测反馈："只有一张图的选中没有边框"）。
+ *
+ * 只作用于独立图片（图片行内的子图不带 `is-block-selected`，整行选中时
+ * 描边画在行容器上），因此不会与图片行的整行框重叠。
+ */
+.ywiki-prose .ywiki-image-frame.is-block-selected .ywiki-image-inner {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame.is-in-gallery .ywiki-image-inner {
+  /* 图片行里不显示四角缩放手柄（等高排布，单图改宽会破坏对齐）。 */
+  cursor: default;
+}
+.ywiki-prose .ywiki-image-gallery {
+  position: relative;
+}
+/* 图片行内的框选矩形（挂在 portal 上，视口坐标定位） */
+.ywiki-gallery-marquee {
+  position: fixed;
+  z-index: 69;
+  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+/**
+ * 图片上的选中覆盖层：**只有一个 `::after`，强度固定 16%**。
+ *
+ * ## 为什么必须合并到一个选择器（用户实测："为什么还有蓝色区域"）
+ *
+ * 这里曾经有两处独立规则写同一个 `::after`：
+ *  - 框选命中（`.is-multi-picked`）16%；
+ *  - 整块选中（`.ywiki-image-frame.is-block-selected`）18%。
+ *
+ * 两者可以同时命中（框选后松手会转成块选区），于是同一个伪元素被两条规则
+ * 分别赋值——后者胜出，颜色却与整页带（16%）不一致，图上出现一块更深的矩形。
+ * 更早还叠过一层 frame 的 16% 背景，合计接近 50%。
+ *
+ * 现在统一为一条规则、一个强度：图片区域与非图片区域的选中底色完全相同。
+ *
+ * `outline` 仍按状态区分（框选中是实线、块选中不描边）——那表达的是"这是
+ * 框选出来的"与"这块在选区里"的差别，不影响底色。
+ */
+.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner,
+.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner,
+.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner {
+  /**
+   * 圆角与表格/其他块的选中描边统一为 6px（用户反馈："图片选中的圆角
+   * 和表格选中的差不多，现在有点不一致"）。早先是 3px/4px，混在一起时
+   * 图片的框明显更方。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.ywiki-prose .is-block-selected .ywiki-image-inner::after,
+.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after,
+.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner::after,
+.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--content-media-radius, 4px);
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  pointer-events: none;
+}
+/**
+ * 跨图片拖拽：**落点提示**。
+ *
+ * ## 从"虚线框"改为"柔和的整体高亮"（用户反馈：虚线框看起来比较生硬）
+ *
+ * 原先落在目标图上画 2px dashed outline。虚线在照片这类复杂底图上会碎成
+ * 一段段，而且"框住整张图"的观感太抢眼——它表达的是"我要插到这里"，不是
+ * "这张图被选中了"，用户的原话是"看怎么处理更好看点"。
+ *
+ * 现在改成两层柔和的信号：
+ *  1. 图片本身叠一层淡强调色（和块选中同一套语言，`::after` 已存在，复用）；
+ *  2. 外加一圈 2px 实线 + 3px 留白的描边，颜色是强调色但带透明度。
+ *
+ * 不用虚线、不用发光：拖拽是高频操作，提示需要"看得见但不吵"。
+ */
+.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner {
+  outline: 2px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
+  outline-offset: 3px;
+  border-radius: var(--content-media-radius, 6px);
+}
+/* 落点图上再叠一层淡色，明确"松手就并到这里" */
+.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--content-media-radius, 6px);
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  pointer-events: none;
+}
+
+/**
+ * 插入指示线：一条**细长的圆头光带**，插在将要落入的位置。
+ *
+ * 几何与颜色都由脚本内联（挂在 portal / body 上取不到主题变量），这里只给
+ * 形状与层级。圆头 + 柔和外发光让它看起来像"一根发光的针"，比纯色方块轻。
+ */
+.ywiki-image-drop-line,
+.ywiki-gallery-drop-line {
+  position: fixed;
+  border-radius: 999px;
+  pointer-events: none;
+  /* 必须高于图片行内容，否则会被图片盖住、看起来"拖拽没有反馈" */
+  z-index: 70;
+}
+.ywiki-image-drop-line { z-index: 60; }
+/**
+ * 指示线两端的小圆点：把"针"的两端收圆，视觉上更像刻度而不是一条色块。
+ * 用伪元素而不是额外 DOM，避免拖拽期间频繁创建节点。
+ */
+.ywiki-image-drop-line::before,
+.ywiki-image-drop-line::after,
+.ywiki-gallery-drop-line::before,
+.ywiki-gallery-drop-line::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  margin-left: -3.5px;
+  border-radius: 50%;
+  background: inherit;
+}
+.ywiki-image-drop-line::before,
+.ywiki-gallery-drop-line::before { top: -3px; }
+.ywiki-image-drop-line::after,
+.ywiki-gallery-drop-line::after { bottom: -3px; }
+.wendang-portal .ywiki-gallery-drop-line,
+.wendang-portal .ywiki-image-drop-line { position: fixed; }
+.ywiki-prose .ywiki-image-frame.is-gallery-dragging {
+  opacity: 0.55;
+}
+/**
+ * 图片行（飞书口径）：**按比例铺满整行**，高度由比例自然产生。
+ *
+ * 为什么不用固定行高：固定行高在图片少时右侧留一大片空白（实测两图并排只占
+ * 一半宽度）。飞书改成「各列按 比例/比例和 分宽度」——列宽加起来正好铺满，
+ * 高度 = 可用宽 / 比例和，因此同行几乎等高且无空白。
+ *
+ * `--ywiki-image-ratio` 由 node view 按原图宽高比写入，`flex-basis` 用比例
+ * 作为权重，`flex-grow` 让它们把剩余空间按权重分掉。
+ */
+.ywiki-prose .ywiki-image-gallery {
+  /* 12px 间距与飞书的 column-gap 实测一致 */
+  gap: 12px;
+  align-items: flex-start;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
+  flex: 1 1 0;
+  /* 基础宽度置零，完全由 flex-grow 按比例分配，避免比例小的图先占位 */
+  min-width: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  justify-content: flex-start;
+}
+/* 分配权重 = 原始比例 × 用户拖角设定的相对缩放（`--ywiki-image-weight`） */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
+  flex-grow: calc(var(--ywiki-image-ratio, 1) * var(--ywiki-image-weight, 1));
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame .ywiki-image-inner {
+  width: 100%;
+  max-width: none;
+}
+/**
+ * 图库内图片高度由比例与列宽共同决定：
+ * `width:100%` + `aspect-ratio` 让高度自动算出来，不用固定行高。
+ * 没有 aspect-ratio（历史图片）时退回 4:3，等补算比例后再自动校正。
+ */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image {
+  width: 100%;
+  height: auto;
+  max-width: none;
+  aspect-ratio: var(--ywiki-image-ratio, 1.3333);
+  object-fit: contain;
+  border-radius: var(--content-media-radius);
+}
+/**
+ * 图片**加载中**：渐变沿边框流动的指示（与阅读端同一口径）。
+ *
+ * 不再用"整块灰底 + 微光"——静态灰块在浅色页面上看不出在加载，更像"图丢了"。
+ * 现在是一条沿圆角绕圈的渐变，像贪吃蛇一样顺着边框跑，图片区域本身保持透明。
+ *
+ * 实现同阅读端：conic-gradient + `mask-composite: exclude` 挖空中间，只留 2px
+ * 边框；旋转靠 `@property` 注册的角度变量插值（定义在 content-style.css，
+ * 该文件也被编辑器引入）。加载完成后 `data-image-loading` 移除，遮罩随之消失。
+ */
+.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
+  box-sizing: border-box;
+  padding: 3px;
+  border-radius: var(--content-media-radius);
+  background-image: conic-gradient(
+    from var(--ywiki-image-flow-angle),
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 0turn 55%,
+    color-mix(in srgb, var(--color-accent) 55%, transparent) 78%,
+    var(--color-accent) 92%,
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 100%
+  );
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-clip: content-box, border-box;
+  mask-composite: exclude;
+  animation: ywiki-image-flow 1.4s linear infinite;
+  /* 独立图片没有 aspect-ratio 撑高，需要最小高度才看得见框 */
+  min-height: 120px;
+}
+/* 图片行内的高度由 aspect-ratio 与列宽决定，不叠加最小高度（否则整行被撑高） */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-loading] {
+  min-height: 0;
+}
+/**
+ * 加载失败：淡底 + 细实线边框，**不流动**。
+ *
+ * "在转 = 还在取 / 静止 = 取不到"，靠动效区分，不需要图标或文字。
+ * 不用虚线：缩略图尺寸下虚线会碎成一段段，看起来像边框画错了。
+ */
+.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-error] {
+  box-sizing: border-box;
+  min-height: 72px;
+  background-color: color-mix(in srgb, var(--color-surface-subtle) 70%, var(--color-border));
+  border-radius: var(--content-media-radius);
+  outline: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
+  outline-offset: -1px;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-error] {
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
+    animation: none;
+  }
+}
+
+/* 显式缩放过（data-sized）的图默认靠左：缩放锚点在左缘，拖动位置稳定 */
+.ywiki-prose .ywiki-image-frame[data-sized] {
+  justify-content: flex-start;
+}
+/* 显式对齐（图片工具条的左/中/右）优先于上面的默认规则 */
+.ywiki-prose .ywiki-image-frame[data-align='left'] { justify-content: flex-start; }
+.ywiki-prose .ywiki-image-frame[data-align='center'] { justify-content: center; }
+.ywiki-prose .ywiki-image-frame[data-align='right'] { justify-content: flex-end; }
+
+/* inner 贴合图片：选中框/手柄相对它定位，才随图片尺寸变化 */
+.ywiki-prose .ywiki-image-inner {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+/* 缩放期间禁止选中文本：跟手拖动时若触发文字选区会打断手感 */
+.ywiki-prose .ywiki-image-frame.is-resizing {
+  user-select: none;
+}
+
+/**
+ * 选中态（对齐飞书截图）：蓝框 + 四角圆点手柄，拖动等比缩放。
+ * 手柄只在"用户点过这张图"时显示（见 `.img-pick-active` 门控说明），
+ * 未选中时 display:none，既不拦截点击也不产生视觉噪声。
+ */
+/**
+ * 四角手柄的尺寸与观感对齐飞书（实测飞书是 20×20 的命中区）。
+ *
+ * 早前是 10px 的小圆点：在 380px 宽的缩略图上几乎看不见，用户反馈
+ * "选中了但看不清是不是选中了"（实测飞书明显更醒目）。这里放大到 14px
+ * 的实心圆 + 2px 蓝描边 + 白色打底，并给整块加一圈白色外发光，
+ * 保证在深色/蓝色图片上也能分辨。
+ */
+.ywiki-prose .ywiki-image-handle {
+  display: none;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 2px solid var(--color-accent);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
+  z-index: 3;
+}
+/*
+ * 选中外观需**同时**满足：node view 处于选中态，且用户点过这张图
+ * （`.img-pick-active`）。只看前者会被 PM 的默认选区骗到——文档以图片
+ * 开头时一打开页面就是 NodeSelection，不门控就会出现"没点过却带蓝框"。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-inner {
+  /**
+   * 双层描边：内层蓝色实线 + 外层白色细线。
+   *
+   * 单用蓝色在蓝底图片上几乎看不出边界（用户反馈"看不清有没有选中"）；
+   * 白色隔离带让边框在任何底图上都有对比，与飞书的观感一致。
+   *
+   * 圆角与表格/其它块的选中框统一为 6px（用户反馈"图片选中的圆角和表格
+   * 选中的差不多，现在有点不一致"）：早先这里是 4px，图片行的框是 3px，
+   * 与表格的 6px 摆在一起时能明显看出差别。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+  border-radius: 6px;
+  box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--color-accent) 28%, transparent);
+}
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-handle {
+  display: block;
+}
+/*
+ * 图片行内**显示**四角手柄（对齐飞书）：拖角调整该图的相对权重，
+ * 整行按新权重重算，因此仍然铺满、仍然等高。
+ * 唯一的例外是「整行处于块选区」时——那时拖动语义是移动整行，
+ * 由行内重排逻辑让位给整块拖拽（见 image-nodeview 的 mousedown 判定）。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-handle {
+  display: block;
+}
+/* 图片行内仍画选中蓝框，但只包住被选中的那一张（inner 贴合图片） */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-inner {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+  /* 与其它块/图片的选中框同一圆角 */
+  border-radius: 6px;
+}
+/* 四个角：手柄中心骑在蓝框上（outline-offset 3px + 手柄半宽 7px = -10px） */
+.ywiki-prose .ywiki-image-handle.handle-nw { left: -10px; top: -10px; cursor: nwse-resize; }
+.ywiki-prose .ywiki-image-handle.handle-ne { right: -10px; top: -10px; cursor: nesw-resize; }
+.ywiki-prose .ywiki-image-handle.handle-sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
+.ywiki-prose .ywiki-image-handle.handle-se { right: -10px; bottom: -10px; cursor: nwse-resize; }
+
+/**
+ * 已选中的图片：放大镜光标（点击再次 = 打开大图预览）。
+ * 拖拽缩放期间必须让位给缩放光标——否则指针拖离手柄、落在图片上时
+ * 会突然变成放大镜（用户实测反馈）。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected:not(.is-resizing) img.ywiki-image {
+  cursor: zoom-in;
+}
+.ywiki-prose img.ywiki-image[data-image-missing] {
+  min-width: 120px;
+  min-height: 40px;
+  border: 1px dashed var(--color-border-strong);
+  background: var(--color-surface-subtle);
+}
+
+/**
+ * 块级选中：普通块铺蓝底，**自带视觉身份的块只加外圈**。
+ *
+ * ## 两种画法，按块是否有自己的「脸」来分
+ *
+ * 飞书的做法（用户提供了对照截图）是一套区分得很清楚的规则：
+ *
+ *  - **普通块**（段落、标题、列表、引用、图片…）——本来没有底色，选中时铺一条
+ *    半透明蓝带，一眼能看出"这一段被选中了"；
+ *  - **自带视觉身份的块**（高亮块、表格、代码块）——它们本来就有底色或边框，
+ *    再往里铺一层蓝会把内容染色、把表格单元格弄脏。这些块只在**外围加一圈
+ *    描边**，表达"这块在选区里"，内容配色完全不动。
+ *
+ * 早先我一度把两类统一成蓝底，结果表格单元格被整片染蓝、高亮块的黄绿底色
+ * 也被改掉——用户明确纠正："像这类（高亮、表格等等）都可以有个外圈，不用蓝色
+ * 背景"。
+ *
+ * ## 宽度只到正文列，不能铺到整页
+ *
+ * 曾经把带子向两侧溢出到"页面横带"边缘，那是把**可起手区域**和**高亮宽度**
+ * 混为一谈了：起手区可以宽（用户在页面空白处按下就能拖选），但高亮必须只覆盖
+ * 正文，否则左侧目录、右侧大纲栏也被染蓝（用户原话："我内容区域在红框区域，
+ * 为啥选中后有个这么宽的蓝色背景？不合理啊！"）。
+ *
+ * ## 为什么普通块用伪元素而不是直接改 `background`
+ *
+ * 直接改背景会与块自身可能存在的底色冲突；伪元素能叠一层半透明，原底色仍透出。
+ * 不能用 `z-index: -1`：那会让底色跑到祖先背景之后（`.tiptap` 是
+ * `position: relative`），一旦宿主给正文加了底色，高亮就整块消失。
+ */
+.ywiki-prose .is-block-selected {
+  position: relative;
+  border-radius: 6px;
+}
+
+/**
+ * 普通块：铺半透明蓝带。
+ *
+ * 排除自带视觉身份的块（见下方外圈分支）——这是两类画法的唯一分界。
+ * 用 `[data-block-chrome]` 声明式判断，而不是硬枚举类名：新增块时只在自己的
+ * 渲染代码里加属性即可，不必回来改这里（思维导图就曾因为漏改而错误地变成蓝底）。
+ */
+.ywiki-prose .is-block-selected:not([data-block-chrome]):not(.doc-callout):not(.tableWrapper):not(.code-block-wrap):not(.ywiki-image-gallery)::before {
+  content: '';
+  position: absolute;
+  /**
+   * 四周比块本身**外扩**，让选中色不要紧贴文字（用户反馈"文字选中区域
+   * 往外扩一下"）。块盒子就是文字行盒，贴着它画会让文字看起来被框死。
+   *
+   * 纵向外扩量由 `measureBlocksPadding` 按**实测块间距**逐块写入：
+   *  - 相邻两个都选中：各溢出间隙的一半 → 两块拼成连续一条，且不重叠
+   *    （间隙实测 6.86px 到 21px 不等，写死一个值必然要么留白缝要么叠出深线）；
+   *  - 开边一侧（首块上方 / 末块下方）：用 `SELECT_PAD_Y` 给文字留呼吸空间。
+   *
+   * 横向用 `SELECT_PAD_X`：再宽就会溢出正文列（用户此前明确反对底色超出版心）。
+   * 两侧同时外扩，因此带子比正文列宽 2×6px，仍落在阅读区留白内。
+   */
+  top: calc(-1 * var(--block-select-pad-top, 5px));
+  bottom: calc(-1 * var(--block-select-pad-bottom, 5px));
+  left: calc(-1 * var(--block-select-pad-x, 6px));
+  right: calc(-1 * var(--block-select-pad-x, 6px));
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  /* 6px 圆角：外扩后的矩形边角更明显，需要圆角才不生硬 */
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+/**
+ * 自带视觉身份的块：**只加外圈，不铺蓝底**。
+ *
+ * ## 哪些块算"自带视觉身份"
+ *
+ * 判据是「它本身已经有可见的边框、底色或独立画布」。这类块再往里铺一层蓝，
+ * 会把内容染色或把画布弄脏；只在外围加圈，既表达"在选区里"，又不改内容观感：
+ *
+ *  - 高亮块（浅色底 + 边框）
+ *  - 表格（网格线）
+ *  - 代码块（深色底）
+ *  - 思维导图（独立画布；用户实测："为啥思维导图没有框而是蓝色"）
+ *  - 文件卡片 / 视频嵌入（自带卡片外观）
+ *  - 分栏（多列结构，铺底色会把两栏之间的空隙也染上）
+ *
+ * 其余块（段落、标题、列表、引用、图片…）没有自己的外观，走蓝底分支。
+ *
+ * ## 为什么用 `[data-block-chrome]` 而不是继续堆类名选择器
+ *
+ * 之前是 `:is(.doc-callout, .tableWrapper, .code-block-wrap)` 硬枚举。每新增
+ * 一种块都要改两处（`:not()` 与 `:is()`），漏一处就会退化成"这个块又变蓝了"——
+ * 思维导图就是这么漏掉的。改为让节点自己在根元素上声明 `data-block-chrome`，
+ * 新增块时只在自己的渲染代码里加一个属性，不必再来碰这里。
+ *
+ * `outline` 而不是 `border`：border 会参与盒模型，给一个已经撑满正文列宽度的
+ * 表格加上 2px 边框会让它溢出或挤压内容；outline 不占布局，`outline-offset`
+ * 还能让它落在块的外侧，正好是"外圈"的观感。
+ *
+ * 用 55% 而非更浅的透明度：高亮块是浅蓝底、代码块是深底、表格有网格线，
+ * 太淡的圈在这些底色上都看不清边界。
+ */
+.ywiki-prose :is([data-block-chrome], .doc-callout, .tableWrapper, .code-block-wrap).is-block-selected {
+  /**
+   * 描边圆角跟着**块自己的圆角**走，而不是写死 6px。
+   *
+   * 各块自带外观的圆角并不统一（高亮块 9px、文件卡片 8px、思维导图 12px），
+   * 写死一个值就会出现"框的角比块本身的角更方"的错位观感（用户实测反馈：
+   * "思维导图的选中圆角最好和选中带边框的圆角一致"）。用变量按块类型覆盖，
+   * 默认 6px 与表格一致。
+   */
+  --block-select-radius: 6px;
+  /**
+   * 实色而不是 55% 半透明：高亮块自带浅色底与彩色边框，半透明蓝圈叠在
+   * 这些底色上几乎看不出来（用户反馈"高亮没有被选中、没有边框"）。与图片
+   * 选中的描边用同一个强度，所有块的"被选中"一眼可辨且观感一致。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  /* 与铺色分支同一圆角，两种选中画的观感才统一 */
+  border-radius: var(--block-select-radius);
+}
+/* 各块按自身外观的圆角覆盖描边圆角（值取自它们各自的 border-radius） */
+.ywiki-prose .doc-callout.is-block-selected { --block-select-radius: 9px; }
+.ywiki-prose .doc-file-attachment.is-block-selected { --block-select-radius: 8px; }
+.ywiki-prose [data-mind-map-node].is-block-selected { --block-select-radius: 12px; }
+
+/* 块级拖拽期间：屏蔽浏览器原生的字形级选中高亮。
+   块级选择本质上是一个覆盖整块文字的文本选区（复制/删除需要它），
+   但浏览器会为它画字形级蓝底，与"整块底色"叠在一起很乱。
+   这里只影响绘制，不影响选区模型与复制行为。 */
+.ywiki-prose.is-block-selecting ::selection,
+.ywiki-prose.is-block-selecting *::selection {
+  background: transparent;
+  color: inherit;
+}
+
+/**
+ * 拖拽选择框（飞书式的矩形，跟随鼠标）。
+ *
+ * ## 必须**填充**，不能只描边（用户对比飞书截图后指出）
+ *
+ * 此前这里刻意只画边框、不铺底色，理由是"填充会盖住高亮块/表格的颜色"。
+ * 但飞书的拖拽框本身就是一块**半透明蓝色矩形**，用户一眼就能判断"我现在框住
+ * 了哪些内容、范围有多大"；只有边框时，框内的内容看起来和框外没区别，
+ * 拖动过程中几乎无法判断落点，这正是用户反馈的差异。
+ *
+ * 用极低的透明度（12%）解决当初的顾虑：底色仍然透得出来，不会把高亮色
+ * 染成另一种颜色；框的边界由 1px 实线 + 白描边交代清楚。
+ */
+.block-marquee {
+  position: absolute;
+  z-index: 33;
+  pointer-events: none;
+  /**
+   * 宽高由插件按「按下点 → 当前指针」的拖拽矩形写入，边框必须算在尺寸内——
+   * 否则 1px 边框会让框比鼠标实际划出的范围多出 2px（用户实测：左边贴合、
+   * 右边多出一截）。
+   */
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-accent) 65%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-surface) 60%, transparent);
+  border-radius: 2px;
+}
+
+/* ---------------------------------------------------------------- 表格交互样式 */
+/* 这几条此前完全缺失：resizable 生效但没有任何可视反馈，选中态也没有高亮，
+   导致"能拖列宽但看不出在哪拖、选中了格子也不知道"。 */
+/**
+ * 列宽拖拽手柄。
+ *
+ * prosemirror-tables 为**每一行**各插一个 4px 宽的 widget，默认样式是强调色 +
+ * 60% 透明度：鼠标经过列边界时它会在表格上竖着亮起一条分段蓝线，既没有
+ * 拖拽反馈，也不像任何已知控件（用户反馈"表格里这个蓝色是什么？没什么用吧"）。
+ *
+ * 改为两级语义：
+ *  - 悬停边界：中性色细线，连续贯穿整列（`top/bottom: -1px` 补齐行间缝隙），
+ *    配合 `col-resize` 光标表达"这里可以拖"；
+ *  - 真正拖拽中（单元格带 `column-resize-dragging`）：才使用强调色。
+ */
+.ywiki-prose .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: -4px;
+  bottom: -4px;
+  width: 3px;
+  border-radius: 2px;
+  background-color: var(--color-border-strong, #b9c3d2);
+  pointer-events: none;
+}
+.ywiki-prose .column-resize-dragging .column-resize-handle {
+  background-color: var(--color-accent, #2f6feb);
+  box-shadow: 0 0 0 1px var(--color-surface, #fff);
+}
+.ywiki-prose.resize-cursor, .ywiki-prose .resize-cursor { cursor: col-resize; }
+/* 矩形选中的单元格 */
+.ywiki-prose .selectedCell:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  pointer-events: none;
+  z-index: 2;
+}
+.ywiki-prose td,
+.ywiki-prose th {
+  position: relative;
+}
+.img-preview-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, #0b1220 84%, transparent);
+  overflow: hidden;
+  user-select: none;
+}
+.img-preview-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  padding: 32px;
+  outline: none;
+}
+.img-preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  cursor: grab;
+  transition: transform 0.12s ease-out;
+  will-change: transform;
+}
+.img-preview-image.is-dragging { cursor: grabbing; transition: none; }
+.img-preview-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  margin-bottom: 24px;
+  padding: 6px 8px;
+  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, #101828 72%, transparent);
+  color: #f2f5fa;
+  backdrop-filter: blur(8px);
+}
+.img-preview-toolbar button {
+  min-width: 32px;
+  height: 30px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.img-preview-toolbar button:hover { background: color-mix(in srgb, #ffffff 16%, transparent); }
+.img-preview-toolbar button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
+.img-preview-scale { min-width: 48px; text-align: center; font-size: 12px; opacity: 0.85; }
+.img-preview-count {
+  min-width: 52px;
+  padding: 0 6px;
+  text-align: center;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.85;
+}
+.img-preview-divider { width: 1px; height: 16px; margin: 0 4px; background: color-mix(in srgb, #ffffff 26%, transparent); }
+
+/* 翻页按钮：两侧垂直居中，避开工具条；深色半透明底保证在任何图片上都可见 */
+.img-preview-nav {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+}
+.img-preview-nav-btn {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
+  border-radius: 50%;
+  background: color-mix(in srgb, #101828 66%, transparent);
+  color: #f2f5fa;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background 0.12s, opacity 0.12s;
+}
+.img-preview-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, #101828 84%, transparent); }
+.img-preview-nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+/* 到头的一侧保留占位（避免另一侧按钮跳动），只降到很低的可见度 */
+.img-preview-nav-btn:disabled { opacity: 0.22; cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .img-preview-image { transition: none; }
+}
+.w-select { display: inline-flex; min-width: 0; }
+.w-select__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--w-border-strong, var(--color-border-strong, #b9c3d2));
+  border-radius: var(--w-radius-sm, 4px);
+  background: var(--w-surface, var(--color-surface, #fff));
+  color: var(--w-text, var(--color-text, #1f2937));
+  font-family: var(--w-font-sans, inherit);
+  cursor: pointer;
+  transition: border-color var(--w-duration-fast, 0.12s);
+}
+.w-select--mini .w-select__trigger { height: var(--w-control-mini, 24px); padding: 0 6px; font-size: var(--w-font-size-mini, 12px); }
+.w-select--small .w-select__trigger { height: var(--w-control-small, 28px); padding: 0 8px; font-size: var(--w-font-size-small, 13px); }
+.w-select--medium .w-select__trigger { height: var(--w-control-medium, 32px); padding: 0 10px; font-size: var(--w-font-size-medium, 14px); }
+.w-select__trigger:hover { border-color: var(--w-accent, var(--color-accent, #2f6feb)); }
+.w-select__trigger:focus-visible { outline: 2px solid var(--w-accent, var(--color-accent, #2f6feb)); outline-offset: 1px; }
+.w-select__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+.w-select__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.w-select__label.is-placeholder { color: var(--w-text-faint, var(--color-text-faint, #7c8798)); }
+.w-select__caret { flex: none; opacity: 0.65; }
+
+.w-select-panel { display: flex; flex-direction: column; min-width: 160px; max-width: min(320px, calc(100vw - 24px)); padding: 4px; }
+.w-select-panel .w-select-search {
+  width: 100%;
+  margin-bottom: 4px;
+  padding: 5px 8px;
+  border: 1px solid var(--w-border, var(--color-border, #dce2eb));
+  border-radius: var(--w-radius-sm, 4px);
+  background: var(--w-surface, var(--color-surface, #fff));
+  color: var(--w-text, var(--color-text, #1f2937));
+  font-size: var(--w-font-size-small, 13px);
+}
+.w-select-panel .w-select-search:focus { outline: 2px solid var(--w-accent, #2f6feb); outline-offset: -1px; }
+.w-select-list {
+  display: flex;
+  flex-direction: column;
+  max-height: min(50vh, 320px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.w-select-option {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 30px;
+  padding: 6px 9px;
+  border: none;
+  border-radius: var(--w-radius-md, 6px);
+  background: transparent;
+  color: var(--w-text, var(--color-text, #1f2937));
+  font-family: inherit;
+  font-size: var(--w-font-size-small, 13px);
+  text-align: left;
+  cursor: pointer;
+}
+.w-select-option.is-active { background: var(--w-surface-subtle, var(--color-surface-subtle, #f5f7fa)); }
+.w-select-option.is-selected { color: var(--w-accent, var(--color-accent, #2f6feb)); background: var(--w-accent-soft, var(--color-accent-soft, #eaf1ff)); }
+.w-select-option:disabled { opacity: 0.45; cursor: not-allowed; }
+.w-select-empty { padding: 8px 9px; color: var(--w-text-faint, #7c8798); font-size: var(--w-font-size-small, 13px); }
+.w-dropdown {
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 24px));
+  max-height: min(70vh, 520px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--w-text-faint, #7c8798) 40%, transparent) transparent;
+}
+.w-dropdown::-webkit-scrollbar { width: 8px; }
+.w-dropdown::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+  background-color: color-mix(in srgb, var(--w-text-faint, #7c8798) 36%, transparent);
+}
+.w-dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  min-height: 30px;
+  padding: 6px 9px;
+  border-radius: var(--w-radius-md, 6px);
+  color: var(--w-text, var(--color-text, #1f2937));
+  font-size: var(--w-font-size-small, 13px);
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+}
+.w-dropdown-option:hover,
+.w-dropdown-option:focus-visible {
+  background: var(--w-surface-subtle, var(--color-surface-subtle, #f5f7fa));
+  outline: none;
+}
+.w-dropdown-option.is-selected {
+  color: var(--w-accent, var(--color-accent, #2f6feb));
+  background: var(--w-accent-soft, var(--color-accent-soft, #eaf1ff));
+}
+.w-dropdown-option.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: transparent;
+}
+.w-dropdown-group__title {
+  padding: 6px 9px 3px;
+  color: var(--w-text-faint, var(--color-text-faint, #7c8798));
+  font-size: 11px;
+  line-height: 1.5;
+}
+.w-dropdown-group + .w-dropdown-group {
+  margin-top: 2px;
+  padding-top: 3px;
+  border-top: 1px solid var(--w-border, var(--color-border, #dce2eb));
+}
+.w-tooltip {
+  padding: 5px 9px;
+  border: 1px solid var(--w-border, var(--color-border, #dce2eb));
+  border-radius: var(--w-radius-sm, 4px);
+  background: var(--w-surface, var(--color-surface, #fff));
+  color: var(--w-text, var(--color-text, #1f2937));
+  font-size: var(--w-font-size-mini, 12px);
+  line-height: 1.55;
+  white-space: nowrap;
+  box-shadow: var(--w-shadow-pop, 0 10px 32px #14284a20);
+}
+.wd-dialog-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 10vh 16px 24px;
+  background: color-mix(in srgb, #101828 42%, transparent);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.wd-dialog-mask.is-fullscreen { padding: 0; overflow: hidden; }
+
+.wd-dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 14vh);
+  border: 1px solid var(--w-border, var(--color-border, #dce2eb));
+  border-radius: var(--w-radius-lg, 8px);
+  background: var(--w-surface, var(--color-surface, #fff));
+  color: var(--w-text, var(--color-text, #1f2937));
+  box-shadow: 0 24px 64px #10182833;
+  outline: none;
+}
+.wd-dialog.is-fullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+}
+
+.wd-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: none;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--w-border, var(--color-border, #dce2eb));
+}
+.wd-dialog__title {
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.wd-dialog__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--w-radius-sm, 4px);
+  background: transparent;
+  color: var(--w-text-muted, var(--color-text-muted, #667085));
+  cursor: pointer;
+}
+.wd-dialog__close:hover { background: var(--w-surface-subtle, #f5f7fa); color: var(--w-text, #1f2937); }
+.wd-dialog__close:focus-visible { outline: 2px solid var(--w-accent, #2f6feb); outline-offset: -2px; }
+
+.wd-dialog__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 25px 24px;
+  line-height: 1.7;
+}
+.wd-dialog.is-fullscreen .wd-dialog__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.wd-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  padding: 0 25px 20px;
+}
+
+@media (max-width: 520px) {
+  .wd-dialog__body { padding: 4px 18px 20px; }
+  .wd-dialog__footer { padding: 0 18px 16px; }
+}
+.mind-inline { height:100%; min-height:380px; }
+.mind-inline .mind-map-workspace { height:100%; padding:0; }
+.mind-canvas-title { display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 110px); }
+.mind-canvas-title > span { font-size: 13px; font-weight: 400; color: var(--color-text-muted); max-width: 65vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/**
+ * 全屏弹层的工作区。
+ *
+ * ## 为什么是 `height:100%` 而不是 `calc(100dvh - 110px)`
+ *
+ * 弹层里 `.wd-dialog__body` 已经是"header 以下的全部高度"（flex 列、无内边距），
+ * 再把 header 高度写死成 110px 去减就是重复扣减：实际 header 只有 57px，
+ * 于是画布底部多出 53px 空白，看起来"没到底"（用户实测："底部可以进一点"）。
+ * 交给父容器决定高度，画布就能填满。
+ *
+ * ## 为什么四周要留内边距
+ *
+ * 全屏时 body 的内边距是 0，工具栏会紧贴 header 的下边线、画布也贴着窗口
+ * 左右边缘（用户实测："边框距离太近"）。这里按工具栏在上、画布在下的顺序
+ * 给一圈呼吸空间；inline（正文内嵌）形态不需要，单独复位为 0。
+ */
+.mind-map-workspace { display: flex; flex-direction: column; height: 100%; min-height: 300px; box-sizing: border-box; padding: 16px 20px 20px; color: var(--color-text); }
+.mind-save-hint { margin-bottom: 10px; }
+.mind-canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; flex-wrap: wrap; }
+.mind-canvas-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
+.mind-canvas-options { justify-content: flex-end; margin-left: auto; }
+.mind-canvas-status { font-size: 12px; color: var(--color-text-muted); max-width: 32vw; }
+.mind-canvas-body { display: flex; flex: 1; min-height: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
+.mind-canvas-stage { position: relative; flex: 1; min-width: 0; overflow: hidden; outline: none; background: radial-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 22px 22px var(--color-surface); }
+.mind-canvas-stage.mind-grid-hidden { background-image:none; }
+.mind-canvas-surface { width:100%;height:100%; }
+.mind-canvas-stage .vue-flow__pane { cursor:default; }
+.mind-canvas-stage .vue-flow__selection,.mind-marquee { background:color-mix(in srgb,var(--mind-color) 8%,transparent);border:1px solid var(--mind-color);box-sizing:border-box;pointer-events:none; }
+.mind-marquee {position:absolute;z-index:4;}
+.mind-canvas-stage.mind-space-pan .vue-flow__pane,
+.mind-canvas-stage.mind-space-pan .vue-flow__node { cursor:grab; }
+.mind-canvas-stage .vue-flow__pane.dragging { cursor:grabbing; }
+.mind-selection-summary {position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-surface);font-size:12px;}
+.mind-menu-key {margin-left:22px;float:right;color:var(--color-text-faint);font-size:11px;}
+.mind-canvas-outline { flex: 0 0 235px; overflow: auto; border-right: 1px solid var(--color-border); padding: 12px 4px; }
+.mind-canvas-outline button { display: block; border: 0; background: transparent; border-radius: 5px; width: 100%; text-align: left; padding: 7px 10px; color: var(--color-text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+.mind-canvas-outline button.current { color: var(--mind-color); background: var(--color-surface-subtle); }
+.mind-node-actions { position: absolute; left: 16px; top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border: 1px solid var(--color-border); padding: 6px; background: var(--color-surface); border-radius: 10px; box-shadow: 0 4px 20px #00000008; }
+.mind-canvas-bottom { position: absolute; bottom: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: end; gap: 10px; pointer-events: none; }
+.mind-canvas-hint { font-size: 11px; color: var(--color-text-faint); padding: 6px 0; }
+.mind-canvas-viewport { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); pointer-events: auto; white-space: nowrap; }
+.mind-viewport-divider { height:20px;border-left:1px solid var(--color-border);margin:0 2px; }
+.mind-zoom-percent { min-width:52px;font-variant-numeric:tabular-nums; }
+.mind-viewport-tip { display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:min(480px,calc(100vw - 40px));font-size:12px;line-height:1.6; }
+.mind-viewport-tip kbd { padding:2px 6px;border-radius:4px;background:#ffffff20;font:inherit;white-space:nowrap; }
+.mind-canvas-notice { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); padding: 8px 14px; margin: 0; border-radius: 7px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12px; pointer-events: none; max-width: 90%; }
+.mind-canvas-stage .mind-drop-child { outline: 3px solid var(--mind-color); border-radius: 10px; }
+.mind-canvas-stage .mind-drop-left { box-shadow:-6px 0 0 0 var(--mind-color);border-radius:9px; }
+.mind-canvas-stage .mind-drop-right { box-shadow:6px 0 0 0 var(--mind-color);border-radius:9px; }
+.mind-canvas-stage .mind-drag-branch { opacity:.35; }
+.mind-canvas-stage .mind-drag-branch-edge { opacity:.12; }
+.mind-side-preview {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
+.mind-side-preview path {fill:none;stroke:var(--mind-color);stroke-width:2;stroke-dasharray:6 4;}
+.mind-side-preview rect {fill:var(--color-surface);stroke:var(--mind-color);stroke-width:2;stroke-dasharray:5 3;}
+.mind-side-preview text {fill:var(--color-text);font-size:14px;}
+.mind-canvas-stage .mind-drop-before::before, .mind-canvas-stage .mind-drop-after::after { content: ''; position: absolute; left: -10px; right: -10px; height: 3px; background: var(--mind-color); }
+.mind-canvas-stage .mind-drop-before::before { top: -7px; }
+.mind-canvas-stage .mind-drop-after::after { bottom: -7px; }
+.mind-canvas-stage .vue-flow__edge-path { stroke: var(--mind-color); }
+@media (max-width: 760px) { .mind-canvas-outline { flex-basis: 170px; } .mind-canvas-hint { display: none; } .mind-canvas-toolbar { gap: 8px; } .mind-canvas-options { justify-content: flex-start; margin-left: 0; } .mind-node-actions { left: 8px; right: 8px; top: 8px; } .mind-canvas-status { max-width: 60vw; } }
+.mind-inline { height:100%; min-height:380px; }
+.mind-inline .mind-map-workspace { height:100%; }
+.mind-search { display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 0 10px;font-size:12px; }
+.mind-search input {width:180px;font-size:12px;}
+.mind-outline-row {display:flex;align-items:center;margin:3px 0;}.mind-outline-row input {min-width:0;width:100%;border:0;background:transparent;font:12px/22px inherit;color:var(--color-text);padding:5px;}.mind-outline-row.current {background:var(--color-surface-subtle);}.mind-outline-row>button:last-child {width:24px;flex-shrink:0;padding:2px;}
+.mind-canvas-outline .mind-outline-row textarea{min-width:0;width:100%;border:0;background:transparent;font-size:12px;line-height:22px;color:var(--color-text);padding:5px;resize:none;border-radius:4px;}
+.mind-inline { height:100%; min-height:380px; }
+.mind-inline .mind-map-workspace { height:100%; }.mind-settings-menu{width:310px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;font-size:12px;}.mind-settings-menu label{width:100%;display:flex;gap:8px;align-items:center;}.mind-settings-menu input{width:auto;}
+.mind-canvas-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100dvh !important;
+  max-width: none !important;
+}
+.mind-topic-shell { position: relative; width: 100%; height: 100%; }
+.mind-topic { position: relative; border-radius: 9px; background: var(--color-surface); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--mind-color) 38%, var(--color-border)); padding: 10px 16px; font-family: inherit; font-size: 14px; line-height: 22px; display: grid; place-items: center; box-sizing: border-box; }
+.mind-topic.root { background: var(--mind-color); border-color: var(--mind-color); color: white; font-weight: 600; }
+.mind-topic.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mind-color) 22%, transparent); }
+.mind-topic-label { width:100%;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;text-align:center;line-height:var(--mind-topic-line-height,22px); }
+.mind-topic-input { box-sizing:border-box;display:block;border:0;border-radius:4px;outline:0;padding:0;margin:0;width:100%;min-width:0;min-height:var(--mind-topic-line-height,22px);max-width:none;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;background:transparent;color:inherit;font:inherit;line-height:var(--mind-topic-line-height,22px);text-align:inherit; }
+.mind-topic-input:focus { box-shadow: none; outline: 0; }
+.mind-topic-fold {
+  position:absolute;left:calc(100% + 20px);top:calc(50% - 12px);width:24px;min-width:24px;height:24px;padding:0;
+  display:grid;place-items:center;z-index:2;border-radius:50%;border:1px solid var(--mind-color);color:var(--mind-color);background:var(--color-surface);
+  font:11px/1 sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .12s ease;
+}
+.mind-topic-shell:hover>.mind-topic-fold,.mind-topic-shell.is-selected>.mind-topic-fold,
+.mind-topic-shell:focus-within>.mind-topic-fold,.mind-topic-shell.is-collapsed>.mind-topic-fold {
+  opacity:1;pointer-events:auto;
+}
+.mind-topic-fold:hover {background:color-mix(in srgb,var(--mind-color) 10%,var(--color-surface));}
+.mind-topic-fold:focus-visible {outline:2px solid var(--mind-color);outline-offset:3px;}
+.mind-fold-count {font-variant-numeric:tabular-nums;font-weight:600;}
+/* Keep the node and its connector in one hover region while moving toward the button. */
+.mind-topic-shell.has-children:not(.root)::before {content:'';position:absolute;left:100%;top:0;width:64px;height:100%;}
+.mind-topic-handle { opacity: 0; pointer-events: none; }
+.mind-topic-shell.grows-left .mind-topic-add { left: auto; right: calc(100% - 12px); }
+.mind-topic-shell .mind-topic-add.root-left {left:auto;right:calc(100% - 12px);}
+.mind-topic-shell .mind-topic-add.root-right {right:auto;left:calc(100% - 12px);}
+.mind-topic-shell.grows-left .mind-topic-fold {left:auto;right:calc(100% + 20px);}
+.mind-topic-shell.grows-left .mind-fold-chevron {transform:rotate(180deg);}
+.mind-topic-shell.grows-left.has-children:not(.root)::before {left:auto;right:100%;}
+.mind-topic-shell.grows-down .mind-topic-add { left: calc(50% - 12px); top: calc(100% - 12px); }
+.mind-topic-shell.grows-down .mind-topic-fold {right:auto;left:calc(50% - 12px);top:calc(100% + 18px);}
+.mind-topic-shell.grows-down .mind-fold-chevron {transform:rotate(90deg);}
+.mind-topic-shell.grows-down.has-children:not(.root)::before {left:0;right:auto;top:100%;width:100%;height:60px;}
+@media(hover:none){.mind-topic-fold{opacity:1;pointer-events:auto;}}
+.mind-topic-sibling {
+  position: absolute; width: 24px; min-width: 24px; height: 24px; padding: 0;
+  left: calc(50% - 12px); display: grid; place-items: center;
+  border: 0; border-radius: 50%; background: transparent; color: white;
+  cursor: pointer; z-index: 1;
+}
+.mind-topic-sibling.before { top: -22px; }
+.mind-topic-sibling.after { bottom: -22px; }
+.mind-topic-sibling > span {
+  display: grid; place-items: center; width: 9px; height: 9px; border-radius: 50%;
+  background: color-mix(in srgb, var(--mind-color) 36%, var(--color-surface)); font: 0/1 sans-serif;
+}
+.mind-topic-sibling:hover, .mind-topic-sibling:focus-visible { background: transparent; }
+.mind-topic-sibling:hover > span, .mind-topic-sibling:focus-visible > span {
+  width: 20px; height: 20px; background: var(--mind-color); font-size: 16px;
+}
+.mind-topic-sibling:focus-visible { outline: 2px solid var(--mind-color); outline-offset: 1px; }
+.mind-topic-shell.grows-down .mind-topic-sibling { top: calc(50% - 12px); bottom: auto; }
+.mind-topic-shell.grows-down .mind-topic-sibling.before { left: -22px; }
+.mind-topic-shell.grows-down .mind-topic-sibling.after { left: auto; right: -22px; }
+.mind-topic-description { font-size:12px;line-height:18px;white-space:pre-wrap;color:var(--color-text-muted);width:100%;min-width:0;word-break:break-all;overflow-wrap:anywhere;margin-top:6px; }
+.root .mind-topic-description { color:#e7f4ff; }.mind-topic-image { width:100%;height:96px;overflow:hidden;margin-top:8px; }
+.mind-topic-image img {width:100%!important;height:96px!important;object-fit:contain;max-height:96px!important;margin:0!important;}
+.mind-topic-note { font-size:10px;line-height:14px;margin-top:6px;opacity:.7;cursor:pointer; }
+/**
+ * 「添加子主题」按钮：骑在节点右缘（或左缘）上的圆形按钮。
+ *
+ * ## 为什么必须显式给全样式（用户实测："按钮＋太怪异了"）
+ *
+ * 这里原来只写了尺寸与圆角，**没有背景、边框、字色**。`<button>` 的默认样式
+ * 因此生效：浅灰方块底 + 深灰描边 + 系统字体，压在蓝色根节点上像一块补丁，
+ * 与画布其余部分（圆角卡片、细线连接）完全不是一个语言。
+ *
+ * 现在按参考样式统一为：圆形、白底、细描边、居中「＋」，悬停时染色并略微放大。
+ * 用 `display:grid` 而不是 `line-height` 居中——后者在 24px 圆里对不齐。
+ */
+.mind-topic-add {
+  position: absolute;
+  left: calc(100% - 12px);
+  top: calc(50% - 12px);
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--mind-color) 45%, var(--color-border));
+  background: var(--color-surface);
+  color: color-mix(in srgb, var(--mind-color) 82%, var(--color-text));
+  font: 15px/1 system-ui, sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 3;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 12%);
+  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
+}
+/**
+ * 悬停/聚焦：底色换成主题色的淡染，边界加深，轻微放大。
+ *
+ * 只改颜色而不改尺寸（除 transform）是关键：按钮骑在节点边缘，改 width/height
+ * 会让它相对节点跳动；`transform: scale` 不参与布局，视觉放大而位置不动。
+ */
+.mind-topic-add:hover,
+.mind-topic-add:focus-visible {
+  background: color-mix(in srgb, var(--mind-color) 14%, var(--color-surface));
+  border-color: var(--mind-color);
+  color: var(--mind-color);
+  transform: scale(1.12);
+  box-shadow: 0 2px 6px rgb(15 23 42 / 18%);
+}
+.mind-topic-add:focus-visible { outline: 2px solid var(--mind-color); outline-offset: 2px; }
+.mind-topic-add:active { transform: scale(0.98); }
+/* 深色节点（根主题）上按钮是白底压在深蓝上：描边改用白色系，避免与底色混在一起 */
+.mind-topic-add.root-left,
+.mind-topic-add.root-right {
+  border-color: color-mix(in srgb, var(--color-surface) 70%, transparent);
+}
+.mind-topic-icon { font-size:16px;line-height:20px; }.mind-topic[style*="border: 0"] { background:transparent; }
+.mind-preview-wrap {display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:240px;}
+.mind-preview-sized {position:relative;flex-shrink:0;}.mind-preview-scene {position:relative;transform-origin:top left;}.mind-preview-lines {position:absolute;inset:0;}
+.mind-preview-topic {position:absolute;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--mind-color) 35%,var(--color-border));border-radius:9px;background:var(--color-surface-subtle);color:var(--color-text);padding:10px 16px;display:flex;flex-direction:column;justify-content:center;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;}
+.mind-preview-title{display:block;width:100%;min-width:0;}.mind-preview-icon{font-size:16px;line-height:20px;}
+.mind-preview-topic.root {background:var(--mind-color);color:white;font-weight:600;}.mind-preview-topic.text {border:0;background:transparent;}
+.mind-preview-description {font-size:12px;font-weight:400;line-height:18px;margin-top:6px;opacity:.72;}.mind-preview-note{font-size:10px;line-height:14px;margin-top:6px;opacity:.65;}
+.mind-preview-image{width:100%;height:96px;margin-top:8px;overflow:hidden;}.mind-preview-image img{width:100%!important;height:96px!important;object-fit:contain;margin:0!important;}
+.mind-map-block { margin: 20px 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
+.mind-map-block-header { min-height: 45px; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 6px 12px; }
+.mind-map-block-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
+.mind-map-block-label > span:first-child { color: var(--mind-color); font-size: 18px; }
+.mind-map-topic-count { font-size: 11px; color: var(--color-text-faint); }
+.mind-map-block-actions { display: flex; flex-shrink: 0; gap: 4px; }
+.mind-map-preview { width: 100%; display: block; min-height: 240px; cursor: zoom-in; }
+.mind-map-preview rect { fill: var(--color-surface-subtle); stroke: var(--mind-color); stroke-opacity: .3; }
+.mind-map-preview text { fill: var(--color-text); font-family: inherit; }
+.mind-map-preview .mind-map-root rect { fill: var(--mind-color); stroke: none; }
+.mind-map-preview .mind-map-root text { fill: white; }
+.mind-map-preview-outline { overflow: auto; padding: 16px 24px 24px; font-size: 14px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
+.mind-map-invalid { padding: 20px; color: var(--color-text-muted); }
+@media (max-width: 600px) { .mind-map-topic-count { display: none; } }
+.mind-details { flex: 0 0 280px; padding: 14px; border-left: 1px solid var(--color-border); overflow: auto; background: var(--color-surface); font-size: 12px; }
+.mind-details > header { display: flex; justify-content: space-between; align-items: center; }.mind-details-title { color: var(--color-text-muted); overflow-wrap:anywhere; }
+.mind-details fieldset { border: 0; border-top: 1px solid var(--color-border); padding: 12px 0; margin: 8px 0; display: flex; flex-direction:column; gap:8px; }
+.mind-details legend { font-weight:600; padding:0 8px 0 0; } .mind-details label { display:grid; grid-template-columns:70px minmax(0,1fr);align-items:center;gap:8px; }
+.mind-details input,.mind-details textarea { width:100%;font:inherit;box-sizing:border-box; } .mind-details textarea { resize:vertical; }.mind-format-buttons { display:flex;gap:6px; }
+.mind-relation-item { display:flex;align-items:center;gap:8px; }.mind-relation-item span { flex:1;overflow-wrap:anywhere; }
+.mind-color-grid {display:grid;grid-template-columns:repeat(8,24px);gap:4px;}.mind-color-grid>*{width:24px;min-width:24px;height:24px;padding:0;}
+.mind-comments {
+  flex: 0 0 340px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  padding: 16px;
+  overflow: auto;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-surface, #fff);
+  font-size: 13px;
+}
+.mind-comments__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.mind-comments__intro strong { font-size: 14px; }
+.mind-comments__intro p {
+  margin: 4px 0 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.mind-comments__head-actions { display: flex; flex: none; gap: 4px; }
+.mind-comments__error {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: #fdecec;
+  color: #b42b36;
+  font-size: 12px;
+}
+.mind-comments__list { display: grid; gap: 10px; }
+.mind-comment {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+}
+.mind-comment__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.mind-comment__head span { color: var(--color-text-muted); font-size: 11px; }
+.mind-comment__body {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.7;
+}
+.mind-comment__actions { display: flex; flex-wrap: wrap; gap: 4px; }
+.mind-comment__reply {
+  display: grid;
+  gap: 6px;
+  margin-left: 12px;
+  padding-left: 10px;
+  border-left: 2px solid var(--color-border);
+}
+.mind-comment__label {
+  color: var(--color-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+.mind-comment__compose { display: grid; gap: 6px; }
+.mind-comments__compose {
+  display: grid;
+  gap: 6px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border);
+}
+.mind-comments__empty {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.7;
+}
+.mind-comments textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface, #fff);
+  color: inherit;
+  font: inherit;
+  line-height: 1.6;
+  box-sizing: border-box;
+  resize: vertical;
+}
+.picker-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: color-mix(in srgb, #000 45%, transparent);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+}
+.picker-backdrop .picker {
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  box-shadow: var(--shadow-pop);
+  padding: 8px;
+}
+.picker-backdrop .picker .picker-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 14px;
+  background: var(--color-surface-subtle);
+  color: var(--color-text);
+}
+.picker-backdrop .picker-input:focus { outline: none; border-color: var(--color-accent); }
+.picker-backdrop .picker-list {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.picker-backdrop .picker-list li {
+  padding: 7px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-text);
+}
+.picker-backdrop .picker-list li.active { background: var(--color-accent-soft); color: var(--color-accent); }
+.picker-backdrop .picker-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.picker-backdrop .picker-empty { color: var(--color-text-faint); font-size: 13px; text-align: center; padding: 14px 0; margin: 0; }
+/*
+ * 垂直节奏：字段内部 8px，字段之间 16px，最后一段之外留出 dialog body 的
+ * 底部内边距。之前的提示文字紧贴输入框、又贴着按钮行，看起来像被截断。
+ */
+.video-form { display: flex; flex-direction: column; gap: 16px; }
+.video-field { display: flex; flex-direction: column; gap: 8px; }
+.video-field label { font-size: 13px; font-weight: 600; color: var(--color-text); }
+.video-field input { width: 100%; }
+.video-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--color-text-muted);
+}
+.video-status {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.7;
+}
+.video-status--ok {
+  color: var(--color-text);
+  background: var(--color-accent-soft);
+}
+.video-status--error {
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+}
+.video-status-meta {
+  margin-left: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--color-text-muted);
+}
+.video-source {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--color-text-muted);
+  overflow-wrap: anywhere;
+}
+/*
+ * `--color-hover` 从来没有被定义过：占位区背景整条声明在计算值阶段失效，
+ * 只剩正文白底，看起来像一块空白矩形。改用确定存在的 `--color-surface-subtle`
+ * 并给出绝对色兜底，非 SDK 宿主也能正常着色。
+ */
+.doc-video-embed { width: 100%; min-width: 0; border: 1px solid var(--color-border, #dce2eb); border-radius: 8px; overflow: hidden; background: var(--color-surface, #fff); }
+.doc-video-embed .video-placeholder {
+  min-height: 220px; padding: 28px 24px;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+  background: var(--color-surface-subtle, #f5f7fa);
+}
+.doc-video-embed .video-play-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 46px; height: 46px; margin-bottom: 2px; border-radius: 50%;
+  color: var(--color-accent, #2f6feb);
+  background: var(--color-accent-soft, #eaf1ff);
+  font-size: 18px; line-height: 1; text-indent: 2px;
+}
+.doc-video-embed .video-placeholder strong { font-size: 14px; font-weight: 600; color: var(--color-text, #1f2937); }
+.doc-video-embed .video-id { font-size: 12px; color: var(--color-text-muted, #667085); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.doc-video-embed .video-load {
+  margin-top: 4px; padding: 7px 20px;
+  color: var(--color-accent, #2f6feb); background: var(--color-accent-soft, #eaf1ff);
+  border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
+}
+.doc-video-embed .video-load:hover { background: color-mix(in srgb, var(--color-accent, #2f6feb) 16%, transparent); }
+.doc-video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; background: #111; }
+.doc-video-embed .video-footer {
+  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
+  padding: 10px 14px; font-size: 12px;
+  border-top: 1px solid var(--color-border, #dce2eb);
+  background: var(--color-surface, #fff);
+}
+.doc-video-embed .video-footer a { color: var(--color-accent, #2f6feb); }
+.doc-video-embed button:focus-visible, .doc-video-embed a:focus-visible { outline: 2px solid var(--color-accent, #2f6feb); outline-offset: 2px; }
+.doc-file-video { margin-top: 8px; }
+.doc-file-video video {
+  width: 100%;
+  max-height: 420px;
+  border-radius: 6px;
+  background: #000;
+}
+.doc-file-video-fallback {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-text-faint);
+}
+.wendang-spreadsheet { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 300px; min-width: 0; flex: 1; }
+.worksheet-grid { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
+.wendang-spreadsheet > p { position: absolute; top: 8px; left: 12px; z-index: 2; }
+
+/**
+ * wui 设计令牌与 Vue 版 `wui/styles/tokens.css` 同源：组件自己的变量用 `--w-*`，
+ * 颜色两级 fallback（宿主覆盖 → 主题变量 → 绝对色），因此深色模式无需第二套定义。
+ */
+.wendang, .wendang-portal {
+  --w-font-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif);
+  --w-text: var(--color-text, #1f2937);
+  --w-text-muted: var(--color-text-muted, #667085);
+  --w-text-faint: var(--color-text-faint, #7c8798);
+  --w-surface: var(--color-surface, #fff);
+  --w-surface-subtle: var(--color-surface-subtle, #f5f7fa);
+  --w-border: var(--color-border, #dce2eb);
+  --w-border-strong: var(--color-border-strong, #b9c3d2);
+  --w-accent: var(--color-accent, #2f6feb);
+  --w-accent-soft: var(--color-accent-soft, #eaf1ff);
+  --w-danger: var(--color-danger, #cf3d48);
+  --w-success: var(--color-success, #238353);
+  --w-warning: var(--color-warning, #b76e00);
+  --w-shadow-pop: var(--shadow-pop, 0 10px 32px #14284a20);
+  --w-font-size-mini: 12px; --w-font-size-small: 13px; --w-font-size-medium: 14px;
+  --w-control-mini: 24px; --w-control-small: 28px; --w-control-medium: 32px;
+  --w-radius-sm: 4px; --w-radius-md: 6px; --w-radius-lg: 8px;
+  --w-duration-fast: .12s;
+}
+/* ---------------------------------------------------------------- WButton */
+.w-button {
+  display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;box-sizing:border-box;margin:0;
+  border:1px solid transparent;border-radius:var(--w-radius-sm,4px);
+  font-family:var(--w-font-sans,inherit);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
+  transition:background-color var(--w-duration-fast,.12s),border-color var(--w-duration-fast,.12s),color var(--w-duration-fast,.12s);
+}
+.w-button--mini { height:var(--w-control-mini,24px);padding:0 8px;font-size:var(--w-font-size-mini,12px); }
+.w-button--small { height:var(--w-control-small,28px);padding:0 10px;font-size:var(--w-font-size-small,13px); }
+.w-button--medium { height:var(--w-control-medium,32px);padding:0 12px;font-size:var(--w-font-size-medium,14px); }
+.w-button--narrow { padding-inline:0; }.w-button--block { display:flex;width:100%; }
+.w-button--default { background:var(--w-surface-subtle,var(--color-surface-subtle,#f5f7fa));border-color:var(--w-border-strong,var(--color-border-strong,#b9c3d2));color:var(--w-text,var(--color-text,#1f2937)); }
+.w-button--default:not(:disabled):hover { background:color-mix(in srgb,var(--w-accent,#2f6feb) 7%,var(--w-surface-subtle,#f5f7fa));border-color:var(--w-accent,var(--color-accent,#2f6feb));color:var(--w-accent,var(--color-accent,#2f6feb)); }
+.w-button--text { background:transparent;border-color:transparent;color:var(--w-text,var(--color-text,#1f2937)); }
+.w-button--text:not(:disabled):hover { background:color-mix(in srgb,currentColor 10%,transparent);color:var(--w-text,var(--color-text,#1f2937)); }
+.w-button--primary { background:var(--w-accent,var(--color-accent,#2f6feb));border-color:var(--w-accent,var(--color-accent,#2f6feb));color:#fff; }
+.w-button--primary:not(:disabled):hover { background:color-mix(in srgb,var(--w-accent,#2f6feb) 88%,#000);border-color:color-mix(in srgb,var(--w-accent,#2f6feb) 88%,#000); }
+.w-button--outline { background:transparent;border-color:var(--w-border,var(--color-border,#dce2eb));color:var(--w-text,var(--color-text,#1f2937)); }
+.w-button--outline:not(:disabled):hover { border-color:var(--w-accent,var(--color-accent,#2f6feb));color:var(--w-accent,var(--color-accent,#2f6feb)); }
+.w-button:disabled { opacity:.5;cursor:not-allowed; }.w-button.is-loading { cursor:progress;opacity:.75; }
+.w-button[aria-pressed=true] { background:var(--w-accent-soft,var(--color-accent-soft,#eaf1ff));border-color:var(--w-accent,var(--color-accent,#2f6feb));color:var(--w-accent,var(--color-accent,#2f6feb)); }
+.w-button__icon,.w-button__spinner { display:inline-flex;align-items:center;justify-content:center;flex:none; }
+.w-button__label { display:inline-flex;align-items:center;gap:4px; }.w-button__label > svg,.w-button__label > .wr-icon { flex:none; }
+.w-button__spinner svg { animation:w-button-spin .8s linear infinite; }
+@keyframes w-button-spin { to { transform:rotate(360deg); } }
+.w-button:focus-visible { outline:2px solid var(--w-accent,var(--color-accent,#2f6feb));outline-offset:1px; }
+/* ---------------------------------------------------------------- WAlert */
+.w-alert { display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border:1px solid var(--w-border,var(--color-border));border-radius:var(--w-radius-md,6px);background:var(--w-accent-soft,var(--color-accent-soft));color:var(--w-text,var(--color-text));font-size:12px;margin-bottom:10px;flex:none;line-height:1.5; }
+.w-alert__icon { flex:none;line-height:1.5; }.w-alert__body { flex:1;min-width:0; }
+.w-alert--warning { background:color-mix(in srgb,var(--w-warning,#b76e00) 12%,var(--w-surface,#fff));border-color:color-mix(in srgb,var(--w-warning,#b76e00) 35%,var(--w-border,#dce2eb)); }
+.w-alert--danger { background:color-mix(in srgb,var(--w-danger,#cf3d48) 10%,var(--w-surface,#fff));border-color:color-mix(in srgb,var(--w-danger,#cf3d48) 32%,var(--w-border,#dce2eb)); }
+.w-alert--success { background:color-mix(in srgb,var(--w-success,#238353) 10%,var(--w-surface,#fff));border-color:color-mix(in srgb,var(--w-success,#238353) 32%,var(--w-border,#dce2eb)); }
+/* ---------------------------------------------------------------- WPopover */
+.w-popover { position:fixed;z-index:1400;max-width:min(320px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;min-width:160px;padding:4px;display:flex;flex-direction:column;gap:4px;background:var(--w-surface,var(--color-surface,#fff));border:1px solid var(--w-border,var(--color-border));border-radius:var(--w-radius-lg,8px);box-shadow:var(--w-shadow-pop);color:var(--w-text,var(--color-text)); }
+.w-popover .w-button { justify-content:flex-start;text-align:left;width:100%; }
+/* 内容自带内边距的面板（高亮块图标/颜色）不再叠加外层 padding。 */
+.w-popover--flush { padding:0; }
+.w-popover .wr-settings .w-button { width:auto; }
+.w-popover-group { padding:6px 8px 2px; font-size:11px; color:var(--color-text-faint); }
+/* ---------------------------------------------------------------- WDialog */
+.w-dialog-mask { position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 24px;background:color-mix(in srgb,#101828 42%,transparent);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box; }
+.w-dialog-mask.is-fullscreen { padding:0;overflow:hidden; }
+.w-dialog { position:relative;display:flex;flex-direction:column;width:520px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 14vh);border:1px solid var(--w-border,var(--color-border,#dce2eb));border-radius:var(--w-radius-lg,8px);background:var(--w-surface,var(--color-surface,#fff));color:var(--w-text,var(--color-text,#1f2937));box-shadow:0 24px 64px #10182833;outline:none;box-sizing:border-box; }
+.w-dialog.is-fullscreen { width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0; }
+.w-dialog__header { display:flex;align-items:center;gap:12px;flex:none;padding:14px 18px 10px; }
+.w-dialog__title { flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+.w-dialog__close { flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--w-radius-md,6px);background:transparent;color:var(--w-text-muted,var(--color-text-muted));cursor:pointer; }
+.w-dialog__close:hover { background:var(--w-surface-subtle,#f5f7fa);color:var(--w-text,#1f2937); }
+.w-dialog__body { flex:1;min-height:0;padding:4px 18px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px; }
+.w-dialog.is-fullscreen .w-dialog__body { padding:0;overflow:hidden; }
+.w-dialog__footer { flex:none;display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px; }
+.video-dialog {width:min(520px,calc(100vw - 32px));}
+.w-dialog label,.wr-mind-panel label { display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:10px; }
+.w-dialog input,.w-dialog textarea,.wr-mind-panel textarea { width:100%;box-sizing:border-box; }
+.wr-toolbar { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
+.wr-icon { display:block;flex:none; }
+/**
+ * 编辑端外壳：**不加边框、不留左侧 padding**。
+ *
+ * 块快捷条、「＋」和表格入口画在正文左缘之外，需要约 56px 留白；但这段留白
+ * 必须由宿主提供（页面栏宽、文档容器 padding 等）。SDK 自己加 padding 会把
+ * 正文整体右移，而宿主的页头/目录不会跟着动，整篇内容看起来就是歪的。
+ * 宿主没留够时，`blockAffordanceStyle` 会把控件夹进视口作为兜底。
+ */
+.wr-document { position:relative;min-height:160px; }
+.wr-document-mount { min-width:0; }
+.wr-document .editor-canvas { outline:none;width:100%;max-width:var(--content-width);min-height:60vh;margin-inline:auto;padding-bottom:calc(var(--content-font-size,16px) * var(--content-line-height,1.75) + var(--space-block,12px)); }
+.wr-document-toolbar { margin-bottom:10px; }
+/* 块左侧入口：与 Vue 版共用一条 8px 间距的竖轨。 */
+/* 块左侧入口：与 Vue 的 EditorPane / BlockHandleMenu 同一套类名与尺寸。 */
+.block-plus { position:absolute; z-index:31; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; padding:0; transition:background .12s,border-color .12s; }
+.block-plus:hover { color:var(--color-accent); border-color:var(--color-accent); background:var(--color-accent-soft); }
+.block-chip { position:absolute; z-index:31; display:flex; align-items:center; width:48px; height:28px; box-sizing:border-box; padding:1px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); transition:border-color .12s; }
+.block-chip:hover { border-color:var(--color-accent); }
+.chip-btn { width:22px; height:24px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--color-accent); cursor:pointer; padding:0; border-radius:3px; }
+.chip-btn:hover { color:var(--color-accent); background:var(--color-accent-soft); }
+.chip-grip { cursor:grab; color:var(--color-text-faint); }
+.chip-grip:active { cursor:grabbing; }
+/* 块菜单：主清单 + 右侧子菜单（结构、宽度、间距与 Vue 的 BlockHandleMenu 一致）。 */
+.block-anchor { position:absolute; z-index:45; overflow-anchor:none; display:flex; align-items:flex-start; gap:4px; pointer-events:auto; }
+.block-menu { width:208px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); padding:4px; }
+.bm-item { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:13px; font-family:inherit; color:var(--color-text); text-align:left; }
+.bm-item:hover { background:var(--color-surface-subtle); }
+.bm-item:focus-visible { outline:2px solid var(--color-accent); outline-offset:-2px; }
+.bm-item.active { color:var(--color-accent); }
+.bm-item.disabled { opacity:.45; pointer-events:none; }
+.bm-item.danger { color:var(--color-danger); }
+.bm-item span:first-of-type { flex:1; }
+.bm-chevron { margin-left:auto; opacity:.5; }
+.bm-sep { height:1px; background:var(--color-border); margin:4px 6px; }
+.block-submenu { position:relative; width:208px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); padding:4px; max-height:calc(60vh - 10px); overflow:auto; }
+.block-submenu-color { width:max-content; padding:12px; }
+/* 文档颜色面板（块菜单与文字工具栏共用同一套版式）。 */
+.document-color-panel { width:220px; display:flex; flex-direction:column; gap:12px; }
+.color-section { display:flex; flex-direction:column; gap:6px; }
+.color-label { color:var(--color-text-muted); font-size:12px; line-height:1.5; }
+.color-grid { display:grid; grid-template-columns:repeat(8,24px); gap:4px; }
+.color-choice { width:24px; min-width:24px; height:24px; padding:0; border:1px solid var(--color-border); border-radius:3px; background:var(--color-surface); cursor:pointer; display:flex; align-items:center; justify-content:center; }
+.color-choice.selected { border-color:var(--color-accent); outline:1px solid var(--color-accent); outline-offset:-1px; }
+.font-sample { font-size:16px; font-weight:500; line-height:1; }
+.background-choice { position:relative; }
+.clear-stroke { display:block; width:27px; height:1px; background:var(--color-border-strong); transform:rotate(-45deg); }
+/* 图片工具条：与 Vue 的 EditorPane 同尺寸、同布局。 */
+.img-toolbar { position:absolute; z-index:50; display:flex; align-items:center; gap:2px; padding:3px 4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); transform:translateX(-50%); }
+.it-btn { display:flex; align-items:center; justify-content:center; min-width:28px; height:28px; border:0; border-radius:5px; background:transparent; color:var(--color-text); cursor:pointer; padding:0 5px; }
+.it-btn:hover { background:var(--color-surface-subtle); }
+.it-btn.on { background:var(--color-accent-soft); color:var(--color-accent); }
+.it-btn.danger { color:var(--color-danger); }
+.it-btn.danger:hover { background:color-mix(in srgb,var(--color-danger) 12%,transparent); }
+.it-sep { width:1px; height:18px; background:var(--color-border); margin:0 3px; }
+/* 插入菜单：与 Vue 的 SlashMenu.vue / InsertPicker.vue 同一套类名与几何。 */
+.slash-anchor { position:absolute; z-index:40; display:flex; align-items:flex-start; gap:6px; }
+.slash-menu { width:268px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); padding:4px; }
+.slash-content { padding:0 0 4px; max-height:min(560px,calc(100dvh - 26px)); overflow-y:auto; overscroll-behavior:contain; }
+.slash-group { font-size:11px; color:var(--color-text-faint); padding:7px 8px 3px; }
+.slash-menu ul { list-style:none; margin:0; padding:0; }
+.slash-menu li { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:14px; color:var(--color-text); }
+.slash-menu li.active { background:var(--color-accent-soft); }
+.slash-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.slash-hint { color:var(--color-text-faint); font-size:12px; flex:none; }
+.slash-chevron { color:var(--color-text-faint); flex:none; }
+.slash-empty { color:var(--color-text-faint); font-size:13px; text-align:center; padding:10px; }
+.insert-picker { position:absolute; z-index:46; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); padding:10px; }
+.ip-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; color:var(--color-text-muted); margin-bottom:8px; }
+.ip-dim { color:var(--color-text-faint); flex:none; }
+.ip-grid { display:grid; grid-template-columns:repeat(8,18px); grid-auto-rows:18px; gap:3px; }
+.ip-cell { width:18px; height:18px; padding:0; border:1px solid var(--color-border); border-radius:3px; background:var(--color-surface-subtle); cursor:pointer; }
+.ip-cell.on { background:var(--color-accent-soft); border-color:var(--color-accent); }
+.ip-counts { display:flex; gap:6px; }
+.ip-count { display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 6px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; }
+.ip-count:hover { background:var(--color-surface-subtle); }
+.ip-count.on { border-color:var(--color-accent); background:var(--color-accent-soft); }
+.ip-count-box { display:flex; gap:2px; width:34px; height:22px; padding:3px; border:1px solid var(--color-border-strong); border-radius:3px; background:var(--color-surface-subtle); box-sizing:border-box; }
+.ip-count-bar { flex:1 1 0; min-width:0; background:var(--color-border-strong); border-radius:1px; }
+.ip-count.on .ip-count-bar { background:var(--color-accent); }
+.ip-count-num { font-size:11px; color:var(--color-text-muted); }
+.ip-close { position:absolute; right:4px; top:4px; padding:2px; border:0; background:transparent; color:var(--color-text-faint); cursor:pointer; }
+/* 表格控件：与 Vue 的 TableHandles.vue 同一套类名、尺寸与轨迹。 */
+.tbl-ui-host { position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; z-index:30; }
+.tbl-ui-host > * { pointer-events:auto; }
+.tbl-corner { position:absolute; z-index:34; display:flex; width:44px; height:26px; padding:1px; box-sizing:border-box; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); }
+.tbl-corner button { width:20px; height:22px; padding:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:3px; background:transparent; color:var(--color-accent); cursor:pointer; }
+.tbl-corner .tbl-grip { color:var(--color-text-faint); cursor:grab; }
+.tbl-corner .tbl-grip:active { cursor:grabbing; }
+.tbl-corner button:hover { background:var(--color-accent-soft); }
+.tbl-axis { position:absolute; z-index:35; padding:0; border:none; border-radius:5px; background:transparent; cursor:pointer; }
+.tbl-axis::before { content:''; position:absolute; border-radius:3px; background:var(--color-border-strong); box-shadow:0 0 0 2px var(--color-surface); }
+.tbl-row-axis { width:20px; height:24px; opacity:0; }
+.tbl-row-axis::before { left:8px; top:4px; width:4px; height:16px; }
+.tbl-col-axis { width:24px; height:20px; opacity:0; }
+.tbl-col-axis::before { left:4px; top:8px; width:16px; height:4px; }
+.tbl-axis.current,.tbl-axis:hover,.tbl-axis:focus-visible,.tbl-axis.on { opacity:1; }
+.tbl-axis:hover::before,.tbl-axis.on::before { background:var(--color-accent); }
+.tbl-boundary { position:absolute; z-index:36; display:flex; justify-content:center; align-items:center; width:20px; height:20px; border:none; border-radius:50%; padding:0; background:transparent; color:transparent; cursor:pointer; }
+.tbl-boundary::before { content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--color-border-strong); }
+.tbl-boundary:hover,.tbl-boundary:focus-visible { color:#fff; background:var(--color-accent); }
+.tbl-boundary:hover::before,.tbl-boundary:focus-visible::before { display:none; }
+.tbl-boundary::after { content:''; position:absolute; pointer-events:none; background:var(--color-accent); display:none; }
+.tbl-boundary:hover::after,.tbl-boundary:focus-visible::after { display:block; }
+.tbl-boundary-row::after { left:14px; top:9px; width:var(--insert-length); height:2px; }
+.tbl-boundary-col::after { top:14px; left:9px; width:2px; height:var(--insert-length); }
+.tbl-boundary > svg,.tbl-boundary > .wr-icon { position:relative; z-index:1; }
+.tbl-selection-more { position:absolute; z-index:38; width:32px; height:20px; padding:0; line-height:12px; border:none; border-radius:6px; background:var(--color-accent); color:#fff; cursor:pointer; font-size:20px; }
+.tbl-ui-host > .tbl-selection { position:absolute; z-index:32; border:2px solid var(--color-accent); border-radius:5px; box-sizing:border-box; pointer-events:none; box-shadow:0 0 0 1px var(--color-surface); }
+.tbl-cellbar { position:fixed; z-index:55; box-sizing:border-box; width:max-content; max-width:calc(100vw - 24px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; box-shadow:var(--shadow-pop); padding:6px; }
+.tbl-tools { display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
+.tool { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:2px; min-width:32px; height:32px; padding:0 5px; border:none; border-radius:5px; background:transparent; color:var(--color-text); font-size:15px; cursor:pointer; }
+.tool:hover { background:var(--color-surface-subtle); }
+.tool.on { background:var(--color-accent-soft); color:var(--color-accent); }
+.tool[aria-disabled='true'] { opacity:.3; cursor:not-allowed; }
+.fill-icon { width:16px; height:16px; border:1px solid currentColor; border-radius:3px; background-color:transparent; }
+.color-tool { position:relative; padding-bottom:2px; }
+.color-bar { position:absolute; left:8px; right:8px; bottom:3px; height:2px; border-radius:1px; box-shadow:0 0 0 1px var(--color-surface); }
+.tool-sep { flex:0 0 1px; height:20px; background:var(--color-border); margin:0 4px; }
+.tbl-palette { z-index:60; display:flex; flex-direction:column; gap:8px; width:max-content; max-width:calc(100vw - 48px); padding:10px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); }
+.palette-head { display:flex; flex-direction:column; gap:2px; padding:0 2px; }
+.palette-title { font-size:13px; font-weight:600; color:var(--color-text); }
+.palette-hint { font-size:11px; line-height:1.5; color:var(--color-text-muted); max-width:282px; }
+.palette-grid { display:grid; grid-template-columns:repeat(8,30px); gap:6px; }
+.tbl-align-menu { z-index:60; width:176px; padding:6px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); }
+.tbl-align-menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 10px; border:none; border-radius:5px; background:transparent; color:var(--color-text); cursor:pointer; }
+.tbl-align-menu button span { flex:1; text-align:left; }
+.tbl-align-menu button:hover,.tbl-align-menu button:focus-visible { background:var(--color-surface-subtle); }
+.tbl-align-menu button[aria-checked='true'] { color:var(--color-accent); }
+.swatch { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:4px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface); cursor:pointer; color:var(--color-text-muted); }
+.swatch span { width:100%; height:100%; border-radius:2px; }
+.swatch .glyph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:15px; font-weight:500; line-height:1; border-radius:0; }
+.swatch:hover { border-color:var(--color-accent); }
+.swatch.selected { border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent); }
+.tbl-ctx { z-index:80; padding:4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); }
+/* 菜单项：与 Vue 的 TableContextMenu.vue 同尺寸与间距。 */
+.ctx-item { display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent; min-height:32px; padding:7px 10px; border-radius:6px; color:var(--color-text); cursor:pointer; text-align:left; font:inherit; font-size:13px; }
+.ctx-item:hover { background:var(--color-surface-subtle); }
+.ctx-item:focus-visible { outline:2px solid var(--color-accent); outline-offset:-2px; }
+.ctx-item:disabled { opacity:.5; cursor:wait; }
+.ctx-chevron { margin-left:auto; }
+.ctx-styles { margin:2px 4px; padding-left:12px; border-left:1px solid var(--color-border); }
+.ctx-style-swatch { width:18px; height:14px; border:1px solid var(--color-border); border-radius:3px; }
+.ctx-item.danger { color:var(--color-danger); }
+.ctx-sep { height:1px; background:var(--color-border); margin:4px 6px; }
+.ctx-label { font-size:11px; color:var(--color-text-faint); padding:4px 8px 2px; }
+.ctx-align { display:flex; gap:4px; padding:2px 6px 6px; }
+.al-btn { border:1px solid var(--color-border); background:var(--color-surface); border-radius:5px; padding:3px 6px; cursor:pointer; color:var(--color-text-muted); }
+.al-btn.on { border-color:var(--color-accent); color:var(--color-accent); background:var(--color-accent-soft); }
+.ctx-width { display:flex; align-items:center; gap:6px; padding:4px 8px; }
+.ctx-label-inline { color:var(--color-text-muted); }
+.ctx-num { width:66px; padding:3px 6px; font-size:13px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface); color:var(--color-text); }
+.ctx-mini { border:1px solid var(--color-border); background:var(--color-surface); border-radius:5px; padding:3px 8px; font-size:12px; cursor:pointer; }
+.ctx-mini.primary { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
+.faint { color:var(--color-text-faint); }.small { font-size:11px; }
+/* 图片预览。 */
+.wr-link-popover { position:fixed;z-index:1450;padding:8px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);box-shadow:var(--shadow-pop);max-width:calc(100vw - 16px);font-size:13px; }.wr-link-popover input { min-width:250px; }.wr-link-popover a { max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+/* 高亮块控件：图标常显，工具条在悬停 / 聚焦时出现。 */
+.callout-controls { display:contents; }
+.callout-icon-button { justify-self:start;background:transparent;border-color:transparent;margin:0;cursor:default; }
+.callout-icon-button:not(:disabled) { cursor:pointer; }
+.callout-toolbar { position:absolute;bottom:calc(100% + 4px);right:0;z-index:25;display:flex;align-items:center;gap:4px;padding:4px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transition:opacity .1s; }
+.doc-callout:hover > .callout-controls-host .callout-toolbar,.doc-callout:focus-within > .callout-controls-host .callout-toolbar,.callout-toolbar.is-open { opacity:1;visibility:visible; }
+.callout-toolbar-button,.callout-preset { min-height:32px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:var(--color-text);font:inherit;font-size:13px;cursor:pointer; }
+.callout-toolbar-button:hover,.callout-preset:hover { background:var(--color-surface-subtle); }
+.callout-toolbar-divider { height:16px;border-left:1px solid var(--color-border);margin:0 3px; }
+.callout-color-panel { width:max-content;display:flex;flex-direction:column;gap:12px;padding:2px; }
+.callout-color-label { font-size:12px;margin-bottom:6px;color:var(--color-text-muted); }
+.callout-color-grid { display:grid;grid-template-columns:repeat(8,26px);gap:5px; }
+.callout-color-choice { position:relative;width:26px;height:26px;padding:0;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);cursor:pointer;overflow:hidden;font-size:12px;color:var(--color-text-muted); }
+.callout-color-choice.is-selected { outline:2px solid var(--color-accent);outline-offset:1px; }
+.callout-color-choice.is-none::after { content:'';position:absolute;left:-5px;top:12px;width:36px;height:1px;background:var(--color-border-strong);transform:rotate(-45deg); }
+.callout-font-sample { font-size:16px;line-height:1;color:inherit; }
+.callout-icon-picker { width:254px;box-sizing:border-box;padding:8px 10px 6px; }
+.callout-icon-grid { display:grid;grid-template-columns:repeat(6,34px);gap:6px; }
+.callout-icon-choice { width:34px;height:34px;padding:0;border:0;border-radius:5px;background:transparent;font-size:20px;cursor:pointer; }
+.callout-icon-choice:hover,.callout-icon-choice[aria-pressed='true'] { background:var(--color-accent-soft); }
+.callout-icon-footer { display:flex;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--color-border); }
+.callout-icon-footer .w-button { flex:1;justify-content:center; }
+.wr-block-drop-line { position:fixed;z-index:1300;height:3px;pointer-events:none;background:var(--color-accent);border:1px solid #fff;border-radius:999px;box-shadow:0 1px 6px #0003;transform:translateY(-1px); }
+.wr-block-handle { position:absolute;left:0;z-index:25; }
+.wr-block-menu,.wr-insert-menu { position:sticky;bottom:10px;z-index:40;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px;box-shadow:var(--shadow-pop);max-height:360px;overflow:auto; }
+.wr-insert-menu { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:5px; }
+.wr-insert-menu header { display:flex;justify-content:space-between;grid-column:1/-1; }
+.wr-image { max-width:100%;height:auto;cursor:zoom-in; }.wr-image-preview { max-width:100%;max-height:70vh;object-fit:contain; }
+.wr-media-placeholder { display:inline-flex;min-height:100px;align-items:center;justify-content:center;background:var(--color-surface-subtle); }
+.wr-code>header { display:flex;justify-content:space-between;background:var(--color-surface-subtle);padding:6px 10px;font-size:12px; }
+.wr-video iframe { width:100%;height:350px;border:0; }.doc-file-card video { max-width:100%; }
+.wr-spreadsheet { height:100%;min-height:360px;position:relative;display:flex;flex-direction:column; }.wr-sheet-engine { flex:1;min-height:300px; }
+/* 工作表只读预览：与 Vue 的 WorksheetPreview.vue 同一套类名与排版。 */
+.worksheet-preview { border:1px solid var(--color-border); border-radius:8px; overflow:hidden; background:var(--color-surface); }
+.worksheet-preview-standalone { display:flex;flex-direction:column;flex:1;min-height:0;border:0;border-radius:0; }
+.worksheet-preview-standalone .sheet-table { flex:1;min-height:0;max-height:none; }
+.sheet-tabs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px; font-size:12px; }
+.sheet-note { color:var(--color-text-muted); }
+.sheet-table { overflow:auto; max-height:600px; outline:none; }
+.sheet-table table { border-collapse:collapse; table-layout:fixed; width:max-content; font-size:13px; }
+.sheet-table th,.sheet-table td { border:1px solid var(--color-border); padding:3px 6px; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; vertical-align:top; }
+.sheet-table th { background:var(--color-surface-subtle); font-weight:500; color:var(--color-text-muted); }
+.sheet-table thead { position:sticky; top:0; z-index:1; }
+.sheet-table tr > th:first-child { min-width:40px; text-align:center; }
+.sheet-paging { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px; font-size:12px; color:var(--color-text-faint); }
+.sheet-paging > span { flex:1; }
+.sheet-view-note { flex:none; margin:0; padding:6px 8px; font-size:12px; color:var(--color-text-muted); background:var(--color-surface-subtle); }
+/* The Canvas and topic visuals come from the canonical Vue style files. */
+.wr-mind-editor {height:100%;min-height:380px;min-width:0;}
+.mind-canvas-layers {position:absolute;left:0;top:0;transform-origin:0 0;}
+.mind-canvas-edges {position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;}
+.mind-canvas-stage {touch-action:none;}
+.mind-canvas-surface {position:absolute;inset:0;}
+.mind-node-actions,.mind-selection-summary,.mind-canvas-bottom {z-index:5;}
+.mind-canvas-notice {z-index:6;}
+.mind-context-menu {position:fixed;z-index:1400;padding:0;min-width:160px;max-height:calc(100vh - 16px);overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--shadow-pop);}
+.mind-side-projection {pointer-events:none;}
+.mind-canvas-fullscreen .wd-dialog__body {overflow:hidden;}
+.w-popover .mind-settings-menu .w-button {width:auto;}
+.mind-space-pan,.mind-space-pan .mind-topic {cursor:grab;}
+.mind-peer-badge {position:absolute;right:4px;top:4px;padding:1px 5px;border-radius:9px;background:var(--color-accent);color:white;font-size:10px;line-height:14px;pointer-events:none;}
+.wr-settings { display:flex;flex-direction:column;gap:8px; }
+@media(max-width:760px) { .wr-mind-hint { display:none; }.wr-mind-panel { flex-basis:210px; } }
+
+/* Vue WPopover shell around the shared Select / Dropdown content. */
+.w-popover.w-select-popup,.w-popover.code-settings-popup,.w-popover.code-tooltip-popup,.w-popover.mind-dropdown-popup {
+  box-sizing:border-box;min-width:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);
+  padding:0;display:block;overflow:visible;gap:0;overflow-anchor:none;
+}