@reference "tailwindcss";
@reference "../../../../../vendor/filament/filament/resources/css/index.css";

.capell-layout-builder-assets-table {
    .fi-modal-content {
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .fi-modal-footer {
        container-type: scroll-state;
        transition: box-shadow 0.3s ease;
    }

    @container scroll-state(stuck: bottom) {
        .fi-modal-footer {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
    }
}

/* Layout builder canvas */
.layout-sort-ghost {
    opacity: 0.35;
}

.layout-sort-chosen {
    outline: 1px solid rgba(var(--primary-500), 0.7);
    outline-offset: 2px;
}

.layout-builder-breakpoint-control {
    gap: 0.25rem;
    padding: 0.25rem;
}

.layout-builder-workboard-toolbar {
    min-width: 0;
}

.layout-builder-workboard-toolbar > div {
    min-width: 0;
}

.layout-builder-primary-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.layout-builder-primary-actions .fi-btn {
    min-width: 0;
    max-width: 100%;
}

.layout-builder-primary-actions .fi-btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-builder-edit-mode-toggle {
    display: inline-flex;
    min-width: 0;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background-color: rgb(255, 255, 255);
    color: rgb(55, 65, 81);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.1);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.layout-builder-edit-mode-toggle:hover,
.layout-builder-edit-mode-toggle:focus-visible {
    color: rgb(17, 24, 39);
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.layout-builder-edit-mode-toggle-active {
    background-color: var(--primary-600);
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-700) 36%, transparent);
}

.layout-builder-edit-mode-toggle:active {
    transform: translateY(1px);
}

.dark .layout-builder-edit-mode-toggle {
    background-color: rgb(17, 24, 39);
    color: rgb(209, 213, 219);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .layout-builder-edit-mode-toggle:hover,
.dark .layout-builder-edit-mode-toggle:focus-visible {
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dark .layout-builder-edit-mode-toggle-active {
    background-color: var(--primary-500);
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-300) 36%, transparent);
}

.layout-builder-breakpoint-button {
    display: inline-flex;
    min-width: 5.75rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    color: rgb(75, 85, 99);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.layout-builder-breakpoint-button:hover,
.layout-builder-breakpoint-button:focus-visible {
    background-color: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

.layout-builder-breakpoint-button[aria-pressed='true'] {
    background-color: color-mix(in srgb, var(--primary-500) 12%, transparent);
    color: var(--primary-600);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 28%, transparent);
}

.dark .layout-builder-breakpoint-button {
    color: rgb(209, 213, 219);
}

.dark .layout-builder-breakpoint-button:hover,
.dark .layout-builder-breakpoint-button:focus-visible {
    background-color: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
}

.dark .layout-builder-breakpoint-button[aria-pressed='true'] {
    background-color: color-mix(in srgb, var(--primary-400) 16%, transparent);
    color: rgb(255, 255, 255);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 34%, transparent);
}

@media (max-width: 767.98px) {
    .layout-builder-primary-actions {
        align-items: stretch;
    }

    .layout-builder-primary-actions .fi-btn {
        flex: 1 1 10rem;
        justify-content: center;
    }

    .layout-builder-edit-mode-toggle {
        flex: 0 0 2rem;
    }

    .layout-builder-breakpoint-button {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0 0.5rem;
    }

    .layout-builder-breakpoint-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.layout-builder-history-actions {
    min-width: 0;
}

.layout-builder-canvas-scroll {
    margin-inline: -0.25rem;
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.layout-builder-canvas-frame {
    width: 100%;
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined {
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined:hover,
.layout-builder-add-container-button.fi-btn.fi-btn-outlined:focus-visible {
    background-color: rgb(255, 255, 255);
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined:active {
    transform: translateY(1px);
}

.dark .layout-builder-add-container-button.fi-btn.fi-btn-outlined {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .layout-builder-add-container-button.fi-btn.fi-btn-outlined:hover,
.dark
    .layout-builder-add-container-button.fi-btn.fi-btn-outlined:focus-visible {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.layout-container-primary {
    min-width: min(9rem, 100%);
}

.layout-container-title-group {
    max-width: 100%;
    gap: 0.25rem;
    padding-right: 0.25rem;
}

.layout-container-title-button {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.layout-container-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-container-title-tool-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.layout-container:hover .layout-container-title-tool-slot,
.layout-container:focus-within .layout-container-title-tool-slot,
.layout-container-reordering .layout-container-title-tool-slot {
    opacity: 1;
    pointer-events: auto;
}

.layout-builder-widget-preview {
    height: 100%;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-widget-frame {
    overflow: visible;
    border-radius: 0.5rem;
    background-color: rgb(255, 255, 255);
    isolation: isolate;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-widget-preview-shell {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
}

.layout-widget-preview-shell > .layout-builder-widget-preview {
    width: 100%;
    min-height: 100%;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.layout-widget-preview-shell
    > .layout-builder-widget-preview
    > .absolute.inset-0,
.layout-widget-preview-shell > .layout-builder-widget-preview > .h-28 {
    border-radius: 0 !important;
}

.layout-widget-preview-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.layout-container-widget:hover .layout-widget-frame,
.layout-container-widget:focus-within .layout-widget-frame {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.1),
        0 12px 26px rgba(15, 23, 42, 0.12);
}

.layout-widget-preview-shell:focus-visible {
    outline: none;
}

.layout-widget-frame:has(.layout-widget-preview-shell:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary-500) 55%, transparent),
        0 12px 26px rgba(15, 23, 42, 0.12);
}

.dark .layout-widget-frame {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.26);
}

.dark .layout-container-widget:hover .layout-widget-frame,
.dark .layout-container-widget:focus-within .layout-widget-frame {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

.dark .layout-widget-frame:has(.layout-widget-preview-shell:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary-400) 44%, transparent),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

@media (max-width: 767px) {
    .layout-builder-density-actions {
        display: none;
    }
}

.layout-container-widget-selected .layout-widget-frame {
    box-shadow:
        0 0 0 2px rgba(var(--primary-500), 0.35),
        0 10px 24px rgba(15, 23, 42, 0.12);
}

.layout-container-widget-reordering .layout-widget-frame {
    cursor: grab;
}

.layout-builder-widget-actions-suppressed .layout-container-widget {
    pointer-events: none;
}

.layout-container {
    align-self: start;
    container-type: inline-size;
}

.layout-container-resizing {
    transition-duration: 0ms;
}

.layout-containers {
    container-type: inline-size;
}

.layout-container-meta {
    align-self: center;
    max-width: 100%;
}

.layout-container-mobile-width-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.78);
    padding: 0.375rem;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.layout-container-width-stepper-button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: rgb(55, 65, 81);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        opacity 160ms ease;
}

.layout-container-width-stepper-button:hover,
.layout-container-width-stepper-button:focus-visible {
    background-color: rgb(243, 244, 246);
    color: rgb(17, 24, 39);
}

.layout-container-width-stepper-button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.layout-container-width-stepper-value {
    min-width: 8.5rem;
    text-align: center;
    color: rgb(55, 65, 81);
    font-size: 0.75rem;
    font-weight: 600;
}

.dark .layout-container-mobile-width-control {
    background: rgba(17, 24, 39, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .layout-container-width-stepper-button {
    color: rgb(209, 213, 219);
}

.dark .layout-container-width-stepper-button:hover,
.dark .layout-container-width-stepper-button:focus-visible {
    background-color: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
}

.dark .layout-container-width-stepper-value {
    color: rgb(229, 231, 235);
}

@media (min-width: 768px) {
    .layout-container-mobile-width-control {
        display: none;
    }
}

.layout-container-resize-handle {
    height: 3rem;
    width: 2.25rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(243, 244, 246);
    color: rgb(75, 85, 99);
    opacity: 0;
    outline: none;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease;
}

.layout-container-resize-value {
    top: -0.4rem;
    right: 1.625rem;
    min-width: 1.375rem;
    border-radius: 9999px;
    background: var(--primary-600);
    color: rgb(255, 255, 255);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.375rem;
    text-align: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.layout-container-resize-handle:hover,
.layout-container-resize-handle:focus-visible,
.layout-container-resize-handle:active,
.layout-container-resizing .layout-container-resize-handle {
    background: rgb(243, 244, 246);
    color: rgb(55, 65, 81);
    opacity: 1;
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.5),
        0 10px 22px rgba(15, 23, 42, 0.18);
}

.dark .layout-container-resize-handle {
    background: rgb(31, 41, 55);
    color: rgb(209, 213, 219);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.dark .layout-container-resize-value {
    background: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

.dark .layout-container-resize-handle:hover,
.dark .layout-container-resize-handle:focus-visible,
.dark .layout-container-resize-handle:active,
.dark .layout-container-resizing .layout-container-resize-handle {
    background: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
    box-shadow:
        0 0 0 2px rgba(96, 165, 250, 0.58),
        0 10px 22px rgba(0, 0, 0, 0.3);
}

.layout-container-handle-reveal {
    display: none;
    width: 0;
    max-width: 2.125rem;
    opacity: 0;
    overflow: hidden;
    transition:
        width 160ms ease,
        opacity 160ms ease;
}

.layout-container:hover .layout-container-handle-reveal,
.layout-container:focus-within .layout-container-handle-reveal,
.layout-container-reordering .layout-container-handle-reveal {
    width: 2.125rem;
    opacity: 1;
}

.layout-container-title-handle {
    align-items: stretch;
    padding: 0.125rem 0.25rem 0.125rem 0;
}

.layout-container-title-tools {
    min-height: 1.75rem !important;
    min-width: 1.75rem !important;
    padding: 0.3125rem !important;
    align-self: center;
    background-color: rgb(243, 244, 246) !important;
    color: rgb(75, 85, 99) !important;
}

.layout-container-title-tools:hover,
.layout-container-title-tools:focus-visible {
    background-color: rgb(229, 231, 235) !important;
    color: rgb(17, 24, 39) !important;
}

.layout-container-title-tools svg {
    height: 1rem;
    width: 1rem;
}

.layout-widget-assets-toggle.layout-widget-assets-toggle-open {
    background-color: color-mix(
        in srgb,
        var(--primary-500) 12%,
        transparent
    ) !important;
    color: var(--primary-600) !important;
}

.dark .layout-widget-assets-toggle.layout-widget-assets-toggle-open {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 16%,
        transparent
    ) !important;
    color: rgb(255, 255, 255) !important;
}

.layout-container-title-drag-handle {
    display: inline-flex;
    min-height: 1.75rem;
    width: 1.875rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: rgb(113, 113, 122);
    opacity: 1;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.layout-container-title-drag-handle:hover,
.layout-container-title-drag-handle:focus-visible {
    border-color: rgb(212, 212, 216);
    color: rgb(63, 63, 70);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.layout-container-title-drag-handle:active {
    border-color: rgb(161, 161, 170);
    color: rgb(39, 39, 42);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
}

.dark .layout-container-title-drag-handle {
    background: transparent;
    color: rgb(156, 163, 175);
}

.dark .layout-container-title-tools {
    background-color: rgb(31, 41, 55) !important;
    color: rgb(209, 213, 219) !important;
}

.dark .layout-container-title-tools:hover,
.dark .layout-container-title-tools:focus-visible {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(255, 255, 255) !important;
}

.dark .layout-container-title-drag-handle:hover,
.dark .layout-container-title-drag-handle:focus-visible {
    border-color: rgb(82, 82, 91);
    background: transparent;
    color: rgb(209, 213, 219);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.dark .layout-container-title-drag-handle:active {
    border-color: rgb(113, 113, 122);
    color: rgb(244, 244, 245);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

@container (max-width: 32rem) {
    .layout-container-primary {
        flex: 1 1 10rem;
        flex-wrap: wrap;
        max-width: 100%;
        order: 1;
    }

    .layout-container-meta {
        margin-left: auto;
        order: 2;
    }

    .layout-container-controls {
        flex: 0 0 auto;
        margin-left: auto;
        order: 3;
    }
}

.layout-widget-drag-handle {
    position: relative;
    display: none;
    align-self: stretch;
    flex: 0 0 0;
    width: 0;
    max-width: 2.25rem;
    min-height: 100%;
    opacity: 0;
    overflow: hidden;
    border-radius: 0;
    background-color: transparent;
    color: rgb(113, 113, 122);
    isolation: isolate;
    box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.06);
    transition:
        background-color 160ms ease,
        flex-basis 160ms ease,
        width 160ms ease,
        opacity 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.layout-container:hover
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container:focus-within
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container-selected
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container-reordering
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active) {
    flex-basis: 2.25rem;
    width: 2.25rem;
    opacity: 1;
    color: rgb(113, 113, 122);
}

.layout-container:hover .layout-widget-drag-handle,
.layout-container:focus-within .layout-widget-drag-handle,
.layout-container-selected .layout-widget-drag-handle,
.layout-container-reordering .layout-widget-drag-handle {
    flex-basis: 2.25rem;
    width: 2.25rem;
    opacity: 1;
}

.layout-container .layout-widget-drag-handle:hover,
.layout-container .layout-widget-drag-handle:focus-visible {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 45%,
        white
    ) !important;
    color: var(--primary-700) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 24%, transparent),
        0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.layout-widget-drag-handle svg {
    transition: opacity 120ms ease;
}

.layout-widget-drag-handle:hover svg,
.layout-widget-drag-handle:focus-visible svg {
    opacity: 0.9;
}

.layout-container .layout-widget-drag-handle:active {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 68%,
        white
    ) !important;
    color: var(--primary-700) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 34%, transparent),
        inset 0 1px 2px rgba(15, 23, 42, 0.1) !important;
}

.dark .layout-widget-drag-handle {
    background-color: transparent;
    color: rgb(209, 213, 219);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.dark
    .layout-container:hover
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container:focus-within
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container-selected
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container-reordering
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active) {
    color: rgb(156, 163, 175);
}

.dark .layout-container .layout-widget-drag-handle:hover,
.dark .layout-container .layout-widget-drag-handle:focus-visible {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 34%,
        rgb(17, 24, 39)
    ) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 30%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.dark .layout-container .layout-widget-drag-handle:active {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 48%,
        rgb(17, 24, 39)
    ) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 38%, transparent),
        inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

.layout-containers:has(.layout-sort-chosen) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-chosen) .layout-widget-drag-handle,
.layout-containers:has(.layout-sort-drag) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-drag) .layout-widget-drag-handle,
.layout-containers:has(.layout-sort-fallback) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-fallback) .layout-widget-drag-handle {
    flex-basis: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

.layout-widget-header-actions .fi-btn {
    min-height: 2rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .layout-container-handle-reveal,
    .layout-widget-drag-handle {
        display: flex;
    }

    .layout-container:hover > section > .layout-container-resize-handle,
    .layout-container-resizing > section > .layout-container-resize-handle,
    .layout-container-selected > section > .layout-container-resize-handle,
    .layout-container-reordering > section > .layout-container-resize-handle,
    .layout-container:focus-within > section > .layout-container-resize-handle {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    .layout-widget-header-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-1px);
        transition:
            opacity 140ms ease,
            transform 140ms ease;
    }

    .layout-container-widget:hover .layout-widget-header-actions,
    .layout-container-reordering .layout-widget-header-actions,
    .layout-container-widget:focus-within .layout-widget-header-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .layout-container-controls {
        opacity: 0;
    }

    .layout-container:hover .layout-container-controls,
    .layout-container-reordering .layout-container-controls,
    .layout-container:focus-within .layout-container-controls {
        opacity: 1;
    }

    .layout-container:has(.layout-container-widget:hover)
        .layout-container-controls,
    .layout-container:has(.layout-container-widget:focus-within)
        .layout-container-controls {
        opacity: 0;
    }

    .layout-container-reordering:has(.layout-container-widget:hover)
        .layout-container-controls,
    .layout-container-reordering:has(.layout-container-widget:focus-within)
        .layout-container-controls {
        opacity: 1;
    }
}

.layout-sort-drag,
.layout-sort-fallback {
    transform: rotate(0.25deg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .capell-layout-builder *,
    .capell-layout-builder *::before,
    .capell-layout-builder *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .layout-sort-drag,
    .layout-sort-fallback {
        transform: none;
    }
}

@container (max-width: 32rem) {
    .layout-containers {
        gap: 0.5rem;
    }
}

.fi-resource-layouts .fi-main.fi-width-7xl {
    max-width: none;
}

.fi-resource-layouts .fi-page-content {
    max-width: none;
}

.layout-builder-visual-editor {
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0.75rem;
    background: rgb(248, 250, 252);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 18px 42px rgba(15, 23, 42, 0.09),
        0 4px 12px rgba(15, 23, 42, 0.05);
    container-type: inline-size;
}

.dark .layout-builder-visual-editor {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(3, 7, 18);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 18px 45px rgba(0, 0, 0, 0.38);
}

.layout-builder-visual-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.625rem 0.75rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.86) inset,
        0 8px 20px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(18px) saturate(1.25);
}

.dark .layout-builder-visual-toolbar {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(3, 7, 18, 0.88);
}

.layout-builder-editor-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.88);
    padding: 0.5rem 0.75rem;
}

.layout-builder-editor-summary-group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.layout-builder-editor-summary-item,
.layout-builder-editor-summary-status {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    white-space: nowrap;
}

.layout-builder-editor-summary-item {
    background: rgb(255, 255, 255);
    color: rgb(71, 85, 105);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.layout-builder-editor-summary-status {
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--warning-500) 14%, transparent);
    color: var(--warning-700);
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--warning-500) 24%, transparent);
}

