@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap");

:root {
  --ui-surface: #f5f5f6;
  --ui-surface-strong: #ffffff;
  --ui-border: #d5d8dd;
  --ui-border-strong: #bcc2cb;
  --ui-text: #2a2f36;
  --ui-text-soft: #666f7b;
  --ui-accent: #636e7d;
  --ui-accent-ink: #ffffff;
  --ui-shadow: 0 10px 28px rgba(32, 38, 48, 0.16);
  --ui-shadow-soft: 0 4px 12px rgba(38, 45, 56, 0.1);
}

html,
body {
  background: linear-gradient(180deg, #f6f7f8 0%, #fafafa 100%);
  overflow-x: hidden;
}

body,
button,
select,
input,
textarea,
.ui-button .ui-button-text {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

.ui-widget-overlay {
  background: rgba(32, 37, 46, 0.32);
}

.ui-dialog {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface-strong);
  box-shadow: var(--ui-shadow);
}

#canvas-container {
  position: relative;
  box-sizing: border-box;
  padding-right: 0;
}

#canvas-container.format-sidebar-open {
  padding-right: 332px;
}

#format-sidebar {
  position: fixed;
  top: 58px;
  right: 0;
  bottom: 50px;
  width: 332px;
  padding: 10px 12px;
  border-left: 1px solid #d6dbe3;
  background: rgba(247, 249, 251, 0.96);
  box-shadow: var(--ui-shadow);
  overflow-y: auto;
  overflow-x: visible;
  color: #000000;
  z-index: 3500;
}

#format-sidebar,
#format-sidebar label,
#format-sidebar td,
#format-sidebar span,
#format-sidebar select,
#format-sidebar input,
#format-sidebar .ui-button .ui-button-text {
  color: #000000;
  font-size: 12px;
}

#format-sidebar.hidden {
  display: none;
}

.format-sidebar-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  overflow: visible;
}

.format-sidebar-title {
  display: none;
}

.format-sidebar-body {
  padding: 0;
}

#format-sidebar .float-panel,
#format-sidebar .ui-dialog-titlebar,
#format-sidebar .ui-dialog-titlebar-close {
  display: none;
}

#format-sidebar #inspector,
#format-sidebar #navigator {
  width: 100%;
}

#format-sidebar #inspector-content,
#format-sidebar #navi-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#format-sidebar #navi-slider {
  width: 132px;
}

@media (max-width: 1100px) {
  #canvas-container.format-sidebar-open {
    padding-right: 302px;
  }

  #format-sidebar {
    top: 58px;
    bottom: 50px;
    width: 302px;
  }
}

@media (max-width: 860px) {
  #canvas-container {
    padding-right: 0;
  }

  #format-sidebar {
    width: min(84vw, 304px);
    right: 6px;
    top: 64px;
    bottom: 56px;
    border: 1px solid #d6dbe3;
    border-radius: 14px;
  }
}

.ui-dialog .ui-dialog-titlebar {
  border: 0;
  border-bottom: 1px solid #d6dbe3;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #fafbfc 0%, #eceff3 100%);
  color: #2f3742;
}

.ui-dialog .ui-dialog-title {
  font-weight: 700;
  color: #2f3742;
}

.ui-dialog .ui-dialog-titlebar-close {
  border: 1px solid #cdd3dc;
  border-radius: 50%;
  background: #ffffff;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  border-color: #afb7c2;
  background: #f1f3f6;
}

.ui-dialog .ui-dialog-content {
  background: #ffffff;
  color: #3a414a;
}

.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid #e2e6ec;
  background: #f7f8fa;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
  border: 1px solid #c9cfd8;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eceff3 100%);
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
  border-color: #a8b1bc;
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 100%);
}

.ui-dialog .ui-dialog-buttonpane .ui-button .ui-button-text {
  color: #2f3845;
  font-weight: 600;
}

.file-dialog {
  background: #ffffff;
  color: #3b424c;
}

.file-dialog h1 {
  color: #2e3743;
  font-size: 17px;
}

.file-dialog .highlight {
  color: #4f5c6e;
}

.file-dialog p,
.file-dialog label,
.file-dialog td,
.file-dialog th,
.file-dialog a {
  color: #4a5666;
}

