/* ============================================================
   攻略图 · 在线思维导图（页面级样式）
   沿用站点墨金设计变量；画布另有「墨金 / 宣纸」两套皮肤
   ============================================================ */

.mm-app {
  max-width: 1360px;
  margin: 0 auto 46px;
  padding: 0 18px;
}

/* ── 工具栏 ─────────────────────────────── */
.mm-bar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1) 92%);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mm-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.mm-bar-row + .mm-bar-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hair);
}
.mm-bar-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.mm-group {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mm-group-grow { flex: 1 1 auto; }
.mm-label {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 2px;
  margin-right: 2px;
}
.mm-btn {
  padding: 5px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.mm-btn:hover {
  border-color: var(--gold-line);
  color: var(--gold-soft);
  background: var(--gold-dim);
}
.mm-btn:active { transform: translateY(1px); }
.mm-btn-gold {
  border-color: var(--gold-deep);
  background: linear-gradient(165deg, #d9ab5c, #b8863b 55%, #96682a);
  color: #241a08;
  font-weight: 700;
}
.mm-btn-gold:hover {
  background: linear-gradient(165deg, #e6bd74, #c89648 55%, #a3742f);
  color: #1c1405;
  border-color: #d9ab5c;
}
.mm-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
}
.mm-select:focus { border-color: var(--gold-deep); }
.mm-title {
  flex: 0 1 260px;
  min-width: 150px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  outline: none;
}
.mm-title:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(139, 107, 37, 0.18); }
.mm-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.mm-seg-btn {
  padding: 5px 12px;
  border: 0;
  background: var(--ink-3);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.15s;
}
.mm-seg-btn + .mm-seg-btn { border-left: 1px solid var(--line); }
.mm-seg-btn.on {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 700;
}
.mm-status {
  color: var(--gold-soft);
  font-size: 12.5px;
  letter-spacing: 1px;
}
.mm-status-muted { color: var(--muted); cursor: pointer; }

/* ── 画布 ───────────────────────────────── */
.mm-stage {
  position: relative;
  height: clamp(440px, calc(100vh - 380px), 780px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  background: var(--ink-0);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  outline: none;
}
.mm-stage.dragging { cursor: grabbing; }
.mm-stage:focus-visible { border-color: var(--gold-line); }
/* 画布元素必须铺满容器，否则坐标换算与适应视图会错位 */
.mm-stage > svg { display: block; width: 100%; height: 100%; touch-action: none; }

/* 画布皮肤：宣纸（适合白底阅读环境截图） */
.mm-app[data-skin='paper'] .mm-stage {
  background: var(--paper);
  box-shadow: inset 0 0 40px rgba(139, 107, 37, 0.1);
}

/* ── 节点编辑面板（position:fixed 以免被画布 overflow 裁掉）── */
.mm-editor {
  position: fixed;
  z-index: 60;
  width: 320px;
  /* 移动端兜底：任何情况下都不超出视口 */
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: var(--ink-2);
  box-shadow: var(--shadow);
}
.mm-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.mm-editor-title {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
}
.mm-tag-pick { display: inline-flex; gap: 4px; }
.mm-tag {
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  cursor: pointer;
}
.mm-tag:hover { color: var(--gold-soft); border-color: var(--gold-line); }
.mm-tag.t-key.on { background: rgba(193, 57, 43, 0.28); border-color: #c1392b; color: #ffd9d3; }
.mm-tag.t-warn.on { background: rgba(176, 122, 18, 0.28); border-color: #b07a12; color: #ffe6b8; }
.mm-tag.t-done.on { background: rgba(47, 93, 80, 0.3); border-color: #2f5d50; color: #c8ecdf; }
.mm-tag.on { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.mm-editor textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  outline: none;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 7px 9px;
  border-radius: 6px;
}
.mm-editor textarea:focus { border-color: var(--gold-deep); }
.mm-editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 7px;
}
.mm-mini {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.mm-mini:hover { color: var(--gold-soft); border-color: var(--gold-line); }
.mm-mini-sep { width: 1px; height: 14px; background: var(--line); }
.mm-editor-note {
  width: 100%;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12.5px;
  outline: none;
}
.mm-editor-note:focus { border-color: var(--gold-deep); }
.mm-editor-tip {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 1px;
}

/* ── 我的攻略图弹层 ─────────────────────── */
.mm-modal { position: fixed; inset: 0; z-index: 90; }
.mm-modal-mask { position: absolute; inset: 0; background: rgba(6, 5, 10, 0.66); }
.mm-modal-box {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1) 92%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.mm-modal-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: 3px;
}
.mm-modal-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mm-modal-x:hover { color: var(--gold); }
.mm-modal-body { padding: 8px 16px; overflow-y: auto; }
.mm-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.mm-modal-tip { color: var(--muted); font-size: 12.5px; }
.mm-empty { margin: 18px 0; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
.mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px dashed rgba(163, 149, 127, 0.2);
}
.mm-row:last-child { border-bottom: 0; }
.mm-row.on { background: rgba(247, 210, 139, 0.06); }
.mm-row-main { min-width: 0; }
.mm-row-main strong {
  display: block;
  color: var(--gold-soft);
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-row-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.mm-row-ops { display: flex; gap: 6px; flex: none; }

/* ── 底部说明 ───────────────────────────── */
.mm-foot { margin-top: 12px; }
.mm-hint {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 1px;
}
.mm-hint b { color: var(--gold); font-weight: 700; }
.mm-hint-muted { color: #7d7264; }

/* ── 投稿编辑器的导图选择弹层 ───────────── */
.qjmm-box .mm-row { padding: 12px 4px; }
.qjmm-thumb {
  width: 74px;
  height: 52px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
}
.qjmm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qjmm-row-main { flex: 1 1 auto; min-width: 0; }

/* ── 移动端 ─────────────────────────────── */
@media (max-width: 760px) {
  .mm-app { padding: 0 12px; }
  .mm-bar { padding: 10px; }
  .mm-bar-row { gap: 8px 12px; min-width: 0; }
  .mm-label { display: none; }
  .mm-btn { padding: 5px 10px; font-size: 12.5px; }
  /* 移动端工具栏必须能换行 + 允许收缩，否则整行超宽会把页面撑出横向滚动条
     （点「编辑节点」时看起来就像浮层跑出屏幕） */
  .mm-group { flex-wrap: wrap; min-width: 0; }
  .mm-group-grow { flex: 1 1 100%; min-width: 0; }
  .mm-title { flex: 1 1 110px; min-width: 0; width: auto; }
  .mm-seg { flex: none; }
  .mm-stage { height: clamp(360px, 62vh, 560px); }
  /* 只限上限，宽度交给 JS 计算，避免 CSS 强制宽度与 JS 定位不一致导致浮层越界 */
  .mm-editor { max-width: calc(100vw - 24px) !important; }
}

/* ── 编辑面板：标题 + 四个标记按钮固定一行，不换行 ── */
.mm-editor-head { flex-wrap: nowrap; }
.mm-editor-title { white-space: nowrap; flex: none; }
.mm-tag-pick { display: inline-flex; flex: none; flex-wrap: nowrap; gap: 4px; }
.mm-tag { white-space: nowrap; flex: none; }

/* ── 编辑面板底部：确定 / 取消 ── */
.mm-editor-actions { display: flex; gap: 8px; margin-top: 9px; }
.mm-editor-actions .mm-btn { flex: 1 1 0; justify-content: center; }

/* ── 工具栏标题行居中（移动端仍按原样左对齐、紧凑排列） ── */
.mm-bar-row-title { justify-content: center; }
.mm-bar-row-title .mm-group-grow { flex: 0 1 auto; }
@media (max-width: 760px) {
  .mm-bar-row-title { justify-content: flex-start; }
  .mm-bar-row-title .mm-group-grow { flex: 1 1 auto; }
}

/* ── 工具栏标签不换行（「攻略图命名」等必须一行显示） ── */
.mm-label { white-space: nowrap; flex: none; }

/* ── 自定义标记（紫色）+ 「改」按钮 ── */
.mm-tag.t-custom.on { background: rgba(90, 74, 138, 0.32); border-color: #6b58a8; color: #ddd4f8; }
#mmTagEdit { padding: 2px 9px; border-radius: 20px; flex: none; }
#mmTagEdit[hidden] { display: none; }

/* ── 插入攻略图弹层：迷你预览图 ── */
.qjmm-thumb.has-img { padding: 0; overflow: hidden; border-color: var(--gold-line); }
.qjmm-thumb.has-img img { object-fit: contain; background: var(--ink-0); }

/* ── 移动端：编辑面板更紧凑，标记允许换行（桌面端必须一行） ── */
@media (max-width: 760px) {
  .mm-editor { padding: 8px; border-radius: 8px; }
  .mm-editor-head { flex-wrap: wrap; }
  .mm-editor-title { letter-spacing: 1px; }
  .mm-tag-pick { flex-wrap: wrap; }
  .mm-tag { padding: 2px 7px; font-size: 11px; }
  .mm-editor textarea { min-height: 64px; font-size: 13.5px; }
}

/* ── 「我的攻略图」/「插入攻略图」列表：标题与「最近保存」左侧留出内边距 ──
   否则文字紧贴卡片左边缘，长标题看起来像溢出框体 */
.mm-row-main { padding-left: 8px; }
.qjmm-row-main { padding-left: 8px; }