:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --muted: #8aa0b6;
  --text: #e7eef6;
  --accent: #5b9cff;
  --accent-2: #8de1a1;
  --warn: #ff6b6b;
  --border: #2a3440;
  --tree-width: 360px; /* resizable via drag handle */
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg); color: var(--text);
}

.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: #0e1217; position: sticky; top: 0; z-index: 10;
}
.topbar .left, .topbar .right { display: flex; align-items: center; gap: 8px; }
.topbar .center { text-align: center; }
.topbar .app-title { font-weight: 600; margin-right: 6px; }
.topbar .sub-title { color: var(--muted); font-size: 12px; }
.topbar .divider { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

button, select, input[type="text"], input[type="number"], textarea {
  background: #0f141a; color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 14px;
}
button { cursor: pointer; }
button:hover { border-color: #3a4656; }
button:active { transform: translateY(1px); }
select { padding: 6px 28px 6px 10px; }
label.toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
label.id-mode { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.avatar { border-radius: 50%; aspect-ratio: 1; width: 32px; }
.profile { position: relative; }
.menu { position: absolute; right: 0; top: 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 200px; }
.menu a { color: var(--text); text-decoration: none; display: block; padding: 6px 8px; border-radius: 6px; }
.menu a:hover { background: #0f141a; }
.hidden { display: none !important; }

.workspace {
  height: calc(100% - 54px);
  display: grid; grid-template-columns: var(--tree-width) 6px 1fr; gap: 0;
}
.panel-header { padding: 8px 10px; color: var(--muted); border-bottom: 1px solid var(--border); }

.tree-panel { background: var(--panel); border-right: 1px solid var(--border); overflow: auto; }
.tree { padding: 8px; }
.tree ul { list-style: none; padding-left: 18px; margin: 0; }
.tree .node { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.tree .node .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .node:hover { background: #0f141a; }
.tree .node.selected { background: #141b23; outline: 1px solid #223042; }
.tree .toggle { cursor: pointer; width: 18px; text-align: center; color: var(--muted); }
.badge { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.type-DVC .badge { border-color: #6ea8ff55; color: #9bc1ff; }
.type-DET .badge { border-color: #8de1a155; color: #8de1a1; }
.type-DPD .badge, .type-DPT .badge { border-color: #f4d06f55; color: #f4d06f; }
.type-DVP .badge { border-color: #ff8fab55; color: #ff8fab; }

.drag-handle { background: #0f141a; cursor: col-resize; }
.drag-handle:hover { background: #13202f; }

.editor-panel { background: var(--panel); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.editor { padding: 12px; overflow: auto; }
.editor .group { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.editor .group h4 { margin: 0 0 8px 0; color: var(--muted); font-weight: 500; }
.field { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 10px; margin: 8px 0; }
.field .err { color: var(--warn); font-size: 12px; }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--warn); box-shadow: 0 0 0 2px #ff6b6b22; }
.editor-actions { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

.ctx-menu { position: fixed; background: #10161f; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 200px; z-index: 20; }
.ctx-menu button { display: block; width: 100%; border: 0; text-align: left; background: transparent; padding: 8px 10px; }
.ctx-menu button:hover { background: #0f141a; }

.export-summary { max-height: 50vh; overflow: auto; background: #0f141a; border: 1px solid var(--border); padding: 8px; border-radius: 8px; }
.export-summary .warn { color: var(--warn); }
.export-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }

.help { color: var(--muted); font-size: 12px; }