body {
            font-family: 'Poppins', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .right-panel-desktop { transition: transform 0.3s ease-in-out; transform: translateX(0); }
        .right-panel-desktop.collapsed { transform: translateX(100%); }
        .canvas-container { transition: margin-right 0.3s ease-in-out; }
        @media (min-width: 768px) {
            .canvas-container.expanded {
                margin-right: 288px;
            }
        }
        .bottom-panel-mobile { transition: transform 0.3s ease-in-out; transform: translateY(100%); }
        .bottom-panel-mobile.active { transform: translateY(0); }
        .desktop-content { opacity: 1; transition: opacity 0.2s ease-in-out; }
        .right-panel-desktop.collapsed .desktop-content { opacity: 0; pointer-events: none; }
        .selected-element { outline: 2px solid #3b82f6; outline-offset: 2px; }
        .toolbar-bg { background-color: rgba(17, 17, 17, 0.95); }
        .builder-block { cursor: grab; transition: background-color 0.2s ease; }
        .builder-block:active { cursor: grabbing; }
        .droppable.drag-over { outline: 2px dashed #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
        .color-swatch { width: 20px; height: 20px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); }
        .color-swatch.active { border: 2px solid white; transform: scale(1.1); }
        input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100%; }
        input[type="range"]::-webkit-slider-runnable-track { background: #4b5563; border-radius: 9999px; height: 4px; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; margin-top: -6px; background-color: white; border-radius: 9999px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        input[type="range"]::-moz-range-track { background: #4b5563; border-radius: 9999px; height: 4px; }
        input[type="range"]::-moz-range-thumb { height: 16px; width: 16px; background-color: white; border-radius: 9999px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .radio-label input:checked + span { background-color: white; color: black; }
        [contenteditable="true"] { outline: 1px dashed #a5b4fc; background-color: rgba(79, 70, 229, 0.1); }
        .layer-item { padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; display: flex; justify-content: space-between; align-items: center; }
        .layer-item:hover { background-color: #374151; }
        .layer-item.selected { background-color: #3b82f6; }
        .layer-visibility-toggle { cursor: pointer; opacity: 0.6; }
        .layer-visibility-toggle:hover { opacity: 1; }
        #toggleBlocksIcon.rotated, #toggleLayersIcon.rotated { transform: rotate(-180deg); }
        [data-element-type] { cursor: pointer; }

        /* Template library button */
        #templateLibraryBtn {
            position: fixed;
            bottom: 1.5rem;
            left: 1.5rem;
            z-index: 40;
            width: 48px;
            height: 48px;
            border-radius: 9999px;
            background-color: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: background-color 0.2s;
        }
        #templateLibraryBtn:hover {
            background-color: #2563eb;
        }
        /* Template modal overlay */
        #templateModal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(17,17,17,0.9);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
            padding: 1rem;
        }
        #templateModal.active {
            display: flex;
        }
        #templateModal .modal-content {
            background-color: #111111;
            border-radius: 8px;
            padding: 1.5rem;
            width: 100%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .template-card {
            cursor: pointer;
            border: 1px solid #374151;
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #1f2937;
            transition: background-color 0.2s;
        }
        .template-card:hover {
            background-color: #374151;
        }