:root {
  --base: var(--background); --surface: var(--card); --surface-alt: var(--muted);
  --overlay: var(--border); --overlay-hover: var(--border);
  --subtext: var(--muted-foreground); --text: var(--foreground); --text-dim: var(--muted-foreground);
  --active: var(--muted);
  --skill: var(--primary); --hook: var(--primary); --agent: var(--primary);
  --plugin: var(--primary); --command: var(--primary); --settings: var(--primary); --mcp: var(--primary);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-mono); background:var(--base); color:var(--text); min-height:100vh; }
.header { height:45px; border-bottom:1px solid var(--overlay); background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.header h1 { font-size:14px; font-weight:600; }
.header span { font-size:12px; color:var(--subtext); }
.pg-layout { display:grid; grid-template-columns:260px 1fr; height:calc(100vh - 45px); }
.controls { background:var(--surface); border-right:1px solid var(--overlay); padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.preview { overflow-y:auto; display:flex; flex-direction:column; }
.section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--subtext); margin-bottom:6px; }
.divider { height:1px; background:var(--overlay); margin:2px 0; }

.view-tabs { display:flex; gap:4px; }
.view-tab { flex:1; padding:6px 8px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:12px; font-weight:500; cursor:pointer; text-align:center; transition:all .15s; }
.view-tab:hover { border-color:var(--overlay-hover); }
.view-tab.active { background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }

/* Dynamic colours: registry-architecture.js gives each coloured element a generated .color-N class that defines
   --item-color (and, for hex type colours, the 18-alpha --item-tint); the rules below only read those two properties. */
.type-chips { display:flex; flex-wrap:wrap; gap:5px; }
.type-chip { padding:4px 10px; border-radius:0; border:2px solid transparent; background:var(--surface-alt); color:var(--item-color); font-size:11px; font-weight:500; cursor:pointer; transition:all .15s; }
.type-chip:hover { filter:brightness(1.2); }
.type-chip.active { border-color:currentColor; background:var(--item-tint, var(--surface-alt)); }

.source-chips { display:flex; gap:4px; }
.source-chip { flex:1; padding:5px 8px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:11px; cursor:pointer; text-align:center; transition:all .15s; }
.source-chip.active { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:2px 0; }
.toggle-label { font-size:12px; color:var(--subtext); }
.toggle { width:36px; height:20px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--overlay); cursor:pointer; position:relative; transition:all .15s; }
.toggle.on { background:var(--primary); border-color:var(--primary); }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--text); transition:all .15s; }
.toggle.on::after { left:18px; }

.presets { display:flex; flex-wrap:wrap; gap:4px; }
.preset-btn { padding:4px 10px; border-radius:0; border:1px solid var(--overlay); background:transparent; color:var(--subtext); font-size:11px; font-weight:500; cursor:pointer; transition:all .15s; }
.preset-btn:hover { border-color:var(--primary); color:var(--primary); }

/* Canvas area */
.canvas { flex:1; padding:24px; overflow:auto; position:relative; }

/* Diagram nodes — the root node has no colour class, so it falls back to the accent border and inherited title colour */
.diagram { display:flex; flex-direction:column; gap:32px; min-width:700px; }
.level { display:flex; flex-direction:column; gap:8px; }
.level-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.level-row { display:flex; gap:12px; flex-wrap:wrap; }

.node { background:var(--surface); border:1px solid var(--overlay); border-radius:0; padding:12px; min-width:180px; cursor:pointer; transition:all .15s; position:relative; }
.node:hover { border-color:var(--overlay-hover); background:var(--active); }
.node.highlighted { border-color:var(--item-color, var(--primary)); box-shadow:0 0 12px color-mix(in srgb, var(--primary) 20%, transparent); }
.node.dimmed { opacity:.3; }
/* labels.json belongs to no content type, so it carries no data-action and must not look clickable */
.node-static { cursor:default; }
.node-static:hover { border-color:var(--overlay); background:var(--surface); }
.node-root { min-width:400px; }
.node-title { font-size:12px; font-weight:600; font-family:var(--font-mono); margin-bottom:4px; color:var(--item-color, currentColor); }
.node-sub { font-size:11px; color:var(--subtext); }
.node-badge { position:absolute; top:8px; right:8px; padding:1px 6px; border-radius:0; font-size:10px; font-weight:500; color:var(--item-color); background:var(--item-tint); }
.node-json { margin-top:8px; padding:8px; background:var(--base); border-radius:0; font-family:var(--font-mono); font-size:10px; line-height:1.6; white-space:pre; overflow-x:auto; max-height:200px; overflow-y:auto; }
.json-faded { opacity:.4; }

/* Flow arrows */
.flow-arrow { display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:18px; padding:4px 0; }
.flow-label { font-size:11px; color:var(--text-dim); margin:0 8px; font-family:var(--font-mono); }

/* Flow view */
.flow-container { display:flex; flex-direction:column; gap:6px; min-width:600px; }
.flow-step { display:flex; align-items:stretch; gap:12px; }
.flow-node { background:var(--surface); border:1px solid var(--overlay); border-left-color:var(--item-color); border-radius:0; padding:12px 16px; flex:1; }
.flow-node.highlighted { border-left:3px solid var(--item-color); }
.flow-node-title { font-size:12px; font-weight:600; margin-bottom:2px; color:var(--item-color); }
.flow-node-path { font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }
.flow-node-desc { font-size:11px; color:var(--subtext); margin-top:4px; }
.flow-connector { display:flex; align-items:center; justify-content:center; color:var(--text-dim); padding:2px 0; font-size:16px; }
.flow-split { display:flex; gap:12px; }
.flow-split > * { flex:1; }

/* Consumers view */
.consumer-card { background:var(--surface); border:1px solid var(--overlay); border-left:3px solid var(--item-color); border-radius:0; padding:16px; margin-bottom:12px; }
.consumer-title { font-size:14px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.consumer-title .pg-dot { width:8px; height:8px; border-radius:50%; background:var(--item-color); }
.consumer-summary { font-size:12px; color:var(--subtext); margin-bottom:10px; }
.consumer-step { display:flex; align-items:flex-start; gap:10px; padding:6px 0; font-size:12px; }
.consumer-num { width:20px; height:20px; border-radius:50%; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--subtext); flex-shrink:0; }
.consumer-code { font-family:var(--font-mono); color:var(--primary); font-size:11px; }
.consumer-text { color:var(--subtext); }
.consumer-json { background:var(--base); border-radius:0; padding:8px; margin-top:8px; font-family:var(--font-mono); font-size:10px; line-height:1.5; white-space:pre; overflow-x:auto; }

/* Prompt bar */
.prompt-bar { border-top:1px solid var(--overlay); background:var(--surface); padding:12px 16px; display:flex; align-items:flex-start; gap:12px; }
.prompt-text { flex:1; font-size:13px; color:var(--subtext); line-height:1.5; }
.prompt-context { color:var(--text-dim); font-size:12px; }
.copy-btn { padding:4px 12px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.copy-btn:hover { border-color:var(--primary); color:var(--primary); }
.copy-btn.copied { border-color:var(--success); color:var(--success); }

.jk { color:var(--primary); } .js { color:var(--success); } .jn { color:var(--primary); } .jb { color:var(--subtext); }

@media (max-width:768px) {
  .pg-layout { grid-template-columns:1fr; }
  .controls { border-right:none; border-bottom:1px solid var(--overlay); max-height:40vh; }
}