.layout-builder-editor-summary-item svg,
.layout-builder-editor-summary-status svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.dark .layout-builder-editor-summary {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.88);
}

.dark .layout-builder-editor-summary-item {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(203, 213, 225);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .layout-builder-editor-summary-status {
    color: rgb(253, 224, 71);
}

.layout-builder-visual-toolbar-start,
.layout-builder-visual-actions,
.layout-builder-breakpoint-controls {
    display: flex;
    min-width: 0;
    align-items: center;
}

.layout-builder-visual-toolbar-start,
.layout-builder-visual-actions {
    gap: 0.375rem;
}

.layout-builder-visual-toolbar-start {
    width: max-content;
    max-width: 100%;
    justify-self: start;
}

.layout-builder-command-save,
.layout-builder-command-structure {
    flex: 0 0 auto;
}

.layout-builder-command-group {
    border: 0;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.25rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dark .layout-builder-command-group {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(17, 24, 39, 0.88);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.26),
        0 8px 18px rgba(0, 0, 0, 0.32);
}

.layout-builder-breakpoint-controls {
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
}

.layout-builder-visual-actions {
    justify-self: end;
    justify-content: flex-end;
    gap: 0.5rem;
}

.layout-builder-toolbar-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 1.5rem;
    background: rgba(15, 23, 42, 0.1);
}

