:root{
  --bg: #0f1318;
  --panel: #161b22;
  --panel-2: #1c222b;
  --border: #2a323d;
  --text: #e7ebf0;
  --text-dim: #8b96a5;
  --text-faint: #5b6572;
  --accent: #4fd1c5;
  --accent-dim: #2f8f86;
  --stack: #f2b84b;
  --switch: #5b8def;
  --ap: #57c785;
  --danger: #e35d6a;
  --danger-dim: #7a3a41;
  --radius: 6px;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

/* ---------- Auth gate ---------- */
body.locked #appRoot{ display:none; }
.auth-gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 30%, #1a212b 0%, #0f1318 70%);
  z-index: 100;
}
.auth-card{
  width: 320px; background: var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:28px 26px; text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.auth-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; color:var(--accent);
  background: rgba(79,209,197,0.1); margin-bottom:14px;
}
.auth-card h2{ margin:0 0 6px; font-size:16px; }
.auth-card p{ margin:0 0 16px; font-size:12.5px; color:var(--text-dim); }
.auth-card .text-input{ margin-bottom:10px; text-align:center; }
.auth-error{ color:var(--danger); font-size:12px; margin:10px 0 0; }

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  z-index: 20;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  color: var(--accent);
  display:flex;
  width:32px; height:32px;
  align-items:center; justify-content:center;
  background: rgba(79,209,197,0.1);
  border-radius: 8px;
  flex: 0 0 auto;
}
.brand-text h1{ font-size: 15px; margin:0; font-weight:600; letter-spacing:0.2px; }
.brand-text p{ margin:0; font-size:11.5px; color: var(--text-dim); }

.topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.stat-pill{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.btn{
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: var(--radius);
  cursor:pointer;
  white-space:nowrap;
  transition: border-color .12s, background .12s;
}
.btn:hover{ border-color: var(--accent-dim); background:#20272f; }
.btn:active{ transform: translateY(1px); }
.btn-block{ width:100%; margin-top:8px; }
.btn-toggle.active{ background: rgba(79,209,197,0.16); border-color: var(--accent); color: var(--accent); }
.btn-danger-outline{ border-color: var(--danger-dim); color:#f0b6bc; }
.btn-danger-outline:hover{ background: rgba(227,93,106,0.1); border-color: var(--danger); }

.menu-wrap{ position:relative; }
.menu{
  position:absolute; top: calc(100% + 6px); right:0;
  background: var(--panel-2); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden;
  display:none; flex-direction:column; min-width:170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 30;
}
.menu.open{ display:flex; }
.menu button{
  background:none; border:none; color:var(--text); text-align:left;
  padding:9px 12px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.menu button:hover{ background: rgba(79,209,197,0.1); color:var(--accent); }

/* ---------- Layout ---------- */
.app-body{ flex:1 1 auto; display:flex; min-height:0; }

.sidebar{
  width: 268px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
  display:flex; flex-direction:column; gap:14px;
}
.panel{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.panel-muted{ background: transparent; border-style:dashed; }
.panel h2{
  margin:0 0 10px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight:600;
}

.add-grid{ display:flex; gap:6px; margin-bottom:8px; }
.add-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  background: var(--panel); border:1px solid var(--border); color: var(--text);
  padding:9px 4px; border-radius:6px; cursor:pointer; font-size:11px;
}
.add-btn:hover{ border-color: var(--accent-dim); }
.add-btn.active{ border-color: var(--accent); color: var(--accent); background: rgba(79,209,197,0.08); }

.hint{ font-size:11px; color:var(--text-faint); margin: 6px 0 0 0; min-height:14px; }

.swatch{
  width:12px; height:12px; border-radius:3px; display:inline-block; flex:0 0 auto;
}
.swatch-stack{ background: var(--stack); }
.swatch-switch{ background: var(--switch); border-radius:3px; }
.swatch-ap{ background: var(--ap); border-radius:50%; }

.text-input{
  width:100%; background: var(--panel); border:1px solid var(--border); color:var(--text);
  padding:8px 9px; border-radius:6px; font-size:12.5px; font-family: var(--sans);
}
.text-input:focus{ outline:none; border-color: var(--accent); }

.search-results{ margin-top:8px; max-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.search-result{
  font-size:12px; padding:6px 8px; border-radius:5px; cursor:pointer; color:var(--text-dim);
  font-family: var(--mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-result:hover{ background: rgba(79,209,197,0.1); color:var(--text); }

.check-row{
  display:flex; align-items:center; gap:8px; font-size:12.5px; padding:5px 0; cursor:pointer;
  color: var(--text-dim);
}
.check-row em{ font-style:normal; margin-left:auto; color:var(--text-faint); font-family:var(--mono); font-size:11px; }
.check-row input{ accent-color: var(--accent); }

#inspectorBody label{ display:block; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin: 10px 0 4px; }
#inspectorBody label:first-child{ margin-top:0; }
#inspectorBody select{
  width:100%; background: var(--panel); border:1px solid var(--border); color:var(--text);
  padding:7px 8px; border-radius:6px; font-size:12.5px;
}
.inspector-meta{ font-family: var(--mono); font-size:11px; color:var(--text-faint); margin-top:8px; }
.inspector-links{ display:flex; flex-direction:column; gap:2px; margin-top:4px; max-height:140px; overflow-y:auto; }
.inspector-link{
  font-family: var(--mono); font-size:11.5px; color: var(--text-dim); padding:5px 7px; border-radius:5px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background: var(--panel); border:1px solid transparent;
}
.inspector-link:hover{ border-color: var(--accent-dim); color:var(--text); }
.inspector-actions{ display:flex; gap:6px; margin-top:12px; }
.inspector-actions .btn{ flex:1; }

.diff-body{ display:flex; flex-direction:column; gap:6px; font-size:11.5px; }
.diff-summary{ font-family: var(--mono); color: var(--text-dim); }
.diff-list{ max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.diff-item{ font-family:var(--mono); font-size:11px; padding:4px 6px; border-radius:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.diff-item:hover{ background: rgba(255,255,255,0.05); }
.diff-item.moved{ color:var(--stack); }
.diff-item.added{ color:var(--ap); }
.diff-item.removed{ color:var(--danger); }

.legend-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); padding:4px 0; }
.diff-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; border:2px solid; }
.diff-moved{ border-color: var(--stack); background:transparent; }
.diff-added{ border-color: var(--ap); background:transparent; }
.diff-removed{ border-color: var(--danger); background:transparent; border-style:dashed; }

/* ---------- Canvas ---------- */
.canvas-wrap{ position:relative; flex:1 1 auto; min-width:0; background: var(--bg); overflow:hidden; }
#canvas{ width:100%; height:100%; display:block; cursor: grab; }
#canvas.panning{ cursor: grabbing; }
#canvas.link-mode{ cursor: crosshair; }
#canvas.add-mode{ cursor: copy; }

.canvas-controls{
  position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:6px; z-index:5;
}
.icon-btn{
  width:32px; height:32px; border-radius:8px; background: var(--panel-2); border:1px solid var(--border);
  color: var(--text); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.icon-btn:hover{ border-color: var(--accent-dim); color: var(--accent); }

.canvas-hint{
  position:absolute; left:16px; bottom:16px; font-size:11px; color: var(--text-faint);
  background: rgba(22,27,34,0.85); border:1px solid var(--border); padding:6px 10px; border-radius:6px;
  pointer-events:none; z-index:5; transition: opacity .4s;
}

.toast{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  background: var(--panel-2); border:1px solid var(--accent-dim); color: var(--text);
  padding:9px 16px; border-radius:8px; font-size:12.5px; z-index:40;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* SVG node/edge base styles (colors applied inline per-node for portable export) */
.node-group{ cursor: grab; }
.node-group.dragging{ cursor: grabbing; }
.node-label{
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--text-dim);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  pointer-events:none;
}
.node-group.selected .node-shape{ stroke: var(--accent) !important; stroke-width:2.5px; }
.node-group.selected .node-label{ fill: var(--accent); }
.node-group.dimmed{ opacity: 0.12; }
.node-group.hidden-type{ display:none; }
.node-group.pending-link .node-shape{ stroke: var(--accent); stroke-width:2.5px; stroke-dasharray: 3 2; }

.edge-path{ fill:none; stroke:#3a4553; stroke-width:1.4px; }
.edge-path.dimmed{ opacity:0.08; }
.edge-path.selected{ stroke: var(--accent); stroke-width:2.2px; }

.ghost-node{ opacity:0.55; }
.ghost-edge{ fill:none; stroke:#5b6572; stroke-width:1px; stroke-dasharray:3 3; opacity:0.45; }
.diff-link-line{ stroke: var(--stack); stroke-width:1px; stroke-dasharray:2 2; opacity:0.8; }