.file-dialog input[type="text"],
.file-dialog input[type="file"],
.file-dialog textarea,
.file-dialog select {
  border: 1px solid #ccd2db;
  border-radius: 8px;
  background: #ffffff;
  color: #323b47;
}

.file-dialog button,
.file-dialog .ui-button {
  border: 1px solid #c9cfd8;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eceff3 100%);
}

.file-dialog button:hover,
.file-dialog .ui-button:hover {
  border-color: #a8b1bc;
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 100%);
}

.file-dialog .seperator {
  border-top: 1px solid #d9dee5;
}

.file-dialog .localstorage-filelist tbody tr:nth-child(odd),
.file-dialog .url-list tbody tr:nth-child(odd) {
  background-color: #f6f7f9;
}

.file-dialog .localstorage-filelist tbody tr:hover,
.file-dialog .localstorage-filelist tbody tr:nth-child(odd):hover,
.file-dialog .url-list tbody tr:hover,
.file-dialog .url-list tbody tr:nth-child(odd):hover {
  background-color: #ebeef2;
}

#export-map-dialog {
  background-color: #f7f8fa;
  border: 1px solid #d7dbe2;
  border-radius: 10px;
}

#export-preview .map {
  border: 2px solid #c8ced7;
  border-radius: 8px;
}

#topbar {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(180deg, #fcfcfd 0%, #f2f3f5 100%);
  box-shadow: 0 2px 10px rgba(35, 40, 49, 0.08);
  overflow: visible;
  position: relative;
  z-index: 4000;
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 1001;
}

#logo,
.logo-bg {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0 4px 0 2px;
  margin-right: 14px;
  border-radius: 0;
  background: none !important;
  border: none;
  box-shadow: none;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #3a414d;
  text-shadow: none;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
}

#toolbar .buttons {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  overflow: visible;
}

#toolbar .buttons-left,
#toolbar .buttons-right {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 1;
}

#toolbar .buttons-right {
  position: static;
  margin-right: 0;
}

#toolbar .buttons-middle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
}

#toolbar .ui-button {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text);
  box-shadow: none;
}

#toolbar .ui-button:hover {
  border-color: transparent;
  background: rgba(61, 74, 92, 0.08);
}

#toolbar .ui-button:active,
#toolbar .ui-state-active {
  border-color: transparent;
  background: rgba(61, 74, 92, 0.14);
  color: #2f3640;
}

#toolbar .ui-button .ui-button-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.52em 0.95em;
}

#toolbar .ui-button-text-icon-primary .ui-button-text,
#toolbar .ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
}

#toolbar .ui-button-text-icon-secondary .ui-button-text,
#toolbar .ui-button-text-icons .ui-button-text {
  padding-right: 2.1em;
}

#toolbar .ui-button .ui-icon {
  margin-top: -8px;
}

#toolbar .ui-buttonset {
  margin-right: 6px;
}

#toolbar .menu-wrapper {
  margin-left: 2px;
  position: relative;
  z-index: 2002;
}

#toolbar .menu-wrapper .menu {
  top: 100%;
  left: 0;
  right: auto;
  margin-top: 0;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--ui-shadow);
  z-index: 3000;
}

#toolbar .menu-wrapper .menu-item {
  width: 100%;
  margin: 3px 0;
}

#toolbar .menu-wrapper .menu-item .ui-button-text {
  text-align: left;
}

#bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  border-top: 1px solid var(--ui-border);
  background: rgba(248, 248, 249, 0.95);
  backdrop-filter: blur(7px);
}

#about {
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ui-text-soft);
}

#about a {
  color: var(--ui-text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

#about a:hover {
  color: #3f4752;
  border-bottom-color: #3f4752;
}

#statusbar {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
}

#statusbar .buttons {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

#statusbar .buttons-right {
  position: static;
  margin-right: 0;
}

#statusbar .ui-button {
  border: 1px solid #c9cfd8;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eceff3 100%);
  box-shadow: var(--ui-shadow-soft);
}

#statusbar .ui-button .ui-button-text {
  font-size: 12px;
  font-weight: 600;
  color: #2f3845;
  padding: 0.38em 0.8em;
}

#statusbar .ui-button:hover {
  border-color: #a8b1bc;
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 100%);
}

