:root{--bg: #0b0f19;--panel: #121826;--panel-2: #182031;--panel-3: #1f2940;--border: #26314a;--border-strong: #33405e;--text: #e4e9f5;--text-dim: #9aa6bf;--text-faint: #6b7793;--accent: #3b82f6;--accent-hover: #2f6fdc;--accent-soft: rgba(59, 130, 246, .14);--danger: #f05252;--danger-soft: rgba(240, 82, 82, .12);--warn: #f5a524;--warn-soft: rgba(245, 165, 36, .12);--ok: #22c55e;--canvas: #f4f6fb;--radius: 7px;--radius-sm: 5px;--control-h: 28px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--ease: cubic-bezier(.4, 0, .2, 1);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100%;overflow:hidden}.topbar{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--border);flex:0 0 auto}.brand{display:flex;align-items:baseline;gap:7px;font-weight:650;letter-spacing:-.2px;font-size:14px;user-select:none}.brand svg{color:var(--accent)}.brand-sub{font-weight:400;font-size:11px;color:var(--text-faint)}.topbar-spacer{flex:1}.topbar-group{display:flex;align-items:center;gap:6px}.sep{width:1px;height:20px;background:var(--border);margin:0 2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 9px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease)}.btn:hover:not(:disabled){background:var(--panel-3);border-color:var(--border-strong)}.btn:active:not(:disabled){transform:translateY(.5px)}.btn:disabled{opacity:.42;cursor:default}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn-icon{width:var(--control-h);padding:0}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:550}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--panel-2);color:var(--text)}.btn-active{background:var(--accent-soft);border-color:#3b82f666;color:#bcd4ff}.select{height:var(--control-h);padding:0 24px 0 8px;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa6bf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;appearance:none;cursor:pointer}.select:hover{border-color:var(--border-strong)}.switch{display:inline-flex;align-items:center;gap:7px;height:var(--control-h);padding:0 9px 0 7px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;user-select:none;white-space:nowrap}.switch:hover{border-color:var(--border-strong)}.switch-track{position:relative;width:26px;height:14px;border-radius:8px;background:var(--panel-3);border:1px solid var(--border-strong);transition:background .14s var(--ease);flex:0 0 auto}.switch-track:after{content:"";position:absolute;top:1.5px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--text-faint);transition:transform .14s var(--ease),background .14s var(--ease)}.switch[data-on=true]{color:#bcd4ff}.switch[data-on=true] .switch-track{background:var(--accent);border-color:var(--accent)}.switch[data-on=true] .switch-track:after{transform:translate(11px);background:#fff}.menu-wrap{position:relative}.menu{position:absolute;z-index:40;min-width:218px;padding:5px;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 14px 34px #00000080;animation:menu-in .11s var(--ease)}.menu[data-align=right]{right:0}.menu[data-align=left]{left:0}.menu[data-side=below]{top:calc(100% + 5px)}@keyframes menu-in{0%{opacity:0;transform:translateY(-3px)}}.menu-label{padding:5px 8px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint)}.menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;background:none;border:0;border-radius:var(--radius-sm);text-align:left;cursor:pointer;color:var(--text)}.menu-item:hover:not(:disabled){background:var(--panel-3)}.menu-item:disabled{opacity:.4;cursor:default}.menu-item .kbd,.menu-item .menu-hint{margin-left:auto;color:var(--text-faint);font-size:11px}.menu-sep{height:1px;margin:4px 2px;background:var(--border)}.kbd{font-family:var(--mono);font-size:10.5px;padding:1px 4px;border:1px solid var(--border-strong);border-radius:4px;background:var(--panel);color:var(--text-dim)}.workspace{display:flex;flex:1;min-height:0;position:relative}.pane-editor{display:flex;flex-direction:column;min-width:0;background:var(--panel);border-right:1px solid var(--border)}.pane-diagram{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--canvas)}.splitter{flex:0 0 5px;cursor:col-resize;background:var(--border);position:relative;transition:background .12s var(--ease)}.splitter:after{content:"";position:absolute;inset:0 -3px}.splitter:hover,.splitter[data-dragging=true]{background:var(--accent)}.editor-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 8px;border-bottom:1px solid var(--border);background:var(--panel-2);flex:0 0 auto}.editor-bar-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-faint)}.editor-host{flex:1;min-height:0;overflow:hidden}.cm-editor{height:100%;font-size:12.5px}.cm-editor.cm-focused{outline:none!important}.cm-scroller{font-family:var(--mono)!important;line-height:1.55!important}.cm-gutters{border-right:1px solid var(--border)!important}.diagnostics{flex:0 0 auto;max-height:34%;overflow:auto;border-top:1px solid var(--border);background:var(--panel-2);font-size:12px}.diagnostics-head{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--panel-2);border-bottom:1px solid var(--border);z-index:1}.diag-badge{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:600}.diag-badge[data-kind=error]{background:var(--danger-soft);color:#ff9d9d}.diag-badge[data-kind=warning]{background:var(--warn-soft);color:#ffcd7a}.diag-badge[data-kind=ok]{background:#22c55e1f;color:#86efac}.diag-item{display:flex;gap:8px;width:100%;padding:7px 9px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;cursor:pointer;color:var(--text)}.diag-item:hover{background:var(--panel-3)}.diag-pos{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--accent);padding-top:1px}.diag-body{min-width:0}.diag-msg{color:var(--text)}.diag-excerpt{margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--text-faint);white-space:pre;overflow:hidden;text-overflow:ellipsis}.diag-item[data-level=warning] .diag-pos{color:var(--warn)}.diag-item[data-level=info] .diag-pos{color:var(--text-faint)}.canvas-host{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--canvas);background-image:linear-gradient(to right,#e2e8f0 1px,transparent 1px),linear-gradient(to bottom,#e2e8f0 1px,transparent 1px)}.canvas-host[data-panning=true]{cursor:grabbing}.canvas-svg{position:absolute;inset:0;width:100%;height:100%;display:block}.canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#64748b;text-align:center;pointer-events:none}.canvas-empty h2{margin:0;font-size:15px;color:#334155}.canvas-empty p{margin:0;font-size:12.5px;max-width:320px}.marquee{position:absolute;border:1px solid var(--accent);background:#3b82f61f;border-radius:2px;pointer-events:none}.toolbar{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:3px;padding:4px;background:#fffffff2;backdrop-filter:blur(8px);border:1px solid #dbe2ee;border-radius:9px;box-shadow:0 4px 16px #0f172a1a;max-width:calc(100% - 20px);flex-wrap:nowrap}.toolbar .tbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:27px;min-width:27px;padding:0 6px;background:transparent;border:0;border-radius:6px;color:#334155;cursor:pointer;transition:background .11s var(--ease),color .11s var(--ease)}.toolbar .tbtn:hover:not(:disabled){background:#eef2f9;color:#0f172a}.toolbar .tbtn:disabled{opacity:.35;cursor:default}.toolbar .tbtn[data-active=true]{background:var(--accent-soft);color:var(--accent-hover)}.toolbar .tsep{width:1px;height:18px;background:#dbe2ee;margin:0 3px}.toolbar .menu{background:#fff;border-color:#dbe2ee;color:#1e293b;box-shadow:0 12px 30px #0f172a2e}.toolbar .menu-item{color:#1e293b}.toolbar .menu-item:hover:not(:disabled){background:#eef2f9}.toolbar .menu-label{color:#94a3b8}.toolbar .menu-sep{background:#e6ebf4}.toolbar .kbd,.toolbar .menu-hint{color:#94a3b8;background:#f6f8fc;border-color:#e2e8f0}.zoom-label{min-width:44px;padding:0 2px;font-variant-numeric:tabular-nums;font-size:11.5px;color:#475569;text-align:center;user-select:none}.legend{position:absolute;left:10px;bottom:10px;z-index:15;display:flex;flex-direction:column;gap:3px;padding:7px 9px;background:#fffffff0;border:1px solid #dbe2ee;border-radius:8px;box-shadow:0 2px 10px #0f172a12;font-size:11px;color:#475569;pointer-events:none}.legend-row{display:flex;align-items:center;gap:6px}.status{position:absolute;right:10px;bottom:10px;z-index:15;display:flex;align-items:center;gap:9px;padding:5px 10px;background:#fffffff0;border:1px solid #dbe2ee;border-radius:8px;box-shadow:0 2px 10px #0f172a12;font-size:11.5px;color:#475569;font-variant-numeric:tabular-nums}.status b{color:#0f172a;font-weight:600}.status-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:20px;font-size:10.5px;font-weight:600}.status-chip[data-kind=stale]{background:#fef3c7;color:#92400e}.status-chip[data-kind=dirty]{background:#dbeafe;color:#1e40af}.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}.toasts{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{display:flex;align-items:center;gap:8px;padding:8px 13px;background:var(--panel-3);border:1px solid var(--border-strong);border-radius:20px;box-shadow:0 10px 26px #0006;font-size:12.5px;animation:toast-in .16s var(--ease)}.toast[data-kind=error]{border-color:#f0525280}.toast[data-kind=success]{border-color:#22c55e73}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.tabs{display:none}@media(max-width:860px){.tabs{display:flex;gap:3px;padding:4px;background:var(--panel);border-bottom:1px solid var(--border);flex:0 0 auto}.tab{flex:1;height:30px;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--text-dim);font-weight:550;cursor:pointer}.tab[data-active=true]{background:var(--panel-3);color:var(--text)}.splitter,.workspace[data-mobile-tab=sql] .pane-diagram,.workspace[data-mobile-tab=diagram] .pane-editor{display:none}.workspace[data-mobile-tab=sql] .pane-editor,.workspace[data-mobile-tab=diagram] .pane-diagram{flex:1 1 auto;width:100%!important;border-right:0}.brand-sub,.topbar-hide-sm,.legend{display:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}