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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
}

/* Toolbar */
#toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

#toolbar button {
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

#toolbar button:hover {
  background: #e8e8e8;
}

.toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: #ddd;
}

/* Split pane */
#split {
  display: flex;
  height: calc(100% - 37px);
}

#editor-pane {
  width: 35%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

#editor {
  flex: 1;
  padding: 12px;
  border: none;
  outline: none;
  resize: none;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  color: #333;
  tab-size: 2;
}

#divider {
  width: 5px;
  cursor: col-resize;
  background: #ddd;
  flex-shrink: 0;
}

#divider:hover {
  background: #aaa;
}

#mindmap-pane {
  flex: 1;
  overflow: hidden;
  background: #fafafa;
}

#mindmap {
  width: 100%;
  height: 100%;
}

/* Markmap SVG styles */
.markmap {
  --markmap-a-color: #0097e6;
  --markmap-code-bg: #f0f0f0;
  --markmap-code-color: #555;
  --markmap-circle-open-bg: #fff;
  --markmap-node-bg: #fafafa;
  --markmap-text-color: #333;
  --markmap-font: 300 16px/20px sans-serif;

  font: var(--markmap-font);
  color: var(--markmap-text-color);
}

.markmap-link {
  fill: none;
}

.markmap-node > circle {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.markmap-node:hover > circle,
.markmap-fold > circle {
  opacity: 1;
}

.markmap-foreign {
  display: inline-block;
}

.markmap-foreign p {
  margin: 0;
}

.markmap-foreign strong {
  font-weight: 700;
}

.markmap-foreign em {
  font-style: italic;
}

.markmap-foreign del {
  text-decoration: line-through;
}

.markmap-foreign a {
  color: var(--markmap-a-color);
  text-decoration: underline;
}

.markmap-foreign code {
  padding: 0.25em;
  font-size: calc(1em - 2px);
  color: var(--markmap-code-color);
  background-color: var(--markmap-code-bg);
  border-radius: 2px;
}

.mm-todo {
  cursor: pointer;
  margin-right: 3px;
}

.mm-todo-done {
  color: #4caf50;
}

.mm-done-text {
  text-decoration: line-through;
  opacity: 0.5;
}

.markmap-foreign > div {
  text-align: left;
}

.markmap-foreign > div > div {
  display: inline-block;
  white-space: nowrap;
  background: var(--markmap-node-bg);
  padding: 1px 3px;
  border-radius: 2px;
}

/* Dark mode */
body.dark {
  background: #1a1b26;
  color: #ccc;
}

body.dark #toolbar {
  background: #24283b;
  border-bottom-color: #3b4261;
}

body.dark #toolbar button {
  background: #24283b;
  border-color: #3b4261;
  color: #ccc;
}

body.dark #toolbar button:hover {
  background: #3b4261;
}

body.dark .toolbar-sep {
  background: #3b4261;
}

body.dark #editor {
  background: #1a1b26;
  color: #c0caf5;
}

body.dark #divider {
  background: #3b4261;
}

body.dark #mindmap-pane {
  background: #1a1b26;
}

body.dark .markmap {
  --markmap-code-bg: #24283b;
  --markmap-code-color: #ddd;
  --markmap-circle-open-bg: #444;
  --markmap-node-bg: #1a1b26;
  --markmap-text-color: #c0caf5;
}

body.dark .mm-todo-done {
  color: #73daca;
}