:root {
  --bg-inset: #0e0e1e;
  --bg-body: #12121c;
  --bg-canvas: #131320;
  --bg-panel: #14142a;
  --bg-modal: #16162a;
  --bg-surface: #1a1a2e;
  --bg-surface-2: #1a1a30;
  --bg-surface-3: #1e1e34;
  --bg-selected: #1e1e3a;
  --bg-raised: #222238;
  --border-faint: #26263f;
  --border: #2a2a44;
  --grid-dot: #2e2e50;
  --border-strong: #3a3a5a;
  --text-ghost: #33334f;
  --text-faint: #444466;
  --text-dim: #555577;
  --text-muted: #8899bb;
  --text: #c0c4e8;
  --text-strong: #c8ccee;
  --text-bright: #dde0f5;
  --accent: #5566aa;
  /* Auto-derived light-mode pairs. --cXXXXXX is a surface colour, --tXXXXXX
     the same value used as text; the two flip differently because a pale
     blue that works as a border is unreadable as text on white. Mid-tone
     semantic colours (danger, status, wire colours) stay literal. */
  --c090914: #090914;
  --c0a1a14: #0a1a14;
  --c0c0c1c: #0c0c1c;
  --c0d0d20: #0d0d20;
  --c0d1a28: #0d1a28;
  --c0d2235: #0d2235;
  --c0e0e1a: #0e0e1a;
  --c0f2a1a: #0f2a1a;
  --c10101e: #10101e;
  --c111122: #111122;
  --c111e30: #111e30;
  --c141428: #141428;
  --c151528: #151528;
  --c18182e: #18182e;
  --c1a1a38: #1a1a38;
  --c1a1a3a: #1a1a3a;
  --c1a1a40: #1a1a40;
  --c1a2840: #1a2840;
  --c1a2a1a: #1a2a1a;
  --c1a2a4a: #1a2a4a;
  --c1a3a2a: #1a3a2a;
  --c1e1e36: #1e1e36;
  --c1e1e38: #1e1e38;
  --c1e1e40: #1e1e40;
  --c1e2a4a: #1e2a4a;
  --c1e3355: #1e3355;
  --c1e3a6a: #1e3a6a;
  --c1e4a2a: #1e4a2a;
  --c22223a: #22223a;
  --c22224a: #22224a;
  --c223355: #223355;
  --c23233c: #23233c;
  --c264a8a: #264a8a;
  --c2a1a4a: #2a1a4a;
  --c2a2a50: #2a2a50;
  --c2a2a5a: #2a2a5a;
  --c2e2e54: #2e2e54;
  --c333355: #333355;
  --c334466: #334466;
  --c336633: #336633;
  --c3a1414: #3a1414;
  --c3a3a66: #3a3a66;
  --c3d3d63: #3d3d63;
  --c554422: #554422;
  --c662222: #662222;
  --t6688cc: #6688cc;
  --t7788aa: #7788aa;
  --t77aaee: #77aaee;
  --t8888aa: #8888aa;
  --t88aadd: #88aadd;
  --t88aaff: #88aaff;
  --t88bbdd: #88bbdd;
  --t88bbff: #88bbff;
  --t88cc88: #88cc88;
  --t88ee88: #88ee88;
  --t9090cc: #9090cc;
  --t9966ee: #9966ee;
  --t9999cc: #9999cc;
  --t99aacc: #99aacc;
  --t99aadd: #99aadd;
  --ta0a4c8: #a0a4c8;
  --taaa: #aaa;
  --taaccee: #aaccee;
  --taaccff: #aaccff;
  --tbbc: #bbc;
  --tbbc0ee: #bbc0ee;
  --tc0c8f0: #c0c8f0;
  --td65a4a: #d65a4a;
  --tdd6666: #dd6666;
  --tddaa44: #ddaa44;
  --tff6666: #ff6666;
  --tff8888: #ff8888;
  --tfff: #fff;
  --t00cc88: #00cc88;
  --t4caa77: #4caa77;
  --t445566: #7f90ab;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-inset: #ffffff;
  --bg-body: #eceef3;
  --bg-canvas: #f7f8fa;
  --bg-panel: #f1f3f8;
  --bg-modal: #ffffff;
  --bg-surface: #f3f4f9;
  --bg-surface-2: #e8ebf3;
  --bg-surface-3: #e4e7f0;
  --bg-selected: #dde3f4;
  --bg-raised: #e6e9f1;
  --border-faint: #dbdfea;
  --border: #ccd1e0;
  --grid-dot: #c3c9d8;
  --border-strong: #b2b8cb;
  --text-ghost: #b8bdcc;
  --text-faint: #969cb0;
  --text-dim: #7b8296;
  --text-muted: #59627a;
  --text: #242939;
  --text-strong: #151a29;
  --text-bright: #0f1320;
  --accent: #5a6cba;
  --c090914: #f2f2f6;
  --c0a1a14: #eef4f2;
  --c0c0c1c: #ededf2;
  --c0d0d20: #eaeaf1;
  --c0d1a28: #e6eaef;
  --c0d2235: #dee6ec;
  --c0e0e1a: #ededf2;
  --c0f2a1a: #e4eee8;
  --c10101e: #ebebf0;
  --c111122: #e8e8ee;
  --c111e30: #e0e5eb;
  --c141428: #e4e4eb;
  --c151528: #e4e4eb;
  --c18182e: #e0e0e8;
  --c1a1a38: #dadae4;
  --c1a1a3a: #d9d9e4;
  --c1a1a40: #d5d5e3;
  --c1a2840: #d5dae3;
  --c1a2a1a: #e2e7e2;
  --c1a2a4a: #d0d5e0;
  --c1a3a2a: #d9e4de;
  --c1e1e36: #dadae2;
  --c1e1e38: #d9d9e2;
  --c1e1e40: #d4d4e0;
  --c1e2a4a: #cfd3de;
  --c1e3355: #c8d0dc;
  --c1e3a6a: #bdc6d7;
  --c1e4a2a: #cfded3;
  --c22223a: #d7d7df;
  --c22224a: #cecedc;
  --c223355: #c8ceda;
  --c23233c: #d6d6de;
  --c264a8a: #a9b5cc;
  --c2a1a4a: #d5d0e0;
  --c2a2a50: #c9c9d6;
  --c2a2a5a: #c3c3d4;
  --c2e2e54: #c6c6d3;
  --c333355: #c4c4d0;
  --c334466: #bac0cc;
  --c336633: #baccba;
  --c3a1414: #e7dada;
  --c3a3a66: #b9b9c8;
  --c3d3d63: #babac7;
  --c554422: #dad4c8;
  --c662222: #d6bebe;
  --t6688cc: #375fb0;
  --t7788aa: #5c7097;
  --t77aaee: #1154ad;
  --t8888aa: #5f5f87;
  --t88aadd: #285497;
  --t88aaff: #002fa4;
  --t88bbdd: #286a97;
  --t88bbff: #0046a4;
  --t88cc88: #3b913b;
  --t88ee88: #1c6b28;
  --t9090cc: #3c3c89;
  --t9966ee: #5110bc;
  --t9999cc: #3e3e81;
  --t99aacc: #3e5481;
  --t99aadd: #2a4187;
  --ta0a4c8: #444979;
  --taaa: #666666;
  --taaccee: #174b80;
  --taaccff: #00378a;
  --tbbc: #46465e;
  --tbbc0ee: #192270;
  --tc0c8f0: #17266d;
  --td65a4a: #cb3c29;
  --tdd6666: #b52424;
  --tddaa44: #d29721;
  --tff6666: #bf0000;
  --tff8888: #a40000;
  --tfff: #292929;
  --t00cc88: #00663d;
  --t4caa77: #1d6941;
  --t445566: #4a5568;
  color-scheme: light;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { height: 100%; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; }
body { background: var(--bg-body); color: var(--text-strong); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; }

#toolbar {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  height: 48px; background: var(--c0e0e1a); border-bottom: 1px solid var(--border);
  flex-shrink: 0; z-index: 10;
}
.toolbar-left  { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.toolbar-center { display: flex; align-items: center; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; }
.toolbar-right  { display: flex; align-items: center; gap: 8px; min-width: 180px; justify-content: flex-end; }
.toolbar-label  { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

#mode-indicator {
  text-align: center; font-size: 11px; color: var(--t00cc88); background: var(--c0a1a14);
  border-bottom: 1px solid var(--c1a3a2a); height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

#main { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebars ─────────────────────────────────────────────────────────────── */
#left-sidebar {
  width: 240px; flex-shrink: 0; background: var(--bg-panel);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
}
#right-sidebar {
  width: 248px; flex-shrink: 0; background: var(--bg-panel);
  border-left: 1px solid var(--border); overflow-y: auto;
}

