.advanced-web-builder{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--primary-color:#3b82f6;--secondary-color:#6b7280;--accent-color:#10b981;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--hover-color:#f3f4f6}.component-library{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.component-item{transition:all .2s ease;cursor:grab}.component-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.component-item:active{cursor:grabbing;transform:scale(.95)}.visual-editor{background:#f9fafb}.drop-zone{min-height:100px;border:2px dashed #d1d5db;border-radius:8px;transition:all .3s ease;background:rgba(59,130,246,.05)}.drop-zone.active{border-color:var(--primary-color);background:rgba(59,130,246,.1);transform:scale(1.02)}.drop-zone.over{border-color:var(--accent-color);background:rgba(16,185,129,.1);box-shadow:0 0 20px rgba(16,185,129,.3)}.component-wrapper{position:relative;transition:all .2s ease;border:2px solid transparent;border-radius:4px}.component-wrapper:hover{border-color:rgba(59,130,246,.3);box-shadow:0 0 0 4px rgba(59,130,246,.1)}.component-wrapper.selected{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(59,130,246,.2)}.component-controls{position:absolute;top:-40px;right:0;display:flex;gap:4px;opacity:0;transition:opacity .2s ease;z-index:10}.component-wrapper.selected .component-controls,.component-wrapper:hover .component-controls{opacity:1}.control-button{background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:4px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}.control-button:hover{background:#f3f4f6;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.control-button.delete:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}.template-card{background:#fff;border-radius:12px;overflow:hidden;transition:all .3s ease;border:1px solid #e5e7eb}.template-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.1);border-color:var(--primary-color)}.template-preview{height:200px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.template-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="20" fill="%23ffffff" opacity="0.1"/><rect y="25" width="60" height="10" fill="%23ffffff" opacity="0.2"/><rect y="40" width="80" height="8" fill="%23ffffff" opacity="0.15"/><rect y="55" width="40" height="8" fill="%23ffffff" opacity="0.15"/></svg>') no-repeat 50%;background-size:80%}.code-editor{background:#1f2937;color:#f9fafb}.code-editor textarea{background:transparent;color:inherit;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.6;-moz-tab-size:2;-o-tab-size:2;tab-size:2}.code-editor textarea:focus{outline:none}.viewport-desktop{max-width:100%;margin:0 auto}.viewport-tablet{max-width:768px;margin:0 auto}.viewport-mobile{max-width:375px;margin:0 auto}.fade-in{animation:fadeIn .3s ease-in-out}.slide-in{animation:slideIn .3s ease-out}.bounce-in{animation:bounceIn .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:#f3f4f6;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#9ca3af}.loading-spinner{border:2px solid #f3f4f6;border-top:2px solid var(--primary-color);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}.tooltip:hover:after{opacity:1}.success-state{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}.error-state{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.modern-button{background:linear-gradient(135deg,var(--primary-color) 0,#1d4ed8 100%);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.modern-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s ease}.modern-button:hover:before{left:100%}.modern-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(59,130,246,.3)}.modern-button:active{transform:translateY(0)}.glass-effect{background:hsla(0,0%,100%,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.18);border-radius:12px}@media (prefers-color-scheme:dark){.advanced-web-builder{--background-color:#111827;--text-color:#f9fafb;--border-color:#374151;--hover-color:#1f2937}.template-card{background:#1f2937;border-color:#374151}.drop-zone{border-color:#4b5563;background:rgba(59,130,246,.1)}}@media print{.component-controls,.component-library,.control-button{display:none!important}.component-wrapper{border:none!important;box-shadow:none!important}}