body.dark { background-color: #111; color: #f3f4f6; }
body.dark textarea, body.dark pre, body.dark #tree { background-color: #1e1e1e; color: #f3f4f6; }

button { background-color: #22c55e; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #16a34a; }

.CodeMirror { height: 250px; border: 1px solid #ccc; border-radius: 4px; }

.tree-node { margin-left: 1rem; cursor: pointer; position: relative; }
.tree-node > span:first-child::before {
  content: "▸"; display: inline-block; width: 1rem;
  transition: transform 0.2s;
}
.tree-node.collapsed > ul { display: none; }
.tree-node.collapsed > span:first-child::before { transform: rotate(0deg); }
.tree-node > span:first-child::before { transform: rotate(90deg); }
.tree-node span.highlight { background-color: #fffa65; }
.tree-node button { margin-left: 0.3rem; padding: 0 0.2rem; font-size: 0.8rem; }