.dark .layout-builder-toolbar-divider {
    background: rgba(255, 255, 255, 0.12);
}

.layout-builder-command-save,
.layout-builder-command-structure,
.layout-builder-history-actions,
.layout-builder-breakpoint-segment,
.layout-builder-preview-command-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
}

.layout-builder-command-divider {
    align-self: stretch;
    width: 1px;
    background: rgba(15, 23, 42, 0.1);
    margin-block: 0.1875rem;
}

.dark .layout-builder-command-divider {
    background: rgba(255, 255, 255, 0.1);
}

.layout-builder-preview-command-label {
    padding-inline: 0.5rem 0.375rem;
    color: rgb(30, 41, 59);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dark .layout-builder-preview-command-label {
    color: rgb(209, 213, 219);
}

.layout-builder-panel-toggle,
.layout-builder-panel-collapse-toggle,
.layout-builder-breakpoint-button {
    display: inline-flex;
    min-width: 0;
    height: 1.875rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: transparent;
    padding: 0 0.625rem;
    color: rgb(51, 65, 85);
    font-size: 0.8125rem;
    font-weight: 600;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.layout-builder-panel-collapse-toggle {
    width: 1.875rem;
    padding: 0;
}

.layout-builder-breakpoint-button {
    min-width: 1.875rem;
    width: 1.875rem;
    height: 1.75rem;
    border-color: transparent;
    background: transparent;
    padding: 0;
}

.layout-builder-command-group :where(.fi-btn) {
    min-height: 1.875rem;
}

.layout-builder-visual-toolbar :where(.fi-btn:not(.fi-color-primary)) {
    border-color: transparent !important;
    background: transparent !important;
    color: rgb(51, 65, 85) !important;
    box-shadow: none !important;
}

.layout-builder-visual-toolbar
    :where(
        .fi-btn:not(.fi-color-primary):hover,
        .fi-btn:not(.fi-color-primary):focus-visible
    ) {
    background: rgb(241, 245, 249) !important;
    color: rgb(15, 23, 42) !important;
}

.layout-builder-command-group :where(.fi-btn.fi-size-sm) {
    padding-block: 0.3125rem;
}

.layout-builder-history-actions :where(.fi-btn) {
    width: 2rem;
    min-width: 2rem;
    border: 0 !important;
    background: transparent !important;
    justify-content: center;
    padding-inline: 0;
    box-shadow: none !important;
}

.layout-builder-history-actions :where(.fi-btn:hover, .fi-btn:focus-visible) {
    background: transparent !important;
    color: var(--primary-700) !important;
    transform: none;
}

.layout-builder-history-actions :where(.fi-btn-label) {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.layout-builder-command-save :where(.fi-btn) {
    box-shadow: none !important;
}

.layout-builder-layout-actions-dropdown :where(.fi-dropdown-list) {
    min-width: 11rem;
    padding: 0.375rem;
}

.layout-builder-layout-actions-dropdown :where(.fi-dropdown-list .fi-btn) {
    width: 100%;
    justify-content: flex-start;
    border: 0 !important;
    border-radius: 0.375rem !important;
    background: transparent !important;
    color: rgb(51, 65, 85) !important;
    box-shadow: none !important;
}

.layout-builder-layout-actions-dropdown
    :where(
        .fi-dropdown-list .fi-btn:hover,
        .fi-dropdown-list .fi-btn:focus-visible
    ) {
    background: rgb(241, 245, 249) !important;
    color: rgb(15, 23, 42) !important;
}

.dark
    .layout-builder-layout-actions-dropdown
    :where(.fi-dropdown-list .fi-btn) {
    color: rgb(209, 213, 219) !important;
}

.dark
    .layout-builder-layout-actions-dropdown
    :where(
        .fi-dropdown-list .fi-btn:hover,
        .fi-dropdown-list .fi-btn:focus-visible
    ) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgb(255, 255, 255) !important;
}

.layout-builder-panel-toggle:hover,
.layout-builder-panel-toggle:focus-visible,
.layout-builder-panel-collapse-toggle:hover,
.layout-builder-panel-collapse-toggle:focus-visible,
.layout-builder-breakpoint-button:hover,
.layout-builder-breakpoint-button:focus-visible,
.layout-builder-breakpoint-button[aria-pressed='true'] {
    background: rgb(255, 255, 255);
    color: rgb(67, 56, 202);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 7px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.layout-builder-panel-toggle svg,
.layout-builder-panel-collapse-toggle svg,
.layout-builder-breakpoint-button svg,
.layout-builder-studio-rail-button svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    stroke-width: 2;
}

.dark .layout-builder-panel-toggle,
.dark .layout-builder-panel-collapse-toggle,
.dark .layout-builder-breakpoint-button {
    border-color: rgb(75, 85, 99);
    background: rgb(17, 24, 39);
    color: rgb(209, 213, 219);
}

.layout-builder-action-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--primary-500) 12%, transparent);
    padding: 0.3125rem 0.625rem;
    color: var(--primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dark .layout-builder-action-inline-loading {
    color: rgb(255, 255, 255);
}

.layout-builder-visual-grid {
    display: grid;
    grid-template-columns:
        4.25rem minmax(15.5rem, 18rem) minmax(0, 1fr)
        minmax(17rem, 20rem);
    min-height: max(44rem, calc(100vh - 13rem));
    border-top: 0;
    background:
        linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgb(241, 245, 249), rgb(226, 232, 240));
    background-size:
        28px 28px,
        28px 28px,
        auto;
}

