:root{--primary: #6C63FF;--primary-dark: #5a52e0;--primary-light: #8b85ff;--bg-dark: #1a1a2e;--bg-sidebar: #16213e;--bg-panel: #0f3460;--bg-canvas: #f0f0f0;--text-light: #e0e0e0;--text-muted: #a0a0b0;--border-color: #2a2a4a;--danger: #e74c3c;--success: #2ecc71;--toolbar-bg: #1e1e3a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-dark);color:var(--text-light);overflow:hidden;height:100vh}#root{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-sidebar)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.app-layout{display:flex;flex:1;overflow:hidden}.toolbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--toolbar-bg);border-bottom:1px solid var(--border-color);min-height:48px;flex-shrink:0}.toolbar-logo{display:flex;align-items:center;flex-shrink:0}.toolbar-logo img{height:28px;width:auto}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-divider{width:1px;height:28px;background:var(--border-color);margin:0 4px}.toolbar input[type=text]{background:#ffffff14;border:1px solid var(--border-color);color:var(--text-light);padding:6px 12px;border-radius:4px;font-size:14px;width:200px}.toolbar input[type=text]:focus{outline:none;border-color:var(--primary)}.toolbar-btn{background:#ffffff14;border:1px solid var(--border-color);color:var(--text-light);padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:4px;transition:background .2s;white-space:nowrap}.toolbar-btn:hover{background:#ffffff26}.toolbar-btn.primary{background:var(--primary);border-color:var(--primary)}.toolbar-btn.primary:hover{background:var(--primary-dark)}.toolbar-btn.danger{border-color:var(--danger);color:var(--danger)}.toolbar-btn.danger:hover{background:#e74c3c26}.toolbar-btn.lang-toggle{background:#6c63ff33;border-color:var(--primary);color:var(--primary-light);font-weight:600;letter-spacing:.3px}.zoom-display{font-size:13px;color:var(--text-muted);min-width:40px;text-align:center}.sidebar{width:220px;background:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.sidebar-title{padding:14px 16px 8px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}.element-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:grab;transition:background .15s;-webkit-user-select:none;user-select:none}.element-item:hover{background:#ffffff0f}.element-item:active{cursor:grabbing}.element-icon{width:36px;height:36px;background:#6c63ff26;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.element-info{display:flex;flex-direction:column}.element-name{font-size:13px;font-weight:500}.element-desc{font-size:11px;color:var(--text-muted)}.canvas-container{flex:1;position:relative;overflow:hidden;background:var(--bg-canvas)}.canvas-wrapper{width:100%;height:100%}.properties-panel{width:240px;background:var(--bg-sidebar);border-left:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.panel-title{padding:14px 16px 8px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}.panel-empty{padding:20px 16px;color:var(--text-muted);font-size:13px;text-align:center}.prop-group{padding:8px 16px}.prop-label{font-size:11px;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.prop-input{width:100%;background:#ffffff14;border:1px solid var(--border-color);color:var(--text-light);padding:6px 10px;border-radius:4px;font-size:13px}.prop-input:focus{outline:none;border-color:var(--primary)}.prop-row{display:flex;gap:8px}.prop-row .prop-group{flex:1;padding:8px 0}.prop-row .prop-group:first-child{padding-left:16px}.prop-row .prop-group:last-child{padding-right:16px}.capacity-control{display:flex;align-items:center;gap:0;border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.capacity-btn{background:#ffffff14;border:none;color:var(--text-light);width:32px;height:32px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}.capacity-btn:hover{background:var(--primary);color:#fff}.capacity-value{flex:1;text-align:center;font-size:14px;font-weight:600;padding:0 8px;min-width:36px;background:#ffffff0a;height:32px;line-height:32px;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.delete-btn{margin:16px;padding:8px;background:#e74c3c26;border:1px solid var(--danger);color:var(--danger);border-radius:4px;cursor:pointer;font-size:13px;transition:background .2s}.delete-btn:hover{background:#e74c3c4d}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:8px;padding:24px;min-width:360px;max-width:500px}.modal h3{margin-bottom:16px;font-size:16px}.modal-list{list-style:none;max-height:300px;overflow-y:auto;margin-bottom:16px}.modal-list li{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background .15s}.modal-list li:hover{background:#ffffff0f}.modal-list .layout-name{font-size:14px}.modal-list .layout-date{font-size:11px;color:var(--text-muted)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}