:root{--primary-color:#0f3460;--primary-dark:#1a1a2e;--primary-light:#16213e;--accent-color:#e94560;--text-dark:#333;--text-medium:#555;--text-light:#666;--light-gray:#f5f5f5;--lighter-gray:#f8f9fa;--border-color:#e0e0e0;--white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:20px;--spacing-xl:30px;--spacing-xxl:40px;--font-xxs:9px;--font-xs:11px;--font-sm:12px;--font-md:14px;--font-lg:16px;--font-xl:18px;--font-xxl:24px;--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-xl:8px;--radius-circle:50%;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 5px #00000014;--shadow-lg:0 4px 15px #0000001a;--shadow-inset:inset 0 1px 2px #0000000d}body{color:var(--text-dark)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}body.editor-mode{overflow:hidden}body.preview-mode{overflow:auto}body.preview-mode .editor-container,body.preview-mode .editor-header,body.preview-mode .editor-panels,body.preview-mode .sidebar,body.preview-mode .toolbar{display:none!important}body.preview-mode .craftjs-renderer{max-width:100%!important;width:100%!important}a{color:#0f3460;text-decoration:none}a:hover{text-decoration:underline}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid #0f3460;outline-offset:2px}button,input,select{font-family:inherit}.container{margin:0 auto;max-width:1200px;padding:0 15px;width:100%}.text-center{text-align:center}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}.component-selected-indicator{background:var(--primary-color);border-radius:3px 3px 0 0;color:#fff;font-size:10px;left:0;padding:2px 4px;pointer-events:none;position:absolute;top:-16px;z-index:10}.component-selected:after{box-shadow:0 0 0 2px var(--primary-color)}.craft-container{box-sizing:border-box}.craft-container,.craft-text{position:relative;transition:all .2s ease}.craft-text{outline:none}.craft-text-editable{cursor:text;outline:2px dashed var(--primary-color);padding:2px}.craft-button{align-items:center;border:none;cursor:pointer;display:inline-flex;justify-content:center;outline:none;position:relative;text-decoration:none;transition:all .2s ease}.craft-button:hover{opacity:.9;transform:translateY(-1px)}.craft-image{max-width:100%;position:relative;transition:all .2s ease}.feature-item{border-radius:var(--radius-md);transition:all .2s ease}.feature-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.landing-section{padding:60px 20px;width:100%}.header-section{background-color:#1a1a2e;box-shadow:0 2px 10px #0000001a;color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:1000}.hero-section{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;overflow:hidden;position:relative}.hero-content{position:relative;z-index:2}.hero-title{font-size:56px;font-weight:700;letter-spacing:-.5px;margin-bottom:20px}.hero-subtitle{font-size:28px;font-weight:400;margin-bottom:30px;opacity:.9}.feature-section{background-color:#fff}.feature-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin:0 auto;max-width:1200px}.feature-card{background:#f5f5f5;border-radius:10px;box-shadow:0 5px 15px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.feature-card:hover{box-shadow:0 8px 20px #0000001a;transform:translateY(-5px)}.feature-title{color:#1a1a2e;font-size:24px;font-weight:700;margin-bottom:15px}.feature-description{font-size:16px;line-height:1.6}.categories-section{background-color:#f0f0f0}.categories-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.category-item{background-color:#0f3460;border-radius:30px;color:#fff;cursor:pointer;font-weight:500;padding:15px 30px;transition:all .3s ease}.category-item:hover{background-color:#e94560;transform:scale(1.05)}.testimonials-section{background-color:#fff}.testimonial-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin:0 auto;max-width:1200px}.testimonial-card{background:#f5f5f5;border-radius:10px;box-shadow:0 5px 15px #0000000d;padding:30px;transition:transform .3s ease}.testimonial-card:hover{transform:translateY(-5px)}.testimonial-text{font-style:italic;line-height:1.7;margin-bottom:20px}.pricing-section{background-color:#1a1a2e;color:#fff}.pricing-features{margin:30px 0}.cancellation-section{background-color:#f5f5f5}.footer-section{background-color:#1a1a2e;color:#fff;padding:60px 20px 40px}.footer-content{margin:0 auto;max-width:1200px}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;margin:20px 0}.footer-link{color:#ccc;font-size:14px;margin:0 15px;text-decoration:none;transition:color .3s ease}.footer-link:hover{color:#fff}button{font-family:inherit}.btn,button{cursor:pointer}.btn{border:none;border-radius:8px;display:inline-block;font-size:16px;font-weight:600;outline:none;padding:16px 32px;text-align:center;text-decoration:none;transition:all .3s}.btn-primary{background-color:#0f3460;color:#fff}.btn-primary:hover{background-color:#e94560;box-shadow:0 5px 15px #e945604d;transform:translateY(-2px)}.btn-accent{background-color:#e94560;color:#fff}.btn-accent:hover{background-color:#d63651;box-shadow:0 5px 15px #e945604d;transform:translateY(-2px)}.image-container{border-radius:8px;height:auto;max-width:100%;overflow:hidden}.image-container img{display:block;height:auto;max-width:100%;transition:transform .5s ease}.image-container:hover img{transform:scale(1.03)}@media screen and (max-width:768px){.hero-title{font-size:40px}.hero-subtitle{font-size:22px}.feature-card,.testimonial-card{margin-bottom:20px;width:100%}.hero-section{flex-direction:column}.hero-section>div{width:100%!important}}.editor-header{align-items:center;background-color:var(--primary-dark);color:var(--white);display:flex;height:60px;justify-content:space-between;padding:0 var(--spacing-lg)}.editor-header h1{font-size:var(--font-xxl);margin:0;min-width:150px}.device-breakpoints{flex-grow:1;gap:5px;margin:0 15px;max-width:600px;overflow-x:auto;padding:5px 0;scrollbar-width:thin}.device-breakpoints,.device-button{align-items:center;display:flex;justify-content:center}.device-button{background-color:initial;border:1px solid #fff3;border-radius:var(--radius-md);color:#ffffffb3;cursor:pointer;flex-direction:column;height:42px;min-width:54px;padding:4px 8px;transition:all .2s ease}.device-button:hover{background-color:#ffffff1a;color:#fff;transform:translateY(-1px)}.device-button.active{background-color:#fff3;border-color:#ffffff80;box-shadow:0 0 5px #e9456080;color:#fff}.device-icon{font-size:var(--font-lg);margin-bottom:2px}.device-name{font-size:var(--font-xxs);white-space:nowrap}.editor-actions{display:flex;gap:10px}.preview-toggle{background-color:var(--primary-color);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);transition:background-color .2s}.preview-toggle:hover{background-color:var(--primary-light)}.preview-toggle.active{background-color:var(--accent-color)}.preview-new-window{background-color:#2196f3;border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);transition:background-color .2s}.preview-new-window:hover{background-color:#0b7dda}.export-json{background-color:#4caf50;border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);transition:background-color .2s}.export-json:hover{background-color:#3e8e41}.sidebar{background-color:var(--lighter-gray);border-right:1px solid var(--border-color);display:flex;flex-direction:column;min-width:280px;overflow-y:auto;padding:0}.action-buttons{border-bottom:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:5px;padding:10px}.action-btn{align-items:center;background-color:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;display:flex;flex:1 1;font-size:var(--font-sm);gap:5px;justify-content:center;min-width:80px;padding:6px 8px;transition:all .2s}.action-btn:hover{background-color:var(--light-gray);border-color:#ccc}.action-btn.danger{border-color:var(--accent-color);color:var(--accent-color)}.action-btn.danger:hover{background-color:#fff0f0}.action-btn.small{font-size:var(--font-xs);padding:4px 8px}.tabs{border-bottom:1px solid var(--border-color);display:flex}.tab-btn{background-color:initial;border:none;border-bottom:2px solid #0000;cursor:pointer;flex:1 1;font-weight:500;padding:12px 0;transition:all .2s}.tab-btn:hover{background-color:var(--light-gray)}.tab-btn.active{border-bottom-color:var(--primary-color);color:var(--primary-color)}.components-tab,.sections-tab,.templates-tab{overflow-y:auto;padding:15px}.customization-info{margin:20px 0}.info-box{background-color:#e3f2fd;border:1px solid #90caf9;border-radius:var(--radius-md);margin-bottom:20px;padding:15px}.info-box h4{color:#1565c0;font-size:var(--font-sm);margin-bottom:10px;margin-top:0}.info-box p{font-size:var(--font-sm);line-height:1.4;margin:5px 0}.components-tab h3,.sections-tab h3,.templates-tab h3{color:var(--text-dark);font-size:var(--font-md);font-weight:600;margin-bottom:15px;margin-top:10px}.components-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:20px}.component-btn{align-items:center;background-color:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:10px 5px;text-align:center;transition:all .2s}.component-btn:hover{background-color:var(--light-gray);border-color:#ccc;box-shadow:var(--shadow-md);transform:translateY(-2px)}.component-icon{color:var(--primary-color);font-size:20px;margin-bottom:5px}.section-btn{background-color:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;display:block;margin-bottom:15px;padding:15px;transition:all .2s;width:100%}.section-btn:hover{background-color:var(--light-gray);border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.section-preview{font-weight:500}.template-item{background-color:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:20px;padding:15px}.template-item h4{margin-bottom:10px;margin-top:0}.template-btn{background-color:var(--primary-color);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;padding:8px 0;transition:background-color .2s;width:100%}.template-btn:hover{background-color:var(--primary-light)}.settings-panel{background-color:var(--white);border-top:1px solid var(--border-color);box-shadow:0 0 10px #00000014;display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding-bottom:20px}.settings-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));border-bottom:1px solid #ffffff1a;box-shadow:0 3px 15px #00000026;color:#fff;padding:var(--spacing-md);position:-webkit-sticky;position:sticky;top:0;z-index:10}.settings-header h3{font-size:var(--font-lg);font-weight:600;letter-spacing:.3px;margin:0 0 8px;text-shadow:0 1px 2px #0000001a}.component-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.component-actions button{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffff26;border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;font-size:var(--font-sm);font-weight:500;gap:5px;padding:8px 14px;transition:all .2s}.component-actions button:hover{background:#ffffff40;box-shadow:0 3px 8px #00000026;transform:translateY(-1px)}.component-actions button.active{background:var(--accent-color);box-shadow:inset 0 0 0 1px #fff3}.delete-btn.small{background:#e945604d!important}.delete-btn.small:hover{background:#e9456080!important}.settings-tabs{background-color:var(--light-gray);border-bottom:1px solid var(--border-color);box-shadow:0 2px 8px #00000014;display:flex;padding:0 var(--spacing-md);position:-webkit-sticky;position:sticky;top:76px;z-index:9}.settings-tab-btn{background:#0000;border:none;border-bottom:2px solid #0000;color:var(--text-medium);cursor:pointer;font-size:var(--font-sm);font-weight:600;padding:14px var(--spacing-md);position:relative;transition:all .25s}.settings-tab-btn.active,.settings-tab-btn:hover{color:var(--primary-color)}.settings-tab-btn.active{border-bottom-color:var(--primary-color)}.settings-tab-btn.active:after{background-color:var(--primary-color);bottom:-1px;box-shadow:0 0 8px var(--primary-color);content:"";height:3px;left:0;position:absolute;width:100%}.settings-content{background-color:#f8fafc;padding:var(--spacing-md)}.settings-decoration,.settings-margin,.settings-properties,.settings-typography{background-color:#fff;border:1px solid #0000000d;border-radius:var(--radius-lg);box-shadow:0 1px 5px #00000014,0 3px 20px #0000000a;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);transition:all .3s ease}.settings-field{margin-bottom:var(--spacing-lg)}.settings-field:last-child{margin-bottom:var(--spacing-sm)}.settings-field label{color:var(--text-dark);display:block;font-size:var(--font-sm);font-weight:600;letter-spacing:.3px;margin-bottom:8px}.settings-field input[type=number],.settings-field input[type=text],.settings-field select,.settings-field textarea{background-color:#f9fafc;border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-inset);font-size:var(--font-sm);padding:10px 14px;transition:all .25s;width:100%}.settings-field input[type=number]:focus,.settings-field input[type=text]:focus,.settings-field select:focus,.settings-field textarea:focus{background-color:#fff;border-color:var(--primary-color);box-shadow:0 0 0 3px #0f34601f;outline:none}.settings-field textarea{line-height:1.5;min-height:100px;resize:vertical}.settings-field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;cursor:pointer;padding-right:40px}.color-input-container{display:flex;gap:10px}.color-input-container input[type=color]{border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:inset 0 1px 3px #0000001a;cursor:pointer;height:38px;padding:3px;width:50px}.color-input-container input[type=text]{flex:1 1}.slider-with-value{align-items:center;display:flex;gap:12px}.slider-with-value input[type=range]{-webkit-appearance:none;background:linear-gradient(to right,var(--primary-light),var(--primary-color));border-radius:6px;flex:1 1;height:8px;outline:none}.slider-with-value input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid var(--primary-color);border-radius:50%;box-shadow:0 1px 5px #0003;cursor:pointer;height:20px;-webkit-transition:all .25s;transition:all .25s;width:20px}.slider-with-value input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-light);transform:scale(1.1)}.slider-with-value input[type=number]{border-radius:var(--radius-md);font-weight:500;padding:8px;text-align:center;width:65px}.settings-specific-section{background-color:#f8fafc;border:1px solid #0000000d;border-radius:var(--radius-lg);box-shadow:0 4px 15px #0000000a;margin-top:var(--spacing-xl);padding:20px}.settings-specific-section h4{border-bottom:2px solid var(--primary-light);color:var(--primary-color);font-size:var(--font-md);font-weight:600;letter-spacing:.5px;margin:0 0 16px;padding-bottom:12px}.no-settings-message{animation:move-bg 3s linear infinite;background-color:#f9f9f9;background-image:linear-gradient(135deg,#00000005 25%,#0000 0,#0000 50%,#00000005 0,#00000005 75%,#0000 0,#0000);background-size:20px 20px;border-left:4px solid var(--primary-color);border-radius:var(--radius-lg);font-size:var(--font-sm);padding:var(--spacing-lg)}@keyframes move-bg{0%{background-position:0 0}to{background-position:40px 40px}}.no-settings-message p{line-height:1.6;margin:0 0 8px}.no-settings-message p:last-child{color:var(--text-medium);font-style:italic;margin-bottom:0}.spacing-visualization{background-color:#fff;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px #0000000d,0 3px 10px #0000000a;margin:20px 0;padding:var(--spacing-xl);text-align:center}.margin-box{background-color:#f0f7ff;border:2px dashed #90caf9;border-radius:var(--radius-lg);padding:var(--spacing-xl);position:relative;transition:all .25s}.margin-box:hover{background-color:#e3f2fd}.margin-box label{background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;color:var(--primary-color);font-size:var(--font-xs);font-weight:600;left:10px;padding:2px 8px;position:absolute;top:-12px}.padding-box{background-color:#fff8e1;border:2px dashed #ffe082;border-radius:6px;padding:var(--spacing-xl);position:relative;transition:all .25s}.padding-box:hover{background-color:#ffecb3}.padding-box label{background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;color:#ffa000;font-size:var(--font-xs);font-weight:600;left:10px;padding:2px 8px;position:absolute;top:-12px}.content-box{align-items:center;background-color:#e8f5e9;border:2px solid #a5d6a7;border-radius:6px;display:flex;justify-content:center;min-height:60px;padding:20px;position:relative;transition:all .25s}.content-box:hover{background-color:#c8e6c9}.content-box label{background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;color:#4caf50;font-size:var(--font-xs);font-weight:600;left:10px;padding:2px 8px;position:absolute;top:-12px}.text-component-settings{background:linear-gradient(90deg,#1976d20d,#0000);border-left:3px solid #1976d2;border-radius:6px;margin-top:12px;padding:16px}.button-component-settings{background:linear-gradient(90deg,#4caf500d,#0000);border-left:3px solid #4caf50;border-radius:6px;margin-top:12px;padding:16px}.container-component-settings{background:linear-gradient(90deg,#ff98000d,#0000);border-left:3px solid #ff9800;border-radius:6px;margin-top:12px;padding:16px}.image-component-settings{background:linear-gradient(90deg,#9c27b00d,#0000);border-left:3px solid #9c27b0;border-radius:6px;margin-top:12px;padding:16px}.settings-empty{align-items:center;background-color:#f9f9f9;background-image:radial-gradient(circle at 1px 1px,#00000014 1px,#0000 0),radial-gradient(circle at 1px 1px,#00000014 1px,#0000 0);background-position:0 0,10px 10px;background-size:20px 20px;display:flex;flex-direction:column;height:100%;justify-content:center;padding:var(--spacing-xxl);text-align:center}.settings-empty h3{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;color:var(--text-dark);font-size:var(--font-xxl);margin:0 0 15px;text-shadow:0 2px 10px #0000000d}.settings-empty p{color:var(--text-medium);font-size:var(--font-md);line-height:1.6;margin:0 0 30px;max-width:280px}.settings-empty .empty-illustration{align-items:center;animation:pulse 2s infinite;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;box-shadow:0 5px 20px #0f346066;color:#fff;display:flex;font-size:32px;height:70px;justify-content:center;margin:20px 0;width:70px}@keyframes pulse{0%{box-shadow:0 0 0 0 #0f346066;transform:scale(.95)}70%{box-shadow:0 0 0 15px #0f346000;transform:scale(1)}to{box-shadow:0 0 0 0 #0f346000;transform:scale(.95)}}.settings-field input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;border:2px solid var(--border-color);border-radius:4px;cursor:pointer;height:22px;outline:none;position:relative;transition:all .2s;width:22px}.settings-field input[type=checkbox]:hover{border-color:var(--primary-light)}.settings-field input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.settings-field input[type=checkbox]:checked:after{border:solid #fff;border-width:0 2px 2px 0;content:"";height:10px;left:7px;position:absolute;top:3px;transform:rotate(45deg);width:6px}.layers-panel{background-color:var(--white);flex:1 1;flex-direction:column;max-height:40%;overflow-y:auto}.layers-panel,.panel-header{border-bottom:1px solid var(--border-color);display:flex}.panel-header{align-items:center;background-color:var(--light-gray);justify-content:space-between;padding:10px 15px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.panel-header h3{color:var(--text-dark);font-size:var(--font-md);font-weight:600;margin:0}.tool-toggle-btn{background:none;border:none;border-radius:3px;cursor:pointer;font-size:var(--font-md);padding:2px 6px;transition:all .2s ease}.tool-toggle-btn:hover{background-color:#ddd}.tool-toggle-btn.active{background-color:var(--primary-color);box-shadow:0 1px 3px #0000001a;color:#fff}.component-quick-tools{animation:fadeIn .3s ease;background-color:#f8f8f8;border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px #00000008;padding:12px 15px}.component-quick-tools h4{color:var(--text-medium);font-size:var(--font-sm);font-weight:600;margin:0 0 10px}.tool-buttons{display:flex;flex-wrap:wrap;gap:6px}.tool-btn{align-items:center;background-color:var(--white);border:1px solid #ddd;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:#444;cursor:pointer;display:flex;font-size:var(--font-xs);font-weight:500;gap:5px;justify-content:center;min-width:70px;padding:5px 10px;transition:all .2s}.tool-btn:hover{background-color:var(--light-gray);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tool-btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.tool-btn.active{background-color:var(--primary-color);border-color:#0a2a4a;color:#fff}.tool-btn.delete{border-color:#ffcdd2;color:var(--accent-color)}.tool-btn.delete:hover{background-color:#ffebee;color:#d32f2f}.layers-container{flex:1 1;overflow-y:auto;padding:5px 0}.layer-item{align-items:center;border-left:3px solid #0000;cursor:pointer;display:flex;font-size:var(--font-sm);padding:8px 15px;transition:all .2s;-webkit-user-select:none;user-select:none}.layer-item:hover{background-color:#f7f9fc}.layer-item.selected{background-color:#e3f2fd;border-left-color:var(--primary-color)}.layer-item.hovered{background-color:var(--light-gray)}.layer-item.hidden{color:#888;font-style:italic;opacity:.6}.layer-item.hidden .layer-name{text-decoration:line-through}.layer-toggle{align-items:center;color:#777;cursor:pointer;display:flex;font-size:10px;height:14px;justify-content:center;margin-right:6px;transition:transform .2s;width:14px}.layer-toggle.expanded{transform:rotate(0deg)}.layer-toggle:not(.expanded){transform:rotate(-90deg)}.layer-name{flex-grow:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s}.layer-item:hover .layer-actions{opacity:1}.layer-visibility-toggle{background:none;border:none;color:#555;cursor:pointer;font-size:var(--font-sm);padding:0;transition:all .2s}.layer-visibility-toggle:hover{color:var(--primary-color);transform:scale(1.1)}.layer-visibility-toggle.hidden{color:#888;opacity:.5}.layer-delete-btn{background:none;border:none;color:var(--accent-color);cursor:pointer;font-size:var(--font-sm);padding:0;transition:all .2s}.layer-delete-btn:hover{color:#d32f2f;transform:scale(1.1)}.layers-empty-selection{align-items:center;background-color:#f9f9f9;border-top:1px solid var(--border-color);color:#888;display:flex;flex-direction:column;justify-content:center;margin-top:auto;min-height:120px;padding:var(--spacing-lg);text-align:center}.layers-empty-selection h4{color:var(--text-medium);font-size:var(--font-md);margin:0 0 10px}.layers-empty-selection p{font-size:var(--font-sm);line-height:1.5;margin:0 0 15px;max-width:250px}.empty-illustration{animation:float 2s ease-in-out infinite;font-size:24px;margin-top:5px}.no-components-message{background-color:#f9f9f9;border-radius:var(--radius-md);box-shadow:inset 0 0 5px #00000008;color:#888;font-size:var(--font-sm);font-style:italic;margin:15px;padding:25px 20px;text-align:center}.right-panel{background-color:var(--lighter-gray);border-left:1px solid var(--border-color);min-width:320px;overflow:auto;position:relative;z-index:2}.panel-container{display:flex;flex-direction:column;height:100%}.panel-tabs{background:linear-gradient(to right,var(--primary-dark),var(--primary-color));border-bottom:1px solid #ffffff1a;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:10}.panel-tab-btn{align-items:center;background:#0000;border:none;color:#fffc;cursor:pointer;display:flex;flex:1 1;font-size:var(--font-md);font-weight:500;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md) 10px;position:relative;transition:all .2s ease}.panel-tab-btn:hover{background-color:#ffffff1a;color:#fff}.panel-tab-btn.active{background-color:#ffffff26;color:#fff}.panel-tab-btn.active:after{background-color:var(--accent-color);border-radius:3px 3px 0 0;bottom:0;content:"";height:3px;left:20%;position:absolute;width:60%}.panel-tab-icon{font-size:var(--font-lg)}.panel-content{display:flex;flex:1 1;flex-direction:column;overflow:auto}.panel-content .layers-panel,.panel-content .settings-panel{border-top:none;flex:1 1}.panel-content .layers-panel .panel-header,.panel-content .settings-panel .settings-header{position:-webkit-sticky;position:sticky;top:0;z-index:5}.panel-content .settings-panel .settings-header{display:none}.canvas-container-wrapper{align-items:flex-start;background-color:var(--light-gray);display:flex;flex:1 1;justify-content:center;overflow:auto;padding:var(--spacing-lg);position:relative}.canvas-container{background-color:var(--white);border:2px solid #0000;box-shadow:var(--shadow-lg);box-sizing:border-box;flex-shrink:0;margin:0 auto;min-height:480px;min-width:0;min-width:auto;padding:var(--spacing-lg);position:relative;transition:width .3s ease-in-out;width:100%;z-index:1}.device-label{background-color:var(--primary-color);border-radius:var(--radius-md);box-shadow:0 2px 5px #0003;color:#fff;font-size:var(--font-xs);left:50%;padding:6px var(--spacing-sm);position:absolute;top:-35px;transform:translateX(-50%);white-space:nowrap;z-index:100}.canvas-container[style*="width: 320px"],.canvas-container[style*="width: 375px"],.canvas-container[style*="width: 425px"]{margin-top:40px}.canvas-frame-wrapper{min-width:0;position:relative;width:100%}.canvas-frame-wrapper>div{max-width:100%!important;width:100%!important}.resize-handle{background-color:var(--primary-color);border:2px solid var(--white);border-radius:var(--radius-circle);box-shadow:0 0 5px #0003;cursor:nwse-resize;height:14px;position:absolute;width:14px;z-index:100}.resize-handle-br{bottom:15px;right:15px}.canvas-size-indicator{background-color:#0f3460cc;border-radius:var(--radius-md);bottom:40px;box-shadow:0 2px 6px #0003;color:#fff;font-size:var(--font-sm);padding:5px 10px;pointer-events:none;position:absolute;right:40px;z-index:101}body.resizing{cursor:nwse-resize;-webkit-user-select:none;user-select:none}body.resizing *{pointer-events:none}body.resizing .resize-handle{pointer-events:auto}.editor-container{overflow:hidden;position:relative}.editor-container.preview-mode .editor-panels,.editor-container.preview-mode .sidebar{display:none}.editor-container.preview-mode .canvas-container-wrapper{padding:0}.editor-container.preview-mode .canvas-container{border:none;box-shadow:none;margin:0 auto;min-height:calc(100vh - 60px);overflow:auto;width:100%!important}.preview-page{background-color:#fff;height:100vh;overflow-x:hidden;overflow-y:auto;position:relative;width:100%;z-index:10}.preview-mode body{margin:0;overflow:auto;padding:0}.preview-renderer{min-height:100vh;width:100%}.preview-page .landing-page-container{margin:0;max-width:100%;min-height:100vh;padding:0;width:100%}.preview-loading{align-items:center;color:#666;display:flex;font-size:24px;height:100vh;justify-content:center}.preview-error{background-color:#fff3f3;color:#c92a2a}.preview-empty,.preview-error{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center;padding:20px;text-align:center}.preview-empty{font-size:20px}.preview-empty,.preview-placeholder{background-color:#f8f9fa;color:#6c757d}.preview-placeholder{border:1px dashed #dee2e6;display:none;padding:20px;text-align:center}.preview-page .craftjs-renderer{min-height:100vh;overflow:visible;width:100%!important}.preview-page [class*=Canvas],.preview-page [class*=canvas-]{border:none!important;box-shadow:none!important;margin:0!important;max-width:100%!important;min-height:100vh;overflow:visible!important;padding:0!important;width:100%!important}.preview-page .landing-section{display:block;position:relative;width:100%}.preview-page [class*=component-selected],.preview-page [class*=drag-handle],.preview-page [class*=hover-indicator],.preview-page [class*=resize-handle]{display:none!important}.preview-page h1,.preview-page h2,.preview-page h3,.preview-page h4,.preview-page h5,.preview-page h6,.preview-page p{color:inherit}.preview-page .craftjs-editor,.preview-page .craftjs-editor *{pointer-events:none!important}.preview-page .craftjs-renderer,.preview-page .craftjs-renderer *{pointer-events:auto!important}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}.App{height:100vh;overflow:hidden;width:100%}.component-selected:after{border-radius:2px;box-shadow:0 0 0 2px #007bff;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.delete-btn:hover{background-color:#ff7875}.editor-container{display:flex;height:calc(100vh - 60px);width:100%}.sidebar{flex-shrink:0;width:280px}.canvas-container{flex:1 1;overflow-y:auto}.right-panel{background-color:#f8f9fa;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:320px}.file-actions-container{background-color:#f5f5f5;border-top:1px solid #e0e0e0;bottom:0;display:flex;justify-content:space-between;left:0;padding:15px 20px;position:fixed;right:0;z-index:900}.file-save-container,.file-upload-container{display:flex;gap:10px}.btn-save,.btn-upload{border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 16px;transition:all .2s ease}.btn-upload{background-color:#f8f9fa;color:#333}.btn-upload:hover{background-color:#e9ecef}.btn-save{background-color:#4285f4;border-color:#4285f4;color:#fff}.btn-save:hover{background-color:#3367d6}.btn-save:disabled,.btn-upload:disabled{background-color:#e0e0e0;border-color:#d0d0d0;color:#939393;cursor:not-allowed}.error-message{background-color:#fff0f0;border-left:4px solid #d32f2f;border-radius:4px;bottom:70px;box-shadow:0 2px 4px #0000001a;color:#d32f2f;left:20px;margin:10px 0;padding:10px 15px;position:fixed;right:20px;z-index:1000}
/*# sourceMappingURL=main.635727c5.css.map*/