.layout-builder-visual-editor[data-tree-collapsed='true']
    .layout-builder-visual-grid {
    grid-template-columns: 4.25rem minmax(0, 1fr) minmax(17rem, 20rem);
}

.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-visual-grid {
    grid-template-columns: 4.25rem minmax(0, 1fr);
}

.layout-builder-visual-editor[data-tree-collapsed='true']
    .layout-builder-visual-panel-tree {
    display: none;
}

.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-inspector-panel {
    display: none;
}

.layout-builder-visual-grid-empty {
    min-height: min(32rem, calc(100vh - 22rem));
}

.dark .layout-builder-visual-grid {
    background: rgb(3, 7, 18);
}

.layout-builder-visual-panel {
    min-width: 0;
    overflow: auto;
    border-color: rgba(15, 23, 42, 0.06);
    background: rgb(255, 255, 255);
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.82) inset,
        8px 0 24px rgba(15, 23, 42, 0.035);
}

.layout-builder-visual-panel-tree {
    border-right-width: 1px;
}

.layout-builder-studio-rail {
    display: flex;
    min-width: 0;
    width: 4.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    border-right: 0;
    background: linear-gradient(180deg, rgb(248, 250, 252), rgb(241, 245, 249));
    padding: 1rem 0.625rem;
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.08) inset;
}