.float-panel.ui-dialog {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ui-shadow);
  background: var(--ui-surface-strong);
}

.float-panel div.ui-dialog-titlebar {
  border: 0;
  border-bottom: 1px solid #d6dbe3;
  background: linear-gradient(180deg, #fafbfc 0%, #eceff3 100%);
  padding: 0.55em 0.8em 0.5em;
}

.float-panel span.ui-dialog-title {
  color: #2f3742;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.float-panel.ui-dialog .ui-dialog-titlebar-close {
  top: 50%;
  right: 0.55em;
  margin-top: -11px;
  border: 1px solid #cdd3dc;
  border-radius: 50%;
  background: #ffffff;
}

.float-panel.ui-dialog .ui-dialog-titlebar-close:hover {
  border-color: #afb7c2;
  background: #f1f3f6;
}

.float-panel.ui-dialog .ui-dialog-content {
  background: var(--ui-surface-strong);
  padding: 10px 12px;
}

#inspector {
  width: 302px;
}

#inspector-content {
  padding: 2px 0;
}

#inspector-table {
  width: 100%;
  table-layout: auto;
  font-size: 11px;
  border-collapse: separate;
  border-spacing: 0 6px;
}

#inspector-table tr {
  height: auto;
}

#inspector-table td {
  padding: 5px 8px;
  border-bottom: 0;
  color: #383f48;
  vertical-align: middle;
}

#inspector-table .inspector-section-title-row td {
  padding: 5px 2px 2px;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: none;
}

#inspector-table .inspector-collapsible-title td {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 18px;
}

#inspector-table .inspector-collapsible-title td::before {
  content: "▾";
  position: absolute;
  left: 2px;
  top: 4px;
  font-size: 11px;
  color: #5c6775;
}

#inspector-table .inspector-collapsible-title[data-collapsed="true"] td::before {
  content: "▸";
}

#inspector-table .inspector-section-row td {
  background: #ffffff;
  border-left: 1px solid #e2e7ee;
  border-right: 1px solid #e2e7ee;
}

#inspector-table .inspector-group-start td {
  border-top: 1px solid #e2e7ee;
}

#inspector-table .inspector-group-end td {
  border-bottom: 1px solid #e2e7ee;
}

#inspector-table .inspector-group-start td:first-child {
  border-top-left-radius: 10px;
}

#inspector-table .inspector-group-start td:last-child {
  border-top-right-radius: 10px;
}

#inspector-table .inspector-group-end td:first-child {
  border-bottom-left-radius: 10px;
}

#inspector-table .inspector-group-end td:last-child {
  border-bottom-right-radius: 10px;
}

#inspector-table td:first-child {
  width: 1%;
  color: #4b5563;
  font-weight: 600;
  white-space: nowrap;
}

#inspector-table td:last-child {
  white-space: normal;
}

#inspector-table br {
  display: none;
}

#inspector-table .right {
  float: right;
  margin-left: 6px;
}

#inspector-table select {
  height: 26px;
  max-width: 182px;
  border: 1px solid #ccd1d9;
  border-radius: 8px;
  background: #ffffff;
  color: #2f3845;
}

#inspector-table .buttonset {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#inspector-table .font-styles {
  display: flex;
  align-items: center;
  width: 100%;
}

#inspector-table #inspector-button-font-style-children {
  margin-left: auto;
}

#inspector-table .ui-button {
  border: 1px solid #ccd2da;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #edf0f4 100%);
}

#inspector-table .ui-button:hover {
  border-color: #aeb6c0;
  background: linear-gradient(180deg, #ffffff 0%, #e4e8ed 100%);
}

#inspector-table .ui-button .ui-button-text {
  padding: 0.24em 0.52em;
  font-size: 10px;
  font-weight: 600;
  color: #2f3742;
}

#inspector-table .font-styles .ui-button .ui-button-text {
  min-width: 10px;
}

#inspector-table input[type="checkbox"] + label {
  min-width: 22px;
}

#inspector-button-font-face-change {
  width: 132px;
}

#inspector-button-font-face-children,
#inspector-button-font-style-children,
#inspector-button-font-color-children,
#inspector-button-background-color-children,
#inspector-button-border-color-children,
#inspector-button-branch-color-children {
  float: none;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-top: 0;
}

