@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#eef3f9;--surface:#fff;--border:#d4dce8;--text:#1a1a2e;--text-2:#555e6e;--text-3:#8a93a3;--accent:#2563eb;--accent-hover:#1d4ed8;--danger:#dc2626;--node-fill:#fff;--node-stroke:#334155;--radius:8px;--dot-color:#c5cfe0;--dot-size:1.2px;--dot-gap:22px}html{font-size:15px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}.app-shell{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.app-topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex}.app-topbar h1{letter-spacing:-.01em;font-size:1rem;font-weight:600}.topbar-actions{align-items:center;gap:8px;display:flex}.search-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);align-items:center;gap:6px;padding:5px 10px;display:flex}.search-box input{font:inherit;color:var(--text);background:0 0;border:none;outline:none;width:120px;font-size:.85rem}.search-box input::placeholder{color:var(--text-3)}.btn-add{background:var(--accent);color:#fff;border-radius:var(--radius);font:inherit;cursor:pointer;border:none;align-items:center;gap:4px;padding:6px 14px;font-size:.82rem;font-weight:500;transition:background .15s;display:flex}.btn-add:hover{background:var(--accent-hover)}.btn-icon{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:34px;height:34px;color:var(--text);cursor:pointer;justify-content:center;align-items:center;transition:background .15s;display:flex}.btn-icon:hover{background:var(--bg)}.status-line{color:var(--text-3);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:16px;padding:4px 20px;font-size:.72rem;display:flex}.error-banner{color:var(--danger);background:#fef2f2;border-bottom:1px solid #fecaca;padding:8px 20px;font-size:.82rem}.tree-viewport{background:radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size)), var(--bg);background-size:var(--dot-gap) var(--dot-gap);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:1;position:relative;overflow:hidden}.tree-viewport.is-panning{cursor:grabbing}.tree-canvas{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tree-canvas>*{pointer-events:auto}.tree-svg{width:100%;max-width:1200px;height:auto}.tree-node{transition:transform .15s}.node-circle{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:2px;transition:r .2s,fill .2s,stroke .2s}.tree-node:hover .node-circle{fill:#e8edf5;stroke:var(--accent)}.tree-node.is-selected .node-circle{fill:var(--accent);stroke:var(--accent)}.node-name{fill:var(--text);pointer-events:none;font-size:16px;font-weight:600}.tree-node.is-selected .node-name{fill:var(--accent)}.node-relation{fill:var(--text-3);pointer-events:none;font-size:13px}.tree-node.is-selected .node-relation{fill:var(--accent-hover)}.empty-state{min-height:300px;color:var(--text-3);justify-content:center;align-items:center;font-size:.9rem;display:flex}.tree-legend{z-index:10;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-2);flex-direction:column;gap:6px;padding:10px 14px;font-size:.75rem;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 1px 4px #0000000f}.legend-item{align-items:center;gap:8px;display:flex}.legend-line{border-radius:2px;flex-shrink:0;width:24px;height:2.5px;display:inline-block}.legend-line.dashed{background:repeating-linear-gradient(90deg,currentColor 0 5px,#0000 5px 8px);background-color:#0000!important}.legend-item:first-child .legend-line.dashed{color:#334155}.legend-item:nth-child(2) .legend-line.dashed{color:#e11d48}.legend-item:nth-child(3) .legend-line.dashed{color:#2563eb}.drawer-scrim{cursor:default;z-index:90;background:#00000026;border:none;position:fixed;inset:0}.drawer{background:var(--surface);border-left:1px solid var(--border);z-index:100;width:340px;padding:16px;transition:transform .25s;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.drawer.is-open{transform:translate(0)}.drawer-close{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:32px;height:32px;color:var(--text-2);cursor:pointer;justify-content:center;align-items:center;margin-bottom:16px;margin-left:auto;display:flex}.detail-section{border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:20px}.detail-eyebrow{text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:4px;font-size:.7rem}.detail-section h2{margin-bottom:2px;font-size:1.15rem;font-weight:600}.detail-relation{color:var(--text-2);margin-bottom:12px;font-size:.85rem}.detail-meta{color:var(--text-2);flex-direction:column;gap:6px;margin-bottom:12px;font-size:.8rem;display:flex}.detail-meta span{align-items:center;gap:6px;display:flex}.detail-notes{color:var(--text-2);margin-bottom:12px;font-size:.82rem;font-style:italic}.detail-actions{gap:8px;display:flex}.detail-actions button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;color:var(--text);cursor:pointer;align-items:center;gap:4px;padding:5px 12px;font-size:.78rem;transition:background .15s;display:flex}.detail-actions button:hover{background:var(--bg)}.detail-actions .danger{color:var(--danger);border-color:#fecaca}.detail-actions .danger:hover{background:#fef2f2}.form-section{flex-direction:column;gap:10px;display:flex}.form-section h3{font-size:.95rem;font-weight:600}.link-btn{font:inherit;color:var(--accent);cursor:pointer;text-align:left;background:0 0;border:none;padding:0;font-size:.78rem}.field-label{color:var(--text-2);margin-bottom:-4px;font-size:.78rem;font-weight:500}.add-form{flex-direction:column;gap:8px;display:flex}.add-form input,.add-form select,.add-form textarea{border:1px solid var(--border);border-radius:var(--radius);width:100%;font:inherit;color:var(--text);background:var(--surface);outline:none;padding:7px 10px;font-size:.82rem;transition:border-color .15s}.add-form input:focus,.add-form select:focus,.add-form textarea:focus{border-color:var(--accent)}.add-form textarea{resize:vertical;min-height:60px}.add-form select[multiple]{min-height:72px}.form-row{gap:8px;display:flex}.form-row>*{flex:1}.submit{justify-content:center;margin-top:4px}.searchable-select{flex-direction:column;gap:4px;display:flex}.ss-search{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);align-items:center;gap:6px;padding:5px 8px;display:flex}.ss-search input{font:inherit;color:var(--text);background:0 0;border:none;outline:none;width:100%;font-size:.8rem}.ss-search input::placeholder{color:var(--text-3)}.ss-list{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-height:120px;overflow-y:auto}.ss-option{cursor:pointer;align-items:center;gap:6px;padding:4px 8px;font-size:.8rem;transition:background .1s;display:flex}.ss-option:hover{background:var(--bg)}.ss-option input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);flex-shrink:0}.ss-empty{text-align:center;color:var(--text-3);padding:8px;font-size:.78rem}@media (width<=640px){.search-box input{width:80px}.drawer{width:100%}.tree-svg{max-width:none}.tree-legend{padding:8px 10px;font-size:.7rem;bottom:10px;left:10px}}