.layout-builder-studio-rail-button {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: transparent;
    color: rgb(71, 85, 105);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.layout-builder-studio-rail-button:hover,
.layout-builder-studio-rail-button:focus-visible,
.layout-builder-studio-rail-button-active {
    background: rgb(255, 255, 255);
    color: var(--primary-700);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
    transform: translateY(-1px);
}

.layout-builder-studio-rail-spacer {
    flex: 1 1 auto;
}

.dark .layout-builder-visual-panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(17, 24, 39);
}

.layout-builder-visual-canvas {
    position: relative;
    min-width: 0;
    overflow: auto;
    padding: clamp(1.125rem, 2vw, 2.25rem);
    --layout-builder-preview-max-width: 100%;
    --layout-builder-preview-min-width: 0;
}

.layout-builder-visual-canvas[data-active-breakpoint='tablet'],
.layout-builder-visual-canvas[data-active-breakpoint='mobile'] {
    display: flex;
    justify-content: center;
}

.layout-builder-visual-canvas::before {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    height: 0;
    content: '';
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.fi-tabs.fi-contained {
    gap: 0;
    border-bottom: 1px solid rgb(229, 231, 235);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fi-tabs.fi-contained .fi-tabs-item {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-600);
    background: transparent;
    color: var(--primary-700);
    box-shadow: none;
}

.dark .fi-tabs.fi-contained {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .fi-tabs.fi-contained .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-400);
    color: rgb(255, 255, 255);
}

.layout-builder-shadow-preview {
    width: 100%;
    max-width: var(--layout-builder-preview-max-width);
    min-width: var(--layout-builder-preview-min-width);
    min-height: 38rem;
    overflow: hidden;
    border: 0;
    border-radius: 0.375rem;
    background: rgb(255, 255, 255);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.96) inset,
        0 18px 40px rgba(15, 23, 42, 0.1),
        0 4px 12px rgba(15, 23, 42, 0.06);
    margin-inline: auto;
}

.layout-builder-visual-canvas[data-active-breakpoint='desktop']
    .layout-builder-shadow-preview {
    max-width: min(100%, 76rem);
}

.layout-builder-visual-canvas[data-active-breakpoint='tablet']
    .layout-builder-shadow-preview,
.layout-builder-visual-canvas[data-active-breakpoint='mobile']
    .layout-builder-shadow-preview {
    border: 0.75rem solid rgb(30, 41, 59);
    border-block-width: 1.875rem;
    border-radius: 1.625rem;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.16),
        0 18px 42px rgba(15, 23, 42, 0.14);
}

.layout-builder-visual-canvas[data-active-breakpoint='mobile']
    .layout-builder-shadow-preview {
    border-inline-width: 0.5rem;
    border-block-width: 1.625rem;
    border-radius: 1.875rem;
}

.dark .layout-builder-shadow-preview {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 16px 42px rgba(0, 0, 0, 0.42);
}

.layout-builder-shadow-preview-empty {
    min-height: 14rem;
}

.layout-builder-visual-canvas[data-layout-empty='true']
    .layout-builder-shadow-preview {
    display: none;
}

.layout-builder-canvas-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.5rem auto;
    max-width: 28rem;
    padding: 2.5rem 2rem;
    border-radius: 0.75rem;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.dark .layout-builder-canvas-empty-state {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(17, 24, 39, 0.6);
}

.layout-builder-canvas-empty-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--primary-500, #2563eb) 12%,
        transparent
    );
    color: var(--primary-600, #2563eb);
}

.layout-builder-canvas-empty-heading {
    margin-top: 0.5rem;
    color: rgb(15, 23, 42);
    font-size: 1rem;
    font-weight: 700;
}

.dark .layout-builder-canvas-empty-heading {
    color: rgb(248, 250, 252);
}

.layout-builder-canvas-empty-description {
    max-width: 22rem;
    color: rgb(100, 116, 139);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark .layout-builder-canvas-empty-description {
    color: rgb(148, 163, 184);
}

.layout-builder-canvas-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: center;
    justify-content: center;
}

.layout-builder-tree {
    display: flex;
    position: relative;
    min-height: 100%;
    flex-direction: column;
}

.layout-builder-tree-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.875rem 1rem 0.5rem;
    backdrop-filter: blur(14px);
}

.layout-builder-tree-header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
}

.layout-builder-tree-header-actions :where(.fi-icon-btn) {
    background: rgb(255, 255, 255) !important;
    color: rgb(71, 85, 105) !important;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06),
        0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

.layout-builder-tree-header-actions
    :where(.fi-icon-btn:hover, .fi-icon-btn:focus-visible) {
    background: rgb(248, 250, 252) !important;
    color: rgb(79, 70, 229) !important;
}

.layout-builder-tree-collapse-button {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    background: rgb(255, 255, 255);
    color: rgb(71, 85, 105);
    box-shadow: none;
}

.layout-builder-tree-collapse-button:hover,
.layout-builder-tree-collapse-button:focus-visible {
    background: rgb(248, 250, 252);
    color: rgb(79, 70, 229);
}

.dark .layout-builder-tree-header {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(17, 24, 39, 0.96);
}

.layout-builder-tree-header h2 {
    margin: 0;
    color: rgb(15, 23, 42);
    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dark .layout-builder-tree-header h2 {
    color: rgb(255, 255, 255);
}

.layout-builder-tree-counts {
    margin-top: 0.25rem;
    color: rgb(100, 116, 139);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
}

.layout-builder-tree-counts span {
    margin-inline: 0.25rem;
    opacity: 0.5;
}

.dark .layout-builder-tree-counts {
    color: rgb(148, 163, 184);
}

.layout-builder-tree-search {
    position: sticky;
    top: 4.4375rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 0;
    background: rgb(255, 255, 255);
    margin: 0 0.625rem 0.375rem;
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    color: rgb(100, 116, 139);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.035);
}

.layout-builder-tree-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: rgb(15, 23, 42);
    font-size: 0.78125rem;
    outline: none;
}

.layout-builder-tree-search-clear {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: rgb(100, 116, 139);
}

