:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#eff6ff;background-color:#0f172a;font-synthetic:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bp-blue: #1d4ed8;--bp-light-blue: #3b82f6;--bp-white: #ffffff;--bp-grid: rgba(255, 255, 255, .1);--bp-panel-bg: rgba(15, 23, 42, .85);--bp-panel-border: rgba(255, 255, 255, .2)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;overflow:hidden;background-color:#0f172a}#root{width:100vw;height:100vh;display:flex}.glass-panel{background:var(--bp-panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--bp-panel-border);box-shadow:0 8px 32px #0000005e;color:var(--bp-white)}.sidebar{width:280px;height:100%;display:flex;flex-direction:column;padding:1rem;z-index:10;transition:width .3s ease;overflow-y:auto;overflow-x:hidden}.sidebar.collapsed{width:72px}.sidebar.collapsed .component-item{justify-content:center;padding:.75rem 0}.sidebar.collapsed .component-item span{display:none}.collapse-btn{background:transparent;border:none;color:var(--bp-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:background .2s}.collapse-btn:hover{background:#ffffff1a}.tray-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;border-bottom:1px solid var(--bp-panel-border);padding-bottom:.5rem}.component-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;border-radius:.5rem;cursor:grab;transition:background .2s ease;border:1px solid transparent}.component-item:hover{background:#ffffff1a;border-color:#ffffff4d}.component-icon{width:32px;height:32px;border-radius:50%;border:2px solid var(--bp-white);display:flex;justify-content:center;align-items:center;font-size:.75rem;font-weight:700}.canvas-container{flex:1;position:relative;overflow:auto}canvas{width:1920px;height:1080px;display:block;background-size:cover;background-position:center}.toolbar{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;z-index:10}.btn{background:#ffffff1a;border:1px solid var(--bp-panel-border);color:var(--bp-white);padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s}.btn:hover{background:#fff3;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:var(--bp-light-blue);border-color:var(--bp-light-blue)}.btn.primary:hover{background:#2563eb}.btn.danger{background:#ef444433;border-color:#ef444480;color:#fca5a5}.btn.danger:hover{background:#ef44444d}.btn.success{background:#22c55e33;border-color:#22c55e80;color:#86efac}.btn.success:hover{background:#22c55e4d}.properties-panel{position:fixed;top:1.5rem;right:1.5rem;width:300px;padding:1rem;border-radius:.75rem;z-index:10}.prop-group{margin-bottom:.75rem}.prop-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#fffc}.color-picker{display:flex;gap:.5rem}.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}.color-swatch.active{border-color:var(--bp-white);box-shadow:0 0 0 2px #fff3}.prop-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}