.erd-app{height:100%;min-height:0;display:flex}.erd-app__canvas{flex:1;min-width:0;position:relative}.erd-app__side{resize:horizontal;border-left:1px solid var(--border);background:var(--bg-panel);flex-direction:column;width:460px;min-width:320px;max-width:46vw;display:flex;overflow:hidden}.panel{flex-direction:column;flex:1;gap:10px;min-height:0;padding:10px;display:flex;overflow:auto}.panel__row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.panel__select{min-width:150px;height:30px;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);font:inherit;border-radius:6px;flex:150px;padding:0 8px;font-size:12.5px}.panel__select:disabled{opacity:.55;cursor:not-allowed}.panel__select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.panel__how{white-space:nowrap;flex-shrink:0;align-items:center;gap:5px;height:30px;padding:0 10px;font-size:12px;display:inline-flex}.panel__how svg{flex-shrink:0}.btn-icon{width:30px;height:30px;color:var(--text-dim);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.btn-icon:hover:not(:disabled){color:var(--text)}.btn-icon.is-active{color:var(--accent-text)}.btn-icon.is-danger:hover:not(:disabled){color:var(--danger-text);background:var(--danger-bg);border-color:var(--error)}.panel__editor{min-height:220px;color:var(--text);background:var(--bg-input);border:1px solid var(--border-strong);resize:none;tab-size:2;border-radius:8px;flex:1;padding:10px 12px;font-size:12.5px;line-height:1.55}.panel__editor:focus{border-color:var(--accent);outline:none}.panel__status{flex-direction:column;gap:4px;max-height:30%;display:flex;overflow:auto}.status{border:1px solid #0000;border-radius:6px;margin:0;padding:6px 9px;font-size:12.5px}.status--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-border)}.status--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-border)}.status--error{color:var(--error);background:var(--error-bg);border-color:var(--error-border);white-space:pre-wrap}.status--info{color:var(--info);background:var(--info-bg);border-color:var(--info-border)}.panel__save,.saved__rename{gap:6px;display:flex}.panel__save input,.saved__rename input{min-width:140px;height:30px;color:var(--text);background:var(--bg-input);border:1px solid var(--accent);font:inherit;border-radius:6px;flex:150px;padding:0 9px;font-size:12.5px}.panel__save input:focus,.saved__rename input:focus{box-shadow:0 0 0 2px var(--accent-soft);outline:none}.saved{flex-direction:column;flex:1;gap:6px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.saved__item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;align-items:center;gap:8px;padding:8px 10px;display:flex}.saved__info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.saved__name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.saved__meta{color:var(--text-dim);font-size:11px}.saved__actions{flex-shrink:0;gap:4px;display:flex}.saved__actions .btn-icon{width:27px;height:27px}button.is-danger:hover:not(:disabled){color:var(--danger-text);background:var(--danger-bg);border-color:var(--error)}.modal__backdrop{z-index:100;background:var(--overlay);backdrop-filter:blur(2px);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel);border:1px solid var(--border-strong);width:min(860px,100%);max-height:100%;box-shadow:var(--shadow-modal);border-radius:12px;flex-direction:column;display:flex}.modal:focus{outline:none}.modal__header{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:14px 16px;display:flex}.modal__header h2{flex:1;min-width:0;margin:0;font-size:15px}.modal__close{padding:3px 9px;line-height:1.4}.modal__body{flex-direction:column;flex:1;gap:12px;min-height:0;padding:14px 16px;display:flex;overflow:auto}.modal__footer{border-top:1px solid var(--border);align-items:center;gap:6px;padding:12px 16px;display:flex}.modal__tabs{gap:4px;margin-right:auto;display:flex}.modal__note{color:var(--text-dim);margin-right:auto;font-size:12px}.modal__footer>.is-active{margin-left:auto}.modal__tabs~.is-active{margin-left:0}.modal__steps{color:var(--text-dim);margin:0;padding-left:20px;font-size:12.5px;line-height:1.8}.modal__steps code{color:var(--accent);background:var(--bg-elevated);border-radius:4px;padding:1px 5px}.modal__code{background:var(--bg-input);border:1px solid var(--border-strong);white-space:pre;color:var(--code-text);border-radius:8px;max-height:58vh;margin:0;padding:12px;font-size:12px;line-height:1.55;overflow:auto}.empty{max-width:560px;height:100%;color:var(--text-dim);flex-direction:column;justify-content:center;margin:0 auto;padding:24px;display:flex}.empty h2{color:var(--text);margin:0 0 8px;font-size:18px}.empty p{margin:0 0 16px}.empty ul{margin:0;padding-left:20px;font-size:13px;line-height:2}.empty b{color:var(--text)}.erd-node{background:var(--bg-elevated);border:1px solid var(--border-strong);width:340px;box-shadow:var(--shadow-node);border-radius:8px;font-size:12px;position:relative;overflow:hidden}.erd-node.is-selected{border-color:var(--accent);box-shadow:var(--shadow-node-selected)}.erd-node__header{background:linear-gradient(180deg, var(--node-header-from), var(--node-header-to));border-bottom:1px solid var(--border-strong);flex-direction:column;justify-content:center;height:40px;padding:0 12px;display:flex}.erd-node__title{align-items:center;gap:6px;height:22px;display:flex}.erd-node__header.has-comment{height:57px}.erd-node__comment{height:17px;color:var(--node-comment);text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;line-height:17px;overflow:hidden}.erd-node__schema{color:var(--text-dim);font-size:11px}.erd-node__schema:after{content:"."}.erd-node__name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.erd-node__body{padding:5px 0}.erd-row{height:24px;padding:0 10px;position:relative}.erd-row.has-comment{height:40px}.erd-row:hover{background:var(--row-hover)}.erd-row__main{grid-template-columns:26px 1fr auto;align-items:center;gap:6px;height:24px;display:grid}.erd-row__comment{height:16px;color:var(--row-comment);text-overflow:ellipsis;white-space:nowrap;padding-left:32px;font-size:10.5px;line-height:14px;overflow:hidden}.erd-row__badge{letter-spacing:.3px;text-align:center;color:var(--text-dim);font-size:9.5px;font-weight:700}.erd-row__badge.is-pk{color:var(--pk)}.erd-row__badge.is-fk{color:var(--fk)}.erd-row__badge.is-uq{color:var(--uq)}.erd-row__name{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-family:JetBrains Mono,ui-monospace,monospace;overflow:hidden}.erd-row__name.is-notnull{color:var(--text)}.erd-row__type{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-size:11px;overflow:hidden}.erd-handle{opacity:0;background:0 0;border:none;width:1px;min-width:0;height:1px;min-height:0}.react-flow{background:var(--bg);--xy-background-pattern-dots-color:var(--border-strong);--xy-background-pattern-color:var(--border-strong)}.erd-edge .react-flow__edge-path{stroke:var(--edge);stroke-width:1.6px}.erd-edge.is-focus .react-flow__edge-path{stroke:var(--accent);stroke-width:2.2px}.erd-edge.is-dim{opacity:.15}.react-flow__node.is-dim{opacity:.28}.react-flow__edge-text{fill:var(--text-dim);font-size:10px}.react-flow__edge-textbg{fill:var(--bg)}.erd-toolbar{z-index:5;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 24px);display:flex;position:absolute;top:12px;right:12px}.erd-toolbar button{background:var(--toolbar-bg);backdrop-filter:blur(2px);font-size:12.5px}.react-flow__minimap{background:var(--bg-panel);border:1px solid var(--border);border-radius:6px}.react-flow__minimap-mask{fill:var(--minimap-mask)}.react-flow__minimap-node{fill:var(--minimap-node);stroke:var(--border-strong)}.react-flow__attribution{background:0 0;font-size:10px}.react-flow__attribution a{color:var(--attribution)}@media (width<=900px){.modal__backdrop{padding:12px}}@media (width<=900px) and (height>=600px){.erd-app{flex-direction:column}.erd-app__side{resize:none;border-left:none;border-top:1px solid var(--border);width:auto;min-width:0;max-width:none;height:55%;min-height:280px}.erd-app__canvas{flex:1;min-height:220px}.panel__editor{min-height:150px}.modal__code{max-height:none}}@media (height<=599px){.panel__editor{min-height:0}.panel__status{max-height:34%}}@media (width<=900px) and (height<=599px){.erd-app__side{width:320px;min-width:260px;max-width:50vw}}