.layout-builder-tree-search-shortcut {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    background: rgba(15, 23, 42, 0.06);
    color: rgb(100, 116, 139);
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.layout-builder-tree-search:focus-within .layout-builder-tree-search-shortcut {
    opacity: 0;
}

.dark .layout-builder-tree-search-shortcut {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(148, 163, 184);
}

.layout-builder-tree-search-clear:hover,
.layout-builder-tree-search-clear:focus-visible {
    background: rgb(226, 232, 240);
    color: rgb(15, 23, 42);
    outline: none;
}

.layout-builder-tree-search-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0.375rem;
    color: rgb(100, 116, 139);
    font-size: 0.6875rem;
    font-weight: 650;
}

.dark .layout-builder-tree-search {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(17, 24, 39);
}

.dark .layout-builder-tree-search input {
    color: rgb(255, 255, 255);
}

.layout-builder-tree-list {
    display: grid;
    gap: 0.125rem;
    padding: 0.25rem 0.75rem 1rem;
    content-visibility: auto;
    contain-intrinsic-size: 42rem;
}

.layout-builder-tree-container {
    position: relative;
    min-width: 0;
    contain: layout style;
}

.layout-builder-tree-row {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.3125rem;
    padding: 0.28125rem 0.5rem;
    text-align: left;
    color: rgb(51, 65, 85);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.layout-builder-tree-row:hover,
.layout-builder-tree-row:focus-visible {
    background: rgb(241, 245, 249);
    color: rgb(15, 23, 42);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.layout-builder-tree-row-selected {
    background: rgb(255, 255, 255);
    color: rgb(30, 41, 59);
    box-shadow:
        inset 3px 0 0 rgb(37, 99, 235),
        0 10px 22px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.08);
}

.layout-builder-tree-row-selected::before {
    position: absolute;
    top: 0.3125rem;
    bottom: 0.3125rem;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgb(37, 99, 235);
    content: '';
}

.layout-builder-tree-row-container {
    margin-block: 0.125rem;
    min-height: 2rem;
}

.layout-builder-tree-row-widget {
    margin-left: 1.125rem;
    padding-left: 0.5rem;
    min-height: 1.75rem;
}

.layout-builder-tree-row-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
    opacity: 0.78;
}

.layout-builder-tree-widgets {
    position: relative;
    display: grid;
    gap: 0.0625rem;
    padding: 0 0 0.125rem;
}

.layout-builder-tree-widgets::before,
.layout-builder-tree-row-widget::before {
    display: none;
}

.layout-builder-tree-row-main {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0;
}

.layout-builder-tree-row-main span,
.layout-builder-tree-row-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-builder-tree-row-main span {
    font-size: 0.78125rem;
    font-weight: 650;
}

.layout-builder-tree-row-main small {
    color: rgb(100, 116, 139);
    font-size: 0.65625rem;
}

.layout-builder-tree-row-selected .layout-builder-tree-row-main small {
    color: rgb(99, 102, 241);
}

.layout-builder-inspector-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 0;
    background: rgba(248, 250, 252, 0.98);
    padding: 1rem;
    box-shadow: -1px 0 0 rgba(15, 23, 42, 0.06);
}

.layout-builder-inspector-stack {
    display: grid;
    gap: 0.625rem;
}

.layout-builder-inspector-empty {
    display: grid;
    gap: 0.5rem;
    align-content: center;
    min-height: 13rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(248, 250, 252));
    padding: 1rem;
    color: rgb(100, 116, 139);
    text-align: left;
    box-shadow: inset 2px 0 0 rgba(37, 99, 235, 0.22);
}

.layout-builder-inspector-empty svg {
    margin-inline: auto;
    color: rgb(79, 70, 229);
}

.layout-builder-inspector-empty p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.layout-builder-inspector-empty strong {
    color: rgb(15, 23, 42);
    font-size: 0.875rem;
    font-weight: 760;
}

.layout-builder-inspector-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.layout-builder-inspector-header p,
.layout-builder-inspector-card h4 {
    margin: 0;
    color: rgb(100, 116, 139);
    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.layout-builder-inspector-header h3 {
    margin: 0.25rem 0 0;
    color: rgb(15, 23, 42);
    font-size: 1.125rem;
    font-weight: 760;
    line-height: 1.2;
}

.layout-builder-inspector-header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
}

.layout-builder-inspector-header-actions > span {
    border-radius: 0.3125rem;
    background: rgb(241, 245, 255);
    padding: 0.25rem 0.5625rem;
    color: rgb(79, 70, 229);
    font-size: 0.6875rem;
    font-weight: 760;
    text-transform: capitalize;
}

.layout-builder-inspector-close {
    display: inline-flex;
    width: 1.875rem;
    height: 1.875rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: rgb(100, 116, 139);
    cursor: pointer;
    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.layout-builder-inspector-close:hover,
.layout-builder-inspector-close:focus-visible {
    background: rgb(226, 232, 240);
    color: rgb(15, 23, 42);
    outline: none;
}

.layout-builder-inspector-card {
    display: grid;
    gap: 0.625rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.625rem 0 0;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.08);
}

.dark .layout-builder-inspector-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.layout-builder-inspector-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.5rem 0.5625rem;
    color: rgb(71, 85, 105);
    font-size: 0.78125rem;
}

.layout-builder-inspector-field strong {
    color: rgb(15, 23, 42);
    font-weight: 720;
    text-transform: capitalize;
    text-align: right;
}

.dark .layout-builder-inspector-field {
    background: rgba(255, 255, 255, 0.04);
    color: rgb(148, 163, 184);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .layout-builder-inspector-field strong {
    color: rgb(241, 245, 249);
}

.layout-builder-inspector-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    border-radius: 0.5rem;
    background: rgb(241, 245, 249);
    padding: 0.25rem;
}

.layout-builder-inspector-segment button {
    min-width: 0;
    border-radius: 0.3125rem;
    padding: 0.4375rem 0.5rem;
    color: rgb(71, 85, 105);
    font-size: 0.75rem;
    font-weight: 700;
}

.layout-builder-inspector-segment button[aria-pressed='true'] {
    background: rgb(255, 255, 255);
    color: rgb(79, 70, 229);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.12);
}

.layout-builder-inspector-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--primary-600);
    padding: 0.5625rem 0.75rem;
    color: rgb(255, 255, 255);
    font-size: 0.8125rem;
    font-weight: 760;
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.14);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.layout-builder-inspector-actions-grid {
    display: grid;
    gap: 0.375rem;
}