#inspector-button-font-face-children .ui-button-text,
#inspector-button-font-style-children .ui-button-text,
#inspector-button-font-color-children .ui-button-text,
#inspector-button-background-color-children .ui-button-text,
#inspector-button-border-color-children .ui-button-text,
#inspector-button-branch-color-children .ui-button-text {
  padding-left: 0.42em;
  padding-right: 0.42em;
}

#inspector-table #inspector-button-connect-node,
#inspector-table #inspector-button-connect-node-remove,
#inspector-table #inspector-button-add-image,
#inspector-table #inspector-button-urls {
  min-height: 24px;
}

#inspector-table #inspector-button-add-image,
#inspector-table #inspector-button-urls {
  width: auto;
}

#inspector-table #inspector-button-border-style {
  min-width: 108px;
  margin-right: 6px;
}

#inspector-table .colorPicker-picker {
  width: 24px;
  height: 24px;
  margin: 0;
}

/* Keep the color palette above the fixed sidebar and map canvas layers. */
#format-sidebar .colorPicker-palette,
div.colorPicker-palette,
div.colorPicker-palette.inspector {
  z-index: 5005 !important;
  border-color: #b5beca;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(32, 38, 48, 0.24);
}

#inspector-button-connect-node {
  background: linear-gradient(180deg, #848d99 0%, #6f7886 100%) !important;
  border-color: #646d7b !important;
}

#inspector-button-connect-node .ui-button-text {
  color: var(--ui-accent-ink) !important;
}

#navigator {
  width: 272px;
}

#navi-content {
  background: #fbfbfc;
}

#navi-canvas-wrapper {
  margin: 6px 0 9px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #d6dbe3;
  background: #f2f4f7;
}

#navi-canvas {
  border: 1px solid #c5ccd6;
  border-radius: 6px;
  background: #ffffff;
}

#navi-canvas-overlay {
  border: 2px solid #7b8593;
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(123, 133, 147, 0.2);
}

#navi-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

#navi-zoom-level {
  width: 50px;
  margin-right: 3px;
  margin-top: 0;
  font-size: 12px;
  font-weight: 700;
  color: #3b434f;
}

#navi-slider {
  width: 142px;
  margin: 0 5px;
}

#navi-controls .button-zoom {
  width: auto;
  height: auto;
}

#navi-controls .button-zoom .ui-button {
  border-radius: 8px;
  border: 1px solid #cbd1da;
  background: linear-gradient(180deg, #ffffff 0%, #eceff3 100%);
}

#navi-controls .button-zoom .ui-button:hover {
  border-color: #afb7c2;
  background: linear-gradient(180deg, #ffffff 0%, #e2e7ed 100%);
}

#navi-slider .ui-slider-handle {
  border: 1px solid #aab2bc;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e8 100%);
  border-radius: 50%;
}

#navi-slider .ui-slider-range {
  background: #c2c8d1;
}

.mindmap .node-caption.root {
  border: none;
}

.mindmap .node-caption.root.selected {
  border: 3px solid #69b1ff !important;
  /*box-shadow: none;*/
  padding: 3px;
}

.mindmap .node-caption.selected {
  border: 3px solid #69b1ff !important;
  border-radius: 5px;
  padding: 3px;
  /*box-shadow: none;*/
}

/* Use outline so hover indicator never affects box size or node position. */
.mindmap .node-caption:hover {
  outline: 2px dotted #ddd;
  outline-offset: 1px;
}

@media (max-width: 1100px) {
  #logo {
    font-size: 24px;
  }

  #toolbar .ui-button .ui-button-text {
    font-size: 12px;
    padding: 0.48em 0.72em;
  }
}

@media (max-width: 860px) {
  #toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
  }

  #logo {
    font-size: 22px;
    margin-right: 8px;
  }

  #toolbar .buttons {
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
  }

  #toolbar .buttons-right,
  #toolbar .buttons-left {
    flex-wrap: wrap;
  }

  #inspector,
  #navigator {
    width: 288px;
  }

  #about {
    font-size: 11px;
    left: 10px;
  }

  #statusbar {
    padding-right: 9px;
  }
}