/* =========================================================================
 * mindmap-standalone.css —— 独立仓库自己的一份样式
 * 原文件是"工具页里的一部分"，样式来自主站 app.css；这里把画布 / 节点 /
 * 工具条 / 列表 / 弹窗需要的那部分重新写出来，不依赖任何主站样式。
 * ========================================================================= */

:root {
  --mm-bg: #f7f9fc;
  --mm-grid: #e9eef6;
  --mm-line: #e3e8f0;
  --mm-text: #1f2a3d;
  --mm-sub: #6b7a90;
  --mm-ink: #4f63e8;
  --mm-surface: #fff;
  --mm-radius: 10px;
  --mm-shadow: 0 1px 3px rgba(31, 42, 61, .08), 0 6px 20px rgba(31, 42, 61, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ---------------- 顶部条 ---------------- */
#banner { display: none; }
#banner.on {
  display: block; position: fixed; z-index: 60; left: 50%; top: 12px; transform: translateX(-50%);
  max-width: 90vw; padding: 9px 16px; border-radius: 999px;
  background: #1f2a3d; color: #fff; font-size: 13px; box-shadow: var(--mm-shadow);
}
.mm-head {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 14px;
  background: var(--mm-surface); border-bottom: 1px solid var(--mm-line);
}
.mm-head-title { font-size: 15px; }
#mmSaveExit,#mmDiscardExit { flex-shrink:0; }
@media(max-width:1000px) { .mm-head { flex-wrap:wrap;height:auto;min-height:52px;padding-top:8px;padding-bottom:8px;gap:7px; }.mm-title-in { min-width:120px; }.mm-sync { max-width:160px;overflow:hidden;text-overflow:ellipsis; } }
.mm-title-in {
  flex: 0 1 320px; height: 32px; padding: 0 10px;
  border: 1px solid var(--mm-line); border-radius: 8px; font: inherit; font-weight: 600;
  background: #fbfcfe; color: inherit;
}
.mm-head-gap { flex: 1; }
.mm-head-link { color: var(--mm-sub); text-decoration: none; font-size: 12px; }
.mm-head-link:hover { color: var(--mm-ink); }
.mm-sync { font-size: 12px; color: var(--mm-sub); white-space: nowrap; }
.mm-sync.busy { color: #f2a20c; }
.mm-sync.bad { color: #e0524b; }

/* ---------------- 主体容器 ---------------- */
.mm-box { position: relative; }
.mm-box.list { padding: 18px; max-width: 1000px; margin: 0 auto; }
.mm-box.edit { padding: 0; }

/* ---------------- 列表页 ---------------- */
.mm-list-head p { margin: 4px 0 14px; color: var(--mm-sub); }
.mm-search {
  width: 100%; height: 34px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--mm-line); border-radius: 8px; font: inherit; background: #fff;
}
.mm-sec { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.mm-sec b { font-size: 14px; }
.mm-sec span { font-size: 12px; color: var(--mm-sub); }
.mm-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mm-tpl {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
  background: var(--mm-surface); font: inherit; color: inherit; box-shadow: var(--mm-shadow);
}
.mm-tpl:hover { border-color: var(--mm-ink); }
.mm-tpl span { font-size: 20px; }
.mm-tpl b { font-size: 14px; }
.mm-tpl small { color: var(--mm-sub); font-size: 12px; }
.mm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mm-card {
  padding: 12px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
  background: var(--mm-surface); cursor: pointer; box-shadow: var(--mm-shadow);
}
.mm-card:hover { border-color: var(--mm-ink); }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-meta { margin-top: 4px; font-size: 12px; color: var(--mm-sub); }
.mm-more { border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--mm-sub); }
.mm-empty {
  padding: 26px; text-align: center; color: var(--mm-sub);
  border: 1px dashed var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-surface);
}

/* ---------------- 编辑器：工具条 ---------------- */
.mm-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--mm-surface); border-bottom: 1px solid var(--mm-line);
}
.mm-tg { display: flex; align-items: center; gap: 6px; }
.mm-b {
  height: 30px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--mm-line); border-radius: 8px;
  background: #fff; color: inherit; font: inherit; font-size: 13px;
}
.mm-b:hover { border-color: var(--mm-ink); }
.mm-b.pri { background: var(--mm-ink); border-color: var(--mm-ink); color: #fff; }
.mm-b.ic { width: 30px; padding: 0; text-align: center; }
.mm-b.on { border-color: var(--mm-ink); color: var(--mm-ink); }
.mm-b:disabled { opacity: .4; cursor: default; }
.mm-b.danger { color: #e0524b; }
.mm-sel select {
  height: 30px; padding: 0 6px; border: 1px solid var(--mm-line);
  border-radius: 8px; background: #fff; color: inherit; font: inherit; font-size: 13px;
}
.mm-findbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fbfcfe; border-bottom: 1px solid var(--mm-line); }
.mm-findbar input { flex: 0 1 260px; height: 30px; padding: 0 10px; border: 1px solid var(--mm-line); border-radius: 8px; font: inherit; }
.mm-findbar span { font-size: 12px; color: var(--mm-sub); }

/* ---------------- 编辑器：画布 ---------------- */
.mm-main { display: flex; flex: 1 1 auto; min-height: 0; }
.mm-box.edit { display: flex; flex-direction: column; }
.mm-view {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow: clip; outline: none; cursor: grab; touch-action: none;
  background: var(--mm-bg);
  background-image: radial-gradient(var(--grid, var(--mm-grid)) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mm-view.panning { cursor: grabbing; }
.mm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.mm-stage.anim { transition: transform .24s ease; }
.mm-links { position: absolute; overflow: visible; pointer-events: none; }
/* 【独立版·平级】边的三档视觉（线本身仍是 2px；命中带由 JS 按屏幕 10px 算，与这些样式无关）：
   常态 2px 灰 → hover 3px 蓝 → 选中 4px 蓝 + 光晕。色值/线宽由 draw() 与 markEdgeHot() 写成属性，
   这里只补 PNG 预览与不依赖属性时的兜底，以及"选中要有光晕"这种样式层的东西。 */
.mm-edge.sel { filter: drop-shadow(0 0 3px rgba(47, 124, 246, .65)); }
.mm-edge.hot { filter: drop-shadow(0 0 2px rgba(47, 124, 246, .45)); }
/* 【独立版·平级】拖动磁吸点时的虚线预览：与 .mm-links 同一坐标空间，压在连线之上、节点之下。 */
.mm-linkprev { position: absolute; overflow: visible; pointer-events: none; }
/* 【独立版·平级】四个磁吸点：常态隐藏、靠近淡入、屏幕恒定（直径由 JS 按 1/view.k 写）。
   单独一层覆盖在节点之上 —— .mm-node 是 overflow:hidden，骑在边线上的圆点会被裁掉一半。
   层是 pointer-events:none：命中一律在 magnetAt() 里按几何算，不让元素抢事件。 */
.mm-magwrap { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.mm-magwrap.mag-on, .mm-magwrap.linking { opacity: 1; }
.mm-mag { position: absolute; border-radius: 999px; background: #2f7cf6; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28); transform: translate(-50%, -50%); }
.mm-mag.n { left: 50%; top: 0; }
.mm-mag.e { left: 100%; top: 50%; }
.mm-mag.s { left: 50%; top: 100%; }
.mm-mag.w { left: 0; top: 50%; }
.mm-magwrap.hot .mm-mag { background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .35); }
/* 【独立版·平级】边的右键菜单：跟着指针出现的浮层（不是弹窗）。挂在 #mmBox 里，坐标相对它算。 */
.mm-ctx { position: absolute; z-index: 30; min-width: 168px; padding: 5px; display: flex; flex-direction: column;
  background: var(--mm-card, #fff); border: 1px solid rgba(31, 42, 61, .14); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(31, 42, 61, .18); }
.mm-ctx.hidden { display: none; }
.mm-ctx button { display: block; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--mm-ink, #1f2a3d); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.mm-ctx button:hover { background: rgba(47, 124, 246, .1); }
.mm-ctx button.danger { color: #d64545; }
.mo-sep { padding: 6px 8px; font-size: 12px; color: #8b97a6; text-align: center; }

.mm-node {
  position: absolute; overflow: hidden;
  border: 1px solid transparent; border-radius: 10px;
  background: #fff; white-space: pre-wrap; word-break: break-word;
  cursor: grab; user-select: none;
}
.mm-node.sel { outline: 2px solid var(--mm-node-color,var(--mm-ink)); outline-offset: 1px; }
/* 【独立版】八方向方向光标：必须写成 .mm-node.rz-x（(0,2,0)）才压得过 .mm-node{cursor:grab}（(0,1,0)）。
   写在 #mmView 上的行内 style 是**赢不了**的 —— 落在节点盒内只会显示抓手。 */
.mm-node.rz-n, .mm-node.rz-s { cursor: ns-resize; }
.mm-node.rz-e, .mm-node.rz-w { cursor: ew-resize; }
.mm-node.rz-nw, .mm-node.rz-se { cursor: nwse-resize; }
.mm-node.rz-ne, .mm-node.rz-sw { cursor: nesw-resize; }
/* Magnet hit area has the same priority as pointerdown: connection before resize. */
.mm-view.mag-pointer, .mm-view.mag-pointer .mm-node, .mm-view.mag-pointer .mm-node * { cursor: pointer; }
.mm-node.hit { outline: 2px dashed #f2a20c; outline-offset: 1px; }
.mm-node.b .mm-t { font-weight: 700; }
.mm-node.d0 { border-radius: 14px; box-shadow: var(--mm-shadow); }
.mm-node.dragging { opacity: .35; }
.mm-node.ghost { opacity: .8; pointer-events: none; box-shadow: 0 10px 28px rgba(31, 42, 61, .22); }
.mm-node.ghost.sel { outline: none; }
/* 旧的"拖到节点上换父子"反馈类（drop-in / drop-before / drop-after）已随那套落点模型删除：落点只认磁吸点。 */
.mm-t { display: block; }
.mm-ic { position: absolute; right: 6px; bottom: 4px; font-size: 11px; font-weight: 400; cursor: pointer; }
.mm-prog { position: absolute; right: 6px; top: 6px; width: 14px; height: 14px; }
.mm-fold {
  position: absolute; width: 18px; height: 18px; padding: 0; cursor: pointer;
  border: 1px solid var(--c, var(--mm-ink)); border-radius: 50%;
  background: #fff; color: var(--c, var(--mm-ink)); font-size: 11px; line-height: 1;
}
/* 【独立版】收起按钮：常态完全隐藏，鼠标进入节点才完整显示（实心，不要半透明）。
   位置改到**节点内侧**（原来 right:-10px 会被 .mm-node 的 overflow:hidden 裁掉一半）。
   视觉开关用透明度，不用 display/visibility —— 否则没有过渡；"能不能点"见下面两条。 */
.mm-fold { opacity: 0; z-index: 7; transition: opacity .12s; }
.mm-node:hover .mm-fold, .mm-node.sel .mm-fold { opacity: 1; }
/* 【独立版】"能不能点"不再由 :hover 决定。
   原来 base 是 pointer-events:none、要等 :hover 才放开；真实浏览器实测：**第一次点按钮没用、要点第二次**
   （第二次生效是因为选中态的 .sel 也放开了）—— 判定"谁被按下"的命中测试不保证已经吃到 hover 放开的状态。
   现在常态就参与命中（视觉仍靠 opacity 隐藏，鼠标一进节点就实心显示），
   触屏维持原样（不可见即不可点），触屏的握把方案另定。 */
@media (hover: none) { .mm-fold { pointer-events: none; } }
/* 光标：.mm-node{cursor:grab} 是 (0,1,0)，这里 (0,2,0) 更具体，能盖掉抓手 */
.mm-node .mm-fold { cursor: pointer; }
/* 命中区按屏幕 ≥24px 放宽：视觉仍是小圆点，靠透明外扩把可点区域撑到 24px */
.mm-fold::after { content: ""; position: absolute; inset: -4px; }
.mm-fold.s1 { right: 4px; top: 50%; transform: translateY(-50%); }
.mm-fold.s-1 { left: 4px; top: 50%; transform: translateY(-50%); }
.mm-fold.s0 { left: 50%; bottom: 4px; transform: translateX(-50%); }
/* 【独立版】编辑态必须一眼可辨：选中节点自己的描边是 `.mm-node.sel { outline: 2px solid var(--mm-ink) }`，
   而编辑框原来只多一条**同色** 2px 边框 —— 两件事长得一模一样，用户就以为"双击没进编辑"。
   现在给编辑框加一圈柔光环 + 抬高阴影，和"只是选中"明确分开（颜色用字面 rgba，不依赖主题变量）。 */
.mm-edit {
  position: absolute; z-index: 5; resize: none; overflow: hidden;
  border: 2px solid var(--mm-ink); border-radius: 10px; outline: none;
  background: #fff; color: inherit;
  box-shadow: 0 0 0 4px rgba(79, 99, 232, .22), 0 8px 20px rgba(31, 42, 61, .18);
}

.mm-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border: 1px solid var(--mm-line); border-radius: 10px;
  background: rgba(255, 255, 255, .94); box-shadow: var(--mm-shadow);
}
.mm-zoom button {
  width: 28px; height: 28px; cursor: pointer; font-size: 14px;
  border: 0; border-radius: 7px; background: transparent; color: inherit;
}
.mm-zoom button:hover { background: #eef2f9; }
.mm-zoom span { min-width: 42px; text-align: center; font-size: 12px; color: var(--mm-sub); }
.mm-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .86); color: var(--mm-sub); font-size: 12px;
}

/* ---------------- 侧栏 / 大纲 ---------------- */
.mm-panel {
  flex: 0 0 272px; overflow: auto; padding: 12px;
  background: var(--mm-surface); border-left: 1px solid var(--mm-line);
}
.mp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-tip { color: var(--mm-sub); }
.mp-sec { margin: 12px 0 6px; font-size: 12px; color: var(--mm-sub); }
.mp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mp-colors, .mp-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-c { width: 26px; height: 26px; border: 1px solid var(--mm-line); border-radius: 50%; cursor: pointer; }
.mp-c.auto { width: auto; padding: 0 8px; border-radius: 999px; font-size: 12px; background: #fff; color: inherit; }
.mp-c.on { outline: 2px solid var(--mm-ink); outline-offset: 1px; }
.mp-m { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; padding: 5px; border: 1px solid var(--mm-line); border-radius: 8px; background: #fff; cursor: pointer; color: inherit; font-size: 14px; }
.mp-m small { font-size: 10px; color: var(--mm-sub); }
.mp-m.on { border-color: var(--mm-ink); }
.mp-prog { display: flex; gap: 6px; }
#mmNote, #mmLink {
  width: 100%; padding: 8px; border: 1px solid var(--mm-line);
  border-radius: 8px; background: #fbfcfe; color: inherit; font: inherit; resize: vertical;
}
.mp-link { display: flex; gap: 6px; align-items: center; }

.mm-outline { flex: 1 1 auto; overflow: auto; padding: 14px 18px; background: var(--mm-surface); }
.mo-tip { margin-bottom: 10px; font-size: 12px; color: var(--mm-sub); }
.mo-row { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--d) * 20px); }
.mo-tog { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--mm-sub); cursor: pointer; }
.mo-dot { width: 20px; text-align: center; color: var(--mm-sub); }
.mo-in {
  flex: 1; height: 30px; margin: 2px 0; padding: 0 8px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: inherit; font: inherit;
}
.mo-in:hover { border-color: var(--mm-line); }
.mo-in:focus { border-color: var(--mm-ink); background: #fff; outline: none; }
.mo-in.root { font-weight: 700; font-size: 15px; }

/* ---------------- 弹窗 ---------------- */
#mmDlg {
  border: 0; border-radius: 14px; padding: 0; max-width: min(560px, 92vw);
  background: var(--mm-surface); color: var(--mm-text); box-shadow: 0 20px 60px rgba(31, 42, 61, .28);
}
#mmDlg::backdrop { background: rgba(31, 42, 61, .35); }
#mmDlgBody { padding: 18px; }
#mmDlgBody h3 { margin: 0 0 8px; font-size: 16px; }
#mmDlgBody .meta { color: var(--mm-sub); font-size: 13px; }
#mmDlgBody textarea {
  width: 100%; padding: 10px; border: 1px solid var(--mm-line);
  border-radius: 10px; background: #fbfcfe; color: inherit; font: inherit; resize: vertical;
}
.mm-menu { display: grid; gap: 8px; margin: 10px 0; }
.mm-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: 10px;
  background: #fff; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.mm-menu button:hover { border-color: var(--mm-ink); }
.mm-menu small { color: var(--mm-sub); }
.nd-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.nd-actions .spacer { flex: 1; }
.nd-actions button { height: 32px; padding: 0 14px; border: 1px solid var(--mm-line); border-radius: 8px; background: #fff; color: inherit; cursor: pointer; font: inherit; }
.nd-actions button.btn.ink { background: var(--mm-ink); border-color: var(--mm-ink); color: #fff; }
.nd-actions button.small { opacity: .8; }
.mm-prev { margin-top: 8px; font-size: 12px; color: var(--mm-sub); }

/* 主题：跟随 mindmap.js 写在 #mmView 上的 data-theme */
.mm-view[data-theme="night"] { background-color: #121826; }
.mm-view[data-theme="warm"] { background-color: #fffaf2; }
.mm-view[data-theme="board"] { background-color: #24382f; }
.mm-ai { position:fixed; top:52px; right:0; bottom:0; width:420px; z-index:35; background:#fff; border-left:1px solid #dce3ef; display:flex; flex-direction:column; color:#1f2a3d; box-shadow:-4px 0 18px #2030500a; }
.mm-ai.hidden { display:none; }
.mm-ai-open .mm-box { margin-right:420px; }
.mm-ai-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e5eaf2; }
#mmAIContext { padding:10px 16px; font-size:12px; color:#63718a; background:#f5f7fc; overflow-wrap:anywhere; }
#mmAIMessages { flex:1; overflow:auto; padding:14px; min-height:0; }
.mm-ai-message { padding:12px; margin-bottom:14px; background:#f6f8fc; border:1px solid #e5eaf2; border-radius:12px; overflow-wrap:anywhere; }
.mm-ai-message.user { background:#edf2ff; }
.mm-ai-message small { color:#62718b; }
.mm-ai-message .mm-rich { user-select:text; font-size:14px; }
.mm-ai-message pre,.mm-ai-message .katex-display { overflow-x:auto; }
.mm-ai-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; border-top:1px solid #dde4f0; padding-top:10px; }
.mm-ai-summary { margin-top:16px; padding:12px; background:#fff; border:1px solid #cad8f3; border-radius:9px; }
.mm-ai-summary > p { margin:12px 0 0; font-size:12px; line-height:1.7; color:#63718a; }
.mm-ai-summary .mm-rich { margin-top:8px; }
#mmAIForm { padding:12px; border-top:1px solid #e5eaf2; }
#mmAIInput { resize:vertical; width:100%; min-height:78px; max-height:220px; padding:10px; font:inherit; border:1px solid #cdd7e8; border-radius:9px; box-sizing:border-box; }
.mm-ai-send { display:flex; align-items:center; gap:6px; margin-top:8px; }
#mmAIStatus { flex:1; font-size:12px; color:#63718a; overflow-wrap:anywhere; }
.mm-ai-empty { font-size:14px; color:#63718a; line-height:1.8; }
@media(max-width:720px) { .mm-ai { width:min(420px,100vw); } .mm-ai-open .mm-box { margin-right:0; } }
.mm-node-image { width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none; }
.mm-edge-label { position:absolute;z-index:4;padding:5px 7px;border:1px solid #687b96;border-radius:0;background:#fff;color:#263449;font:12px/18px 'Microsoft YaHei',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer;box-shadow:0 1px 4px #20305012; }
.mm-annotations { position:absolute;left:0;top:0;overflow:visible;z-index:12;pointer-events:none; }
.mm-mark { pointer-events:stroke;cursor:move; }
.mm-mark.selected { filter:drop-shadow(0 0 2px #287bf4);stroke-dasharray:8 3; }
.mm-drawing,.mm-drawing .mm-node,.mm-drawing .mm-node * { cursor:crosshair !important; }
.mm-mark-tools { flex-wrap:wrap; }
.mm-mark-tools input[type=color] { width:30px;height:28px;padding:2px;border:1px solid #d6dfef;border-radius:5px;background:#fff; }
.mm-mark-tools label { display:flex;align-items:center;gap:3px;font-size:12px; }
.mm-mark-tools button.active { background:#e6efff;border-color:#4f8df5; }
.mm-label-buttons { display:flex;justify-content:flex-end;gap:8px;margin-top:12px; }
#mmEdgeLabelInput { width:100%;min-width:260px;padding:8px;box-sizing:border-box;font:inherit; }
.mm-media-panel { flex:0 0 240px;width:240px;overflow:auto;padding:12px;border-right:1px solid #dbe3ef;background:#fff;color:#23334a;box-sizing:border-box; }
.mm-media-panel.hidden { display:none; }
.mm-media-heading { display:flex;justify-content:space-between;align-items:center; }
#mmMapFolder,#mmFileStatus { font-size:11px;overflow-wrap:anywhere;color:#66768d;line-height:1.6; }
.mm-media-empty,.mm-file-error { font-size:12px;line-height:1.7; }
.mm-file-error { color:#ba3838; }
.mm-media-item { border:1px solid #dce4f0;padding:8px;margin-top:12px;border-radius:7px;font-size:12px; }
.mm-media-item > img { display:block;width:100%;height:94px;object-fit:contain;margin-bottom:6px;background:#f3f6fb; }
.mm-media-item span { display:block;overflow-wrap:anywhere; }
.mm-media-item small { color:#66768d; }
.mm-media-actions { display:flex;gap:4px;margin-top:8px; }
.mm-media-rename-name { display:flex;align-items:center;gap:6px; }
.mm-media-rename-name #mmMediaRenameName { flex:1;min-width:0; }
.mm-media-rename-name #mmMediaRenameExt { width:70px;flex:none;background:#f1f4f9;color:#65728a; }
.mm-media-actions button { font-size:11px;padding:4px 7px; }
.mm-media-open { display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit; }
.mm-media-open img { display:block;width:100%;height:94px;object-fit:contain;margin-bottom:6px;background:#f3f6fb; }
.mm-media-places { border-top:1px solid #dce4f0;margin-top:8px;padding-top:4px; }
.mm-media-places button { display:flex;justify-content:space-between;gap:5px;width:100%;padding:7px 2px;border:0;background:transparent;text-align:left;font:12px/1.5 inherit;color:inherit;cursor:pointer; }
.mm-media-places button:hover { background:#eef4ff; }
.mm-tools { flex-wrap:wrap; }
.mm-zoom { left:12px;right:auto !important; }
.mm-hint { left:12px;bottom:54px !important;max-width:calc(100% - 24px); }
@media(max-width:720px) { .mm-media-panel { position:absolute;left:0;top:0;bottom:0;z-index:22;box-shadow:4px 0 18px #23334a24; } .mm-main { position:relative; } }
.mm-ctx-branch { position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 9px;border-radius:6px;cursor:default;outline:none; }
.mm-ctx-branch:hover,.mm-ctx-branch:focus-within { background:#edf3fd; }
.mm-ctx-submenu { display:none;position:absolute;left:100%;top:-5px;min-width:195px;padding:5px;background:#fff;color:#24334a;border:1px solid #dce3ef;border-radius:8px;box-shadow:0 5px 20px #23334a26;z-index:2; }
.mm-ctx-branch:hover>.mm-ctx-submenu,.mm-ctx-branch:focus-within>.mm-ctx-submenu { display:block; }
.mm-ctx-branch.opens-left>.mm-ctx-submenu { left:auto;right:100%; }
.mm-ctx-palette { display:grid;grid-template-columns:repeat(4,32px);gap:8px;padding:8px; }
.mm-ctx .mm-color-swatch { width:32px;height:28px;padding:0;border:1px solid #c6d1e2;border-radius:4px; }
.mm-ctx .mm-color-swatch.on { outline:2px solid #24334a;outline-offset:1px; }
.mm-ctx .mm-color-swatch:hover { filter:brightness(.92); }
.mm-ctx-custom,.mm-ctx-width { display:flex;align-items:center;gap:10px;padding:8px;font-size:13px;white-space:nowrap; }
.mm-ctx-custom input[type=color] { width:35px;height:26px;padding:1px;border:1px solid #cdd8e9; }
.mm-ctx-width input { width:65px;padding:5px;border:1px solid #cdd8e9;border-radius:4px;font:inherit; }
.mm-ctx-marks { display:grid;grid-template-columns:1fr 1fr;min-width:250px; }
.mm-ctx { color:#24334a; }
.mm-mark { pointer-events:none; }
.mm-mark-hit { pointer-events:stroke;cursor:move; }
.mm-view.mm-mark-hover,.mm-view.mm-mark-hover .mm-node,.mm-view.mm-mark-hover .mm-node * { cursor:move !important; }

/* Group backgrounds stay under edges and nodes. Only labels and resize strips
   receive pointer events; an empty frame body behaves like blank canvas. */
.mm-group-frame { position:absolute;z-index:0;box-sizing:border-box;pointer-events:none;border:var(--group-width) solid var(--group-color);border-radius:10px;background:var(--group-fill); }
.mm-group-frame.selected { outline:2px dashed var(--group-color);outline-offset:4px; }
.mm-group-label { position:absolute;z-index:3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--group-color);border-radius:5px;background:var(--group-color);color:#fff;padding:4px 10px;font:600 14px/20px 'Microsoft YaHei',sans-serif;cursor:grab;box-shadow:0 1px 3px #26354a18; }
.mm-group-label.selected { outline:2px solid var(--group-color);outline-offset:3px; }
.mm-group-handle { position:absolute;pointer-events:auto;display:block; }
.mm-group-handle.n,.mm-group-handle.s { left:var(--group-hit);right:var(--group-hit);height:var(--group-hit);cursor:ns-resize; }
.mm-group-handle.n { top:calc(var(--group-hit) / -2); }.mm-group-handle.s { bottom:calc(var(--group-hit) / -2); }
.mm-group-handle.e,.mm-group-handle.w { top:var(--group-hit);bottom:var(--group-hit);width:var(--group-hit);cursor:ew-resize; }
.mm-group-handle.e { right:calc(var(--group-hit) / -2); }.mm-group-handle.w { left:calc(var(--group-hit) / -2); }
.mm-group-handle.nw,.mm-group-handle.ne,.mm-group-handle.sw,.mm-group-handle.se { width:var(--group-hit);height:var(--group-hit); }
.mm-group-handle.nw,.mm-group-handle.ne { top:calc(var(--group-hit) / -2); }.mm-group-handle.sw,.mm-group-handle.se { bottom:calc(var(--group-hit) / -2); }
.mm-group-handle.nw,.mm-group-handle.sw { left:calc(var(--group-hit) / -2); }.mm-group-handle.ne,.mm-group-handle.se { right:calc(var(--group-hit) / -2); }
.mm-group-handle.nw,.mm-group-handle.se { cursor:nwse-resize; }.mm-group-handle.ne,.mm-group-handle.sw { cursor:nesw-resize; }
.mm-group-handle:is(.nw,.ne,.sw,.se)::after { content:'';position:absolute;width:var(--group-grip);height:var(--group-grip);left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--group-color);background:#fff;border-radius:2px;box-sizing:border-box; }
.mm-links,.mm-linkprev { z-index:1; }.mm-node { z-index:2; }.mm-magwrap { z-index:4; }
.mm-marquee { position:absolute;z-index:18;pointer-events:none;box-sizing:border-box;border:1px solid #478fea;background:#478fea26; }
.mm-tool-caption { font-size:12px;color:var(--mm-sub); }
.mo-section { margin:12px 0 24px; }.mo-section h3 { padding-bottom:8px;border-bottom:1px solid var(--mm-line);font-size:15px; }.mo-section small { margin-left:8px;font-size:12px;color:var(--mm-sub);font-weight:400; }
.mo-empty { color:var(--mm-sub);font-size:13px; }.mo-group { margin:8px 0 8px calc(var(--d) * 12px); }.mo-group summary { cursor:pointer;padding:5px 0; }
.mo-group summary button { border:0;background:transparent;font:600 14px 'Microsoft YaHei',sans-serif;color:#526394;cursor:pointer; }
.mo-group-index { display:block;text-align:left;background:#fff;border:1px solid var(--mm-line);border-radius:7px;padding:9px 12px;margin:7px 0;width:100%;font:14px 'Microsoft YaHei',sans-serif;cursor:pointer; }.mo-group-index small { display:block;margin:4px 0 0 20px; }
.mo-row textarea.mo-in { min-height:34px;max-height:180px;resize:vertical;white-space:pre-wrap;font-family:inherit;line-height:22px; }