.cms-sidebar{box-shadow:0 1px 2px var(--shadow-color);background-color:var(--surface-color);border-right:1px solid var(--border-color);border-radius:0 0 0 12px;padding:24px}.cms-sidebar .sidebar-title{color:var(--font-color-muted);text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:600}.cms-sidebar .sidebar-title-margin{margin-bottom:16px}.cms-sidebar .sidebar-section-title{margin-top:24px}.cms-sidebar .element-card{border:1px solid var(--border-color);background-color:var(--surface-color);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;transition:all .2s;display:flex}.cms-sidebar .element-card:hover{border-color:var(--primary-color);box-shadow:0 4px 6px var(--shadow-color)}.cms-sidebar .element-card-icon-wrapper{background-color:var(--gray-100);color:var(--font-color-muted);border-radius:8px;padding:8px;transition:all .2s}.cms-sidebar .element-card:hover .element-card-icon-wrapper{background-color:var(--primary-200);color:var(--primary-color)}.cms-sidebar .element-card-icon{width:24px;height:24px}.cms-sidebar .element-card-label{color:var(--font-color);text-align:center;font-size:12px;font-weight:500;transition:color .2s}.cms-sidebar .element-card:hover .element-card-label{color:var(--primary-color)}.image-component-wrapper{display:inline-block;position:relative}.image-component-wrapper:hover .image-actions{opacity:1;transform:translateY(0)}.image-component-preview{object-fit:cover;border-radius:4px;width:160px;height:160px;margin-top:12px}.image-upload-box{border:2px dashed var(--border-color);background-color:var(--gray-50);cursor:pointer;text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;min-height:220px;margin:20px;padding:24px;transition:all .3s;display:flex}.image-upload-box:hover{background-color:var(--gray-100);border-color:var(--primary-400)}.image-upload-icon-wrapper{background-color:var(--surface-color);width:64px;height:64px;box-shadow:0 1px 2px var(--shadow-color);border-radius:16px;justify-content:center;align-items:center;display:flex}.image-upload-icon{color:var(--primary-color);font-size:36px}.image-upload-title{color:var(--font-color);font-weight:500}.image-upload-subtitle{color:var(--font-color-muted);margin-top:4px;font-size:14px}.image-actions{color:#fff;opacity:0;background-color:#000000b3;border-radius:6px;gap:8px;padding:8px;transition:all .2s;display:flex;position:absolute;top:8px;right:8px;transform:translateY(4px)}.image-action-icon{cursor:pointer}.image-input{display:none}.toolbar-button{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-weight:900;transition:all .1s ease-out;display:flex;position:relative}.toolbar-button-active{background-color:var(--surface-color);color:var(--font-color);box-shadow:0 1px 2px var(--shadow-color)}.toolbar-button-inactive{color:var(--font-color-muted)}.toolbar-button-inactive:hover{background-color:var(--gray-200);color:var(--font-color)}.rich-text-wrapper{position:relative}.rich-text-toolbar{z-index:9999;background-color:var(--surface-color);color:var(--font-color);box-shadow:0 10px 15px var(--shadow-color);border-radius:12px;align-items:center;gap:4px;padding:8px;display:flex;position:absolute}.rich-text-content{outline:none}.rich-text-content ul{margin:4px 0;padding-left:24px;list-style-type:disc}.rich-text-content ol{margin:4px 0;padding-left:24px;list-style-type:decimal}.toolbar-text-dropdown{color:var(--font-color);background:0 0;border:none;border-radius:8px;justify-content:space-between;align-items:center;gap:2px;padding:0 10px;transition:all .2s;display:flex}.toolbar-text-dropdown:hover{background-color:var(--gray-200)}.toolbar-dropdown-item{cursor:pointer;border-radius:8px;padding:1px 8px;transition:all .2s}.toolbar-dropdown-item:hover{background-color:var(--gray-100)}.toolbar-dropdown-item-active{background-color:var(--primary-color);color:#fff}.custom-dropdown.ar{direction:rtl}.custom-dropdown{z-index:9999;animation:.15s ease-in-out dropdownFade;position:fixed;box-shadow:0 4px 12px #00000026}.dropdownStyles{background:var(--surface-color);border:1px solid var(--border-color);border-radius:6px;min-width:160px;padding:8px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.column-layout{gap:8px;width:100%;margin-bottom:5px;display:grid}.column-item{text-align:center;color:var(--font-color-muted);border:2px solid #0000;border-radius:6px;transition:all .2s;position:relative}.column-item:hover{background-color:var(--gray-100)}.column-item-empty{border:1px dashed var(--border-color);background-color:var(--gray-50)}.column-item-drag-over{background-color:var(--success-300)}.column-item-selected{border:2px solid var(--primary-400)}.column-item-padding{padding:16px}.column-delete-btn{z-index:50;color:var(--error-color-primary);cursor:pointer;transition:all .2s;position:absolute;top:4px;left:4px}.column-delete-btn:hover{color:var(--error-600)}.canvas-header{background-color:var(--surface-color);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:0 20px;display:flex}.canvas-code-btn{background-color:var(--success-color);color:#fff;box-shadow:0 1px 2px var(--shadow-color);cursor:pointer;border:none;border-radius:2px;margin:12px 0;padding:8px 12px;transition:all .2s}.canvas-code-btn:hover{transform:scale(1.02)}.canvas-code-btn:active{transform:scale(.98)}.canvas-wrapper{justify-content:center;margin:40px 8px;display:flex}.canvas-inner{width:100%;max-width:1280px}.canvas-dropzone{background-color:var(--surface-color);box-shadow:0 1px 2px var(--shadow-color);border-style:dashed;border-width:2px;border-radius:24px;min-height:500px;padding:24px;transition:all .2s}.canvas-dropzone-default{border-color:var(--border-color)}.canvas-dropzone-active{background-color:var(--primary-100);border-color:var(--primary-color)}.normal-field.form-control{font-size:var(--input-font-size);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);background-color:var(--input-background);color:var(--input-color);padding:var(--input-padding-y) var(--input-padding-x)!important;margin-bottom:var(--input-margin-bottom)!important}.normal-field.form-control:focus{border-color:var(--input-border-color-focus);box-shadow:none}.normal-field.form-control::placeholder{color:var(--font-color-muted);opacity:1}input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.end-of-field-icon{width:15px;height:15px;position:absolute;top:40px;left:30px}.form-container .end-of-field-icon{top:10px}.field-wrapper input[type=file]{border:0;padding:3px 10px;overflow:hidden}.field-wrapper:has(input[type=file]){margin-top:5px}.field-wrapper{position:relative}.field-wrapper .end-of-field{width:20px;height:20px;position:absolute;top:36px;left:25px}.field-wrapper input[disabled]{opacity:.9;border-color:var(--input-border-color);background-color:var(--input-background-disabled);cursor:not-allowed!important}.field-error{color:var(--input-border-color-error);margin-top:4px;font-size:.875rem}.normal-field.is-invalid,.normal-field.is-invalid:focus{border-color:var(--input-border-color-error);background-color:var(--input-background-error);border-color:#dcdcdc}.color-picker-wrapper{flex-direction:column;gap:6px;display:flex}.color-picker-label{color:var(--font-color-muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}.color-picker-input-wrapper{border:1px solid var(--border-color);background-color:var(--surface-color);border-radius:8px;align-items:center;gap:8px;padding:6px 10px;transition:all .2s;display:flex}.color-picker-input-wrapper:focus-within{box-shadow:0 0 0 2px var(--primary-color);border-color:#0000}.color-picker-swatch{border:1px solid var(--border-color);cursor:pointer;width:24px;height:24px;box-shadow:0 1px 2px var(--shadow-color);border-radius:6px;flex-shrink:0;position:relative;overflow:hidden}.color-picker-preview{width:100%;height:100%}.color-picker-hidden-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.color-picker-text-input{color:var(--font-color);background:0 0;border:none;outline:none;flex:1;font-family:monospace;font-size:14px}.radio-group{gap:8px;display:flex}.radio-item{cursor:pointer;border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 12px;transition:all .2s;display:flex}.radio-item:hover{background-color:var(--surface-muted-color)}.radio-item-active{border-color:var(--primary-color);background-color:var(--primary-100);color:var(--primary-color)}.radio-input{display:none}.radio-icon{align-items:center;font-size:18px;display:flex}.radio-label{font-size:14px}.field-wrapper{flex-direction:column;gap:6px;display:flex}.field-grid{width:100%}.field-label{color:var(--font-color-muted);font-size:12px;font-weight:500}.field-input{border:1px solid var(--border-color);border-radius:8px;outline:none;width:100%;padding:8px 10px;font-size:14px;transition:all .2s}.field-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color)}.field-icon-end{cursor:pointer;position:absolute;right:10px}.range-wrapper{flex-direction:column;gap:6px;display:flex}.range-header{justify-content:space-between;align-items:center;display:flex}.range-label{color:var(--font-color-muted);text-transform:uppercase;font-size:12px;font-weight:500}.range-value{color:var(--font-color-muted);background:var(--surface-muted-color);border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px}input[type=range]{height:6px;accent-color:var(--primary-color);border-radius:999px}.settings-container{background-color:var(--surface-color);border-left:1px solid var(--border-color);border-radius:0 0 12px;flex-direction:column;gap:16px;padding:20px;display:flex}.settings-title{color:var(--font-color-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;font-size:14px;font-weight:600}.settings-radio-label{color:var(--font-color-muted);text-transform:uppercase;margin-bottom:4px;font-size:12px;font-weight:500}.popup .buttons{text-align:center;margin-top:5px}.modal-body{padding:1.4rem 2.375rem}.popup .btn-outline-success{color:var(--primary-700);border-color:var(--primary-700)}.popup .btn-outline-success:hover,#insertItemForm .btn-outline-success:not(:disabled):not(.disabled):active{background-color:var(--primary-700);border-color:var(--primary-700);color:#fff;box-shadow:0px 0px 6px var(--shadow-color)}.popup .btn-outline-success:focus{color:#fff;box-shadow:0px 0px 6px var(--shadow-color)!important;background-color:var(--primary-700)!important;border-color:var(--primary-700)!important}.popup:has(.popup-Img){text-align:center}.header-title{justify-content:space-between;margin-bottom:2rem;display:flex}.popup-btn{background-color:var(--primary-color);color:#fff;text-align:center;cursor:pointer;border-radius:8px;width:100%;margin:1rem auto auto;padding:13.5px;font-size:14px;transition:all .3s}.popup-btn:hover{background-color:var(--primary-600)}.popup-btn:disabled{opacity:.5;cursor:not-allowed!important}.popup #Image{max-width:100%}.modal-content{background-color:var(--surface-color);border:none}@media (width>=768px){.modal-xl{width:90%;max-width:900px}}.offcanvas-header{justify-content:space-between;display:flex}.offcanvas-header .btn-close{color:var(--font-color)!important}.offcanvas{background-color:var(--surface-color);color:var(--font-color)}.offcanvas.offcanvas-start{border-radius:0 12px 12px 0}.offcanvas.offcanvas-end{border-radius:12px 0 0 12px}.offcanvas.offcanvas-top{border-radius:0 0 12px 12px}.offcanvas.offcanvas-bottom{border-radius:12px 12px 0 0;height:80dvh}.offcanvas-body{scrollbar-width:thin;scrollbar-color:var(--primary-500) transparent}.offcanvas-body::-webkit-scrollbar{width:8px}.offcanvas-body::-webkit-scrollbar-track{background:0 0}.offcanvas-body::-webkit-scrollbar-thumb{background-color:var(--primary-500);background-clip:content-box;border:2px solid #0000;border-radius:999px}.offcanvas-body::-webkit-scrollbar-thumb:hover{background-color:var(--primary-600)}.offcanvas-body::-webkit-scrollbar-corner{background:0 0}.html-viewer-popup{--bg:#1d245f;--sidebar:#13173b;flex-direction:column;gap:20px;width:100%;display:flex}.html-viewer-popup .html-ide{background:var(--bg);color:#d4d4d4;white-space:pre-wrap;word-break:break-word;direction:ltr;border-radius:16px;min-height:400px;max-height:80vh;margin:auto;font-size:14px;line-height:1.8;position:relative;overflow:auto}.html-viewer-popup .html-ide:before{content:"";background:radial-gradient(circle at 20px 24px, #ff5f56 0 6px, transparent 7px), radial-gradient(circle at 44px 24px, #ffbd2e 0 6px, transparent 7px), radial-gradient(circle at 68px 24px, #27c93f 0 6px, transparent 7px), var(--sidebar);z-index:5;height:48px;margin-bottom:20px;display:block;position:sticky;top:0;left:-24px}.html-viewer-popup .htmlBody{padding:24px;font-family:Fira Code,Consolas,monospace}.html-viewer-popup .html-viewer.mobile-preview{scrollbar-width:none;box-sizing:border-box;background:#fff;border:10px solid #0f172a;border-radius:42px;width:min(390px,100%);max-width:100%;height:min(720px,100vh - 40px);margin:0 auto 120px;transition:all .3s;position:relative;overflow:hidden auto;box-shadow:0 0 0 4px #ffffff0d,0 30px 60px #00000073}.mobile-preview.html-viewer>div:first-child{margin-top:40px}.html-viewer-popup .html-viewer.mobile-preview:before{content:"";z-index:20;background:#000;border-radius:999px;width:130px;height:28px;display:block;position:absolute;top:10px;left:50%;transform:translate(-50%)}@media (width<=768px){.html-viewer-popup .html-viewer.mobile-preview{height:80vh;margin-bottom:20px}}.html-viewer-popup .html-ide::-webkit-scrollbar-track{background:#1a1a1a;border-radius:20px}.html-viewer-popup .html-ide::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:20px}.html-viewer-popup .html-ide::-webkit-scrollbar-thumb:hover{background:#666}.warning-message{text-align:center;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:15px .75rem;font-size:.95rem;font-weight:700;line-height:1;display:inline-flex}.warning-warning{background:var(--warning-color-secondary);color:var(--warning-color)}.warning-info{background:var(--primary-50);color:var(--primary-700)}.warning-error{background:var(--error-color-secondary);color:var(--error-color-primary)}.warning-success{background:var(--success-color-secondary);color:var(--success-color)}.warning-icon{justify-content:center;align-items:center;display:inline-flex}.view-port-selectors{background-color:var(--gray-50);border:1px solid var(--border-color);width:fit-content;box-shadow:0 1px 2px var(--shadow-color);border-radius:12px;align-items:center;gap:4px;margin:auto;padding:4px;display:flex}.viewPortBtn{cursor:pointer;background-color:#0000;border:none;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;transition:background-color .2s,transform .2s;display:flex}.viewPortBtn:hover{background-color:var(--primary-100)}.viewPortBtn:active{transform:scale(.95)}.viewPortBtn .cms-navbar-icon{color:var(--font-color-muted);font-size:22px;transition:color .2s}.selectedViewPort{background-color:var(--primary-color)}.selectedViewPort .cms-navbar-icon{color:#fff}.cms-layout{direction:ltr}.cms-container{border:1px solid var(--border-color);border-radius:12px}.cms-canvas-wrapper{background-color:var(--gray-100);overflow-y:scroll}.cms-navbar{background-color:var(--surface-color);border-bottom:1px solid var(--border-color);border-radius:12px 12px 0 0;flex-wrap:wrap;align-items:center;gap:6px;width:100%;padding:10px;display:flex;overflow:hidden}.cms-navbar-btn{background-color:var(--primary-color);border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;padding:0 8px;font-size:20px;display:flex}.cms-navbar-btn:disabled{opacity:.5;cursor:not-allowed}.cms-navbar-icon{color:#fff;font-size:20px}.cms-canvas-wrapper.mobile-preview{justify-content:center;align-items:center;padding:32px;display:flex}.canvas-container{max-height:500px}.mobile-preview .canvas-container{background-color:var(--surface-color);scrollbar-width:none;border:10px solid #111827;border-radius:40px;width:390px;height:680px;position:relative;overflow-y:auto}.mobile-preview .canvas-container:before{content:"";z-index:10;background-color:#111827;border-radius:20px;width:120px;height:26px;display:block;position:sticky;top:12px;left:50%;transform:translate(-50%)}.controlsBtn{transition:all .3s}.controlsBtn:hover{color:var(--primary-color)}.saveBtn{background-color:var(--primary-color);color:#fff;border-radius:8px;justify-content:center;align-items:center;padding:4px 8px;display:flex}.saveBtn:disabled{opacity:.5;cursor:not-allowed}