* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #1a1a1a; color: #e0e0e0; }
body { display: grid; grid-template-columns: 260px 1fr 340px; grid-template-rows: 48px 1fr; }
header {
  grid-column: 1 / -1;
  background: #111; border-bottom: 1px solid #333;
  display: flex; align-items: center; padding: 0 16px; gap: 16px;
}
header h1 { font-size: 18px; margin: 0; color: #4488ff; }
#status { font-size: 12px; color: #888; margin-left: auto; }
.tabs { display: flex; gap: 2px; margin-left: 16px; }
.tab { background: transparent; color: #888; border: none; border-bottom: 2px solid transparent; padding: 6px 14px; cursor: pointer; font-size: 13px; font-family: inherit; }
.tab:hover { color: #e0e0e0; }
.tab.active { color: #4488ff; border-bottom-color: #4488ff; }
.tab-pane[hidden] { display: none !important; }
aside {
  background: #222; border-right: 1px solid #333; padding: 12px; overflow-y: auto;
}
#right { border-right: none; border-left: 1px solid #333; }
aside h2 { font-size: 13px; text-transform: uppercase; color: #888; margin: 8px 0; }
aside section { margin-bottom: 20px; }
aside label { display: block; font-size: 12px; margin-bottom: 8px; }
aside input, aside select {
  display: block; width: 100%; margin-top: 4px;
  background: #1a1a1a; color: #e0e0e0; border: 1px solid #333; padding: 4px 6px; border-radius: 3px;
}
aside input[type="search"] { margin-bottom: 6px; font-family: inherit; }
aside input[type="search"]:focus { outline: none; border-color: #4488ff; }
aside button {
  display: block; width: 100%; margin-bottom: 6px;
  background: #2a3a5a; color: #e0e0e0; border: 1px solid #4488ff; padding: 6px; border-radius: 3px; cursor: pointer;
}
aside button:disabled { background: #1a1a1a; color: #666; border-color: #333; cursor: not-allowed; }
.muted { color: #777; font-size: 12px; }
#canvas-host { position: relative; overflow: hidden; }
#canvas-host canvas { display: block; }
.viewer-toolbar { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 6px; z-index: 10; }
.viewer-toolbar button {
  background: rgba(42, 58, 90, 0.85); color: #e0e0e0; border: 1px solid #4488ff;
  padding: 6px 12px; border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 12px;
  backdrop-filter: blur(4px);
}
.viewer-toolbar button:hover { background: rgba(60, 80, 120, 0.95); }
.viewer-toolbar button.active { background: rgba(68, 136, 255, 0.85); color: #fff; }
.viewer-legend {
  position: absolute; bottom: 14px; right: 14px; z-index: 10;
  background: rgba(20, 20, 20, 0.82); color: #e0e0e0;
  padding: 8px 10px; border-radius: 4px; font-size: 11px;
  backdrop-filter: blur(4px); max-width: 200px;
}
.viewer-legend .legend-title { font-weight: 600; color: #88aaff; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.viewer-legend ul { list-style: none; padding: 0; margin: 0; }
.viewer-legend li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.viewer-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.viewer-legend .glyph {
  display: inline-block; width: 14px; flex-shrink: 0;
  font-size: 13px; line-height: 1; text-align: center;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
}
code { background: #111; padding: 1px 4px; border-radius: 2px; font-size: 11px; }
ul.lib { list-style: none; padding: 0; margin: 0; }
ul.lib li { background: #1a1a1a; border: 1px solid #333; border-radius: 3px; padding: 6px 8px; margin-bottom: 4px; cursor: pointer; }
ul.lib li:hover { border-color: #4488ff; }
ul.lib li.active { border-color: #4488ff; background: #1a2238; }
ul.lib li .lib-title { font-size: 12px; font-weight: 600; color: #e0e0e0; }
ul.lib li .lib-meta { font-size: 10px; color: #888; margin-top: 2px; }
ul.lib li .lib-sub-list {
  list-style: none; padding: 0; margin: 4px 0 0 8px;
  border-left: 2px solid #2a2a2a;
}
ul.lib li .lib-sub-list li {
  background: transparent; border: none; padding: 1px 0 1px 6px; margin: 0;
  font-size: 10px; color: #9bb;
}
ul.lib li .lib-sub-list li:before { content: "· "; color: #555; }
ul.lib li.lib-cat-header {
  background: transparent; border: none; padding: 10px 0 4px; margin-bottom: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: #4488ff; cursor: pointer; user-select: none;
}
ul.lib li.lib-cat-header:hover { color: #88aaff; border: none; }
ul.lib li.lib-cat-header:first-child { padding-top: 0; }
.lib-cat-chev { display: inline-block; width: 12px; color: #666; font-size: 9px; }
.lib-cat-count { color: #555; font-weight: 400; margin-left: 4px; }
ul.tree { list-style: none; padding: 0; margin: 8px 0 0; }
ul.tree li { margin-bottom: 4px; }
.tree-row {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; padding: 4px 6px;
  background: #1a1a1a; border-radius: 3px;
  border: 1px solid transparent; cursor: pointer;
  user-select: none;
}
.tree-row:hover { background: #1f1f1f; }
.tree-row.selected { background: #1a2238; border-color: #4488ff; }
.tree-row-head { display: flex; align-items: center; gap: 6px; }
.tree-spacer { flex: 1; }
.tree-u { color: #4488ff; font-family: monospace; font-size: 11px; min-width: 38px; }
/* Full part name on the second line — selectable so the user can mark and
   copy it (Strg+C). Pointer cursor stays on the row for click-to-select,
   but the name itself gets a text cursor over its bounds. */
.tree-name {
  font-size: 11px; color: #c8c8c8; padding-left: 2px;
  user-select: text; -webkit-user-select: text;
  cursor: text; word-break: break-word;
}
.tree-name input[type="number"] { display: inline-block; padding: 1px 3px; margin: 0 1px; font-family: inherit; font-size: 11px; }
.tree-btn, .tree-remove { background: transparent; border: 1px solid #444; color: #aaa; width: 20px; height: 20px; padding: 0; border-radius: 3px; cursor: pointer; font-size: 11px; line-height: 1; }
.tree-depth {
  background: #1a1a1a; color: #e0e0e0; border: 1px solid #4488ff;
  font-family: inherit; font-size: 10px; padding: 1px 2px;
  border-radius: 3px; cursor: pointer; height: 20px;
}
.tree-depth:hover { background: #1a2238; }
.tree-btn:hover { border-color: #4488ff; color: #4488ff; }
.tree-remove:hover { border-color: #aa3333; color: #ff6666; }
.tree-btn:disabled { color: #444; border-color: #222; cursor: not-allowed; }
.tree-btn:disabled:hover { color: #444; border-color: #222; }
.face-tag { font-size: 10px; color: #ffaa33; border: 1px solid #884; padding: 0 4px; border-radius: 2px; margin-left: 4px; }
.half-tag { font-size: 10px; color: #88ccff; border: 1px solid #448; padding: 0 4px; border-radius: 2px; margin-left: 4px; }
.warn-tag { color: #ff6666; margin-left: 4px; font-size: 12px; }
.tree-row.collides { border-color: #aa3333; background: #2a1a1a; }
.tree-row.collides.selected { border-color: #ff6666; }
.warn { color: #ff8888; font-size: 11px; margin-top: 4px; padding: 4px 6px; background: #2a1a1a; border: 1px solid #aa3333; border-radius: 3px; }
.cab-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding: 4px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.cab-actions button { background: #2a3a5a; color: #e0e0e0; border: 1px solid #4488ff; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: inherit; }
.cab-actions button:disabled { background: #1a1a1a; color: #555; border-color: #333; cursor: not-allowed; }
.cab-actions .muted { margin-left: auto; }
.cab-group { margin-top: 6px; border-left: 2px solid #4488ff; padding-left: 4px; }
.cab-group-header { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #4488ff; padding: 3px 4px; cursor: pointer; }
.cab-group-header:hover { background: #1a2238; }
.cab-group-header input { flex: 1; background: #1a1a1a; color: #e0e0e0; border: 1px solid #333; padding: 2px 4px; border-radius: 2px; font-family: inherit; font-size: 11px; }
.cab-group-header .lib-cat-count { margin-left: 0; }