.mindmap-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  padding: 18px;
  background: #25253a80;
  backdrop-filter: blur(6px);
}

.mindmap-editor {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 36px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #ffffffb3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 80px #20203b33;
  color: #34354b;
}

.mindmap-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid #eeeef4;
}

.mindmap-brand {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
  background: #efecfc;
  color: #6c5cd0;
  font-size: 30px;
}

.mindmap-title-group { flex: 1; min-width: 0; }
.mindmap-title-group input {
  width: min(100%, 520px);
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  outline: none;
  color: #34354b;
  background: transparent;
  font-size: 17px;
  font-weight: 700;
}
.mindmap-title-group input:focus { border-bottom-color: #a59ae6; }
.mindmap-save-state { margin-top: 4px; font-size: 11px; color: #9593a5; }
.mindmap-toolbar .primary-button { border-radius: 10px; white-space: nowrap; }
.mindmap-toolbar .ghost-button { font-size: 12px; white-space: nowrap; }

.mindmap-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-bottom: 1px solid #eeeef4;
  overflow-x: auto;
}
.mindmap-actions button,
.mindmap-view-controls button {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #626078;
  font-size: 12px;
  white-space: nowrap;
}
.mindmap-actions button:hover,
.mindmap-view-controls button:hover { background: #f0edf9; color: #6857c8; }
.mindmap-actions button:first-child { color: #6b5bc8; background: #f3f0fc; }
.mindmap-actions button:first-child span { margin-right: 5px; }
.mindmap-actions .mindmap-delete-action { color: #ad6a78; }
.mindmap-actions kbd { margin-left: 12px; font-family: inherit; font-size: 10px; color: #aaa5bb; }
.mindmap-action-divider { width: 1px; height: 18px; margin: 0 7px; flex-shrink: 0; background: #eceaf1; }

.mindmap-body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; min-height: 0; }
.mindmap-canvas-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #faf9fd;
  background-image: radial-gradient(#d9d5e7 0.8px, transparent 0.8px);
  background-size: 22px 22px;
}
.mindmap-canvas { position: absolute; inset: 0; }
.mindmap-canvas .map-container { cursor: grab; }
.mindmap-canvas .map-container:active { cursor: grabbing; }
.mindmap-canvas me-tpc { max-width: 320px; overflow-wrap: anywhere; line-height: 1.6; cursor: pointer; }
.mindmap-canvas me-tpc { position: relative; }
.mindmap-canvas .mindmap-node-tools { position: absolute; z-index: 50; top: -14px; right: -14px; display: flex; gap: 4px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.mindmap-canvas me-parent:has(> me-tpc.selected) > me-tpc .mindmap-node-tools,
.mindmap-canvas me-root:has(> me-tpc.selected) > me-tpc .mindmap-node-tools,
.mindmap-canvas me-parent:focus-within > me-tpc .mindmap-node-tools { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mindmap-canvas .mindmap-node-tools button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #e4def6; border-radius: 50%; background: #fff; color: #6758bd; box-shadow: 0 2px 8px #39304b18; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; touch-action: none; pointer-events: auto; }
.mindmap-canvas .mindmap-node-tools .mindmap-node-link { color: #378c82; font-size: 14px; cursor: crosshair; }
.mindmap-canvas .mindmap-node-tools button:hover { background: #f1effa; transform: scale(1.08); }
.mindmap-canvas .map-container.mindmap-link-dragging { cursor: crosshair; }
.mindmap-link-preview { position: absolute; inset: 0; z-index: 80; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mindmap-link-preview path { fill: none; stroke: #b58a65; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.mindmap-canvas .topiclinks path { cursor: grab; }
.mindmap-canvas .topiclinks path:active { cursor: grabbing; }
.mindmap-canvas me-root me-tpc {
  padding: 16px 30px;
  font-size: 21px;
  font-weight: 600;
  box-shadow: 0 8px 22px #6256cf24;
}
.mindmap-canvas me-main > me-wrapper > me-parent > me-tpc { padding: 10px 20px; font-size: 15px; font-weight: 600; box-shadow: 0 3px 12px #35304b06; }
.mindmap-canvas me-children me-tpc { font-size: 14px; }
.mindmap-canvas me-tpc.selected { outline-width: 2px; outline-offset: 4px; }
.mindmap-canvas #input-box { border-radius: 8px; padding: 8px 12px; }
.mindmap-canvas-caption { position: absolute; top: 20px; left: 24px; pointer-events: none; color: #aaa4ba; font-size: 11px; letter-spacing: 1px; }
.mindmap-view-controls {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid #eae7f1;
  border-radius: 12px;
  background: #ffffffed;
  box-shadow: 0 4px 20px #36304c08;
}
.mindmap-view-controls output { min-width: 43px; text-align: center; font-size: 11px; color: #6f6884; font-variant-numeric: tabular-nums; }
.mindmap-view-controls > span { height: 16px; width: 1px; background: #eae7f1; margin: 0 5px; }

.mindmap-inspector { display: grid; align-content: start; gap: 18px; padding: 24px 20px; overflow: auto; border-left: 1px solid #eeebf4; background: #fff; }
.mindmap-panel-heading { font-weight: 700; font-size: 13px; }
.mindmap-panel-heading > span { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: #a39caf; }
.mindmap-panel-section { border-top: 1px solid #f0edf5; padding-top: 22px; margin-top: 2px; }
.mindmap-inspector .field { gap: 8px; margin: 0; }
.mindmap-inspector .field > span { color: #888295; font-size: 11px; font-weight: 400; }
.mindmap-inspector textarea,
.mindmap-inspector select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #e9e5f0; border-radius: 9px; outline: none; background: #fcfbfe; color: #575066; font-size: 12px; line-height: 1.8; }
.mindmap-inspector textarea { resize: vertical; min-height: 80px; }
.mindmap-inspector textarea:focus,
.mindmap-inspector select:focus { border-color: #a398dd; box-shadow: 0 0 0 3px #a398dd14; }
.mindmap-inspector textarea[readonly] { color: #8d859b; background: #f7f5fb; }
.mindmap-tips { padding: 14px; border-radius: 10px; background: #f8f6fc; font-size: 11px; line-height: 1.8; color: #9990a8; }
.mindmap-tips b { color: #80748f; font-weight: 500; }
.mindmap-tips p { margin: 6px 0 0; }
.mindmap-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-top: 1px solid #eeebf4; color: #aaa3b5; font-size: 10px; }
.mindmap-statusbar i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #8eb7a5; }
.mindmap-status-separator { margin: 0 10px; color: #d0cad9; }
.mindmap-details-hidden .mindmap-body { grid-template-columns: minmax(0, 1fr); }
.mindmap-details-hidden .mindmap-inspector { display: none; }
.mindmap-editor button:focus-visible { outline: 2px solid #8c80e6; outline-offset: 2px; }
.mindmap-editor button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 900px) {
  .mindmap-overlay { padding: 0; }
  .mindmap-editor { border: 0; border-radius: 0; }
  .mindmap-toolbar { gap: 10px; padding: 12px; }
  .mindmap-brand { display: none; }
  .mindmap-title-group input { font-size: 14px; }
  .mindmap-actions { padding: 8px 12px; }
  .mindmap-body { position: relative; grid-template-columns: minmax(0, 1fr); }
  .mindmap-inspector { position: absolute; inset: 0 0 0 auto; z-index: 2; width: min(280px, 85%); border-top: 0; box-shadow: -8px 0 24px #4032570a; }
  .mindmap-view-controls { right: 12px; bottom: 14px; }
  .mindmap-statusbar { padding: 0 12px; }
  .mindmap-statusbar > span:last-child { display: none; }
  .mindmap-actions kbd { display: none; }
}