:root{--bg:#fff;--bg-panel:#f6f7f9;--border:#d9dde3;--text:#1f2430;--text-dim:#6b7280;--accent:#2f6fed;--table-header:#3d5a80;--edge:#8a93a3;--edge-hover:#2f6fed;--error:#d33}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--text);background:var(--bg);font-family:system-ui,sans-serif}.app-shell{flex-direction:column;height:100%;display:flex}.toolbar{border-bottom:1px solid var(--border);background:var(--bg-panel);align-items:center;gap:12px;padding:6px 12px;display:flex}.brand{font-weight:700}.workspace{flex:1;min-height:0;display:flex}.editor-pane{border-right:1px solid var(--border);flex-direction:column;width:38%;min-width:240px;display:flex;overflow:hidden}.divider{cursor:col-resize;z-index:5;background:0 0;width:5px;margin-left:-3px}.divider:hover{background:var(--accent);opacity:.4}.canvas-pane{background:#fafbfc;flex:1;min-width:0;position:relative;overflow:hidden}.diagram-canvas{touch-action:none;width:100%;height:100%;display:block}.table-node{cursor:grab}.table-body{fill:#fff;stroke:var(--border)}.table-header{fill:var(--table-header)}.table-title{fill:#fff;font-size:13px;font-weight:600}.field-name{fill:var(--text);font-size:12px}.field-name.pk{font-weight:600}.field-type{fill:var(--text-dim);font-size:11px}.row-line{stroke:var(--border)}.statusbar{border-top:1px solid var(--border);background:var(--bg-panel);gap:16px;padding:3px 12px;font-size:12px;display:flex}.status-ok{color:#2e7d32}.status-errors{color:var(--error)}.status-dim{color:var(--text-dim)}.badge.stale{color:#92600a;background:#fdf0d5;border-radius:10px;padding:2px 8px;font-size:11px}.edge path{fill:none;stroke:var(--edge);stroke-width:1.5px}.edge.hot path{stroke:var(--edge-hover);stroke-width:2.5px}.edge-label{fill:var(--text-dim);font-size:10px}.edge.hot .edge-label{fill:var(--edge-hover)}.diagram-manager{align-items:center;gap:6px;display:flex;position:relative}.diagram-manager button{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:4px;padding:3px 8px;font-size:12px}.diagram-manager .name-button{font-weight:600}.diagram-manager .name-input{padding:3px 6px;font-size:12px}.diagram-list{z-index:20;border:1px solid var(--border);background:#fff;border-radius:6px;min-width:340px;margin:0;padding:4px;list-style:none;position:absolute;top:30px;left:0;box-shadow:0 4px 16px #0000001f}.diagram-list li{border-radius:4px;align-items:center;gap:8px;padding:4px 6px;display:flex}.diagram-list li.current{background:#eef3fe}.diagram-list .open-button{text-align:left;background:0 0;border:none;flex:1;font-weight:500}.diagram-list .when{color:var(--text-dim);font-size:10px}.diagram-list .danger{color:var(--error)}.banner-warning{color:#a33;background:#fdecea;padding:6px 12px;font-size:13px}.canvas-wrap{position:absolute;inset:0}.zoom-controls{border:1px solid var(--border);background:#fff;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;display:flex;position:absolute;bottom:12px;right:12px}.zoom-controls button{cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:14px}.format-button:disabled{opacity:.45;cursor:not-allowed}.problems-panel{border-top:1px solid var(--border);background:#fff6f6;font-size:12px}.problems-header{text-align:left;cursor:pointer;width:100%;color:var(--error);background:0 0;border:none;padding:4px 12px;font-weight:600;display:block}.problems-list{max-height:110px;margin:0;padding:0 0 4px;list-style:none;overflow-y:auto}.problems-list button{cursor:pointer;text-align:left;background:0 0;border:none;width:100%;padding:2px 16px}.problems-list button:hover{background:#ffecec}.problem-loc{color:var(--text-dim);margin-right:6px;font-family:ui-monospace,monospace}.table-node.focused .table-body{stroke:var(--accent);stroke-width:2px}