:root {--primary: #0055FF;--primary-hover: #0044cc;--secondary: #64748b;--bg-body: #f1f5f9;--bg-surface: #ffffff;--bg-panel: #ffffff;--border: #e2e8f0;--text-main: #0f172a;--text-muted: #64748b;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 100px;--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;}* {margin: 0;padding: 0;box-sizing: border-box;}*::-webkit-scrollbar {width: 6px;height: 6px;}*::-webkit-scrollbar-track {background: transparent;}*::-webkit-scrollbar-thumb {background: #cbd5e1;border-radius: 3px;}*::-webkit-scrollbar-thumb:hover {background: #94a3b8;}*::-webkit-scrollbar-button {display: none;}body {font-family: var(--font-sans);background-color: var(--bg-body);color: var(--text-main);height: 100vh;overflow: hidden;}.app-container {display: flex;flex-direction: column;height: 100vh;}.top-bar {height: 64px;background: var(--bg-surface);border-bottom: 1px solid var(--border);display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;padding: 0 20px;z-index: 50;}.actions {justify-self: end;}.logo {display: flex;align-items: center;gap: 8px;font-weight: 700;font-size: 18px;color: var(--primary);}.logo i {font-size: 24px;}.view-controls {display: flex;background: #f1f5f9;padding: 4px;border-radius: var(--radius-sm);gap: 2px;}.icon-btn {border: none;background: transparent;padding: 8px;border-radius: 4px;color: var(--text-muted);cursor: pointer;transition: all 0.2s;display: flex;align-items: center;justify-content: center;}.icon-btn:hover {color: var(--text-main);}.icon-btn.active {background: var(--bg-surface);color: var(--primary);box-shadow: var(--shadow-sm);}.actions {display: flex;gap: 8px;justify-self: end;align-items: center;}.more-menu-container {position: relative;}.btn-more {width: 36px;height: 36px;border-radius: 50%;border: 1px solid var(--border);background: white;display: flex;align-items: center;justify-content: center;color: var(--text-main);cursor: pointer;transition: all 0.2s;}.btn-more:hover, .btn-more.active {background: #f1f5f9;border-color: #cbd5e1;}.more-dropdown {display: none;position: absolute;top: 100%;right: 0;width: 160px;background: white;border: 1px solid var(--border);border-radius: var(--radius-md);box-shadow: var(--shadow-lg);flex-direction: column;padding: 4px;margin-top: 8px;z-index: 100;}.more-dropdown.show {display: flex;}.more-dropdown-item {display: flex;align-items: center;gap: 10px;padding: 10px;background: none;border: none;width: 100%;text-align: left;cursor: pointer;border-radius: var(--radius-sm);color: var(--text-main);font-size: 13px;font-weight: 500;font-family: var(--font-sans);}.more-dropdown-item:hover {background: #f1f5f9;}.more-dropdown-item i {font-size: 16px;color: var(--text-muted);}@media (max-width: 1024px) {.btn-text.desktop-only {display: none;}.preview-btn, .save-project-btn {width: 36px;height: 36px;padding: 0;justify-content: center;border-radius: 50%;aspect-ratio: 1/1;}.preview-btn .btn-text, .save-project-btn .btn-text {display: none;}.preview-btn i, .save-project-btn i {margin: 0;font-size: 16px;}.components-grid {padding: 24px;gap: 16px;}.component-card {width: 100%;}}.btn {display: flex;align-items: center;gap: 8px;padding: 10px 16px;border-radius: var(--radius-full);border: none;font-weight: 600;font-size: 13px;cursor: pointer;transition: all 0.2s;font-family: 'Plus Jakarta Sans', sans-serif;}.btn-primary {background: var(--primary);color: white;}.btn-primary:hover {background: var(--primary-hover);}.btn-secondary {background: white;border: 1px solid var(--border);color: var(--text-main);}.btn-secondary:hover {background: #f8fafc;}.btn-properties {background: white;border: 1px solid var(--border);color: var(--text-main);border-radius: var(--radius-sm);}.btn-properties:hover {background: #f8fafc;}.main-body {display: flex;flex: 1;overflow: hidden;position: relative;}.sidebar {width: 280px;background: var(--bg-panel);border-right: 1px solid var(--border);display: flex;flex-direction: column;z-index: 40;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);flex-shrink: 0;}.right-sidebar {border-right: none;border-left: 1px solid var(--border);}.sidebar-header {padding: 16px 20px;border-bottom: 1px solid var(--border);display: flex;justify-content: space-between;align-items: center;}.sidebar-header h3 {font-size: 16px;font-weight: 600;}.close-sidebar-btn {display: none;background: none;border: none;font-size: 20px;cursor: pointer;color: var(--text-muted);}.components-grid {padding: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;overflow-y: auto;}.component-card {background: #f8fafc;border: none;border-radius: 12px;padding: 16px 8px;display: flex;flex-direction: column;align-items: center;gap: 12px;cursor: grab;transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);position: relative;user-select: none;color: var(--text-main);}.component-card:hover {background: #e2e8f0;}.icon-box {width: 48px;height: 48px;background: white;color: var(--primary);border-radius: 10px;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;font-size: 24px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}.component-card:hover .icon-box {color: var(--primary-hover);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);}.component-card span {font-size: 13px;font-weight: 600;color: var(--text-main);transition: color 0.2s ease;}.component-card:hover span {color: var(--text-main);}input[type=range] {-webkit-appearance: none;appearance: none;width: 100%;background: transparent;cursor: pointer;height: 20px;}input[type=range]:focus {outline: none;}input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 4px;cursor: pointer;background: #e2e8f0;border-radius: 0;transition: background 0.2s;}input[type=range]::-webkit-slider-thumb {height: 16px;width: 16px;border-radius: 50%;background: white;border: 2px solid var(--primary);cursor: pointer;-webkit-appearance: none;margin-top: -6px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);transition: transform 0.2s;}input[type=range]::-webkit-slider-thumb:hover {transform: scale(1.1);}input[type=range]:focus::-webkit-slider-thumb {box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.2);}.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 100;align-items: center;justify-content: center;}.modal.active {display: flex;}.modal-content {background: white;width: 90%;max-width: 500px;border-radius: var(--radius-md);box-shadow: var(--shadow-lg);overflow: hidden;}.modal-header {padding: 16px 24px;border-bottom: 1px solid var(--border);display: flex;justify-content: space-between;align-items: center;}.modal-body {padding: 24px;}.upload-area {border: 2px dashed var(--border);padding: 32px;border-radius: var(--radius-md);text-align: center;background: #f8fafc;margin-bottom: 24px;display: flex;flex-direction: column;align-items: center;gap: 12px;}.templates-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;}.template-card {border: 1px solid var(--border);border-radius: var(--radius-sm);padding: 8px;cursor: pointer;transition: all 0.2s;}.template-card:hover {border-color: var(--primary);}.template-preview {height: 100px;margin-bottom: 8px;border-radius: 4px;}input[type=range]::-moz-range-track {width: 100%;height: 6px;cursor: pointer;background: #e2e8f0;border-radius: 4px;}input[type=range]::-moz-range-thumb {height: 18px;width: 18px;border: 2px solid var(--primary);border-radius: 50%;background: white;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.canvas-area {flex: 1;background: #e2e8f0;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}.canvas-wrapper {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;padding: 20px;overflow: auto;}.device-frame {background: white;transition: all 0.3s ease;box-shadow: var(--shadow-lg);position: relative;overflow-y: auto;overflow-x: hidden;}.device-frame.mobile-view {width: 375px;height: 80vh;border-radius: 30px;border: 5px solid #5f6c81;}.device-frame.mobile-view::-webkit-scrollbar {width: 4px;}.device-frame.tablet-view {width: 768px;height: 85vh;border-radius: 12px;border: 4px solid #5f6c81;}.device-frame.desktop-view {width: 100%;height: 100%;border-radius: 0;max-width: 1280px;}.canvas-content {min-height: 100%;padding: 24px;}.canvas-content.has-elements {padding: 0;}.empty-state {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;min-height: 400px;color: var(--text-muted);text-align: center;border: 2px dashed var(--border);margin: 20px;border-radius: var(--radius-md);}.empty-icon {width: 64px;height: 64px;background: #f1f5f9;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;color: var(--text-muted);}.empty-icon i {font-size: 32px;}.properties-content {padding: 0 20px;overflow-y: auto;height: 100%;}.no-selection-state {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 300px;color: var(--text-muted);text-align: center;opacity: 0.6;}.no-selection-state i {font-size: 48px;margin-bottom: 16px;}.mobile-nav {display: none;height: 60px;background: white;border-top: 1px solid var(--border);justify-content: space-around;align-items: center;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 60;}.nav-item {background: none;border: none;display: flex;flex-direction: column;align-items: center;gap: 4px;color: var(--text-muted);font-size: 10px;font-weight: 600;cursor: pointer;}.nav-item i {font-size: 20px;margin-bottom: 2px;}.nav-item.active {color: var(--primary);}.overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 30;opacity: 0;transition: opacity 0.3s;}.sortable-ghost {opacity: 0.4;background: #f1f5f9;}.sortable-drag {cursor: grabbing;}.canvas-item {position: relative;border: 2px solid transparent;transition: all 0.2s;}.canvas-item:hover {border: 2px solid #93c5fd;}.canvas-item.is-selected {border: 2px solid var(--primary);}.canvas-item.is-selected::before {content: attr(data-name);position: absolute;top: -16px;left: 2px;background: var(--primary);color: white;padding: 4px 8px;border-radius: 4px 4px 0 0;font-size: 8px;font-weight: 600;text-transform: uppercase;pointer-events: none;z-index: 10;white-space: nowrap;height: 8px;display: flex;align-items: center;}.element-toolbar {position: absolute;top: 2px;right: 2px;display: flex;gap: 1px;background: rgba(15, 23, 42, 0.7);padding: 3px;border-radius: 6px;box-shadow: var(--shadow-sm);z-index: 10;backdrop-filter: blur(4px);}.sidebar-toggle {background: none;border: none;color: var(--text-muted);cursor: pointer;padding: 4px;margin-left: auto;display: flex;align-items: center;}.sidebar-toggle:hover {color: var(--text-main);}.sidebar.minimized {width: 50px;}.sidebar.minimized .sidebar-header h3, .sidebar.minimized .components-grid, .sidebar.minimized .properties-content, .sidebar.minimized .properties-tabs, .sidebar.minimized .canvas-settings, .sidebar.minimized .component-search-wrapper, .sidebar.minimized .components-panel {display: none !important;}.sidebar.minimized .sidebar-header {justify-content: center;padding: 16px 12px;}.sidebar.minimized .sidebar-toggle i::before {content: "\eb3c";}.element-toolbar button {background: transparent;border: none;color: white;width: 24px;height: 24px;border-radius: 4px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 14px;transition: background 0.2s;}.element-toolbar button:hover {background: rgba(255, 255, 255, 0.2);}.element-toolbar button.delete-btn:hover {background: #ef4444;}.modal-header-actions {display: flex;align-items: center;gap: 8px;}.btn-sm {padding: 6px 12px;font-size: 12px;}.template-preview {height: 120px;margin-bottom: 10px;border-radius: var(--radius-sm);}.form-group {margin-bottom: 20px;}.prop-btn-group {display: flex;gap: 4px;background: #f1f5f9;padding: 4px;border-radius: var(--radius-sm);}.prop-btn {flex: 1;border: none;background: transparent;padding: 8px;border-radius: 4px;cursor: pointer;color: var(--text-muted);font-size: 14px;transition: all 0.2s;display: flex;align-items: center;justify-content: center;}.prop-btn:hover {background: white;color: var(--text-main);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}.prop-btn.active {background: white;color: var(--primary);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);font-weight: 600;}.properties-tabs {display: flex;border-bottom: 1px solid var(--border);}.prop-tab {flex: 1;padding: 12px;border: none;background: transparent;font-size: 13px;font-weight: 600;color: var(--text-muted);cursor: pointer;transition: all 0.2s;}.prop-tab:hover {color: var(--text-main);}.prop-tab.active {color: var(--primary);box-shadow: inset 0 -2px 0 var(--primary);}.device-tabs {display: flex;background: #f1f5f9;padding: 4px;border-radius: 6px;gap: 2px;margin-bottom: 12px;}.device-tab {flex: 1;padding: 8px;border: none;background: transparent;border-radius: 4px;font-size: 16px;color: #64748b;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s;}.device-tab:hover {color: #0f172a;background: rgba(0, 0, 0, 0.05);}.device-tab.active {background: #ffffff;color: #0055FF;box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}.device-tab i {font-size: 14px;}.spacing-lock-btn {width: 24px;height: 24px;border: none;background: transparent;color: #94a3b8;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s;}.spacing-lock-btn:hover {color: #64748b;}.spacing-lock-btn.active {color: #0055FF;}.spacing-lock-btn i {font-size: 14px;}.canvas-settings {padding: 20px;overflow-y: auto;height: calc(100% - 100px);}.form-label {display: block;font-size: 13px;font-weight: 600;margin-bottom: 8px;color: var(--text-main);}.form-input, .form-select, .form-range {width: 100%;padding: 10px;border: 1px solid var(--border);border-radius: var(--radius-sm);font-size: 14px;font-family: inherit;background: white;transition: border-color 0.2s;}.form-input:focus, .form-select:focus {outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.1);}.color-options {display: flex;gap: 12px;}.color-circle {width: 32px;height: 32px;border-radius: 50%;cursor: pointer;border: 2px solid transparent;transition: transform 0.2s;}.color-circle:hover {transform: scale(1.1);}.color-circle.active {border-color: var(--text-main);}@media (max-width: 1024px) {.btn-text {display: none;}.sidebar {width: 230px;}}@media (max-width: 900px) {.sidebar {position: fixed;top: 64px;bottom: 0;width: 280px;transform: translateX(-100%);z-index: 70;border-radius: 0;}.right-sidebar {right: 0;left: auto;transform: translateX(100%);}.sidebar.active {transform: translateX(0);}.close-sidebar-btn {display: block;}.sidebar-toggle {display: none !important;}.mobile-nav {display: flex;justify-content: space-around;align-items: center;padding: 0 16px;height: 60px;background: white;border-top: 1px solid var(--border-color);position: fixed;bottom: 0;left: 0;right: 0;z-index: 100;box-shadow: 0px -2px 7px -1px rgb(0 0 0 / 10%);}.top-bar {display: flex;justify-content: space-between;padding: 0 16px;}.top-bar .view-controls {display: none;}.top-bar .actions {width: auto;}.nav-item {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 64px;height: 100%;color: var(--text-muted);background: none;border: none;gap: 4px;}.nav-item i {font-size: 24px;}.nav-item span {font-size: 10px;font-weight: 500;}.nav-item.active {color: var(--primary);}}@media (max-width: 768px) {.sidebar {position: fixed;bottom: 0;top: auto;left: 0;width: 100%;height: 70vh;border-right: none;border-top: 1px solid var(--border);transform: translateY(110%);border-radius: 20px 20px 0 0;box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);z-index: 70;padding-bottom: 55px;}.right-sidebar {transform: translateY(110%);}.sidebar.active {transform: translateY(0);}.mobile-nav {display: flex;}.main-body {padding-bottom: 60px;}.canvas-area {padding: 0;}.device-frame.mobile-view {border-width: 0;border-radius: 0;width: 100%;height: 100%;}.view-controls {display: none;}}input[type=range].form-input {border: none !important;padding: 0 !important;box-shadow: none !important;}.accordion-item {border-bottom: 1px solid var(--border);}.accordion-header {padding: 12px 0;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-size: 11px;text-transform: uppercase;letter-spacing: 0.5px;color: #94a3b8;font-weight: 700;transition: color 0.2s;}.accordion-header:hover {color: var(--primary);}.accordion-header i {font-size: 14px;transition: transform 0.2s;}.accordion-header.active i {transform: rotate(180deg);}.accordion-content {display: none;}.accordion-content.active {display: block;}.device-frame.desktop-view {max-width: 688px !important;width: 100%;}.device-frame.tablet-view {max-width: 768px !important;width: 100%;}.device-frame.mobile-view {max-width: 375px !important;width: 100%;}.device-frame {transition: max-width 0.3s ease;margin: 0 auto;}.icon-picker-wrapper {position: relative;}.icon-picker-preview {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: #fff;cursor: pointer;font-size: 20px;transition: all 0.2s;}.icon-picker-preview:hover {border-color: var(--primary);background: #f8fafc;}.icon-picker-dropdown {display: none;position: absolute;top: 100%;left: 0;z-index: 100;width: 220px;background: #fff;border: 1px solid var(--border);border-radius: var(--radius-sm);margin-top: 4px;}.icon-picker-dropdown.active {display: block;}.icon-picker-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 4px;padding: 8px;max-height: 160px;overflow-y: auto;}.icon-picker-item {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: 6px;cursor: pointer;font-size: 18px;transition: all 0.15s;color: var(--text-main);}.icon-picker-item:hover {background: #f1f5f9;}.icon-picker-item.active {background: var(--primary);color: #fff;}.link-sub-accordion {margin-top: 12px;border: none;border-radius: 0;overflow: visible;}.link-sub-header {display: flex;align-items: center;gap: 6px;padding: 8px 10px;background: #f1f5f9;cursor: pointer;font-size: 11px;font-weight: 600;color: #64748b;border: 1px solid #e2e8f0;border-radius: 6px;margin-bottom: 8px;margin-top: 8px;transition: all 0.2s;}.link-sub-header:hover {background: #e2e8f0;color: var(--primary);}.link-sub-header i:last-child {margin-left: auto;transition: transform 0.2s;}.link-sub-header.active i:last-child {transform: rotate(180deg);}.link-sub-content {display: none;padding: 12px 0 0 0;background: none;border-top: none;}.link-sub-content.active {display: block;}.link-badge {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);padding: 3px 8px;border-radius: 6px;font-size: 10px;font-weight: 700;color: #fff;text-transform: uppercase;}@keyframes link-wiggle {0%, 100% {transform: rotate(-2deg);}50% {transform: rotate(2deg);}}@keyframes link-pulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.02);}}@keyframes link-bounce {0%, 100% {transform: translateY(0);}50% {transform: translateY(-4px);}}@keyframes link-shake {0%, 100% {transform: translateX(0);}25% {transform: translateX(-3px);}75% {transform: translateX(3px);}}.link-item[data-effect="wiggle"] {animation: link-wiggle 0.5s ease-in-out infinite;}.link-item[data-effect="pulse"] {animation: link-pulse 1s ease-in-out infinite;}.link-item[data-effect="bounce"] {animation: link-bounce 0.6s ease-in-out infinite;}.link-item[data-effect="shake"] {animation: link-shake 0.4s ease-in-out infinite;}.link-item[data-effect]:hover {animation: none;}.link-item:hover {filter: brightness(0.95);}.ti-layout-sidebar-left-expand:before {content: "\f005" !important;}.ti-layout-sidebar-right-expand:before {content: "\f007" !important;}#canvas-content .link-item {pointer-events: auto;cursor: default;}.confirm-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;}.confirm-modal {background: #fff;border-radius: 12px;padding: 24px;max-width: 360px;width: 90%;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);text-align: center;}.confirm-modal h3 {margin: 0 0 8px;font-size: 18px;color: #0f172a;}.confirm-modal p {margin: 0 0 20px;color: #64748b;font-size: 14px;}.confirm-modal-btns {display: flex;gap: 10px;justify-content: center;}.confirm-modal-btns .btn {min-width: 100px;text-align: center;justify-content: center;}.rich-text-toolbar {display: flex;align-items: center;gap: 2px;padding: 6px;background: #f1f5f9;border: 1px solid #e2e8f0;border-bottom: none;border-radius: 8px 8px 0 0;}.rt-btn {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;border: none;background: transparent;border-radius: 4px;cursor: pointer;color: #64748b;transition: all 0.15s;}.rt-btn:hover {background: #e2e8f0;color: #0f172a;}.rt-btn.active {background: var(--primary);color: #fff;}.rt-divider {width: 1px;height: 20px;background: #e2e8f0;margin: 0 4px;}.rich-text-editor {min-height: 80px;max-height: 200px;overflow-y: auto;padding: 12px;border-radius: 0 0 8px 8px;border-top: none;outline: none;line-height: 1.6;}.rich-text-editor:focus {border-color: var(--primary);box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.1);}.rich-text-editor a {color: var(--primary);text-decoration: underline;}.link-input-popup {position: fixed;background: #fff;border: 1px solid #e2e8f0;border-radius: 8px;padding: 10px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);z-index: 9999;display: flex;flex-direction: column;gap: 8px;width: 280px;}.link-input-popup input {width: 100%;padding: 8px 12px;border: 1px solid #e2e8f0;border-radius: 6px;font-size: 13px;}.link-input-popup .link-btns {display: flex;gap: 8px;justify-content: flex-end;}.link-input-popup button {padding: 8px 14px;border: none;border-radius: 6px;cursor: pointer;font-size: 13px;}.link-input-popup .link-ok {background: var(--primary);color: #fff;}.link-input-popup .link-cancel {background: #f1f5f9;color: #64748b;}.rt-color-wrapper {position: relative;display: inline-block;}.rt-color-wrapper input[type="color"] {position: absolute;top: 100%;left: 0;width: 100%;height: 30px;border: none;padding: 0;cursor: pointer;}.color-palette-popup {position: fixed;background: #fff;border: 1px solid #e2e8f0;border-radius: 8px;padding: 10px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);z-index: 9999;}.color-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 6px;margin-bottom: 8px;}.color-swatch {width: 28px;height: 28px;border-radius: 4px;cursor: pointer;border: 1px solid #e2e8f0;transition: transform 0.1s;}.color-swatch:hover {transform: scale(1.15);}.custom-color-input {width: 100%;height: 32px;border: 1px solid #e2e8f0;border-radius: 4px;cursor: pointer;padding: 2px;}.accordion-item {border-bottom: 1px solid #e2e8f0;}.accordion-header {padding: 12px 0;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: 600;font-size: 13px;color: #1e293b;}.accordion-header:hover {color: var(--primary);}.accordion-header i {transition: transform 0.2s;font-size: 14px;color: #94a3b8;}.accordion-header.active i {transform: rotate(180deg);color: var(--primary);}.accordion-content {display: none;padding-bottom: 16px;}.accordion-content.active {display: block;overflow: visible !important;}.shadow-sm {box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}.shadow-md {box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}.shadow-lg {box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}.shadow-hard-sm {box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);}.shadow-hard-md {box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);}.shadow-hard-lg {box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);}.shadow-hard-xl {box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);}.icon-picker-wrapper {position: relative;}.icon-picker-preview {width: 36px;height: 36px;border: 1px solid #e2e8f0;border-radius: 6px;display: flex;align-items: center;justify-content: center;cursor: pointer;background: #fff;transition: border-color 0.2s;}.icon-picker-preview:hover {border-color: #94a3b8;}.icon-picker-preview i {font-size: 18px;color: #0f172a;}.icon-picker-dropdown, .social-icon-dropdown {display: none;position: absolute;top: 100%;left: 0;z-index: 999;background: #fff;border: 1px solid #e2e8f0;border-radius: 8px;padding: 8px;min-width: 200px;margin-top: 4px;}.icon-picker-dropdown.active, .social-icon-dropdown.active {display: block;}.icon-picker-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 4px;max-height: 200px;overflow-y: auto;}.icon-picker-item {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 4px;cursor: pointer;transition: background 0.15s;}.icon-picker-item:hover {background: #f1f5f9;}.icon-picker-item.active {background: #e0e7ff;}.icon-picker-item i {font-size: 18px;color: #334155;}.prop-group-entry {margin-bottom: 7px;background: #f8fafc;border-radius: 8px;overflow: hidden;border: 1px solid #e2e8f0;}.prop-group-header {display: flex;align-items: center;justify-content: space-between;padding: 10px 12px;cursor: pointer;}.prop-group-header span {font-weight: 600;font-size: 13px;color: #334155;}.prop-group-chevron {font-size: 14px;color: #94a3b8;transition: transform 0.2s;}.prop-group-chevron.open {transform: rotate(90deg);}.prop-group-content {display: none;padding: 12px;border-top: 1px solid #e2e8f0;background: #ffffff;}.prop-group-content.open {display: block;}.prop-group-content.bg-white {background: #ffffff;}.prop-group-content.p-link-list {padding: 0 12px 12px 12px;}.prop-resp-toggles {display: flex;background: #f1f5f9;border-radius: 6px;padding: 2px;margin-right: auto;margin-left: 12px;gap: 2px;}.prop-resp-toggles button {width: 28px;height: 28px;display: flex;align-items: center;justify-content: center;border: none;background: transparent;cursor: pointer;border-radius: 4px;color: #64748b;transition: all 0.2s;padding: 0;}.prop-resp-toggles button i {font-size: 16px;transform: none !important;transition: none !important;}.prop-resp-toggles button:hover {color: #0f172a;background: rgba(0, 0, 0, 0.05);}.prop-resp-toggles button.active {background: #ffffff;color: #0055FF;box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}.form-label-row {display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;}.form-label-row .form-label {margin-bottom: 0;}.resp-device-toggles {display: flex;background: #f1f5f9;padding: 2px;border-radius: 4px;gap: 1px;}.resp-device-btn {border: none;background: transparent;padding: 4px 6px;border-radius: 3px;color: #64748b;cursor: pointer;transition: all 0.2s;display: flex;align-items: center;justify-content: center;font-size: 12px;}.resp-device-btn i {font-size: 12px;transform: none !important;transition: none !important;}.resp-device-btn:hover {color: #0f172a;background: rgba(0, 0, 0, 0.05);}.resp-device-btn.active {background: #ffffff;color: #0055FF;box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}@media (max-width: 768px) {.resp-device-toggles {display: none;}}.canvas-item {width: 100%;position: relative;transition: all 0.2s;}.canvas-item.is-selected {outline: 2px solid var(--primary);outline-offset: -2px;z-index: 10;}.lh-container.container-drop-active {outline: 2px dashed #0055FF;outline-offset: -2px;background-color: rgba(0, 85, 255, 0.05);}.lh-col.column-drop-active {outline: 2px dashed #0055FF;outline-offset: -2px;background-color: rgba(0, 85, 255, 0.05);}.components-panel {padding: 0;overflow-y: auto;flex: 1;}.comp-accordion {border-bottom: 1px solid var(--border);}.comp-accordion-header {display: flex;justify-content: space-between;align-items: center;padding: 12px 16px;background: transparent;cursor: pointer;font-weight: 700;font-size: 13px;text-transform: uppercase;color: var(--text-main);}.comp-accordion-header:hover {background: transparent;color: var(--primary);}.comp-accordion-header i {font-size: 14px;color: var(--text-muted);transition: transform 0.2s;}.comp-accordion.active .comp-accordion-header i {transform: rotate(180deg);}.comp-accordion-content {display: none;padding: 12px 16px;background: transparent;}.comp-accordion.active .comp-accordion-content {display: grid;}.el-running-grid-wrapper {overflow: hidden;width: 100%;position: relative;}.el-running-grid-track {display: flex;will-change: transform;height: 100%;align-items: center;}.running-grid-clone-item {pointer-events: none !important;}.running-grid-clone-item * {pointer-events: none !important;}.el-running-grid-track:empty {min-height: 80px;background: #f8fafc;border: 2px dashed #e2e8f0;min-width: 200px;width: 100%;display: flex;align-items: center;justify-content: center;position: relative;}.el-running-grid-track:empty::before {content: 'Drop items here';color: #94a3b8;font-size: 14px;}.running-grid-drop-active {border-color: var(--primary) !important;background: #eff6ff !important;}.el-running-grid-track>.canvas-item {flex-shrink: 0;white-space: normal;overflow: hidden;box-sizing: border-box;}.el-running-grid-track>.canvas-item * {white-space: normal;}.el-running-grid-scroll {scrollbar-width: thin;scrollbar-color: #cbd5e1 transparent;}.el-running-grid-scroll::-webkit-scrollbar {height: 8px;}.el-running-grid-scroll::-webkit-scrollbar-track {background: transparent;}.el-running-grid-scroll::-webkit-scrollbar-thumb {background: #cbd5e1;border-radius: 4px;}.el-running-grid-scroll::-webkit-scrollbar-thumb:hover {background: #94a3b8;}.element-toolbar .edit-btn {display: none !important;}.mobile-view .element-toolbar .edit-btn, .tablet-view .element-toolbar .edit-btn {display: inline-flex !important;}@media (max-width: 900px) {.element-toolbar .edit-btn {display: inline-flex !important;}}.toggle-switch {position: relative;display: inline-block;width: 44px;height: 24px;}.toggle-switch input {opacity: 0;width: 0;height: 0;}.toggle-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #cbd5e1;transition: 0.3s;border-radius: 24px;}.toggle-slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 3px;bottom: 3px;background-color: white;transition: 0.3s;border-radius: 50%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}.toggle-switch input:checked+.toggle-slider {background-color: var(--primary);}.toggle-switch input:checked+.toggle-slider:before {transform: translateX(20px);}.video-thumbnail-wrapper:hover .video-play-btn {background: #ff0000 !important;transform: translate(-50%, -50%) scale(1.1);}.el-video {overflow: hidden;}.context-menu {position: absolute;background: rgba(15, 23, 42, 0.7);backdrop-filter: blur(4px);border-radius: 6px;padding: 3px;box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 4px 6px -1px rgb(0 0 0 / 0.1);z-index: 1000;min-width: 120px;display: none;animation: fadeIn 0.1s ease-out;flex-direction: column;gap: 1px;}.context-menu-item {padding: 6px 10px;font-size: 13px;color: #ffffff;cursor: pointer;display: flex;align-items: center;gap: 8px;transition: all 0.2s;border-radius: 4px;font-weight: 500;}.context-menu-item:hover {background: rgba(255, 255, 255, 0.1);color: #ffffff;}.context-menu-item i {font-size: 16px;color: #ffffff;}.context-menu-item:hover i {color: #ffffff;}.context-menu-item.disabled {color: #94a3b8;opacity: 1;pointer-events: none;cursor: not-allowed;background: transparent !important;}.context-menu-item.disabled i {color: inherit;}.context-menu-separator {display: none;}@keyframes fadeIn {from {opacity: 0;transform: translateY(-5px);}to {opacity: 1;transform: translateY(0);}}@keyframes fade-in {from {opacity: 0;}to {opacity: 1;}}@keyframes fade-in-up {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}@keyframes fade-in-down {from {opacity: 0;transform: translateY(-20px);}to {opacity: 1;transform: translateY(0);}}@keyframes fade-in-left {from {opacity: 0;transform: translateX(-20px);}to {opacity: 1;transform: translateX(0);}}@keyframes fade-in-right {from {opacity: 0;transform: translateX(20px);}to {opacity: 1;transform: translateX(0);}}@keyframes zoom-in {from {opacity: 0;transform: scale(0.9);}to {opacity: 1;transform: scale(1);}}@keyframes bounce-in {0% {opacity: 0;transform: scale(0.3);}50% {opacity: 1;transform: scale(1.05);}70% {transform: scale(0.9);}100% {transform: scale(1);}}.animated {animation-duration: 1s;animation-fill-mode: both;}#canvas-container {transform: translateZ(0);}.section-tabs {display: flex;border-bottom: 1px solid var(--border);margin-bottom: 12px;}.section-tab-btn {flex: 1;background: none;border: none;border-bottom: 2px solid transparent;padding: 8px 4px;font-size: 12px;font-weight: 600;color: var(--text-muted);cursor: pointer;font-family: inherit;transition: all 0.2s;}.section-tab-btn:hover {color: var(--text-main);}.section-tab-btn.active {color: var(--primary);border-bottom-color: var(--primary);}.prop-tabs {display: flex;background: #f1f5f9;padding: 4px;border-radius: 6px;margin-bottom: 12px;}.prop-tab-btn {flex: 1;border: none;background: transparent;padding: 6px;border-radius: 4px;font-size: 12px;font-weight: 500;cursor: pointer;font-family: inherit;transition: all 0.2s;color: var(--text-muted);}.prop-tab-btn:hover {color: var(--text-main);}.prop-tab-btn.active {background: #fff;color: var(--text-main);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}.section-tab-content {display: none;}.section-tab-content.active {display: block;}