.compass-graph{--cg-border:#e8e3f0;--cg-muted:#777080;--cg-ink:#282234;color:var(--cg-ink)}
.cg-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:18px 0}.cg-field{display:grid;gap:7px;color:#777080;font-size:12px;font-weight:600}.cg-field input,.cg-field select{min-width:210px;border:1px solid #ded8e9;border-radius:10px;padding:11px 13px;background:#fff;color:#282234;font:inherit}.cg-field input:focus,.cg-field select:focus{outline:2px solid #a38af4;outline-offset:2px}.cg-status{margin:0 0 10px auto;font-size:12px;color:var(--cg-muted)}
.cg-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,310px);gap:14px}.cg-surface,.cg-panel{background:#fff;border:1px solid var(--cg-border);border-radius:16px;overflow:hidden}.cg-surface{background-color:#fbfaff;background-image:radial-gradient(#eae5f3 0.8px,transparent 0.8px);background-size:18px 18px}.cg-surface svg{display:block;width:100%;height:auto;min-height:360px;max-height:680px}.cg-hint{margin:0;padding:11px 16px;background:#fff;border-top:1px solid var(--cg-border);color:var(--cg-muted);font-size:12px;line-height:1.5}.cg-edge{stroke:#c2b9d2;stroke-width:1.5}.cg-node{cursor:pointer;outline:none}.cg-node circle{stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 3px #39276b24);transition:r .15s}.cg-node text{font:600 13px 'Google Sans Flex',sans-serif;fill:#51475f;paint-order:stroke;stroke:#fbfaff;stroke-width:4;stroke-linejoin:round}.cg-node:hover circle,.cg-node:focus circle,.cg-node.is-selected circle{stroke:#413071;stroke-width:3}.cg-node:hover text,.cg-node:focus text,.cg-node.is-selected text{fill:#6243cf}.cg-empty-svg{font:15px sans-serif;fill:#777080}
.cg-panel{padding:20px;display:flex;flex-direction:column;max-height:680px}.cg-panel h3{font-size:16px;margin:0 0 15px;letter-spacing:-.02em}.cg-detail{background:#f8f6fc;border-radius:10px;padding:13px;margin-bottom:14px;font-size:13px;line-height:1.45}.cg-detail strong{font-size:15px}.cg-meta,.cg-muted{color:#777080;font-size:12px;margin:5px 0}.cg-relations{padding:0;margin:10px 0 0;list-style:none;display:grid;gap:9px}.cg-relations li{display:grid;gap:2px}.cg-relation-label{font-size:11px;color:#777080}.cg-relations a{color:#6948d6;font-size:12px}.cg-list{overflow:auto;min-height:80px;border-top:1px solid var(--cg-border)}.cg-list-row{display:flex;align-items:center;gap:6px;border-bottom:1px solid #f0edf5}.cg-list-row.is-selected{background:#f6f2ff}.cg-select{border:0;background:none;padding:11px 4px;color:#443a50;text-align:left;font:inherit;font-size:12px;cursor:pointer;flex:1;overflow-wrap:anywhere}.cg-open{color:#6948d6;font-size:11px;padding:10px 3px}.cg-select:focus-visible,.cg-open:focus-visible,.cg-relations a:focus-visible{outline:2px solid #8c72ed;outline-offset:2px}
.cg-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:16px 0}.cg-legend-item{display:flex;align-items:center;gap:6px;color:#777080;font-size:11px}.cg-legend-item i{width:9px;height:9px;border-radius:50%;display:block}
@media(max-width:760px){.cg-layout{grid-template-columns:1fr}.cg-panel{max-height:400px}.cg-surface svg{min-height:280px}.cg-toolbar{display:grid;grid-template-columns:1fr 1fr}.cg-field input,.cg-field select{min-width:0;width:100%}.cg-status{grid-column:1/-1;margin:0}.cg-node text{font-size:16px}}
@media(max-width:420px){.cg-toolbar{grid-template-columns:1fr}.cg-status{grid-column:auto}}
/* The graph stays at a readable scale on phones and scrolls independently. */
.cg-canvas{width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-color:#b8a7df transparent}.cg-canvas:focus-visible{outline:2px solid #8c72ed;outline-offset:-2px}
@media(max-width:760px){.cg-canvas svg{width:1000px;max-width:none;min-height:0;height:auto}.cg-node text{font-size:13px}}