.sidebar-section { display: flex; flex-direction: column; flex-shrink: 0; }
.section-header {
  padding: 7px 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #6666aa; background: var(--c10101e);
  border-bottom: 1px solid var(--bg-raised); display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

/* ── Sidebar tabs ─────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; border-bottom: 1px solid var(--bg-raised); background: var(--c10101e); flex-shrink: 0;
}
.sidebar-tab {
  flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 500; text-align: center;
  background: transparent; border: none; border-radius: 0; color: var(--text-dim);
  border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s;
}
.sidebar-tab:hover { color: var(--t9999cc); background: var(--c18182e); }
.sidebar-tab.active { color: var(--t88aaff); border-bottom-color: #5577dd; }

.tab-panel { display: flex; flex-direction: column; }

/* ── Diagram list ─────────────────────────────────────────────────────────── */
#diagram-list { padding: 4px; }
.diagram-item {
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1px solid transparent; margin-bottom: 2px;
}
.diagram-item:hover { background: var(--bg-selected); border-color: var(--border-strong); }
.diagram-item.active { background: var(--c1a2a4a); border-color: #4466aa; }
.di-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 12px; cursor: pointer; }
.di-date { font-size: 10px; color: var(--text-dim); margin-left: 6px; white-space: nowrap; cursor: pointer; }
.di-del-btn {
  flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
  background: transparent; border-color: transparent; color: var(--tff6666);
  transition: opacity .15s; margin-left: 4px;
}
.diagram-item:hover .di-del-btn { opacity: 1; }
.di-del-btn:hover { background: var(--c3a1414); border-color: #aa3333; }
.di-dup-btn {
  flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
  background: transparent; border-color: transparent; color: var(--t88aaff);
  transition: opacity .15s; margin-left: 4px;
}
.diagram-item:hover .di-dup-btn { opacity: 1; }
.di-dup-btn:hover { background: var(--c1a1a40); border-color: #4466aa; }

/* ── View tab bar ────────────────────────────────────────────────────────── */
#view-tab-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 8px; background: var(--c0c0c1c); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.view-tab {
  padding: 3px 12px; font-size: 11px; border-radius: 4px 4px 0 0;
  background: var(--bg-surface-2); border: 1px solid var(--border); border-bottom: none;
  color: var(--t8888aa); cursor: pointer;
}
.view-tab { display: inline-flex; align-items: center; gap: 4px; }
.view-tab.active { background: var(--c1e2a4a); border-color: #4466aa; color: var(--tc0c8f0); }
.view-tab:hover:not(.active) { background: var(--c1e1e38); color: var(--taaa); }
.view-tab-close {
  font-size: 13px; line-height: 1; opacity: 0.4; padding: 0 2px;
  border-radius: 3px;
}
.view-tab-close:hover { opacity: 1; background: rgba(255,80,80,0.25); color: var(--tff8888); }
.view-tab-sep { width: 1px; background: var(--border); height: 18px; margin: 0 4px; }
.fb-tab { color: #6688aa; border-color: var(--c1e3355); }
.fb-tab.active { background: var(--c0d2235); border-color: #336699; color: var(--t88bbdd); }
.fb-tab:hover:not(.active) { background: var(--c0d1a28); color: var(--taaccee); }

#fb-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px 8px; background: var(--c090914); border-bottom: 1px solid var(--c1e3355);
  flex-shrink: 0;
}
.fb-mode-btn {
  padding: 3px 10px; font-size: 11px; border-radius: 4px;
  background: var(--c0d1a28); border: 1px solid var(--c1e3355); color: #5577aa; cursor: pointer;
}
.fb-mode-btn.active { background: var(--c0d2235); border-color: #336699; color: var(--t88bbdd); }
.fb-mode-btn:hover:not(.active) { background: var(--c111e30); color: var(--taaccee); }

#fb-container { flex: 1; overflow: hidden; }
#fb-canvas    { width: 100%; height: 100%; }

#btn-add-view {
  padding: 2px 8px; font-size: 14px; background: transparent;
  border: 1px dashed var(--c333355); border-radius: 4px; color: #556; cursor: pointer;
}
#btn-add-view:hover { border-color: var(--accent); color: var(--t99aadd); }

/* ── Device library ───────────────────────────────────────────────────────── */
#device-library { padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.lib-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 5px; cursor: grab; user-select: none;
  background: var(--c18182e); transition: background .1s, border-color .1s;
}
.lib-item:hover { background: var(--c22224a); border-color: #5555aa; }
.lib-item:active { cursor: grabbing; }
.lib-icon  { font-size: 16px; width: 22px; text-align: center; }
.lib-label { font-size: 12px; }

/* ── Connector library ────────────────────────────────────────────────────── */
.lib-conn-item {
  padding: 7px 8px; border: 1px solid var(--c1e1e38); border-radius: 5px; cursor: grab;
  background: var(--c141428); margin-bottom: 3px; user-select: none; transition: background .1s, border-color .1s;
}
.lib-conn-item:hover { background: var(--c1e1e40); border-color: #4444aa; }
.lib-conn-item:active { cursor: grabbing; }
.conn-name { font-size: 12px; font-weight: 500; color: var(--tbbc0ee); }
.conn-meta { font-size: 10px; color: #556688; margin-top: 1px; }

/* ── Canvas area ──────────────────────────────────────────────────────────── */
#canvas-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#canvas-container {
  flex: 1; width: 100%;
  background-color: var(--bg-canvas);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 20px 20px;
}
#canvas-container.wire-mode { cursor: crosshair; }

#canvas-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
}
.placeholder-content { text-align: center; color: #44446a; pointer-events: all; }
.placeholder-content h2 { font-size: 28px; margin-bottom: 10px; }
.placeholder-content p  { margin-bottom: 16px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button {
  background: var(--c22223a); border: 1px solid var(--border-strong); color: var(--text);
  padding: 5px 11px; border-radius: 5px; cursor: pointer; font-size: 12px;
  transition: background .12s, border-color .12s; white-space: nowrap;
}
button:hover  { background: var(--c2e2e54); border-color: #5555aa; }
button:active { background: var(--c1a1a3a); }

.mode-btn          { padding: 5px 12px; }
.mode-btn.active   { background: var(--c1e3a6a); border-color: #4488dd; color: var(--t88bbff); }

.route-btn         { padding: 4px 10px; font-size: 11px; }
.route-btn.active  { background: var(--c1a2a4a); border-color: #336699; color: var(--t77aaee); }

#btn-harness.active { background: var(--c1a2a1a); border-color: var(--c336633); color: var(--t88ee88); }

.danger-btn        { color: var(--tff6666); border-color: var(--c662222); }
.danger-btn:hover  { background: var(--c3a1414); border-color: #aa3333; }

.app-title { font-weight: 700; font-size: 15px; color: var(--t88aaff); white-space: nowrap; }

.diagram-name-input {
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-strong);
  padding: 4px 8px; border-radius: 4px; font-size: 13px; width: 180px;
}
.diagram-name-input:focus { outline: none; border-color: var(--accent); }

/* Export dropdown */
.export-wrap { position: relative; }
#export-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 6px;
  min-width: 170px; z-index: 100; overflow: hidden; flex-direction: column;
}
#export-menu.open { display: flex; }
#export-menu button { border: none; border-radius: 0; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--bg-raised); }
#export-menu button:last-child { border-bottom: none; }

/* Saved indicator */
#saved-indicator {
  font-size: 11px; color: var(--t4caa77); background: var(--c0f2a1a);
  border: 1px solid var(--c1e4a2a); padding: 4px 10px; border-radius: 4px;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
}
#saved-indicator.show { opacity: 1; }

/* ── Octopart search results ──────────────────────────────────────────────── */
#octopart-results {
  margin-top: 5px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-inset); max-height: 220px; overflow-y: auto;
}
.op-result {
  padding: 7px 9px; cursor: pointer; border-bottom: 1px solid var(--bg-surface-2);
  transition: background 0.1s;
}
.op-result:last-child { border-bottom: none; }
.op-result:hover { background: var(--c1a1a38); }
.op-mpn  { font-size: 11px; font-weight: 600; color: var(--text-strong); }
.op-mfr  { font-size: 10px; color: var(--t7788aa); margin-top: 1px; }
.op-desc { font-size: 10px; color: #4a5566; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ds   { font-size: 10px; color: #4466aa; margin-top: 1px; }
.op-no-results { padding: 10px; font-size: 11px; color: var(--text-faint); text-align: center; }
#btn-octopart-search.searching { opacity: 0.5; pointer-events: none; }

/* ── Properties panel ─────────────────────────────────────────────────────── */
.prop-row { padding: 7px 10px; border-bottom: 1px solid var(--c1e1e36); }
.prop-row label {
  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px;
}
.prop-row input[type="text"], .prop-row input[type="number"],
.prop-row select, .prop-row textarea {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
  color: var(--text); padding: 5px 7px; border-radius: 4px; font-size: 12px; font-family: inherit;
}
.prop-row input:focus, .prop-row select:focus, .prop-row textarea:focus { outline: none; border-color: var(--accent); }
.prop-value { font-size: 12px; color: var(--t99aacc); }
.prop-value.mono { font-family: monospace; }

.color-swatch { width: 36px; height: 28px; padding: 2px; cursor: pointer; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--border-strong); }

/* Pin table */
.pin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pin-table th { text-align: left; padding: 3px 4px; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--bg-raised); }
.pin-table td { padding: 2px 4px; border-bottom: 1px solid var(--bg-surface-2); vertical-align: middle; }
.pin-table .pin-side { color: var(--text-faint); font-size: 10px; }
.pin-input { width: 100%; background: var(--bg-inset); border: 1px solid var(--border); color: var(--text); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 11px; }
.pin-side-select { width: 100%; background: var(--bg-inset); border: 1px solid var(--border); color: var(--text); padding: 2px 3px; border-radius: 3px; font-size: 11px; cursor: pointer; }

/* ── Connector library extras ─────────────────────────────────────────────── */
.lib-section-header {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 8px 8px 3px; border-top: 1px solid var(--bg-surface-2); margin-top: 4px;
}
.lib-section-header:first-child { border-top: none; margin-top: 0; }

.conn-item-body { flex: 1; min-width: 0; }
.conn-custom-badge {
  display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: var(--c2a1a4a); color: var(--t9966ee);
  border: 1px solid #4422aa; border-radius: 3px; padding: 0 4px; vertical-align: middle;
  margin-left: 4px;
}
.lib-conn-item { display: flex; align-items: center; gap: 6px; }
.conn-edit-btn {
  flex-shrink: 0; opacity: 0; padding: 3px 6px; font-size: 12px;
  background: var(--bg-selected); border-color: var(--border-strong); transition: opacity .15s;
}
.lib-conn-item:hover .conn-edit-btn { opacity: 1; }
.conn-edit-btn:hover { background: var(--c2a2a5a); border-color: #6666aa; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
#connector-modal, #drc-modal, #git-modal, #pinout-modal, #pdm-modal, #theme-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
  align-items: center; justify-content: center;
}
.modal-box {
  background: var(--bg-modal); border: 1px solid var(--border-strong); border-radius: 8px;
  width: 480px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.modal-header {
  padding: 14px 18px 12px; border-bottom: 1px solid var(--bg-raised); flex-shrink: 0;
}
.modal-header h3 { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.modal-body {
  padding: 14px 18px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-footer {
  padding: 10px 18px; border-top: 1px solid var(--bg-raised);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* ── DRC ────────────────────────────────────────────────────────────────── */
.drc-category { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.drc-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-surface-2); cursor: pointer;
  user-select: none;
}
.drc-cat-header:hover { background: var(--bg-selected); }
.drc-cat-icon { font-size: 13px; }
.drc-cat-label { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); }
.drc-cat-count {
  font-size: 11px; font-weight: 700; background: var(--c2a2a50);
  padding: 1px 7px; border-radius: 10px; color: var(--t9090cc);
}
.drc-cat-body { padding: 4px 0; background: var(--bg-inset); }
.drc-row {
  padding: 5px 14px; font-size: 11px; color: var(--ta0a4c8);
  border-bottom: 1px solid var(--c151528);
}
.drc-row:last-child { border-bottom: none; }
.drc-none { color: var(--text-faint); font-style: italic; }

/* ── Git modal ────────────────────────────────────────────────────────────── */
.git-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.git-badge.git-clean  { color: var(--t88cc88); border-color: var(--c336633); }
.git-badge.git-dirty  { color: var(--tddaa44); border-color: var(--c554422); }
.git-section { display: flex; flex-direction: column; gap: 5px; }
.git-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim);
}
.git-log-row {
  display: grid; grid-template-columns: 52px 1fr 80px auto;
  align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 3px; background: var(--c0d0d20);
  border: 1px solid transparent;
}
.git-log-row:hover { border-color: var(--border); }
.git-hash { font-family: monospace; color: var(--t6688cc); font-size: 11px; }
.git-msg  { color: var(--tbbc); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.git-date { color: #445; font-size: 10px; text-align: right; }
.git-scope-btn {
  font-size: 10px; padding: 2px 8px;
  background: var(--c111122); border: 1px solid var(--border); color: var(--t445566); cursor: pointer;
}
.git-scope-btn:first-of-type { border-radius: 3px 0 0 3px; }
.git-scope-btn:last-of-type  { border-radius: 0 3px 3px 0; border-left: none; }
.git-scope-btn.active { background: var(--c1a2840); border-color: var(--c334466); color: var(--t88aadd); }
.git-scope-btn:disabled { opacity: 0.35; cursor: default; }
.git-restore-btn {
  font-size: 10px; padding: 2px 6px;
  background: var(--c1a2840); border: 1px solid var(--c334466); border-radius: 3px;
  color: var(--t88aadd); cursor: pointer; white-space: nowrap;
}
.git-restore-btn:hover { background: var(--c223355); color: var(--taaccff); }

.cm-label {
  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px;
}
.cm-input {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
  color: var(--text); padding: 6px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
}
.cm-input:focus { outline: none; border-color: var(--accent); }
.cm-row { display: flex; flex-direction: column; }
.cm-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#cm-pin-labels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  max-height: 220px; overflow-y: auto; padding: 4px 0;
}
.pin-label-row { display: flex; align-items: center; gap: 5px; }
.pin-idx {
  width: 22px; text-align: right; flex-shrink: 0;
  font-size: 10px; font-weight: 600; color: var(--text-dim); font-family: monospace;
}
.pin-label-input {
  flex: 1; background: var(--bg-inset); border: 1px solid var(--bg-raised);
  color: var(--text); padding: 4px 6px; border-radius: 3px; font-size: 11px; font-family: monospace;
}
.pin-label-input:focus { outline: none; border-color: var(--accent); }

.btn-primary {
  background: var(--c1e3a6a); border-color: #4488dd; color: var(--t88bbff); font-weight: 600;
}
.btn-primary:hover { background: var(--c264a8a); border-color: #66aaff; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* Pin remove button */
.pin-del-btn {
  padding: 0 4px; font-size: 12px; line-height: 1.4;
  background: transparent; border-color: transparent; color: var(--tff6666);
  opacity: 0; transition: opacity .15s;
}
.pin-table tr:hover .pin-del-btn { opacity: 1; }
.pin-del-btn:hover { background: var(--c3a1414); border-color: #aa3333; }

/* Wire drag cursor hint */
#canvas-container.wire-drag { cursor: grabbing; }

/* ── Context menu ─────────────────────────────────────────────────────────── */
#ctx-menu {
  position: fixed; z-index: 9000; display: none;
  background: var(--bg-surface); border: 1px solid var(--c3a3a66); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55); padding: 4px 0; min-width: 170px;
  user-select: none;
}
#ctx-menu.open { display: block; }
.ctx-item {
  padding: 7px 14px; font-size: 12px; color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ctx-item:hover { background: var(--c2a2a50); color: var(--tfff); }
.ctx-item.danger { color: var(--tdd6666); }
.ctx-item.danger:hover { background: var(--c3a1414); color: var(--tff8888); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Misc */
input[type="checkbox"] { accent-color: #5588dd; width: 14px; height: 14px; cursor: pointer; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c3a3a66); }
.muted { color: var(--text-faint); }
.small { font-size: 11px; }
.sep   { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }

/* ── Fuse box configurator ─────────────────────────────────────────────── */
.pdm-capacity { display: flex; align-items: center; gap: 10px; }
.pdm-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--bg-inset); border: 1px solid var(--border); overflow: hidden;
}
.pdm-bar-fill { height: 100%; width: 0; background: #4a7dd6; transition: width .15s ease; }
.pdm-bar-fill.warn { background: #d6a44a; }
.pdm-bar-fill.over { background: #d65a4a; }
.pdm-capacity-text {
  font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pdm-add {
  font-size: 11px; padding: 4px 9px; border-radius: 4px;
  background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.pdm-add:hover { background: var(--c23233c); border-color: var(--c3d3d63); }
.pdm-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pdm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdm-table th {
  text-align: left; font-weight: 600; color: var(--text-muted); padding: 5px 6px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-panel);
}
.pdm-table td { padding: 3px 6px; border-bottom: 1px solid var(--bg-surface-3); }
.pdm-cavity {
  font-family: ui-monospace, Consolas, monospace; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pdm-table .cm-input { padding: 3px 6px; font-size: 11.5px; width: 100%; }
.pdm-del {
  background: none; border: none; color: #8a6a6a; cursor: pointer; font-size: 13px; padding: 2px 5px;
}
.pdm-del:hover { color: var(--td65a4a); }
.pdm-warn { font-size: 11px; color: var(--td65a4a); }

/* ── Fuse box grid editor ──────────────────────────────────────────────── */
.pdm-split { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.pdm-grid-pane { display: flex; flex-direction: column; gap: 8px; }
.pdm-grid {
  position: relative; background: var(--bg-inset);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px;
  user-select: none; touch-action: none;
}
.pdm-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdm-cell {
  position: absolute; box-sizing: border-box;
  border: 1px dashed var(--border-faint); border-radius: 3px;
}
.pdm-cell-num {
  position: absolute; font-size: 8px; color: var(--text-ghost);
  top: 1px; left: 2px; pointer-events: none;
  font-family: ui-monospace, Consolas, monospace;
}
.pdm-part {
  position: absolute; box-sizing: border-box; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.22); cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 9.5px; line-height: 1.15; color: var(--tfff); text-align: center;
  overflow: hidden; padding: 2px;
}
.pdm-part:active { cursor: grabbing; }
.pdm-part.sel { outline: 2px solid #e8edf7; outline-offset: -1px; z-index: 3; }
.pdm-part.bad { border-color: #ff6a58; box-shadow: 0 0 0 2px rgba(255,106,88,.5) inset; }
.pdm-part-tag { font-weight: 700; letter-spacing: .3px; }
.pdm-part-name {
  font-size: 8.5px; opacity: .85; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdm-term {
  position: absolute; width: 13px; height: 13px; border-radius: 2px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3);
  font-size: 7px; color: var(--tfff); display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-family: ui-monospace, Consolas, monospace;
}
.pdm-side { display: flex; flex-direction: column; min-width: 0; }
.pdm-pinout-wrap {
  border: 1px solid var(--border); border-radius: 5px;
  max-height: 288px; overflow-y: auto; background: var(--bg-inset);
}

/* Bus bars lie across the cavities they link, so they draw as a narrow strip
   on top of the components they feed rather than as a filled tile. */
.pdm-bus {
  position: absolute; box-sizing: border-box; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.45); cursor: grab; z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.pdm-bus:active { cursor: grabbing; }
.pdm-bus.sel { outline: 2px solid #e8edf7; outline-offset: 1px; z-index: 5; }
.pdm-bus.bad { border-color: #ff6a58; box-shadow: 0 0 0 2px rgba(255,106,88,.6); }
.pdm-term.bus-fed { background: #b0563c; border-color: rgba(255,255,255,.55); }

/* ── Appearance panel ──────────────────────────────────────────────────── */
.theme-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.theme-pick input[type="color"] {
  width: 46px; height: 28px; padding: 0; cursor: pointer;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 4px;
}
.theme-inline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.theme-swatches { display: flex; gap: 5px; }
.theme-swatch {
  width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border-strong);
}
.theme-swatch:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }