* { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; overflow: hidden; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--mp-bg, #f7f9fc); color: var(--mp-text, #2d3748); }
        /* 顶栏两行自适应：内容多了自动换行，实际高度写入 --mp-header-h（mindmap-canvas-vis.js），下方区域跟着偏移 */
        #appHeader { min-height: 44px; background: var(--mp-header-bg, linear-gradient(90deg, #5a67d8, #764ba2)); color: var(--mp-header-text, #fff); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 1000; position: relative; }
        /* 按钮统一紧缩：间距由容器 gap 承担，清掉各元素内联 margin；flex:0 0 auto 防止换行拥挤时按钮被压缩截字 */
        #appHeader > * { margin: 0 !important; flex: 0 0 auto; }
        #appHeader button, #appHeader a, #appHeader select { padding: 5px 10px !important; font-size: 12px !important; }
        /* 按钮/链接统一主题感知：用 !important 盖掉各元素内联的彩色背景，跟随画布主题（--mp-* 变量系） */
        #appHeader button, #appHeader a { background: var(--mp-node-bg, #fff) !important; color: var(--mp-text, #2d3748) !important; border: 1px solid var(--mp-border, #e2e8f0) !important; }
        #appHeader button:hover, #appHeader a:hover { background: var(--mp-primary-light, #edf2f7) !important; }
        /* 画布切换按钮宽度流体化：不定死像素，兼顾平板（≤768px 由下方移动端规则再收 max-width） */
        #canvasSelectorBtn { max-width: clamp(96px, 22vw, 200px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #appHeader h1 { font-size: 15px; font-weight: 600; white-space: nowrap; }
        #appHeader .hint { font-size: 11px; opacity: .75; white-space: nowrap; }
        #appHeader .spacer { flex: 1; }
        #appHeader a { color: #fff; text-decoration: none; opacity: .9; }
        #appHeader a:hover { opacity: 1; text-decoration: underline; }
        /* 简笔画图标（app-icons.js 注入的 stroke SVG）：本页不引 common.css，必须自给尺寸，
           否则无宽高属性的 SVG 按默认 300×150 渲染成巨大图标（分享等按钮图标溢出就是这个原因） */
        .app-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; vertical-align: -4px; }
        button .app-icon, a .app-icon { width: 1.3em; height: 1.3em; vertical-align: -0.22em; }
        /* 顶栏按钮统一规格：同内边距/字号/圆角、最小同高，仅背景色区分功能（抹平各按钮内联样式的细微差异）。
           用 inline-flex 居中 + min-height 而非定死 height：emoji 图标字形比行高大，定高会把图标裁出去。
           故意放在 #navHistoryGroup 规则之前：同优先级同 !important 时后定义者生效，导航组仍保持 36px 见方不受影响 */
        #appHeader button { padding: 4px 12px !important; border: none; border-radius: 6px; font-size: 12px !important; font-weight: 600; cursor: pointer; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; white-space: nowrap; }
        /* 顶栏导航组（🏠 返回主页 + ↩撤销 + ↪重做，mindmap-enhanced.js 组装）：三按钮 36px 见方、同组不换行不被压缩；
           顶栏空间不足时整组随 flex 换行 / 移动版网格（见下方 ≤768px 块 grid-column: span 2）整体移动，不拆开 */
        #navHistoryGroup { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; flex: 0 0 auto; }
        #navHistoryGroup > a, #navHistoryGroup > button { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; box-sizing: border-box; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px !important; text-decoration: none; }
        /* ==================== 「⋮ 更多」下拉菜单 ==================== */
        /* 次要操作收纳（结构与 convertMenu/layoutMenu 一致：.open 控制显隐，mindmap-more-menu.js 负责开关） */
        #moreMenu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--mp-bg-card, #fff); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 190px; max-width: calc(100vw - 24px); padding: 6px; z-index: 3000; }
        #moreMenu.open { display: block; }
        /* 挪进来的按钮/下拉容器统一整行排列（内联 margin/display 用 !important 盖掉） */
        #moreMenu > * { display: block !important; width: 100% !important; margin: 0 0 4px !important; }
        #moreMenu > *:last-child { margin-bottom: 0 !important; }
        #moreMenu > div > button { display: block !important; width: 100% !important; margin: 0 !important; }
        /* 菜单内的二级下拉（转换/历史/书签）改为向左飞出，避免遮住菜单下方的行 */
        #moreMenu #convertMenu, #moreMenu #versionMenu, #moreMenu #bookmarkMenu { top: 0 !important; right: calc(100% + 6px) !important; left: auto !important; margin-top: 0 !important; }
        /* 主题选择器占满整行 */
        #moreMenu #themeSelector { width: 100%; border: 1px solid var(--mp-border, #d6dae2); border-radius: 6px; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); outline: none; cursor: pointer; }
        /* ==================== 画布切换自定义下拉 ==================== */
        /* 结构与 moreMenu 一致（.open 控制显隐，mindmap-canvas-menu.js 负责开关/位置校正）；
           行内 ✏️ 用 span 不用 button：避开 #appHeader button 的统一主题规则把行内小按钮撑大 */
        #canvasMenu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--mp-bg-card, #fff); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 200px; max-width: calc(100vw - 24px); max-height: 60vh; overflow-y: auto; padding: 4px; z-index: 3000; }
        #canvasMenu.open { display: block; }
        #canvasMenu .cv-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 40px; border-radius: 6px; cursor: pointer; box-sizing: border-box; }
        #canvasMenu .cv-row:hover { background: var(--mp-primary-light, #edf2f7); }
        #canvasMenu .cv-row.cv-active { background: var(--mp-primary-light, #edf2f7); }
        #canvasMenu .cv-row.cv-active .cv-name { font-weight: 600; }
        #canvasMenu .cv-name { flex: 1; min-width: 0; font-size: 13px; color: var(--mp-text, #2d3748); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #canvasMenu .cv-edit { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 5px; color: var(--mp-text-secondary, #718096); font-size: 14px; line-height: 32px; text-align: center; cursor: pointer; user-select: none; }
        #canvasMenu .cv-edit:hover { background: var(--mp-border, #e2e8f0); color: var(--mp-text, #2d3748); }
        #canvasMenu .cv-new { border-top: 1px solid var(--mp-border, #e8ecf1); border-radius: 0 0 6px 6px; color: var(--mp-primary, #5a67d8); font-size: 13px; font-weight: 600; }
        /* 只读公开查看：不可重命名/新建他人空间画布（行内入口隐藏，API 侧 401 兜底） */
        .public-view #canvasMenu .cv-edit, .public-view #canvasMenu .cv-new { display: none; }
        #canvasWrap { position: absolute; top: var(--mp-header-h, 44px); left: 0; right: 0; bottom: 52px; overflow: auto; background-color: var(--mp-bg-canvas, #f0f2f6); background-image: linear-gradient(var(--mp-grid, rgba(90,103,216,.07)) 1px, transparent 1px), linear-gradient(90deg, var(--mp-grid, rgba(90,103,216,.07)) 1px, transparent 1px); background-size: 24px 24px; }
        #canvas { position: relative; width: 4000px; height: 3000px; }
        .edge-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
        .edge-layer path { pointer-events: stroke; cursor: pointer; }
        .edge-layer path[data-edge-id]:not([stroke="rgba(0,0,0,0)"]):hover { stroke: #e53e3e !important; stroke-width: 4 !important; opacity: 1 !important; }
        .node-box { position: absolute; min-width: 120px; min-height: 48px; background: var(--mp-node-bg, #fff); border: 2px solid var(--mp-node-border, #5a67d8); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.12); cursor: move; user-select: none; display: flex; flex-direction: column; overflow: visible; z-index: 2; }
        .node-box.selected { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.25), 0 3px 12px rgba(0,0,0,.18); }
        /* 节点悬停上浮（基础交互反馈，不依赖 ambient 氛围层——此前悬停特效绑在 body.ambient 上，
           氛围关/场景样式/动效主题接管时全站没有悬停反馈，用户报「移到节点没特效」） */
        .node-box { transition: transform .18s ease-out, box-shadow .18s ease-out; }
        .node-box:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 18px rgba(124,140,255,.18); }
        .node-box.dragging:hover { transform: none; }
        @media (prefers-reduced-motion: reduce) { .node-box { transition: none; } }
        .node-box .node-title { padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--mp-text, #2d3748); border-bottom: 1px solid var(--mp-border, #eef1f6); background: var(--mp-node-title-bg, #f7f9fc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 56px; position: relative; }
        .node-box .node-title[contenteditable="true"] { outline: 2px solid #5a67d8; cursor: text; background: #fff; }
        .node-box .node-meta { padding: 4px 12px; font-size: 11px; color: var(--mp-text-secondary, #718096); }
        .node-box .node-type { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-right: 6px; }
        .nt-viewpoint { background: #c6f6d5; color: #22543d; }
        .nt-question { background: #fefcbf; color: #744210; }
        .nt-answer { background: #bee3f8; color: #2a4365; }
        .nt-book { background: #feebc8; color: #7b341e; }
        .nt-user { background: #e9d8fd; color: #5b21b6; }
        .vis-badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
        .vis-0 { background: #fed7d7; color: #742a2a; }
        .vis-1 { background: #c6f6d5; color: #22543d; }
        .vis-2 { background: #feebc8; color: #7b341e; }
        .node-btns { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; z-index: 5; }
        .node-btn { width: 20px; height: 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 18px; text-align: center; padding: 0; }
        .node-btn.add { background: #48bb78; color: #fff; }
        .node-btn.add:hover { background: #38a169; }
        .node-btn.del { background: #e53e3e; color: #fff; }
        .node-btn.del:hover { background: #c53030; }
        .node-btn.del.disabled { background: #cbd5e0; color: #a0aec0; cursor: not-allowed; }
        #detailPanel { position: fixed; top: 60px; right: 16px; width: 66.7vw; max-width: none; height: calc(100vh - var(--mp-header-h, 44px) - 52px - 16px); min-width: 320px; min-height: 260px; background: var(--mp-bg-card, #fff); box-shadow: 0 8px 32px rgba(0,0,0,.22); z-index: 100; display: none; flex-direction: column; border-radius: 8px; overflow: hidden; color: var(--mp-text, #2d3748); }
        /* 平板（iOS/Android 且宽 >768，含触屏 iPad）：详情面板维持加宽浮窗 clamp(420px,70vw,720px)；桌面为 66.7vw（约 2/3 屏）；端型类 device-* 由 mindmap-mobile.js detectDevice 挂到 body */
        body.device-ios #detailPanel, body.device-android #detailPanel { width: clamp(420px, 70vw, 720px); }
        /* 移动端适配：详情面板全屏化，不遮挡顶栏和底部输入栏 */
        @media (max-width: 768px) {
            /* 手机（iOS/Android 且宽 ≤768）全宽贴边：正好夹在顶栏（--mp-header-h 由 mindmap-canvas-vis.js 实测写入）与底部输入栏之间；
               桌面（device-windows）窄窗不套用，维持上方 66.7vw 浮窗 */
            body.device-ios #detailPanel, body.device-android #detailPanel { top: var(--mp-header-h, 44px); right: 0; left: 0; width: 100%; max-width: 100vw; height: calc(100dvh - var(--mp-header-h, 44px) - 52px - env(safe-area-inset-bottom)); min-width: 0; border-radius: 0; }
            #detailPanel .detail-actions button { padding: 8px 10px; font-size: 12px; min-height: 36px; }
            #appHeader .hint { display: none; }
        }
        /* 阅读设置面板 */
        #readingSettings { position: fixed; top: 60px; right: 16px; width: 280px; background: var(--mp-bg-card, #fff); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.22); z-index: 120; display: none; flex-direction: column; padding: 14px 16px; color: var(--mp-text, #2d3748); }
        #readingSettings.open { display: flex; }
        #readingSettings h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--mp-text, #2d3748); }
        #readingSettings .rs-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        #readingSettings .rs-row label { font-size: 12px; color: var(--mp-text-secondary, #4a5568); flex: 1; }
        #readingSettings .rs-row input[type=range] { flex: 1.4; accent-color: var(--mp-primary, #5a67d8); }
        #readingSettings .rs-row select { flex: 1.4; max-width: 170px; padding: 3px 6px; font-size: 12px; border: 1px solid var(--mp-border, #d6dae2); border-radius: 5px; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); outline: none; }
        #readingSettings .rs-row .rs-val { font-size: 11px; color: var(--mp-text-secondary, #718096); width: 38px; text-align: right; }
        #readingSettings .rs-reset { align-self: flex-end; padding: 4px 12px; border: 1px solid var(--mp-border, #d6dae2); border-radius: 5px; background: var(--mp-border, #edf2f7); font-size: 12px; cursor: pointer; color: var(--mp-text, #2d3748); }
        #readingSettings .rs-reset:hover { background: var(--mp-primary-light, #e2e8f0); }
        /* 「▦ 表格」插入弹窗（openTablePicker，mindmap-detail.js）：居中卡片，行列各 1~10 */
        #tablePicker { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--mp-bg-card, #fff); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.28); z-index: 1400; display: none; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 240px; color: var(--mp-text, #2d3748); }
        #tablePicker.open { display: flex; }
        #tablePicker h3 { font-size: 14px; font-weight: 600; }
        #tablePicker .tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        #tablePicker .tp-row label { font-size: 13px; color: var(--mp-text-secondary, #4a5568); }
        #tablePicker .tp-row input { width: 76px; padding: 5px 8px; font-size: 14px; border: 1px solid var(--mp-border, #d6dae2); border-radius: 5px; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); outline: none; }
        #tablePicker .tp-btns { display: flex; justify-content: flex-end; gap: 8px; }
        #tablePicker .tp-btns button { padding: 6px 16px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
        #tablePicker .tp-ok { background: var(--mp-primary, #5a67d8); color: var(--mp-header-text, #fff); }
        #tablePicker .tp-ok:hover { background: var(--mp-primary-hover, #4c51bf); }
        #tablePicker .tp-cancel { background: var(--mp-border, #edf2f7); color: var(--mp-text-secondary, #4a5568); }
        #tablePicker .tp-cancel:hover { background: var(--mp-primary-light, #e2e8f0); }
        #detailPanel.open { display: flex; }
        #detailPanel.dragging, #detailPanel.resizing { user-select: none; }
        .detail-header { flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--mp-border, #e8ecf1); background: var(--mp-node-title-bg, #fafbfd); display: flex; gap: 8px; align-items: center; cursor: move; user-select: none; }
        .detail-header input.title-input { flex: 1; min-width: 100px; padding: 6px 10px; border: 1px solid var(--mp-border, #d6dae2); border-radius: 5px; font-size: 14px; font-weight: 600; cursor: text; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); }
        .detail-header .close-btn { width: 28px; height: 28px; border: none; background: transparent; font-size: 18px; color: var(--mp-text-secondary, #718096); cursor: pointer; border-radius: 5px; flex: 0 0 28px; }
        .detail-header .close-btn:hover { background: var(--mp-border, #edf2f7); color: #e53e3e; }
        /* 纯净模式按钮：文字态（原 📖 图标不直观），与顶栏「阅读模式」区分开——阅读模式=点节点直接看内容，纯净模式=当前正文无干扰阅读 */
        .detail-header .pure-read-btn { width: auto; flex: 0 0 auto; padding: 0 8px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--mp-primary, #5a67d8); }
        .detail-header .pure-read-btn:hover { color: var(--mp-primary, #5a67d8); background: var(--mp-primary-light, #e2e8f0); }
        .detail-meta { flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--mp-border, #e8ecf1); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
        .detail-meta label { font-size: 12px; color: var(--mp-text-secondary, #718096); display: flex; align-items: center; gap: 6px; }
        .detail-actions { flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--mp-border, #e8ecf1); display: flex; gap: 8px; flex-wrap: wrap; }
        .detail-actions button { padding: 7px 12px; border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; }
        .detail-actions .edit-content-btn { background: #e0e7ff; color: #4c51bf; border: 1px solid #c7d2fe; }
        .detail-actions .edit-content-btn:hover { background: #c7d2fe; }
        .detail-actions .edit-content-btn.active { background: var(--mp-primary, #5a67d8); color: #fff; border-color: var(--mp-primary, #5a67d8); }
        .detail-actions .voice-stt-btn { background: #fed7d7; color: #c53030; border: 1px solid #fc8181; }
        .detail-actions .voice-stt-btn:hover { background: #feb2b2; }
        .detail-actions .voice-stt-btn.recording { background: #e53e3e; color: #fff; border-color: #c53030; animation: voice-pulse 1s infinite; }
        /* 「语音输入」仅编辑态可见：非编辑态正文是只读预览，识别文字无处可落；进编辑（面板 .editing-content）才显示，退出即隐藏 */
        .detail-actions #voiceSttBtn { display: none; }
        #detailPanel.editing-content .detail-actions #voiceSttBtn { display: inline-block; }
        .detail-actions .voice-tts-btn { background: #bee3f8; color: #2c5282; border: 1px solid #63b3ed; }
        .detail-actions .voice-tts-btn:hover { background: #90cdf4; }
        .detail-actions .voice-tts-btn.speaking { background: var(--mp-primary, #5a67d8); color: #fff; border-color: var(--mp-primary-hover, #4c51bf); }
        .detail-actions .save-btn { background: var(--mp-primary, #5a67d8); color: #fff; }
        .detail-actions .save-btn:hover { background: var(--mp-primary-hover, #4c51bf); }
        .detail-actions .del-btn { background: var(--mp-bg-card, #fff); color: #e53e3e; border: 1px solid #e53e3e; }
        .detail-actions .del-btn:hover { background: #e53e3e; color: #fff; }
        .detail-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
        .content-preview { flex: 1; overflow-y: auto; padding: 14px 24px; font-size: 15px; line-height: 1.8; letter-spacing: 0.3px; font-family: var(--mp-reading-font, inherit); color: var(--mp-text-secondary, #4a5568); max-width: 860px; margin: 0 auto; }
        .content-preview p { margin: 0 0 12px; text-align: justify; }
        .content-preview.empty { display: flex; align-items: center; justify-content: center; color: var(--mp-text-secondary, #a0aec0); text-align: center; opacity: 0.6; }
        .content-preview img { max-width: 100%; border-radius: 6px; margin: 6px auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
        .content-preview img:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
        /* 正文表格（「▦ 表格」插入，Quill 内由 raw-html embed 承载为 .ql-raw-html 包裹）：主题感知边框色 */
        .content-preview table, #quillContainer .ql-editor table { border-collapse: collapse; width: 100%; margin: 8px 0; }
        .content-preview th, .content-preview td, #quillContainer .ql-editor th, #quillContainer .ql-editor td { border: 1px solid var(--mp-border, #cbd5e0); padding: 6px 10px; font-size: 14px; }
        .content-preview th, #quillContainer .ql-editor th { background: var(--mp-node-title-bg, #f7f9fc); font-weight: 600; }
        .content-preview .ql-raw-html, #quillContainer .ql-editor .ql-raw-html { display: block; margin: 8px 0; }
        /* 图片灯箱 */
        #imgLightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.82); z-index: 9999; display: none; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
        #imgLightbox.show { display: flex; }
        #imgLightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); user-select: none; -webkit-user-drag: none; transition: transform .08s ease-out; }
        #imgLightbox.zoomed { cursor: grab; }
        #imgLightbox.zoomed.panning { cursor: grabbing; }
        #imgLightbox:not(.zoomed) { cursor: zoom-out; }
        #imgLightbox .lb-close { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 32px; cursor: pointer; opacity: .8; z-index: 10; }
        #imgLightbox .lb-close:hover { opacity: 1; }
        #imgLightbox .lb-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.65); font-size: 12px; background: rgba(0,0,0,.4); padding: 5px 14px; border-radius: 14px; pointer-events: none; white-space: nowrap; }
        #imgLightbox .lb-reset { position: absolute; top: 20px; left: 24px; color: #fff; font-size: 13px; background: rgba(255,255,255,.15); border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; opacity: .85; display: none; z-index: 10; }
        #imgLightbox .lb-reset:hover { background: rgba(255,255,255,.28); opacity: 1; }
        #imgLightbox.zoomed .lb-reset { display: block; }
        /* 工具栏图片按钮高亮提示 */
        .ql-toolbar .ql-image { position: relative; }
        .ql-toolbar .ql-image:hover::after { content: '插入图片'; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #2d3748; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; z-index: 10; margin-top: 4px; }
        #quillContainer { flex: 1; overflow: hidden; display: none; flex-direction: column; }
        #quillContainer.open { display: flex; }
        /* Quill 初始化时会把 .ql-toolbar 插到 #quillContainer 前面（兄弟节点，不在容器内）：
           平时连同容器一起隐藏，仅编辑态（面板 .editing-content）显示，避免非编辑时详情下方挂着一条工具栏 */
        .detail-body > .ql-toolbar { display: none; }
        #detailPanel.editing-content .detail-body > .ql-toolbar { display: block; }
        #quillContainer .ql-toolbar { border-top: none; flex-wrap: wrap; background: var(--mp-node-title-bg, #fafbfd); border-color: var(--mp-border, #e8ecf1) !important; }
        #quillContainer .ql-container { flex: 1; overflow-y: auto; font-size: 14px; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); border-color: var(--mp-border, #e8ecf1) !important; }
        #quillContainer .ql-editor { color: var(--mp-text, #2d3748); font-family: var(--mp-reading-font, inherit); }
        #quillContainer .ql-editor.ql-blank::before { color: var(--mp-text-secondary, #a0aec0); }
        #detailTip { flex: 0 0 auto; }
        .alert-tip { padding: 6px 10px; font-size: 12px; border-radius: 5px; margin: 8px 12px 0; }
        .alert-ok { background: #c6f6d5; color: #22543d; }
        .alert-err { background: #fed7d7; color: #742a2a; }
        @keyframes voice-pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
        .rs-handle { position: absolute; z-index: 110; }
        .rs-n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
        .rs-s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
        .rs-w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
        .rs-e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
        .rs-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
        .rs-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
        .rs-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
        .rs-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
        #ctxMenu { position: fixed; display: none; background: var(--mp-bg-card, #fff); border: 1px solid var(--mp-border, #d6dae2); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 200; min-width: 170px; overflow: hidden; }
        #ctxMenu.open { display: block; }
        #ctxMenu .ctx-item { padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--mp-text, #4a5568); }
        #ctxMenu .ctx-item:hover { background: var(--mp-primary, #5a67d8); color: var(--mp-header-text, #fff); }
        #ctxMenu .ctx-sep { height: 1px; background: var(--mp-border, #e8ecf1); }
        #chatBar { position: fixed; left: 0; right: 0; bottom: 0; height: 52px; background: var(--mp-bg-card, #fff); border-top: 1px solid var(--mp-border, #e2e8f0); box-shadow: 0 -2px 10px rgba(0,0,0,.06); z-index: 150; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
        #chatBar .chat-mic { flex: 0 0 36px; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--mp-border, #edf2f7); color: var(--mp-primary, #5a67d8); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
        #chatBar .chat-mic:hover { background: var(--mp-primary-light, #e2e8f0); }
        #chatBar .chat-mic.recording { background: #e53e3e; color: #fff; animation: voice-pulse 1s infinite; }
        #chatBar .chat-input { flex: 1; height: 36px; border: 1px solid var(--mp-border, #d6dae2); border-radius: 18px; padding: 0 16px; font-size: 14px; outline: none; transition: border-color .15s; background: var(--mp-bg, #fff); color: var(--mp-text, #2d3748); }
        #chatBar .chat-input:focus { border-color: var(--mp-primary, #5a67d8); }
        #chatBar .chat-send { flex: 0 0 auto; height: 36px; padding: 0 18px; border: none; border-radius: 18px; background: var(--mp-primary, #5a67d8); color: var(--mp-header-text, #fff); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
        #chatBar .chat-send:hover { background: var(--mp-primary-hover, #4c51bf); }
        #chatBar .chat-status { flex: 0 0 auto; font-size: 11px; color: #e53e3e; font-weight: 600; display: none; align-items: center; gap: 4px; }
        #chatBar .chat-status.show { display: flex; }
        #chatBar .chat-status .dot { width: 8px; height: 8px; background: #e53e3e; border-radius: 50%; animation: voice-pulse 1s infinite; }
        #voiceOverlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.75); color: #fff; padding: 20px 32px; border-radius: 12px; z-index: 500; display: none; flex-direction: column; align-items: center; gap: 10px; }
        #voiceOverlay.show { display: flex; }
        #voiceOverlay .vo-icon { font-size: 32px; animation: voice-pulse 1s infinite; }
        #voiceOverlay .vo-text { font-size: 14px; }
        /* 框选样式 */
        .selection-box { position: absolute; border: 2px dashed #5a67d8; background: rgba(90,103,216,.1); z-index: 3; pointer-events: none; }
        .node-box.multi-selected { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.3), 0 3px 12px rgba(0,0,0,.18); }
        #multiSelectBar { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: var(--mp-bg-card, #fff); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: 10px 20px; z-index: 200; display: none; align-items: center; gap: 12px; color: var(--mp-text, #2d3748); }
        #multiSelectBar.show { display: flex; }
        #multiSelectBar .info { font-size: 14px; color: var(--mp-text, #4a5568); font-weight: 600; }
        #multiSelectBar button { padding: 6px 16px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
        #multiSelectBar .del-btn { background: #e53e3e; color: #fff; }
        #multiSelectBar .del-btn:hover { background: #c53030; }
        #multiSelectBar .cancel-btn { background: #e0e7ff; color: #4c51bf; }
        #multiSelectBar .cancel-btn:hover { background: #c7d2fe; }
        /* 折叠/展开按钮 - 根据连线方向动态定位 */
        .node-toggle { position: absolute; width: 16px; height: 16px; border: none; border-radius: 50%; background: #5a67d8; color: #fff; font-size: 10px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
        .node-toggle:hover { background: #4c51bf; }
        .node-box.collapsed .node-title { opacity: 0.7; }
        .node-box.search-highlight { border-color: #d69e2e !important; box-shadow: 0 0 0 3px rgba(214,158,46,.4), 0 0 20px rgba(214,158,46,.6) !important; animation: search-pulse 1s infinite; }
        @keyframes search-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(214,158,46,.4), 0 0 20px rgba(214,158,46,.6); } 50% { box-shadow: 0 0 0 5px rgba(214,158,46,.6), 0 0 30px rgba(214,158,46,.8); } }
        /* 按钮位置：上 */
        .node-toggle.toggle-top { top: -8px; left: 50%; transform: translateX(-50%); }
        /* 按钮位置：下 */
        .node-toggle.toggle-bottom { bottom: -8px; left: 50%; transform: translateX(-50%); }
        /* 按钮位置：左 */
        .node-toggle.toggle-left { left: -8px; top: 50%; transform: translateY(-50%); }
        /* 按钮位置：右 */
        .node-toggle.toggle-right { right: -8px; top: 50%; transform: translateY(-50%); }
        /* 进度条 */
        #importProgress { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--mp-bg-card, #fff); padding: 24px 32px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.25); z-index: 1000; display: none; flex-direction: column; align-items: center; gap: 12px; min-width: 320px; color: var(--mp-text, #2d3748); }
        #importProgress.show { display: flex; }
        #importProgress .progress-bar { width: 100%; height: 8px; background: var(--mp-border, #e2e8f0); border-radius: 4px; overflow: hidden; }
        #importProgress .progress-fill { height: 100%; background: linear-gradient(90deg, var(--mp-primary, #5a67d8), var(--mp-accent, #764ba2)); width: 0%; transition: width 0.3s; }
        #importProgress .progress-text { font-size: 14px; color: var(--mp-text-secondary, #4a5568); }
        #importProgress .progress-title { font-size: 16px; font-weight: 600; color: var(--mp-text, #2d3748); }
        /* 全局操作结果弹窗 */
        #globalToast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9); min-width: 320px; max-width: 480px; padding: 22px 28px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); z-index: 2000; display: none; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; transition: opacity .2s, transform .2s; }
        #globalToast.show { display: flex; opacity: 1; transform: translate(-50%,-50%) scale(1); }
        #globalToast.toast-ok { background: #f0fff4; border: 2px solid #48bb78; }
        #globalToast.toast-err { background: #fff5f5; border: 2px solid #e53e3e; }
        #globalToast .toast-icon { font-size: 36px; }
        #globalToast .toast-title { font-size: 17px; font-weight: 700; color: var(--mp-text, #2d3748); }
        #globalToast .toast-msg { font-size: 13px; color: var(--mp-text-secondary, #4a5568); line-height: 1.6; }
        #globalToast .toast-btn { margin-top: 6px; padding: 7px 24px; border: none; border-radius: 6px; background: var(--mp-primary, #5a67d8); color: var(--mp-header-text, #fff); font-size: 13px; font-weight: 600; cursor: pointer; }
        #globalToast .toast-btn:hover { background: var(--mp-primary-hover, #4c51bf); }

        /* ==================== 书签/阅读定位 ==================== */
        /* 顶栏书签下拉菜单（结构与 convertMenu/layoutMenu 一致） */
        #bookmarkMenu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--mp-bg-card, #fff); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 220px; max-width: 300px; max-height: 320px; overflow-y: auto; z-index: 3000; }
        #bookmarkMenu.open { display: block; }
        #bookmarkMenu .bm-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; }
        #bookmarkMenu .bm-item:hover { background: var(--mp-primary-light, #edf2f7); }
        #bookmarkMenu .bm-text { flex: 1; min-width: 0; }
        #bookmarkMenu .bm-title { font-size: 13px; color: var(--mp-text, #2d3748); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #bookmarkMenu .bm-time { font-size: 11px; color: var(--mp-text-secondary, #a0aec0); margin-top: 1px; }
        #bookmarkMenu .bm-del { flex: 0 0 auto; width: 20px; height: 20px; border: none; border-radius: 4px; background: transparent; color: var(--mp-text-secondary, #a0aec0); font-size: 12px; cursor: pointer; line-height: 20px; text-align: center; padding: 0; }
        #bookmarkMenu .bm-del:hover { background: #fed7d7; color: #e53e3e; }
        #bookmarkMenu .bm-empty { padding: 14px; font-size: 12px; color: var(--mp-text-secondary, #a0aec0); text-align: center; }
        /* 详情面板标题栏的书签切换按钮（bm-active 高亮 = 当前节点已加书签） */
        #detailBookmarkBtn { width: 28px; height: 28px; border: none; background: transparent; font-size: 15px; cursor: pointer; border-radius: 5px; flex: 0 0 28px; color: var(--mp-text-secondary, #a0aec0); padding: 0; }
        #detailBookmarkBtn:hover { background: var(--mp-border, #edf2f7); }
        #detailBookmarkBtn.bm-active { color: #d69e2e; text-shadow: 0 0 6px rgba(214,158,46,.45); }
        /* 「继续阅读」浮动按钮：右下角，避开 minimap（bottom:60px + 高140px），z-index 高于 minimap(80) */
        #resumeReadBtn { position: fixed; right: 16px; bottom: 208px; z-index: 90; max-width: 260px; padding: 8px 14px; border: none; border-radius: 18px; background: var(--mp-primary, #5a67d8); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #resumeReadBtn:hover { background: var(--mp-primary-hover, #4c51bf); }

        /* ==================== 版本历史下拉 ==================== */
        /* 顶栏「🕘 历史」下拉菜单（结构与 bookmarkMenu 一致，.open 控制显隐） */
        #versionMenu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--mp-bg-card, #fff); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 260px; max-width: min(340px, calc(100vw - 24px)); max-height: 360px; overflow-y: auto; z-index: 3000; }
        #versionMenu.open { display: block; }
        #versionMenu .ver-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
        #versionMenu .ver-item:hover { background: var(--mp-primary-light, #edf2f7); }
        #versionMenu .ver-text { flex: 1; min-width: 0; }
        #versionMenu .ver-label { font-size: 13px; color: var(--mp-text, #2d3748); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #versionMenu .ver-meta { font-size: 11px; color: var(--mp-text-secondary, #a0aec0); margin-top: 1px; }
        #versionMenu .ver-restore { flex: 0 0 auto; padding: 4px 10px; border: none; border-radius: 5px; background: var(--mp-primary, #5a67d8); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
        #versionMenu .ver-restore:hover { background: var(--mp-primary-hover, #4c51bf); }
        #versionMenu .ver-empty { padding: 14px; font-size: 12px; color: var(--mp-text-secondary, #a0aec0); text-align: center; }

        /* ==================== 节点标签（#tags） ==================== */
        /* 节点卡片标题下的标签行：小字灰蓝，最多显示 3 个（没有标签不渲染该行） */
        .node-box .node-tags { padding: 3px 12px 0; font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .node-box .node-tag { display: inline-block; color: #6b8cae; background: #edf4fa; border-radius: 3px; padding: 0 5px; margin-right: 4px; }
        /* 详情面板元信息行的标签输入框 */
        .detail-meta .detail-tags-label { flex: 1; min-width: 140px; }
        .detail-meta .detail-tags-label input { width: 100%; padding: 4px 8px; font-size: 12px; border: 1px solid var(--mp-border, #e2e8f0); border-radius: 5px; color: var(--mp-text, #2d3748); background: var(--mp-bg-card, #fff); box-sizing: border-box; }
        .detail-meta .detail-tags-label input:focus { outline: none; border-color: var(--mp-primary, #5a67d8); }

        /* ==================== 公开画布只读查看模式（body.public-view） ==================== */
        /* 顶部横幅：「👁 正在查看「画布名」（作者：xxx）· 只读模式」（mindmap-public-view.js 动态创建） */
        #publicViewBanner { position: fixed; top: var(--mp-header-h, 44px); left: 0; right: 0; z-index: 999; padding: 8px 16px; background: rgba(45,55,72,.92); color: #fff; font-size: 13px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* 节点上的操作按钮（新增子节点/删除节点） */
        .public-view .node-btns { display: none; }
        /* 顶栏：导入/上传/下载/AI生成/转换/历史（编辑相关入口）+「⋮ 更多」菜单整体隐藏 */
        .public-view #importBtn, .public-view #aiGenerateBtn, .public-view #uploadMindBtn { display: none; }
        /* 「⋮ 更多」菜单及其项在只读下全部保留可见：不可用项点击时给全局提示（mindmap-more-menu.js 拦截） */
        /* 详情面板：编辑内容/保存/AI写详情/插入表格/标签输入 */
        .public-view #editContentBtn, .public-view #saveBtn, .public-view #aiWriteContentBtn, .public-view #insertTableBtn, .public-view .detail-tags-label { display: none; }
        /* 画布权限下拉/重命名按钮仅作者可见（只读查看他人画布时隐藏） */
        .public-view #canvasVisSelect, .public-view #canvasEditBtn { display: none; }
        /* 「💬 评论」抽屉：横幅按钮触发（mindmap-public-view.js 动态创建），固定右侧 40% 宽滑出，复用广场评论接口 */
        #publicCommentDrawer { position: fixed; top: 0; right: 0; bottom: 0; width: 40%; min-width: 320px; z-index: 1200; display: flex; flex-direction: column; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); border-left: 1px solid var(--mp-border, #e2e8f0); box-shadow: -4px 0 24px rgba(0,0,0,.18); transform: translateX(105%); transition: transform .25s ease; }
        #publicCommentDrawer.open { transform: translateX(0); }
        #publicCommentDrawer .pcd-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 14px; font-weight: 600; background: var(--mp-node-title-bg, #f7f9fc); border-bottom: 1px solid var(--mp-border, #e2e8f0); }
        #publicCommentDrawer .pcd-close { padding: 4px 8px; border: none; background: none; font-size: 15px; color: var(--mp-text-secondary, #718096); cursor: pointer; }
        #publicCommentDrawer .pcd-list { flex: 1; overflow-y: auto; padding: 10px 14px; }
        /* 评论条目：与广场 list.css 同风格（头像/昵称/时间/内容/图片），头像是昵称首字符圆块 */
        #publicCommentDrawer .comment-item { padding: 8px 0; border-bottom: 1px solid var(--mp-border, #edf2f7); font-size: 13px; }
        #publicCommentDrawer .comment-item:last-child { border-bottom: none; }
        #publicCommentDrawer .comment-item .c-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--mp-primary, #5a67d8); color: #fff; font-size: 12px; font-weight: 600; vertical-align: middle; }
        /* 头像框（gold 金色圈=会员专属 / purple 紫 / green 绿；与 common.css 同款规则，本页不引 common.css 故重复一份） */
        .mp-frame-gold { border: 3px solid #f6c945 !important; box-shadow: 0 0 8px rgba(246,201,69,.85), 0 0 2px rgba(246,201,69,.6) !important; }
        .mp-frame-purple { border: 3px solid #9f7aea !important; box-shadow: 0 0 8px rgba(159,122,234,.8), 0 0 2px rgba(159,122,234,.6) !important; }
        .mp-frame-green { border: 3px solid #48bb78 !important; box-shadow: 0 0 8px rgba(72,187,120,.8), 0 0 2px rgba(72,187,120,.6) !important; }
        #publicCommentDrawer .comment-item .c-meta { font-size: 12px; color: var(--mp-text-secondary, #718096); margin-bottom: 3px; }
        #publicCommentDrawer .comment-item .c-content { line-height: 1.5; word-break: break-word; }
        #publicCommentDrawer .comment-item .c-content img { max-width: 100%; max-height: 160px; margin-top: 4px; border-radius: 6px; cursor: zoom-in; }
        #publicCommentDrawer .pcd-input-area { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mp-border, #e2e8f0); }
        #publicCommentDrawer .pcd-input-area textarea { flex: 1; resize: none; padding: 8px; border: 1px solid var(--mp-border, #e2e8f0); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--mp-bg, #fff); color: var(--mp-text, #2d3748); }
        #publicCommentDrawer .pcd-btns { display: flex; flex-direction: column; gap: 4px; }
        #publicCommentDrawer .pcd-btns button { padding: 6px 12px; border: none; border-radius: 5px; color: #fff; font-size: 13px; cursor: pointer; }
        #publicCommentDrawer .pcd-send { background: var(--mp-primary, #5a67d8); }
        #publicCommentDrawer .pcd-img { background: #38a169; }

        /* ==================== 移动端补充（≤768px） ==================== */
        @media (max-width: 768px) {
            /* 顶栏：h1 只留 🌳 图标（宽度截断隐藏文字），搜索框缩短；
               画布切换按钮在下方网格块独占一行全宽显示画布名（不再 108px 截断） */
            #appHeader h1 { max-width: 22px; overflow: hidden; }
            /* 画布下拉：窄屏全宽不挤压，行高延续 ≥40px */
            #canvasMenu { width: calc(100vw - 32px); }
            #nodeSearchInput { width: 88px !important; }
            /* 顶栏按钮/链接触控目标 ≥36px（padding 沿用上方统一紧缩规则） */
            #appHeader button, #appHeader a, #appHeader select { min-height: 36px; }
            /* 「⋮ 更多」菜单：窄屏下二级下拉改为菜单内原地展开，避免向左飞出屏幕 */
            #moreMenu { max-width: calc(100vw - 16px); }
            #moreMenu #convertMenu, #moreMenu #versionMenu, #moreMenu #bookmarkMenu {
                position: static !important; right: auto !important; min-width: 0; max-width: none;
                box-shadow: none; border: 1px solid var(--mp-border, #e2e8f0); margin: 4px 0 4px 8px !important;
            }
            /* 详情面板头部按钮加大触控面积 */
            #detailPanel .detail-header .close-btn { width: 36px; height: 36px; flex: 0 0 36px; }
            /* 纯净模式是文字按钮，保持自适应宽度不被 36px 方钮规则裁掉 */
            #detailPanel .detail-header .pure-read-btn { width: auto; flex: 0 0 auto; padding: 0 8px; }
            #detailBookmarkBtn { width: 36px; height: 36px; flex: 0 0 36px; }
            /* 底部输入栏：收紧边距、输入 16px 防 iOS 缩放、适配 home indicator */
            #chatBar { height: calc(52px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); gap: 6px; }
            #chatBar .chat-input { font-size: 16px; min-width: 0; }
            #canvasWrap { bottom: calc(52px + env(safe-area-inset-bottom)); }
            /* 弹窗/提示条不溢出窄屏 */
            #importProgress { min-width: 0; width: calc(100vw - 48px); max-width: 360px; }
            #globalToast { min-width: 0; width: calc(100vw - 48px); max-width: 92vw; }
            /* 只读评论抽屉：窄屏全宽 */
            #publicCommentDrawer { width: 100%; min-width: 0; }
            #multiSelectBar { max-width: 94vw; flex-wrap: wrap; }
            #ctxMenu { max-width: calc(100vw - 16px); }
            #ctxMenu .ctx-item { padding: 10px 14px; }
        }


        /* ==================== 移动端触控 & 通用新交互（mindmap-mobile.js） ==================== */
        /* 画布区：禁用浏览器默认滚动/缩放手势（平移/捏合由 JS 实现）；禁止文本选择与长按菜单（详情面板正文不在此区域内，仍可选中） */
        #canvasWrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
        /* 编辑中的节点标题仍要可选中输入 */
        #canvasWrap .node-title[contenteditable="true"] { -webkit-user-select: text; user-select: text; }
        /* 画布缩放：JS 只改 #canvas 的 transform，origin 固定左上，坐标换算以此为基准（节点与连线 SVG 同层一起缩放，保持一致） */
        #canvas { transform-origin: 0 0; }
        /* 滚动范围补偿：transform 不改变布局尺寸，用隐形 sizer 把可滚动区域撑到 逻辑尺寸×缩放比 */
        #canvasScrollSizer { position: absolute; top: 0; left: 0; pointer-events: none; visibility: hidden; }
        /* 节点标题字号：阅读设置面板「节点字号」滑块控制（12~20px，默认 14）；
           字体跟随阅读设置的字体选择（--mp-reading-font，与正文预览 .content-preview / Quill 编辑区 .ql-editor 同一变量，未设置时继承原字体） */
        .node-box .node-title { font-size: var(--mp-node-font-size, 14px); font-family: var(--mp-reading-font, inherit); }

        /* ---- 节点操作条（点按节点弹出，桌面/手机统一） ---- */
        #nodeActionBar { position: fixed; display: none; align-items: center; gap: 4px; padding: 4px; background: var(--mp-bg-card, #fff); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.28); z-index: 260; }
        #nodeActionBar.show { display: flex; }
        /* 操作按钮主题感知：统一中性底色（跟随 --mp-* 主题变量），主操作「编辑」保留主题主色 */
        #nodeActionBar .nab-btn { border: 1px solid var(--mp-border, #e2e8f0); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--mp-node-bg, #fff); color: var(--mp-text, #2d3748); min-height: 36px; white-space: nowrap; }
        #nodeActionBar .nab-btn:hover { background: var(--mp-primary-light, #edf2f7); }
        #nodeActionBar .nab-edit { background: var(--mp-primary, #5a67d8); color: var(--mp-header-text, #fff); border-color: var(--mp-primary, #5a67d8); }
        #nodeActionBar .nab-close { background: transparent; border-color: transparent; color: var(--mp-text-secondary, #718096); }

        /* ---- 顶栏折叠（窄屏默认只显示 ☰；折叠样式只在下方媒体查询内生效） ---- */
        #headerMenuToggle { display: none; border: none; border-radius: 6px; background: rgba(255,255,255,.2); color: #fff; font-size: 16px; cursor: pointer; padding: 5px 12px; }

        /* ---- 阅读模式：隐藏顶栏和底栏聊天框，只留退出浮动按钮 ---- */
        body.reading-mode #appHeader, body.reading-mode #chatBar { display: none; }
        body.reading-mode #canvasWrap { top: 0; bottom: 0; }
        #exitReadingModeBtn { display: none; position: fixed; top: 10px; right: 10px; z-index: 400; padding: 8px 14px; border: none; border-radius: 16px; background: rgba(45,55,72,.88); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
        body.reading-mode #exitReadingModeBtn { display: block; }
        /* 阅读模式下打开的详情面板：编辑类按钮与标签行全部隐藏，只留「🔊 朗读」（.voice-tts-btn 不在隐藏清单里）；标题只读由 mindmap-mobile.js / mindmap-detail.js 同步 */
        body.reading-mode #detailPanel .detail-meta,
        body.reading-mode #detailPanel .detail-actions .edit-content-btn,
        body.reading-mode #detailPanel .detail-actions .voice-stt-btn,
        body.reading-mode #detailPanel .detail-actions .save-btn,
        body.reading-mode #detailPanel .detail-actions .del-btn { display: none !important; }
        /* 阅读模式下标题只读的视觉提示：去边框底色，保持可读（与 detail-reading 一致） */
        body.reading-mode #detailPanel .title-input[readonly] { border-color: transparent; background: transparent; }

        /* ---- 详情面板头部折叠（只留标题栏） ---- */
        #detailCollapseBtn { width: 28px; height: 28px; border: none; background: transparent; font-size: 14px; color: var(--mp-text-secondary, #718096); cursor: pointer; border-radius: 5px; flex: 0 0 28px; padding: 0; }
        #detailCollapseBtn:hover { background: var(--mp-border, #edf2f7); }
        #detailPanel.hdr-collapsed { height: auto !important; min-height: 0 !important; }
        #detailPanel.hdr-collapsed .detail-meta,
        #detailPanel.hdr-collapsed .detail-actions,
        #detailPanel.hdr-collapsed .detail-body,
        #detailPanel.hdr-collapsed #detailTip,
        #detailPanel.hdr-collapsed .rs-handle { display: none !important; }

        @media (max-width: 768px) {
            #headerMenuToggle { display: block; min-height: 36px; }
            /* 折叠态：顶栏只留 ☰ 按钮 */
            #appHeader.header-collapsed > *:not(#headerMenuToggle) { display: none !important; }
            /* 顶栏控件触控目标补足 36px 见方（min-height 前面已有，这里补宽度） */
            #appHeader button, #appHeader a, #appHeader select { min-width: 36px; }
            /* 操作条按钮加大，便于手指点按 */
            #nodeActionBar .nab-btn { padding: 10px 12px; font-size: 14px; }
        }

        /* ---- 顶栏网格化（≤768px，折叠☰/展开同套）：4 列等宽、文字超长省略；画布选择按钮与搜索框各独占一行；h1 图标绝对定位不占格子 ---- */
        /* 运行时可见子项 13~14 个（☰/首页/权限/＋/🗑/布局/上传/更多/展开/折叠/阅读/保存点等），画布行/搜索行通栏，导航组占 2 格，其余 4 列铺满 */
        @media (max-width: 768px) {
            #appHeader { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding-right: 38px; }
            /* h1 只留 🌳 图标：绝对定位进右上角预留的 padding 条带，脱离网格不占格子（折叠态随通配规则隐藏） */
            #appHeader h1 { position: absolute; top: 8px; right: 8px; max-width: 22px; overflow: hidden; z-index: 2; }
            /* flex 时代的占位 spacer 在网格里没有意义 */
            #appHeader .spacer { display: none; }
            /* 直接子控件等宽铺满格子，文字超长省略号 */
            #appHeader > button, #appHeader > a, #appHeader > select { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            /* 下拉包裹容器（画布/布局/转换/更多）与撤销组不顶破格子，内部按钮同样铺满 */
            #appHeader > div { min-width: 0; }
            #canvasMenuWrap > button, #layoutWrap > button, #convertWrap > button, #moreWrap > button { width: 100%; }
            #saveIndicator { justify-self: center; }
            /* 画布选择按钮独占一行全宽显示当前画布名（同搜索框），h1 图标保持右上角不抢位；
               解除旧移动端 108px 截断，确保是画布名文字态而非图标态 */
            #canvasMenuWrap { grid-column: 1 / -1; }
            #canvasSelectorBtn { max-width: none; }
            /* 导航组（🏠/↩/↪）整组占 2 格：3×36px 在单格里会被裁，作为一组随网格整体移动不拆开 */
            #navHistoryGroup { grid-column: span 2; justify-self: start; }
            /* 搜索框独占一行 */
            #nodeSearchInput { grid-column: 1 / -1; width: 100% !important; }
        }


        /* ---- 详情面板阅读模式（mindmap-detail.js toggleDetailReading）：面板全屏化，只留正文预览区 + 浮动退出钮 ---- */
        body.detail-reading #appHeader, body.detail-reading #chatBar { display: none; }
        body.detail-reading #canvasWrap { top: 0; bottom: 0; }
        #detailPanel.detail-reading { top: 0 !important; left: 0 !important; right: 0 !important; width: 100dvw !important; height: 100dvh !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0; z-index: 1200; }
        /* 纯享阅读：面板自身头部（标题 + 📖✕ 按钮）一并收起，只剩正文区 */
        #detailPanel.detail-reading .detail-header,
        #detailPanel.detail-reading .detail-meta,
        #detailPanel.detail-reading .detail-actions,
        #detailPanel.detail-reading #detailTip,
        #detailPanel.detail-reading .rs-handle,
        /* 编辑相关控件全部隐藏（书签/折叠按钮、Quill 容器与工具栏） */
        #detailPanel.detail-reading #detailBookmarkBtn,
        #detailPanel.detail-reading #detailCollapseBtn,
        #detailPanel.detail-reading #quillContainer,
        #detailPanel.detail-reading .detail-body > .ql-toolbar { display: none !important; }
        /* 浮动退出钮：右上角半透明小按钮，hover 变实；点击或 Esc 退出（Esc 分支在 mindmap-enhanced.js） */
        #exitDetailReadBtn { display: none; position: fixed; top: 12px; right: 12px; z-index: 1300; padding: 6px 14px; border: none; border-radius: 14px; background: rgba(45,55,72,.45); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
        #exitDetailReadBtn:hover { opacity: 1; background: rgba(45,55,72,.92); }
        body.detail-reading #exitDetailReadBtn { display: block; }
        /* 画布节点上的 +/- 操作按钮一并隐藏（面板虽全屏遮挡，CSS 双保险，与 body.detail-reading 统一） */
        body.detail-reading .node-btns { display: none !important; }
        /* 阅读模式下标题只读的视觉提示：去边框底色，保持可读 */
        #detailPanel.detail-reading .title-input { border-color: transparent; background: transparent; }
        /* 阅读模式开启时 📖 按钮高亮提示 */
        #detailReadBtn.active { background: var(--mp-primary-light, #e2e8f0); color: var(--mp-primary, #5a67d8); }

        /* ---- 纯净阅读手机端：宽度 100% 自适应，杜绝「上下滑动之外还要左右滑动」 ----
           正文 max-width:860px 居中是为电脑宽屏服务的；≤768px 直接全宽（留 14px 边），
           长串（URL/英文不断行）强制折行、pre 折行、超宽表格在表格内部滚而非整页滚 */
        @media (max-width: 768px) {
            .content-preview { max-width: 100%; padding: 12px 14px; overflow-x: hidden; overflow-wrap: anywhere; }
            .content-preview pre { white-space: pre-wrap; }
            .content-preview table { display: block; overflow-x: auto; }
        }

        /* 语音按钮的内联 SVG 简笔画麦克风（voiceSttBtn / chatMic），文字按钮内垂直对齐 */
        .mic-ico { vertical-align: -2px; }

        /* ---- 画布协作在线标识（mindmap-collab.js）：顶栏「👥 N 人在线」小徽章 ---- */
        #collabPresence { padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: default; }
        #collabPresence.collab-readonly { background: rgba(0,0,0,.22); }

        /* ==================== 交互升级包（mindmap-focus.js 焦点模式 / mindmap-fx.js 阅读跟随与悬停动效） ==================== */
        /* ---- 焦点模式：无关节点淡出（可见集 = 焦点 + 祖先链 + 后代子树 + 直接相连边邻居） ---- */
        .node-box { transition: opacity .2s ease; }
        .node-box.focus-dim { opacity: .1; }
        /* 无关连线同样淡出；transition 同时服务 hover 加粗变色与焦点淡入淡出 */
        .edge-layer path { transition: opacity .2s ease, stroke .15s ease, stroke-width .15s ease; }
        .edge-layer path.focus-dim { opacity: .08; }
        /* 顶栏「🎯 聚焦」开启态提示（背景/文字色由 #appHeader 统一规则接管，这里只加描边） */
        #focusModeBtn.active { box-shadow: 0 0 0 2px var(--mp-primary, #5a67d8) inset; }
        /* 节点操作条里的「🎯 聚焦」按钮用主题色加以区分 */
        #nodeActionBar .nab-focus { color: var(--mp-primary, #5a67d8); }

        /* ---- 阅读跟随：当前阅读节点高亮描边（主题色描边 + 微光；离开阅读模式由 JS 清除） ---- */
        .node-box.reading-current { border-color: var(--mp-primary, #5a67d8); box-shadow: 0 0 0 3px rgba(90,103,216,.35), 0 0 18px rgba(90,103,216,.45); }
        /* 支持 color-mix 的浏览器用主题色派生微光，换主题不变色 */
        .node-box.reading-current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-primary, #5a67d8) 35%, transparent), 0 0 18px color-mix(in srgb, var(--mp-primary, #5a67d8) 45%, transparent); }

        /* ---- 节点出现/展开过渡：opacity + scale(0.96→1) 弹性 ease-out-back 200ms ---- */
        /* 100% 不写 opacity：动画结束回落到元素自身透明度，焦点模式的 .focus-dim 淡出不被覆盖 */
        @keyframes node-pop-in { 0% { opacity: 0; transform: scale(.96); } 100% { transform: scale(1); } }
        .node-box { animation: node-pop-in .2s cubic-bezier(.34, 1.56, .64, 1); }
        /* 拖拽中关掉全部节点动效（mm-dragging 类由 mindmap-fx.js 按 App.dragState 加/去；摘要气泡与连线 hover 也在 JS 里按拖拽态跳过） */
        #canvas.mm-dragging .node-box { animation: none !important; transition: none !important; }

        /* ---- 悬停摘要气泡（mindmap-fx.js 定位注入，200ms 淡入；pointer-events 穿透，不影响节点操作） ---- */
        #nodeHoverTip { position: fixed; z-index: 2500; max-width: 280px; padding: 8px 12px; background: var(--mp-bg-card, #fff); color: var(--mp-text, #2d3748); border: 1px solid var(--mp-border, #e2e8f0); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); font-size: 12px; line-height: 1.5; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
        #nodeHoverTip.show { opacity: 1; }

        /* ---- 连线 hover 加粗变色（类由 mindmap-fx.js 加在可见细线上；透明热区的点击删线不受影响） ---- */
        .edge-layer path.edge-hover { stroke: #dd6b20; stroke-width: 4; opacity: .95; }

/* 上传按钮红点脉冲（第五十三批）：有未上传的导入内容时持续呼吸提醒，上传后自动消失 */
#uploadMindBtn.mp-pulse { animation: mpUploadPulse 1.6s ease-in-out infinite; }
@keyframes mpUploadPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, .55); }
    50% { box-shadow: 0 0 0 7px rgba(229, 62, 62, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #uploadMindBtn.mp-pulse { animation: none !important; }
}