.layout-builder-inspector-action:hover,
.layout-builder-inspector-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.16);
}

.layout-builder-inspector-action-secondary {
    background: rgb(255, 255, 255);
    color: rgb(30, 41, 59);
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.layout-builder-inspector-action-danger {
    background: rgb(254, 242, 242);
    color: rgb(185, 28, 28);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.28);
}

.layout-builder-inspector-action:disabled {
    cursor: not-allowed;
    background: rgb(226, 232, 240);
    color: rgb(100, 116, 139);
    box-shadow: none;
    transform: none;
}

.layout-builder-inspector-action.is-loading {
    color: transparent;
    pointer-events: none;
}

.layout-builder-inspector-action.is-loading::after {
    position: absolute;
    inset: calc(50% - 0.5rem);
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(100, 116, 139, 0.28);
    border-top-color: rgb(79, 70, 229);
    border-radius: 999px;
    content: '';
    animation: clb-inspector-spin 0.65s linear infinite;
}

@keyframes clb-inspector-spin {
    to {
        transform: rotate(360deg);
    }
}

.layout-builder-inspector-widget-controls h4 {
    margin-bottom: 0.5rem;
    color: rgb(82, 97, 91);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.layout-builder-inspector-stack-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.layout-builder-inspector-row-button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    border-radius: 0.4375rem;
    background: rgb(255, 255, 255);
    padding: 0.4375rem 0.625rem;
    color: rgb(30, 41, 59);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.1),
        0 1px 1px rgba(15, 23, 42, 0.04);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease;
}

.layout-builder-inspector-row-button svg {
    flex: 0 0 auto;
    opacity: 0.7;
}

.layout-builder-inspector-row-button:hover,
.layout-builder-inspector-row-button:focus-visible {
    background: rgb(248, 250, 252);
    color: rgb(15, 23, 42);
    box-shadow:
        inset 0 0 0 1px
            color-mix(
                in srgb,
                var(--primary-500, #2563eb) 35%,
                rgba(15, 23, 42, 0.12)
            ),
        0 2px 6px rgba(15, 23, 42, 0.08);
}

.layout-builder-inspector-row-button-secondary {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.dark .layout-builder-inspector-row-button {
    background: rgba(255, 255, 255, 0.04);
    color: rgb(226, 232, 240);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 1px 1px rgba(0, 0, 0, 0.18);
}

.dark .layout-builder-inspector-row-button:hover,
.dark .layout-builder-inspector-row-button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: rgb(248, 250, 252);
}

.dark .layout-builder-inspector-row-button-secondary {
    background: transparent;
}

.layout-builder-inspector-asset-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.layout-builder-inspector-asset-row-label {
    color: rgb(82, 97, 91);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dark .layout-builder-inspector-asset-row-label {
    color: rgb(148, 163, 184);
}

.layout-builder-inspector-asset-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.layout-builder-tree-badge {
    border-radius: 0.3125rem;
    background: rgb(243, 244, 246);
    padding: 0.125rem 0.375rem;
    color: rgb(75, 85, 99);
    font-size: 0.6875rem;
    font-weight: 700;
}

.layout-builder-tree-empty {
    padding: 0.625rem 0.75rem;
    color: rgb(107, 114, 128);
    font-size: 0.8125rem;
}

.layout-builder-tree-search-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    background: rgb(255, 255, 255);
    padding: 0.625rem 0.75rem;
    color: rgb(100, 116, 139);
    font-size: 0.78125rem;
    font-weight: 650;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.layout-builder-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 23, 42, 0.45);
}

.layout-builder-responsive-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 90;
    width: min(28rem, calc(100vw - 2rem));
    overflow: auto;
    background: rgb(255, 255, 255);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}

.layout-builder-responsive-drawer-left {
    left: 0;
}

.layout-builder-responsive-drawer-right {
    right: 0;
}

.dark .layout-builder-responsive-drawer {
    background: rgb(17, 24, 39);
}

