:root{--bg: #f5f6f8;--bg-panel: #ffffff;--bg-elevated: #eef0f3;--canvas-bg: #f7f8fa;--border: #dde1e6;--text: #1c1f24;--text-muted: #667085;--accent: #2f6fdb;--accent-soft: rgba(47, 111, 219, .12);--danger: #d33f3f;--danger-soft: rgba(211, 63, 63, .12);--warn: #b26a00;--warn-soft: rgba(255, 180, 84, .2);--pk: #b26a00;--fk: #2f6fdb;--uk: #1f8a5b;--radius: 8px;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--cm-keyword: #7c3aed;--cm-operator: #b45309;--cm-entity: #1d4ed8;--cm-type: #0f766e;--cm-property: #1c1f24;--cm-key: #b26a00;--cm-string: #15803d;--cm-comment: #8a94a6;--cm-brace: #667085;color-scheme:light}:root[data-theme=dark]{--bg: #0f1115;--bg-panel: #161a21;--bg-elevated: #1d222b;--canvas-bg: #0f1115;--border: #2a3039;--text: #e6e8eb;--text-muted: #8b93a1;--accent: #5b9cff;--accent-soft: rgba(91, 156, 255, .15);--danger: #ff6b6b;--danger-soft: rgba(255, 107, 107, .15);--warn: #ffb454;--warn-soft: rgba(255, 180, 84, .15);--pk: #ffb454;--fk: #5b9cff;--uk: #7ed4a2;--cm-keyword: #c4b5fd;--cm-operator: #fbbf24;--cm-entity: #93c5fd;--cm-type: #5eead4;--cm-property: #e6e8eb;--cm-key: #ffb454;--cm-string: #86efac;--cm-comment: #6b7280;--cm-brace: #9ca3af;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg)}button{font:inherit;color:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}h2,h3{margin:0;font-weight:600}ul{list-style:none;margin:0;padding:0}code{font-family:var(--mono);font-size:.9em}.app{display:flex;flex-direction:column;height:100%;height:100dvh}.app-main{flex:1;min-height:0}.toolbar{display:flex;align-items:center;gap:20px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-panel)}.toolbar-brand{white-space:nowrap;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:6px}.toolbar-logo{color:var(--accent)}.toolbar-brand-full{font-weight:400;color:var(--text-muted);font-size:13px}.toolbar-status{display:flex;gap:6px;margin-left:auto}.toolbar-actions{display:flex;gap:6px;align-items:center}.project-switcher{display:flex;align-items:center;gap:8px}.project-select-wrap{position:relative;display:inline-flex;align-items:center}.project-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:32px;max-width:220px;padding:0 30px 0 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-weight:600;cursor:pointer}.project-select:hover{border-color:var(--text-muted)}.project-select-chevron{position:absolute;right:9px;display:inline-flex;color:var(--text-muted);pointer-events:none}.button-group{display:inline-flex}.button-group .toggle{border-radius:0;margin-left:-1px}.button-group .toggle:first-child{border-radius:var(--radius) 0 0 var(--radius);margin-left:0}.button-group .toggle:last-child{border-radius:0 var(--radius) var(--radius) 0}.button-group .toggle:hover{position:relative;z-index:1}.toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);transition:border-color .15s,color .15s,background .15s}.toggle:hover{border-color:var(--text-muted);background:var(--bg-panel)}.toggle:active{transform:translateY(1px)}.toggle-text{font-size:12px;font-weight:700;letter-spacing:.04em}.btn-icon-label{gap:6px}.toggle-danger:hover{color:var(--danger);border-color:var(--danger)}.project-select{max-width:220px;font-weight:600}.icon-btn.danger:hover{color:var(--danger)}.segmented{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.segmented button{height:30px;padding:0 14px;background:transparent;border:none;color:var(--text-muted)}.segmented button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.pill{padding:3px 9px;border-radius:999px;background:var(--bg-elevated);color:var(--text-muted);font-size:12px}.pill.danger{background:var(--danger-soft);color:var(--danger)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated)}.btn:hover:not(:disabled){border-color:var(--text-muted)}.btn:disabled{opacity:.4;cursor:default}.btn.small{height:26px;padding:0 8px;font-size:12px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn.danger{color:var(--danger)}.btn.danger:hover:not(:disabled){border-color:var(--danger)}.btn.danger-solid{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border)}.panel-header h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.hint{font-size:12px;color:var(--text-muted)}.empty-state{padding:40px;text-align:center;color:var(--text-muted)}.empty-state h3{color:var(--text);margin-bottom:6px}.structure{display:grid;grid-template-columns:var(--editor-width, 440px) 6px minmax(0,1fr);height:100%;min-width:0}.structure-tabs{display:none}.editor{display:flex;flex-direction:column;background:var(--bg-panel);min-height:0;min-width:0}.editor-host{flex:1;min-height:0;overflow:hidden}.editor-host .cm-editor{height:100%}.splitter{background:var(--border);cursor:col-resize;transition:background .15s;touch-action:none}.splitter:hover,.splitter.dragging{background:var(--accent)}.canvas{display:flex;flex-direction:column;min-height:0;min-width:0}.canvas-body{position:relative;flex:1;overflow:hidden;background:var(--canvas-bg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-body.panning{cursor:grabbing}.canvas-stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.canvas-stage svg{display:block}.canvas-stage .er-clickable{cursor:pointer}.canvas-stage .er-clickable:hover rect,.canvas-stage .er-clickable:hover path{filter:brightness(.92)}.canvas-controls{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-panel);box-shadow:0 4px 16px #0000001f;cursor:default}.zoom-level{min-width:44px;text-align:center;font-size:12px;font-family:var(--mono);color:var(--text-muted)}.canvas-body .empty-state{position:relative;margin:20px}.render-error{position:absolute;top:10px;left:10px;right:10px;z-index:2;padding:8px 12px;border-radius:var(--radius);border:1px solid var(--danger);background:var(--bg-panel);color:var(--danger);font-size:12px}.data{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%;min-width:0}.entity-list{border-right:1px solid var(--border);background:var(--bg-panel);overflow:auto;min-width:0}.entity-item{width:100%;display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border:none;background:transparent;text-align:left}.entity-item:hover{background:var(--bg-elevated)}.entity-item.active{background:var(--accent-soft);color:var(--accent)}.entity-meta{display:flex;gap:4px}.badge{min-width:22px;padding:1px 6px;border-radius:999px;background:var(--bg-elevated);font-size:11px;text-align:center;color:var(--text-muted)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.orphans{padding:12px 14px;border-top:1px solid var(--border)}.orphans h3{font-size:12px;color:var(--text-muted);text-transform:uppercase}.orphan-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.data-main{display:flex;flex-direction:column;min-height:0;min-width:0}.table-header h2{text-transform:none;letter-spacing:0;font-size:16px;color:var(--text)}.table-actions{display:flex;gap:8px;align-items:center}.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-size:12px;font-family:var(--mono)}.table-scroll{flex:1;overflow:auto}.grid{border-collapse:separate;border-spacing:0;min-width:100%}.grid th,.grid td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:0}.grid th{position:sticky;top:0;z-index:1;background:var(--bg-panel);text-align:left;padding:8px 10px;vertical-align:top;white-space:nowrap}.col-name{display:flex;align-items:center;gap:5px;font-weight:600}.col-type{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;color:var(--text-muted);font-family:var(--mono);font-weight:400}.key{font-size:10px;padding:1px 4px;border-radius:3px;font-weight:700}.key-pk{background:var(--warn-soft);color:var(--pk)}.key-fk{background:var(--accent-soft);color:var(--fk)}.key-uk{background:#7ed4a233;color:var(--uk)}.fk-target{font-size:11px;padding:1px 4px;border-radius:4px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--fk)}.fk-target.unresolved{border-color:var(--warn);color:var(--warn)}.col-related{background:var(--accent-soft)}.col-actions{width:36px}.cell-input{width:100%;min-width:120px;padding:7px 10px;border:1px solid transparent;background:transparent;outline:none}.cell-input:focus{border-color:var(--accent);background:var(--bg-elevated)}select.cell-input{cursor:pointer}select.cell-input option{background:var(--bg-elevated)}.cell-checkbox{margin:0 12px}td.invalid{background:var(--danger-soft);box-shadow:inset 0 0 0 1px var(--danger)}.link{border:none;background:none;color:var(--accent);padding:7px 10px;white-space:nowrap}.link:hover{text-decoration:underline}.icon-btn{border:none;background:none;color:var(--text-muted);padding:7px 10px}.icon-btn:hover{color:var(--danger)}.empty-row{padding:24px;text-align:center;color:var(--text-muted)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:#00000073;animation:dialog-fade .15s ease-out}.dialog{width:min(440px,100%);padding:20px;border-radius:12px;border:1px solid var(--border);background:var(--bg-panel);box-shadow:0 20px 60px #0000004d;animation:dialog-pop .15s ease-out}.dialog-title{font-size:16px;margin-bottom:8px}.dialog-message{margin:0 0 12px;color:var(--text-muted);line-height:1.5}.dialog-field{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px;font-size:13px;color:var(--text-muted)}.dialog-field input{height:36px;padding:0 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:14px;outline:none}.dialog-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.btn:focus-visible,.toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes dialog-fade{0%{opacity:0}to{opacity:1}}@keyframes dialog-pop{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:800px){.toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.toolbar-brand{order:0}.toolbar-brand-full{display:none}.toolbar-actions{order:1;margin-left:auto}.btn-icon-label{width:34px;padding:0;justify-content:center}.btn-icon-label .btn-label{display:none}.project-switcher{order:2;flex:1 1 100%}.project-select-wrap{flex:1}.project-select{width:100%;max-width:none}.toolbar .segmented{order:3;flex:1 1 100%}.toolbar .segmented button{flex:1}.toolbar-status{display:none}.structure{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.structure-tabs{display:flex;margin:8px 12px 0}.structure-tabs button{flex:1}.splitter,.structure[data-pane=code] .canvas,.structure[data-pane=diagram] .editor,.canvas .hint{display:none}.canvas-controls{right:10px;bottom:10px}.data{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.entity-list{border-right:none;border-bottom:1px solid var(--border);overflow:visible}.entity-list .panel-header{padding:8px 12px;border-bottom:none}.entity-list ul{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none}.entity-list ul::-webkit-scrollbar{display:none}.entity-item{width:auto;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;white-space:nowrap}.entity-item.active{border-color:var(--accent)}.orphans{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px}.orphans h3,.orphans .hint{width:100%}.table-header,.table-actions{flex-wrap:wrap}.panel-header{padding:8px 12px}.dialog{padding:16px}.cell-input,.dialog-field input,.editor-host .cm-content{font-size:16px}}