.bg-grid{background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 0);background-size:20px 20px;background-position:0 0,0 0}.page-element{transition:all .2s ease;position:relative}.page-element:hover{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-element.selected{outline:2px solid #3b82f6;outline-offset:2px;box-shadow:0 0 0 4px rgba(59,130,246,.1)}.page-element.dragging{opacity:.8;z-index:1000}.element-toolbar{position:absolute;top:-36px;left:0;background:#3b82f6;color:white;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .2s ease;z-index:10}.page-element.selected .element-toolbar,.page-element:hover .element-toolbar{opacity:1}.element-toolbar:after{content:"";position:absolute;top:100%;left:8px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #3b82f6}.inline-edit{border:none;outline:none;background:rgba(59,130,246,.1);border-radius:2px;padding:2px}.inline-edit:focus{background:rgba(59,130,246,.2);outline:2px solid #3b82f6;outline-offset:2px}.component-item{transition:all .2s ease;cursor:grab}.component-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.component-item:active{cursor:grabbing;transform:scale(.98)}.device-frame{position:relative;background:#1a1a1a;border-radius:24px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,.3)}.device-frame.mobile{width:375px;height:667px}.device-frame.tablet{width:768px;height:1024px}.device-frame.desktop{width:100%;height:100%;border-radius:8px;background:white;box-shadow:0 4px 24px rgba(0,0,0,.1)}.device-frame.mobile:before{top:8px;width:60px;z-index:10}.device-frame.mobile:after,.device-frame.mobile:before{content:"";position:absolute;left:50%;transform:translateX(-50%);height:4px;background:#333;border-radius:2px}.device-frame.mobile:after{bottom:8px;width:40px}.canvas-controls{position:absolute;top:16px;right:16px;display:flex;gap:8px;z-index:100}.canvas-control{width:32px;height:32px;border-radius:50%;background:white;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.1)}.canvas-control:hover{background:#f3f4f6;transform:scale(1.05)}.canvas-control.active{background:#3b82f6;color:white}.properties-panel{transition:all .3s ease}.properties-panel.collapsed{transform:translateX(100%)}.drop-zone{border:2px dashed #d1d5db;border-radius:8px;background:rgba(59,130,246,.05);transition:all .2s ease}.drop-zone.active{border-color:#3b82f6;background:rgba(59,130,246,.1)}.loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:1000}.loading-spinner{width:24px;height:24px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:768px){.device-frame.desktop,.device-frame.tablet{width:100%;max-width:100%}.canvas-controls{position:fixed;top:auto;bottom:16px;right:16px}.element-toolbar{font-size:10px;padding:2px 6px}}.component-preview{border:1px solid #e5e7eb;border-radius:4px;padding:8px;margin:4px 0;background:white;cursor:pointer;transition:all .2s ease}.component-preview:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.1)}.editable-text{outline:none;transition:all .2s ease}.editable-text:focus{background:rgba(59,130,246,.1);border-radius:2px;padding:2px 4px;margin:-2px -4px}.image-upload-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;border-radius:inherit}.page-element:hover .image-upload-overlay{opacity:1}.upload-button{background:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:all .2s ease}.upload-button:hover{background:#f3f4f6;transform:scale(1.05)}.history-button{transition:all .2s ease}.history-button:disabled{opacity:.5;cursor:not-allowed}.history-button:not(:disabled):hover{background:#f3f4f6;transform:scale(1.05)}.save-indicator{position:fixed;top:20px;right:20px;background:#10b981;color:white;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;opacity:0;transform:translateY(-10px);transition:all .3s ease;z-index:1000}.save-indicator.show{opacity:1;transform:translateY(0)}.preview-mode-selector{background:#f3f4f6;border-radius:8px;padding:4px;display:flex;gap:2px}.preview-mode-button{padding:6px 8px;border-radius:4px;border:none;background:transparent;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.preview-mode-button:hover{background:rgba(255,255,255,.7)}.preview-mode-button.active{background:white;box-shadow:0 1px 3px rgba(0,0,0,.1)}