@media (min-width: 1024px) {
    .layout-builder-panel-toggle {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-visual-panel,
    .layout-builder-studio-rail,
    .layout-builder-inspector-panel {
        display: none;
    }

    .layout-builder-visual-canvas {
        padding: 0.75rem;
    }
}

@container (max-width: 48rem) {
    .layout-builder-panel-toggle {
        display: inline-flex;
    }

    .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-visual-panel,
    .layout-builder-studio-rail,
    .layout-builder-inspector-panel {
        display: none;
    }

    .layout-builder-visual-canvas {
        padding: 0.75rem;
    }

    .layout-builder-visual-actions {
        flex-wrap: wrap;
    }

    .layout-builder-editor-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

@container (max-width: 38rem) {
    .layout-builder-preview-command-label span {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .layout-builder-visual-toolbar-start {
        flex-wrap: wrap;
    }

    .layout-builder-command-save {
        min-width: 0;
    }
}

.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-visual-grid {
    grid-template-columns: 4.25rem minmax(0, 1fr);
}

.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-inspector-panel {
    display: none;
}

/* Refreshed editor shell. Keep this after the legacy builder rules. */
.layout-builder-visual-editor {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.5rem;
    background: rgb(245, 247, 244);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.layout-builder-visual-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(252, 255, 251, 0.96);
    padding: 0.5rem 0.75rem;
    box-shadow: none;
}

.layout-builder-visual-toolbar-start {
    gap: 0.5rem;
}

.layout-builder-editor-title,
.layout-builder-editor-context,
.layout-builder-editor-status {
    display: inline-flex;
    min-width: 0;
    align-items: center;
}

.layout-builder-editor-title {
    gap: 0.5rem;
}

.layout-builder-editor-title strong {
    min-width: 0;
    overflow: hidden;
    color: rgb(16, 23, 21);
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .layout-builder-editor-title strong {
    color: rgb(248, 255, 251);
}

.layout-builder-editor-status {
    flex: 0 0 auto;
    gap: 0.25rem;
    border-radius: 0.375rem;
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.layout-builder-editor-status-unsaved {
    background: color-mix(in srgb, var(--warning-500, #eab308) 15%, white);
    color: rgb(133, 77, 14);
}

.layout-builder-editor-context {
    max-width: min(32vw, 28rem);
    gap: 0.375rem;
    padding-left: 0.75rem;
    margin-left: 0.25rem;
    border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.layout-builder-editor-context span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.375rem;
    color: rgb(100, 116, 139);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-builder-editor-context span svg {
    flex: 0 0 auto;
    opacity: 0.7;
}

.dark .layout-builder-editor-context {
    border-left-color: rgba(255, 255, 255, 0.12);
}

.dark .layout-builder-editor-context span {
    color: rgb(148, 163, 184);
}

.layout-builder-editor-summary,
.layout-builder-studio-rail {
    display: none;
}

.layout-builder-panel-toggle {
    display: inline-flex;
}

.layout-builder-command-group,
.layout-builder-breakpoint-controls {
    background: rgb(245, 247, 244);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.dark .layout-builder-command-group,
.dark .layout-builder-breakpoint-controls {
    background: rgb(17, 24, 39);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.layout-builder-panel-toggle:hover,
.layout-builder-panel-toggle:focus-visible,
.layout-builder-panel-collapse-toggle:hover,
.layout-builder-panel-collapse-toggle:focus-visible,
.layout-builder-breakpoint-button:hover,
.layout-builder-breakpoint-button:focus-visible,
.layout-builder-breakpoint-button[aria-pressed='true'] {
    background: rgb(252, 255, 251);
    color: var(--primary-600);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 22%, transparent);
    transform: none;
}

.layout-builder-visual-toolbar :where(.fi-btn.fi-color-primary) {
    border-radius: 0.625rem !important;
    background: rgb(17, 24, 39) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow: none !important;
}

.layout-builder-visual-toolbar
    :where(
        .fi-btn.fi-color-primary:hover,
        .fi-btn.fi-color-primary:focus-visible
    ) {
    background: rgb(36, 76, 67) !important;
}

.layout-builder-visual-grid,
.layout-builder-visual-editor[data-tree-collapsed='true']
    .layout-builder-visual-grid,
.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-visual-grid {
    grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr) minmax(
            18rem,
            22rem
        );
    min-height: max(44rem, calc(100vh - 12rem));
    background: rgb(241, 244, 242);
    background-image: none;
}

.layout-builder-visual-editor[data-tree-collapsed='true']
    .layout-builder-visual-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
}

.layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
    .layout-builder-visual-grid {
    grid-template-columns: minmax(0, 1fr);
}

.layout-builder-visual-editor[data-tree-collapsed='true']
    .layout-builder-visual-panel-tree {
    display: none;
}

.layout-builder-visual-panel,
.layout-builder-inspector-panel {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgb(252, 255, 251);
    box-shadow: none;
}

.layout-builder-visual-panel-tree {
    border-right-width: 1px;
}

.layout-builder-inspector-panel {
    border-left: 1px solid rgba(15, 23, 42, 0.1);
    padding: 1.125rem;
}

.dark .layout-builder-visual-panel,
.dark .layout-builder-inspector-panel {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgb(17, 24, 39);
}

.dark .layout-builder-inspector-panel {
    border-left-color: rgba(255, 255, 255, 0.08);
}

.layout-builder-visual-canvas {
    background: rgb(241, 244, 242);
    padding: clamp(1rem, 1.6vw, 1.75rem);
}

.layout-builder-shadow-preview {
    border-radius: 0;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 16px 34px rgba(15, 23, 42, 0.08);
}

.layout-builder-tree-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgb(252, 255, 251);
    padding: 1.125rem 1rem;
}

.dark .layout-builder-tree-header {
    background: rgb(17, 24, 39);
}

.layout-builder-tree-header h2 {
    color: rgb(16, 23, 21);
    font-size: 1.05rem;
    font-weight: 760;
    text-transform: none;
}

.dark .layout-builder-tree-header h2 {
    color: rgb(248, 255, 251);
}

.layout-builder-tree-search {
    background: rgb(245, 247, 244);
    box-shadow: none;
}

.dark .layout-builder-tree-search {
    background: rgb(31, 41, 55);
}

.layout-builder-tree-row {
    border-radius: 0.5rem;
    padding: 0.3125rem 0.5rem;
}

.layout-builder-tree-row:hover,
.layout-builder-tree-row:focus-visible {
    background: rgb(245, 247, 244);
    box-shadow: none;
}

.layout-builder-tree-row-selected {
    background: rgb(239, 247, 245);
    color: rgb(16, 23, 21);
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--primary-500) 24%, transparent);
}

.layout-builder-tree-row-selected::before {
    background: var(--primary-600);
}

.layout-builder-tree-row-selected .layout-builder-tree-row-main small {
    color: var(--primary-700);
}

.layout-builder-inspector-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 1rem;
}

.layout-builder-inspector-header p,
.layout-builder-inspector-card h4 {
    color: rgb(82, 97, 91);
    font-size: 0.8125rem;
    text-transform: none;
}

.layout-builder-inspector-header h3 {
    color: rgb(16, 23, 21);
    font-size: 1.05rem;
}

.layout-builder-inspector-card {
    gap: 0.75rem;
    padding-top: 1rem;
}

.layout-builder-inspector-field {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.5rem;
    background: rgb(245, 247, 244);
}

.layout-builder-inspector-action {
    border-radius: 0.625rem;
    background: rgb(17, 24, 39);
    box-shadow: none;
}

.layout-builder-inspector-action:hover,
.layout-builder-inspector-action:focus-visible {
    background: rgb(36, 76, 67);
    box-shadow: none;
    transform: none;
}

.layout-builder-inspector-action-secondary {
    background: rgb(252, 255, 251);
    color: rgb(16, 23, 21);
}

.layout-builder-inspector-action-danger {
    background: rgb(254, 242, 242);
    color: rgb(185, 28, 28);
}

.layout-builder-inspector-empty {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgb(245, 247, 244);
    box-shadow: none;
}

@media (max-width: 1280px) {
    .layout-builder-editor-context {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .layout-builder-visual-grid,
    .layout-builder-visual-editor[data-tree-collapsed='true']
        .layout-builder-visual-grid,
    .layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
        .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-breakpoint-controls
        .layout-builder-preview-command-label
        span {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@container (max-width: 48rem) {
    .layout-builder-visual-grid,
    .layout-builder-visual-editor[data-tree-collapsed='true']
        .layout-builder-visual-grid,
    .layout-builder-visual-editor[data-tree-collapsed='true'][data-inspector-open='false']
        .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-editor-status {
        display: none;
    }
}