:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #818cf8;--success: #10b981;--success-hover: #059669;--info: #06b6d4;--info-hover: #0891b2;--warning: #f59e0b;--warning-hover: #d97706;--danger: #ef4444;--danger-hover: #dc2626;--text-primary: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;--border: #e2e8f0;--border-dark: #cbd5e1;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;color-scheme:light;color:var(--text-primary);background:var(--bg-secondary);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-height:100vh}#app{width:100%;min-height:100vh}.toolbar-container{background:var(--bg-primary)!important;border-bottom:1px solid var(--border);padding:8px 16px!important;box-shadow:0 1px 3px #0000000a}.toolbar-btn{padding:5px 12px!important;font-size:13px!important;font-weight:500;border-radius:6px!important;border:1px solid var(--border)!important;background:var(--bg-primary)!important;color:var(--text-primary)!important;box-shadow:0 1px 2px #0000000d;transition:all .15s ease!important;display:inline-flex;align-items:center;gap:5px}.toolbar-btn:hover{background:var(--bg-tertiary)!important;border-color:var(--border-dark)!important;transform:translateY(-1px);box-shadow:0 2px 4px #00000014}.toolbar-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d inset}.toolbar-btn i{font-size:14px}.toolbar-btn span{font-size:13px}.toolbar-btn-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.toolbar-btn-primary:hover{background:var(--primary-hover)!important;border-color:var(--primary-hover)!important;color:#fff!important}.toolbar-btn-success{background:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.toolbar-btn-success:hover{background:var(--success-hover)!important;border-color:var(--success-hover)!important;color:#fff!important}.toolbar-btn-danger:hover{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.btn-group{display:inline-flex;gap:0}.btn-group .toolbar-btn:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important}.btn-group .toolbar-btn.dropdown-toggle-split{border-top-left-radius:0!important;border-bottom-left-radius:0!important;padding-left:8px!important;padding-right:8px!important;border-left:1px solid rgba(0,0,0,.1)!important}.btn-group .toolbar-btn.dropdown-toggle-split:after{margin-left:0}.dropdown-menu{border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #0000001a;padding:4px;min-width:180px;margin-top:4px!important}.dropdown-item{padding:8px 12px;font-size:13px;border-radius:6px;color:var(--text-primary);transition:background .15s ease;display:flex;align-items:center;gap:8px}.dropdown-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.dropdown-item i{font-size:14px;width:16px}.ui-component{box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:border-color .2s ease,box-shadow .2s ease;border:2px solid var(--border);background:var(--bg-primary)}.ui-component.edit-mode{cursor:move}.ui-component.edit-mode:hover{border-color:var(--primary)!important;box-shadow:0 4px 12px #6366f133}.ui-component.play-mode{border:none!important;background:transparent!important;cursor:default!important;box-shadow:none!important}.palette-item{cursor:move;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;padding:0;border:none;background:none;width:100%;margin-bottom:2px!important}.palette-item-inner{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:6px;color:var(--text-primary);text-align:center;box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.palette-icon{font-size:14px;margin-bottom:3px;color:var(--primary)}.palette-label{font-weight:600;font-size:9px;letter-spacing:.2px}.palette-item:hover .palette-item-inner{transform:translateY(-2px);box-shadow:0 6px 16px #6366f126;border-color:var(--primary);background:linear-gradient(135deg,#fff,#f8f9ff)}.palette-item:active .palette-item-inner{transform:scale(.98)}#canvas{box-shadow:0 4px 12px #00000026;border-radius:12px;transition:all .3s ease;overflow:hidden}.card{height:100%;border-radius:12px!important;overflow:hidden;border:2px solid var(--border)!important;box-shadow:0 2px 8px #0000000a}.card-header{padding:1rem 1.25rem;font-weight:600;border:none!important;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%)!important}.card-body{overflow-y:auto}.palette-body{max-height:calc(100vh - 200px);overflow-y:auto;background:var(--bg-tertiary);transition:opacity .3s ease,filter .3s ease}.property-body{max-height:calc(100vh - 200px);overflow-y:hidden;background:var(--bg-tertiary);display:flex;flex-direction:column;position:relative}.property-action-bar{position:sticky;top:0;z-index:100;background:var(--bg-primary);padding:12px;border-bottom:2px solid var(--border);box-shadow:0 2px 8px #0000000d}.property-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px}.canvas-container{max-height:calc(100vh - 200px);overflow:hidden}.form-label{font-size:.875rem;font-weight:700;margin-bottom:.5rem;color:#495057;text-transform:uppercase;letter-spacing:.5px;font-size:11px}.form-control,.form-control-sm,.form-select{font-size:.875rem;border-radius:8px;border:2px solid var(--border);transition:all .2s}.form-control:focus,.form-control-sm:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a;outline:none}.form-select{background-color:var(--bg-primary);cursor:pointer}.form-select:hover{border-color:var(--border-dark)}button{transition:all .2s;font-weight:500;border-radius:8px}button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001f}button:active{transform:translateY(0)}.btn-primary{background:var(--primary)!important;border-color:var(--primary)!important}.btn-primary:hover{background:var(--primary-hover)!important;border-color:var(--primary-hover)!important}.btn-success{background:var(--success)!important;border-color:var(--success)!important}.btn-success:hover{background:var(--success-hover)!important;border-color:var(--success-hover)!important}.btn-outline-primary{color:var(--primary)!important;border-color:var(--border)!important}.btn-outline-primary:hover{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.btn-outline-secondary{color:var(--text-primary)!important;border-color:var(--border)!important}.btn-outline-secondary:hover{background:var(--bg-tertiary)!important;border-color:var(--border-dark)!important;color:var(--text-primary)!important}.btn-outline-success{color:var(--success)!important;border-color:var(--border)!important}.btn-outline-success:hover{background:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.btn-outline-info{color:var(--info)!important;border-color:var(--border)!important}.btn-outline-info:hover{background:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.btn-outline-danger{color:var(--danger)!important;border-color:var(--border)!important}.btn-outline-danger:hover{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.drag-ghost{animation:pulse .6s infinite alternate}@keyframes pulse{0%{transform:scale(1.1)}to{transform:scale(1.15)}}.nav-tabs{border-bottom:2px solid #dee2e6}.nav-tabs .nav-link{border:none;color:#6c757d;padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:all .2s}.nav-tabs .nav-link:hover{color:var(--primary);border:none}.nav-tabs .nav-link.active{color:var(--primary);background:none;border:none;border-bottom:3px solid var(--primary)}.tab-content{padding-top:.5rem}.moveable-control-box{--moveable-color: var(--primary) !important}.moveable-line{background:var(--primary)!important;width:2px!important;height:2px!important;cursor:pointer!important}.moveable-control{background:#fff!important;border:3px solid var(--primary)!important;border-radius:50%!important;width:16px!important;height:16px!important;box-shadow:0 2px 4px #0003!important;margin:-8px 0 0 -8px!important;transition:background .15s ease,box-shadow .15s ease!important}.moveable-control:hover{background:var(--primary)!important;box-shadow:0 4px 12px #6366f180!important}.moveable-direction.moveable-n,.moveable-direction.moveable-s{cursor:ns-resize!important}.moveable-direction.moveable-e,.moveable-direction.moveable-w{cursor:ew-resize!important}.svg-point{cursor:pointer!important;transition:all .15s ease}.svg-point:hover{fill:var(--primary)!important;stroke-width:2!important;r:7}.svg-point:active{fill:var(--primary-hover)!important}.custom-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:#e2e8f0;outline:none;transition:all .2s ease}.custom-slider:hover{background:#cbd5e1}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#6366f1;cursor:pointer;border:3px solid white;box-shadow:0 2px 6px #0003;transition:all .15s ease}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px #6366f166}.custom-slider::-webkit-slider-thumb:active{transform:scale(1.05)}.custom-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#6366f1;cursor:pointer;border:3px solid white;box-shadow:0 2px 6px #0003;transition:all .15s ease}.custom-slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px #6366f166}.custom-slider::-moz-range-thumb:active{transform:scale(1.05)}.custom-slider:disabled{opacity:.6;cursor:not-allowed}