:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.app-header{background:#111;color:#fff;padding:.5rem 1rem;display:flex;align-items:center;justify-content:space-between;box-shadow:none;min-height:50px;position:relative}.app-header-title{display:flex;align-items:center;gap:1rem}.app-header h1{margin:0;font-size:1.2rem;font-weight:600}.app-header p{margin:0;font-size:.75rem;opacity:.9}.app-main{display:flex;flex:1;overflow:hidden}.app-header-actions{display:flex;align-items:center;gap:.5rem}.header-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.5rem;width:40px;height:40px;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0}.header-icon{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}.header-btn:hover{background:#ffffff4d;transform:none}.header-btn:active{transform:none}.export-dropdown-container{position:relative}.export-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border-radius:0;box-shadow:none;overflow:hidden;z-index:1000;min-width:120px}.export-dropdown button{width:100%;padding:.75rem 1rem;border:none;background:#fff;color:#333;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:1rem;transition:background .2s ease}.export-dropdown button:hover{background:#f5f5f5}.export-dropdown button:not(:last-child){border-bottom:1px solid #e0e0e0}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:20000}.modal-card{background:#fff;border-radius:0;padding:2rem;width:320px;box-shadow:none;text-align:center}.modal-card h3{margin:0 0 .3rem;font-size:1.3rem;background:#111;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.modal-card p{margin:0 0 1.2rem;font-size:.85rem;color:#666}.resolution-options{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}.resolution-btn{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border:1px solid #e0e0e0;border-radius:0;background:#fff;cursor:pointer;transition:all .2s}.resolution-btn:hover{border-color:#111;background:#f5f5f5;transform:none;box-shadow:none}.resolution-btn .resolution-label{font-size:1rem;font-weight:600;color:#333}.resolution-btn .resolution-desc{font-size:.78rem;color:#888}.resolution-btn.high:hover{border-color:#111;background:#111}.modal-cancel-btn{width:100%;padding:.7rem;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:0;font-size:.9rem;font-weight:500;color:#666;cursor:pointer;transition:all .2s}.modal-cancel-btn:hover{background:#eee;border-color:#ccc}.properties-bar{display:flex;align-items:center;gap:.75rem;padding:.4rem 1rem;background:#fafafa;border-bottom:1px solid #ddd;min-height:40px;flex-shrink:0}.prop-item{display:flex;align-items:center;gap:.4rem}.prop-label{font-size:.7rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.3px}.prop-value{font-size:.8rem;font-weight:500;color:#333}.prop-type-select{font-size:.8rem;font-weight:500;color:#333;border:1px solid #ccc;border-radius:0;padding:2px 4px;height:24px;background:#fff;cursor:pointer}.prop-type-select:focus{outline:none;border-color:#111}.prop-text-input{font-size:.8rem;font-weight:500;color:#333;border:1px solid #ccc;border-radius:0;padding:2px 6px;height:24px;width:120px}.prop-text-input:focus{outline:none;border-color:#111}.prop-divider{width:1px;height:20px;background:#ddd}.prop-font-size{display:flex;align-items:center;gap:.25rem}.prop-font-btn{width:24px;height:24px;border:1px solid #ccc;border-radius:0;background:#fff;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s}.prop-font-btn:hover{background:#e8e8e8;border-color:#111}.prop-font-input{width:44px;font-size:.8rem;font-weight:600;text-align:center;color:#333;border:1px solid #ccc;border-radius:0;padding:2px;height:24px;-moz-appearance:textfield}.prop-font-input::-webkit-outer-spin-button,.prop-font-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.prop-font-input:focus{outline:none;border-color:#111}.prop-apply-btn{padding:2px 8px;height:24px;background:#111;color:#fff;border:none;border-radius:0;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.prop-apply-btn:hover{background:#333}.prop-delete-btn{padding:.3rem .75rem;background:#fff;border:1px solid #b42318;border-radius:0;color:#b42318;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;margin-left:auto}.prop-delete-btn:hover{background:#b42318;color:#fff}@media(max-width:768px){.app-header h1{font-size:1rem}.app-header p{font-size:.7rem}.header-btn{width:36px;height:36px;font-size:1.2rem}.app-header-actions{gap:.3rem}.modal-card{width:280px;padding:1.5rem}}.toolbar{display:flex;flex-direction:column;width:120px;background:#f5f5f5;border-right:1px solid #ddd;overflow-y:auto;padding:.5rem;gap:.5rem;flex-shrink:0}.toolbar-section{display:flex;flex-direction:column;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ddd}.toolbar-section:last-child{border-bottom:none}.toolbar-section h3{font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.5px;margin:0;padding:.3rem 0;text-align:center}.tool-buttons,.file-buttons,.export-buttons{display:flex;flex-direction:column;gap:.4rem}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .3rem;background:#fff;border:1px solid #ddd;border-radius:0;cursor:pointer;transition:all .2s;min-height:60px}.tool-btn:hover{border-color:#111;transform:none;box-shadow:none}.tool-btn.active{background:#111;color:#fff;border-color:#111;box-shadow:none}.tool-icon{font-size:1.5rem}.tool-icon.text-icon{font-size:.9rem;font-weight:600;border:1px solid currentColor;border-radius:50%;padding:.3rem .5rem;display:inline-block}.tool-label{font-size:.65rem;font-weight:500;text-align:center;line-height:1.2;word-break:break-word}.action-btn{padding:.5rem .3rem;background:#fff;border:1px solid #ddd;border-radius:0;cursor:pointer;transition:all .2s;font-size:.7rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-height:50px;text-align:center}.action-btn:hover{border-color:#111;transform:none;box-shadow:none}.action-btn.danger{color:#b42318;border-color:#b42318}.action-btn.danger:hover{background:#b42318;color:#fff;border-color:#b42318}.action-btn.reset-zoom{border-color:#cfcfcf;font-weight:700}.action-btn.reset-zoom:hover{border-color:#111;background:#f0f0f0}.standard-info{padding:.5rem;background:#fff;border-radius:0;border:1px solid #ddd}.standard-info p{margin:0;color:#666;font-size:.65rem;text-align:center;line-height:1.3}.toolbar::-webkit-scrollbar{width:6px}.toolbar::-webkit-scrollbar-track{background:#f1f1f1}.toolbar::-webkit-scrollbar-thumb{background:#888;border-radius:0}.toolbar::-webkit-scrollbar-thumb:hover{background:#555}@media(max-width:768px){.toolbar{width:60px;padding:.3rem}.tool-btn,.action-btn{min-height:45px;padding:.4rem .2rem}.tool-icon{font-size:1.2rem}.tool-label{font-size:.6rem}}.canvas{flex:1;position:relative;background:#fff;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px;overflow:auto;cursor:default}.canvas.pan-mode{cursor:grab}.canvas.panning{cursor:grabbing}.canvas-zoom-wrapper{position:relative;min-width:100%;min-height:100%;transition:transform .2s ease-out}.canvas.entity,.canvas.attribute,.canvas.keyAttribute,.canvas.relationship,.canvas.connection{cursor:crosshair}.canvas.connection .element{cursor:pointer}.connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:all;z-index:1}.elements-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.connection-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:1rem 2rem;background:#111;color:#fff;border-radius:0;font-size:.9rem;font-weight:500;box-shadow:none;z-index:1000;pointer-events:none}.selection-rect{position:absolute;border:2px dashed #111111;background:#0000000f;pointer-events:none;z-index:50}.connection-handle{position:absolute;background:#111;border:1px solid white;border-radius:50%;cursor:crosshair;pointer-events:all;z-index:100;transition:transform .2s,background .2s}.connection-handle:hover{background:#111;transform:none;box-shadow:none}.connection-config-panel{position:fixed;top:100px;right:20px;background:#fff;border:1px solid #111111;border-radius:0;padding:1.2rem;box-shadow:none;z-index:10000;width:260px}.connection-config-panel h4{margin:0 0 1rem;font-size:1.1rem;color:#111;text-align:center;padding-bottom:.6rem;border-bottom:3px solid #f0f0f0;font-weight:700}.config-section{margin-bottom:1rem}.config-section>label{display:block;font-size:.85rem;font-weight:700;color:#333;margin-bottom:.6rem;text-align:center;background:#f5f5f5;padding:.5rem;border-radius:0}.button-group{display:flex;flex-direction:column;gap:.4rem}.button-group.cardinality-group{flex-direction:row}.button-group button{flex:1;padding:.8rem .6rem;border:1px solid #ddd;background:#fff;border-radius:0;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s;white-space:nowrap}.button-group button:hover{border-color:#111;background:#f5f5f5;transform:none}.button-group button.active{background:#111;color:#fff;border-color:#111;box-shadow:none}.config-instruction{margin-top:1rem;padding:.7rem;background:#f5f5f5;border:1px solid #cfcfcf;border-radius:0;text-align:center;font-size:.8rem;color:#6b6b6b;font-weight:600}.connection-edit-panel{position:fixed;top:100px;right:20px;background:#fff;border:1px solid #111111;border-radius:0;padding:1.2rem;box-shadow:none;z-index:10000;width:260px}.connection-edit-panel h4{margin:0 0 1rem;font-size:1.1rem;color:#111;text-align:center;padding-bottom:.6rem;border-bottom:3px solid #f0f0f0;font-weight:700}.connection-edit-panel .delete-btn{width:100%;padding:.8rem;background:#fff;border:1px solid #b42318;border-radius:0;color:#b42318;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.connection-edit-panel .delete-btn:hover{background:#b42318;color:#fff}.connection-edit-panel .close-btn{width:100%;padding:.7rem;margin-top:.8rem;background:#f5f5f5;border:1px solid #ddd;border-radius:0;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.connection-edit-panel .close-btn:hover{border-color:#111;background:#fff}.size-slider-container{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:8px;background:#fff;padding:8px 14px;border-radius:0;box-shadow:none;z-index:1000;font-size:.8rem;color:#555}.size-slider-container label{font-weight:600;color:#111}.size-slider-container input[type=range]{width:100px;accent-color:#111111}.size-slider-container span{min-width:36px;text-align:right;font-weight:500}@media(max-width:768px){.size-slider-container{bottom:10px;right:10px;padding:6px 10px}.size-slider-container input[type=range]{width:70px}.connection-config-panel,.connection-edit-panel{right:10px;top:80px;width:200px;padding:.8rem}.button-group button{font-size:.7rem;padding:.5rem .3rem}}.element{position:absolute;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #333;cursor:move;-webkit-user-select:none;user-select:none;pointer-events:all;transition:box-shadow .2s}.element:hover{box-shadow:none}.connection .element:hover{box-shadow:none;transform:none}.element.selected{border-color:#111;border-width:3px;box-shadow:none}.element.entity{border-radius:0}.element.attribute{border-radius:50%}.element.relationship{background:transparent;border:none}.element.relationship.selected{box-shadow:none}.element-text{font-size:16px;font-weight:500;color:#333;text-align:center;padding:.5rem;white-space:nowrap}.element-text.underline{text-decoration:underline}.element-input{width:90%;border:none;background:transparent;font-size:16px;font-weight:500;text-align:center;outline:none;padding:.5rem}.element.attribute.key .element-text{text-decoration:underline}.connection-menu{background:#fff;border:1px solid #111111;border-radius:0;padding:1rem;box-shadow:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.connection-menu h4{margin:0 0 .8rem;font-size:.9rem;color:#333;border-bottom:1px solid #eee;padding-bottom:.5rem}.menu-group{margin-bottom:.8rem}.menu-group label{display:block;font-size:.75rem;color:#666;margin-bottom:.3rem;font-weight:500}.menu-group select{width:100%;padding:.4rem;border:1px solid #ddd;border-radius:0;font-size:.8rem;background:#fff;cursor:pointer}.menu-group select:focus{outline:none;border-color:#111}.menu-actions{display:flex;gap:.5rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid #eee}.menu-actions button{flex:1;padding:.5rem;border:1px solid #ddd;border-radius:0;background:#fff;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.menu-actions button:hover{border-color:#111;transform:none}.menu-actions button.delete{color:#b42318;border-color:#b42318}.menu-actions button.delete:hover{background:#b42318;color:#fff}:root{--bg: #fafafa;--surface: #fff;--soft: #f5f5f5;--text: #111111;--muted: #6b6b6b;--border: #e5e5e5;--strong: #cfcfcf;--danger: #b42318;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans TC,Arial,sans-serif;color:var(--text);background:var(--bg);font-size:16px;line-height:1.5}body,button,input,select{font-family:inherit}button,input,select{color:var(--text)}button,select,input:not([type=file]){min-height:44px}button{transition:background .15s,border-color .15s,opacity .15s}button:focus-visible,input:focus-visible,select:focus-visible,.header-btn:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}.app{height:100vh;height:100dvh;width:100%;background:var(--bg)}.app-header{background:var(--surface);color:var(--text);padding:20px 24px;border-bottom:1px solid var(--border);gap:16px;flex-shrink:0}.app-header-title{display:block;min-width:0}.app-header h1{font-size:1.6rem;line-height:1.12;font-weight:700;letter-spacing:-.03em}.app-header p{color:var(--muted);font-size:.88rem;margin-top:6px;opacity:1}.app-header-actions{gap:8px}.header-btn{position:relative;width:44px;height:44px;background:var(--surface);color:var(--text);border:1px solid var(--strong)}.header-icon{width:22px;height:22px;filter:brightness(0)}.header-btn:hover{background:var(--soft);border-color:var(--text)}.export-dropdown-container>.header-btn{background:var(--text);border-color:var(--text)}.export-dropdown-container>.header-btn .header-icon{filter:brightness(0) invert(1)}.file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.export-dropdown{border:1px solid var(--strong);min-width:156px;box-shadow:0 6px 18px #00000014}.properties-bar{padding:10px 24px;gap:12px;flex-wrap:wrap;background:var(--bg);border-color:var(--border);max-height:35dvh;overflow:auto}.prop-label{font-size:.74rem;color:var(--muted);letter-spacing:.03em}.prop-value,.prop-text-input,.prop-type-select,.prop-font-input{font-size:.88rem;color:var(--text)}.prop-text-input,.prop-type-select,.prop-font-input{padding:8px;border-color:var(--strong);background:var(--surface)}.prop-font-input{width:48px}.prop-font-btn{width:44px;height:44px;border-color:var(--strong)}.prop-apply-btn{background:var(--text);padding:8px 14px;font-size:.88rem}.prop-delete-btn{font-size:.88rem;padding:8px 14px}.prop-divider{background:var(--border);height:28px}.app-main{min-height:0}.toolbar{width:156px;background:var(--surface);padding:16px 12px;gap:16px;border-color:var(--border)}.toolbar-section{gap:8px;padding-bottom:16px;border-color:var(--border)}.toolbar-section h3{font-size:.74rem;text-align:left;letter-spacing:.06em;color:var(--muted)}.tool-buttons,.file-buttons{gap:8px}.tool-btn,.action-btn{border-color:var(--strong);min-height:56px;padding:10px 8px;flex-direction:row;gap:8px;text-align:left}.tool-icon{font-size:1.5rem;width:26px;flex-shrink:0;line-height:1}.tool-label{font-size:.82rem;text-align:left;line-height:1.35;word-break:normal}.tool-btn.active{background:var(--text);border-color:var(--text);color:#fff}.tool-btn:hover:not(.active),.action-btn:hover:not(.danger){background:var(--soft);border-color:var(--text)}.action-btn{font-size:.82rem}.canvas{min-width:0;background-color:var(--bg)}.element{border-width:2px;border-color:var(--text)}.element.selected{border-width:3px;outline:2px dashed var(--muted);outline-offset:5px}.element.relationship.selected{outline:2px dashed var(--muted)}.connection .element:hover{outline:2px dashed var(--muted);outline-offset:5px}.element-text{color:var(--text)}.connection-handle{border-width:2px}.connection-handle:hover{outline:2px solid var(--muted);outline-offset:2px}.connection-config-panel,.connection-edit-panel,.connection-menu{border:1px solid var(--strong);padding:18px;box-shadow:0 6px 24px #00000014;max-height:calc(100dvh - 180px);overflow-y:auto}.connection-config-panel h4,.connection-edit-panel h4{font-size:1.05rem;color:var(--text);border-bottom:1px solid var(--border);text-align:left}.config-section>label{color:var(--muted);font-size:.88rem;text-align:left}.button-group button{border-color:var(--strong)}.button-group button.active{background:var(--text);color:#fff;border-color:var(--text)}.config-instruction{background:var(--soft);border-color:var(--border);color:var(--muted);font-weight:400}.size-slider-container{border:1px solid var(--strong);box-shadow:none;color:var(--muted);font-size:.88rem;padding:4px 14px}.size-slider-container label{color:var(--text)}.size-slider-container input{accent-color:var(--text)}.modal-card{border:1px solid var(--strong);width:min(360px,calc(100% - 28px));padding:24px;text-align:left}.modal-card h3{background:none;-webkit-text-fill-color:currentColor;color:var(--text);font-size:1.05rem}.modal-card p{color:var(--muted);font-size:.88rem}.resolution-btn{padding:14px;border-color:var(--strong)}.resolution-btn.high{background:var(--text);border-color:var(--text)}.resolution-btn.high .resolution-label,.resolution-btn.high .resolution-desc{color:#fff}.resolution-btn.high:hover{background:#333}.resolution-btn .resolution-desc{color:var(--muted)}.modal-cancel-btn{background:#fff;color:var(--text);border-color:var(--strong)}@media(max-width:840px){.app-header{align-items:flex-start;flex-direction:column;padding:16px 14px;gap:12px}.app-header h1{font-size:1.6rem}.app-header p{font-size:.88rem}.properties-bar{padding:8px 14px;gap:8px 12px}.prop-divider{display:none}.prop-delete-btn{margin-left:0}.toolbar{width:104px;padding:12px 6px}.toolbar-section h3{text-align:center}.tool-btn,.action-btn{flex-direction:column;padding:8px 3px;gap:4px}.tool-label{text-align:center;font-size:.72rem;overflow-wrap:anywhere}.connection-config-panel,.connection-edit-panel{top:auto;bottom:72px;right:10px;width:min(260px,calc(100vw - 124px));max-height:45dvh}.size-slider-container{bottom:10px;right:10px;font-size:.8rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}.global-font-controls{padding:0;border:0;background:transparent;overflow:visible;max-height:none}.global-font-controls .prop-item{width:100%;flex-direction:column;align-items:stretch;gap:8px}.global-font-controls .prop-font-size{flex-wrap:wrap;gap:6px}.global-font-controls .prop-font-input{flex:1;min-width:44px}.global-font-controls .prop-apply-btn{padding:8px;flex:1}.floating-properties{position:fixed;z-index:11000;width:240px;max-width:calc(100vw - 180px);max-height:calc(100dvh - 110px);overflow:auto;background:#fff;border:1px solid var(--strong);box-shadow:0 6px 24px #00000014;padding:12px}.floating-properties-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:8px}.floating-properties-heading button{width:44px;height:44px;background:#fff;border:1px solid var(--strong);border-radius:0;font-size:22px;cursor:pointer}.element-properties{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:12px;border:0;background:#fff;max-height:none;overflow:visible}.element-properties .prop-item{flex-direction:column;align-items:stretch;gap:4px}.element-properties .prop-divider{display:none}.element-properties .prop-text-input,.element-properties .prop-type-select{width:100%}.element-properties .prop-delete-btn{margin-left:0}.element-properties .prop-font-size{justify-content:space-between}@media(max-width:840px){.floating-properties{width:240px;max-width:calc(100vw - 120px);max-height:calc(100dvh - 160px)}}.prop-key-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.88rem;cursor:pointer}.prop-key-toggle input[type=checkbox]{width:18px;height:18px;min-height:18px;flex-shrink:0;accent-color:var(--text)}