#mindMapWindowId .x-mask {
  max-height: 100% !important;
  bottom: 0;
}

#mindMapSpaceSpace {
  width: 100% !important;
  height: 100% !important;
  background: #f0f2f5;
}

#mindMapSpace * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#mindMapSpace {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f0f2f5;
  overflow: auto;
  width: 100%;
  height: 100%;
  --card-title-font-size: 14px;
  --card-subtitle-font-size: 10px;
  --card-avatar-font-size: 16px;
  --card-toggle-font-size: 11px;
  --card-gap: 8px;
  --card-padding-x: 10px;
  --card-padding-y: 12px;
}

#mindmap {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  cursor: grab;
}

#connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#connectors path {
  fill: none;
  stroke: #b0bec5;
  stroke-width: 2;
  transition: d 0.35s ease, opacity 0.35s ease;
}

#cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card {
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: #fff;
  border-radius: 50px;
  padding: 10px 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform;
}
.card-group {
  background: var(--pp-primary-focused-color);
}
.card-main {
  border: solid 2px var(--pp-primary-focused-color);
}

.card-ghost {
  opacity: 0.85;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  pointer-events: none;
  transition: none;
}

.card-dragging {
  opacity: 0.3 !important;
}

.card-drop-target {
  outline: 2px solid #42a5f5;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(66, 165, 245, 0.2);
}

body.is-panning,
body.is-panning * {
  cursor: grabbing !important;
}

body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}

.card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e0e0e0;
  font-size: var(--card-avatar-font-size);
}

.card-main .card-avatar {
  background: none;
}

.card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-title {
  font-size: var(--card-title-font-size);
  font-weight: 600;
  color: #212121;
  line-height: 1.2;
  overflow: hidden;
}
.card-group .card-title {
  color: #ffffff;
}

.card-subtitle {
  font-size: var(--card-subtitle-font-size);
  color: #757575;
  line-height: 1.2;
  text-align: left;
}
.card-group .card-title {
  color: #ffffff;
}

.card-toggle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #b0bec5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--card-toggle-font-size);
  font-weight: 700;
  color: #607d8b;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  white-space: nowrap;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

.card-toggle:hover {
  background: #eceff1;
  border-color: #78909c;
}

.card-toggle[data-side="right"] {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

.card-toggle[data-side="left"] {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card-toggle[data-side="bottom"] {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.card-toggle[data-side="top"] {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zum_50 .card-title { font-size: calc(var(--card-title-font-size) * 0.5); }
.zum_50 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 0.5); }
.zum_50 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 0.5); width: 10px; height: 10px;}
.zum_50 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 0.5); width: 15px; height: 15px;}
.zum_50 .card { gap: calc(var(--card-gap) * 0.5); padding: calc( var(--card-padding-x) * 0.5 ) calc( var(--card-padding-y) * 0.5 ) !important; }
.zum_50 .card-main { border: solid 1px var(--pp-primary-focused-color); }

.zum_75 .card-title { font-size: calc(var(--card-title-font-size) * 0.75); }
.zum_75 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 0.75); }
.zum_75 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 0.75); width: 15px; height: 15px; }
.zum_75 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 0.75); width: 15px; height: 15px;}
.zum_75 .card { gap: calc(var(--card-gap) * 0.75); padding: calc( var(--card-padding-x) * 0.75 ) calc( var(--card-padding-y) * 0.75 ) !important; }
.zum_75 .card-main { border: solid 1px var(--pp-primary-focused-color); }

.zum_100 .card-title { font-size: calc(var(--card-title-font-size) * 1); }
.zum_100 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 1); }
.zum_100 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 1); width: 20px; height: 20px; }
.zum_100 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 1); width: 20px; height: 20px; }
.zum_100 .card { gap: calc(var(--card-gap) * 1); padding: calc( var(--card-padding-x) * 1 ) calc( var(--card-padding-y) * 1 ) !important; }

.zum_125 .card-title { font-size: calc(var(--card-title-font-size) * 1.25); }
.zum_125 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 1.25); }
.zum_125 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 1.25); width: 25px; height: 25px; }
.zum_125 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 1.25); width: 20px; height: 20px; }
.zum_125 .card { gap: calc(var(--card-gap) * 1.25); padding: calc( var(--card-padding-x) * 1.25 ) calc( var(--card-padding-y) * 1.25 ) !important; }

.zum_150 .card-title { font-size: calc(var(--card-title-font-size) * 1.5); }
.zum_150 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 1.5); }
.zum_150 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 1.5); width: 30px; height: 30px; }
.zum_150 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 1.5); width: 20px; height: 20px; }
.zum_150 .card { gap: calc(var(--card-gap) * 1.5); padding: calc( var(--card-padding-x) * 1.5 ) calc( var(--card-padding-y) * 1.5 ) !important; }

.zum_175 .card-title { font-size: calc(var(--card-title-font-size) * 1.75); }
.zum_175 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 1.75); }
.zum_175 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 1.75); width: 35px; height: 35px; }
.zum_175 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 1.75); width: 30px; height: 30px; }
.zum_175 .card { gap: calc(var(--card-gap) * 1.75); padding: calc( var(--card-padding-x) * 1.75 ) calc( var(--card-padding-y) * 1.75 ) !important; }

.zum_200 .card-title { font-size: calc(var(--card-title-font-size) * 2); }
.zum_200 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 2); }
.zum_200 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 2); width: 40px; height: 40px; }
.zum_200 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 2); width: 30px; height: 30px; }
.zum_200 .card { gap: calc(var(--card-gap) * 2); padding: calc( var(--card-padding-x) * 2 ) calc( var(--card-padding-y) * 2 ) !important; }

.zum_225 .card-title { font-size: calc(var(--card-title-font-size) * 2.25); }
.zum_225 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 2.25); }
.zum_225 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 2.25); width: 45px; height: 45px; }
.zum_225 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 2.25); width: 40px; height: 40px; }
.zum_225 .card { gap: calc(var(--card-gap) * 2.25); padding: calc( var(--card-padding-x) * 2.25 ) calc( var(--card-padding-y) * 2.25 ) !important; }

.zum_250 .card-title { font-size: calc(var(--card-title-font-size) * 2.5); }
.zum_250 .card-subtitle { font-size: calc(var(--card-subtitle-font-size) * 2.5); }
.zum_250 .card-avatar { font-size: calc(var(--card-avatar-font-size) * 2.5); width: 50px; height: 50px; }
.zum_250 .card-toggle { font-size: calc(var(--card-toggle-font-size) * 2.5); width: 40px; height: 40px; }
.zum_250 .card { gap: calc(var(--card-gap) * 2.5); padding: calc( var(--card-padding-x) * 2.5 ) calc( var(--card-padding-y) * 2.5 ) !important; }