*{margin:0;padding:0;box-sizing:border-box}:root{--titlebar-height: 40px;--toolbar-height: 48px;--statusbar-height: 32px;--panel-width: 240px;--bg-color: #f5f5f5;--border-color: #d0d0d0}body{font-family:Red Hat Text,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.app{display:grid;grid-template-columns:var(--panel-width) 1fr var(--panel-width);grid-template-rows:var(--titlebar-height) var(--toolbar-height) 1fr var(--statusbar-height);grid-template-areas:"titlebar titlebar titlebar" "toolbar toolbar toolbar" "component-panel canvas properties-panel" "statusbar statusbar statusbar";height:100vh;width:100vw}.title-bar{grid-area:titlebar;background:#262626;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:15px;font-weight:600}.title-bar-name{display:flex;align-items:center;gap:8px;letter-spacing:.3px}.title-bar-logo{height:24px;width:auto}.title-bar-link{color:#fff;text-decoration:none;font-size:14px;font-weight:500;display:flex;align-items:center}.title-bar-link:hover{color:#4394e5}.toolbar{grid-area:toolbar;background:#fff;border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 12px;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.component-panel{grid-area:component-panel;background:#fff;border-right:1px solid var(--border-color);overflow-y:auto;padding:12px}.canvas-area{grid-area:canvas;background:var(--bg-color);overflow:auto;display:flex;align-items:center;justify-content:center}.properties-panel{grid-area:properties-panel;background:#fff;border-left:1px solid var(--border-color);overflow-y:auto;padding:12px}.status-bar{grid-area:statusbar;background:#fff;border-top:1px solid var(--border-color);display:flex;align-items:center;padding:0 12px;font-size:13px;color:#595959}.canvas-container{width:100%;height:100%;overflow:auto;background:#f0f0f0}.canvas-stage-wrapper{display:flex;align-items:center;justify-content:center;width:fit-content;min-width:100%;height:fit-content;min-height:100%;padding:20px;box-sizing:border-box}.diagram-stage{box-shadow:0 2px 8px #00000026}.canvas-container.connector-mode,.canvas-container.network-line-mode{cursor:crosshair}.panel-title{font-size:15px;font-weight:700;color:#262626;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #e5e5e5}.panel-section{margin-bottom:16px}.section-title{font-size:12px;font-weight:500;color:#595959;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.section-title-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}.section-title-toggle:hover{color:#06c}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.component-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:1px solid #e5e5e5;border-radius:4px;background:#fff;cursor:pointer;font-family:Red Hat Text,sans-serif;font-size:12px;color:#595959;transition:border-color .15s,background-color .15s}.component-btn:hover{border-color:#06c;background-color:#f8f9fa}.component-btn.active{border-color:#06c;background-color:#d9e8f7}.preview-box{width:100%;height:28px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border-radius:2px}.preview-filled{background:#06c;color:#fff}.preview-outlined{border:2px solid #0066cc;color:#262626}.preview-gray{background:#e5e5e5;color:#262626}.preview-white{background:#fff;border:1px solid #d0d0d0;color:#262626}.preview-circle{width:28px;height:28px;border-radius:50%;background:#262626;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}.preview-network-line{width:100%;height:2px;margin:4px 0}.icon-label{font-size:11px;text-align:center}.empty-message{font-size:13px;color:#595959;font-style:italic}.prop-group{margin-bottom:14px}.prop-label{display:block;font-size:12px;font-weight:500;color:#595959;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.prop-input{width:100%;padding:6px 8px;border:1px solid #d0d0d0;border-radius:4px;font-family:Red Hat Text,sans-serif;font-size:14px;color:#262626}.prop-input:focus{outline:none;border-color:#06c}.prop-input-small{width:70px}.prop-button-row{display:flex;gap:4px;flex-wrap:wrap}.prop-btn{padding:4px 10px;border:1px solid #d0d0d0;border-radius:4px;background:#fff;cursor:pointer;font-size:13px;font-family:Red Hat Text,sans-serif;color:#262626}.prop-btn:hover{border-color:#06c}.prop-btn.active{background:#06c;color:#fff;border-color:#06c}.swatch-row{display:flex;gap:4px;flex-wrap:wrap}.swatch{width:24px;height:24px;border:2px solid transparent;border-radius:4px;cursor:pointer;padding:0}.swatch:hover{border-color:#4a90d9}.swatch.active{border-color:#06c;box-shadow:0 0 0 1px #06c}.swatch-none{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;color:#999;border:1px solid #d0d0d0;border-radius:2px}.prop-size-row{display:flex;gap:8px}.prop-size-label{display:flex;align-items:center;gap:4px;font-size:13px;color:#595959}.toolbar-group{display:flex;align-items:center;gap:4px}.toolbar-separator{width:1px;height:24px;background:#d0d0d0;margin:0 8px}.toolbar-spacer{flex:1}.toolbar-btn{padding:4px 8px;border:1px solid #d0d0d0;border-radius:4px;background:#fff;cursor:pointer;font-family:Red Hat Text,sans-serif;font-size:13px;font-weight:500;color:#262626;white-space:nowrap;flex-shrink:0;transition:background-color .15s,border-color .15s}.toolbar-btn:hover:not(:disabled){background:#f0f0f0;border-color:#06c}.toolbar-btn:disabled{opacity:.4;cursor:default}.toolbar-btn.active{background:#d9e8f7;border-color:#06c}.toolbar-btn-primary{background:#06c;color:#fff;border-color:#06c}.toolbar-btn-primary:hover:not(:disabled){background:#004d99}.toolbar-range{width:60px;height:20px;cursor:pointer;accent-color:#0066cc}.toolbar-range:disabled{opacity:.4;cursor:default}.toolbar-input-small{width:54px;padding:2px 4px;border:1px solid #d0d0d0;border-radius:4px;font-family:Red Hat Text,sans-serif;font-size:12px;text-align:center;color:#262626}.toolbar-input-small:disabled{opacity:.4}.toolbar-unit{font-size:12px;color:#595959}.toolbar-zoom-label{font-size:13px;font-weight:500;color:#262626;min-width:40px;text-align:center}.status-item{margin-right:16px}.status-snap-btn{padding:2px 8px;border:1px solid #d0d0d0;border-radius:3px;background:#fff;cursor:pointer;font-family:Red Hat Text,sans-serif;font-size:12px;color:#595959;margin-right:16px}.status-snap-btn.active{background:#d9e8f7;border-color:#06c;color:#06c}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;border-radius:8px;padding:24px;width:420px;max-width:90vw;box-shadow:0 8px 32px #0003}.modal-title{font-size:20px;font-weight:700;color:#262626;margin-bottom:16px}.modal-field{margin-bottom:12px}.modal-field label{display:block;font-size:13px;font-weight:500;color:#595959;margin-bottom:4px}.modal-field input{width:100%;padding:8px;border:1px solid #d0d0d0;border-radius:4px;font-family:Red Hat Text,sans-serif;font-size:15px}.modal-field input:focus{outline:none;border-color:#06c}.modal-filename{font-size:14px;color:#262626;font-family:monospace;background:#f5f5f5;padding:6px 8px;border-radius:4px;display:block}.modal-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.modal-btn{padding:8px 16px;border:none;border-radius:4px;background:#06c;color:#fff;cursor:pointer;font-family:Red Hat Text,sans-serif;font-size:14px;font-weight:500}.modal-btn:hover{background:#004d99}.modal-btn-secondary{background:#e5e5e5;color:#262626}.modal-btn-secondary:hover{background:#d0d0d0}.modal-btn-cancel{background:transparent;color:#595959;border:1px solid #d0d0d0}.modal-btn-cancel:hover{background:#f5f5f5}