:root {
        --fc-primary-color: #673DE6;
        /* Folder base color is mixed with highlight; tweak weights if user accent is too dark/light */
        --fc-folder-base: color-mix(in srgb, var(--fc-primary-color) 65%, #f85f60 35%);
        --fc-folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 1080'%3E%3Cpath fill='black' d='M864.51 787.3H210.18c-36.45 0-66-29.55-66-66V192.12c0-34.15 27.69-61.84 61.84-61.84h164.94c7.37 0 14.57 2.24 20.63 6.43l52.03 38.35c15.42 11.37 34.08 17.5 53.24 17.5h371.38c30.52 0 55.26 24.74 55.26 55.26v480.47c0 32.58-26.42 59-59 59Z'/%3E%3Cpath fill='black' d='M200.95 241.68h660.72c34.13 0 61.84 27.71 61.84 61.84v424.77c0 32.56-26.44 59-59 59H210.18c-36.43 0-66-29.57-66-66v-422.84c0-31.33 25.44-56.77 56.77-56.77Z'/%3E%3C/svg%3E");
        --fc-body-bg: #f7f7f9;
        --fc-container-bg: #FFFFFF;
        --fc-text-dark: #231E39;
        --fc-text-light: #6A6A6A;
        --fc-border-color: #E7E7E7;
        --fc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --fc-border-radius: 8px;
        --fc-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
    }

    body.frontcat-gallery-modal-mode {
        padding: 0;
        margin: 0;
        font-family: var(--fc-font-family, var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif));
        background-color: transparent;
        overflow: hidden; 
    }

    .frontcat-gallery-wrap button, 
    .frontcat-gallery-wrap input, 
    .frontcat-gallery-wrap select,
    .frontcat-gallery-wrap h2,
    .frontcat-gallery-wrap a {
        font-family: var(--fc-font-family);
    }

    .frontcat-gallery-wrap {
        height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        max-width: 100%;
        max-height: 100%;
        border-radius: var(--fc-border-radius);
        overflow: hidden; 
        font-family: var(--fc-font-family, var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif));
        color: var(--fc-text-dark);
    }

    #frontcat-gallery-close {
        position: absolute;
        top: 10px;
        right: 15px;
        z-index: 90;
        background-color: rgba(0,0,0,0.4);
        color: white;
    }
    #frontcat-gallery-close:hover {
        background-color: rgba(0,0,0,0.6);
        color: white;
    }

    .frontcat-gallery-layout {
        display: flex;
        gap: 24px;
        align-items: stretch;
        flex-grow: 1;
        min-height: 0;
        padding: 20px;
    }

    .gallery-sidebar {
            flex: 0 0 325px;
            max-width: 325px;
            background-color: var(--fc-container-bg);
            border: 1px solid var(--fc-border-color);
            border-radius: var(--fc-border-radius);
            display: flex;
            flex-direction: column;
            box-shadow: var(--fc-box-shadow);
        }
    .gallery-sidebar-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--fc-border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .gallery-sidebar-header h2 {
        font-size: 16px;
        margin: 0;
        color: var(--fc-text-dark);
    }
    .gallery-sidebar-content {
        padding: 10px;
        overflow-y: auto;
        flex-grow: 1;
    }
    .gallery-sidebar-footer {
        padding: 15px;
        border-top: 1px solid var(--fc-border-color);
    }
    .gallery-sidebar-footer #new-folder-parent {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        margin-bottom: 10px;
        background-color: var(--fc-body-bg, #f7f7f9);
        border: 1px solid var(--fc-border-color, #E7E7E7);
        border-radius: var(--fc-border-radius, 8px);
        color: var(--fc-text-dark, #231E39);
        font-family: var(--fc-font-family, "Roboto", sans-serif);
        font-size: 14px;
        line-height: 1.4;
        padding: 12px 15px;
        padding-right: 42px;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23231E39' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
    }
    .gallery-sidebar-footer #new-folder-parent::picker-icon { display: none; }
    .gallery-sidebar-footer #new-folder-parent:focus {
        outline: none;
        border-color: var(--fc-primary-color, var(--e-global-color-primary, #FF3131));
        background-color: var(--fc-container-bg, #FFFFFF);
        box-shadow: 0 0 0 3px rgba(255, 49, 49, 0.1);
    }
    .gallery-sidebar-footer #new-folder-parent::picker(select) {
        appearance: base-select;
        background-color: var(--fc-container-bg, #FFFFFF);
        border: 1px solid var(--fc-border-color, #E7E7E7);
        border-radius: var(--fc-border-radius, 8px);
        box-shadow: var(--fc-box-shadow, 0px 4px 12px rgba(0, 0, 0, 0.05));
        padding: 5px;
        margin-top: 5px;
        max-height: 240px;
        overflow-y: auto;
    }
    .gallery-sidebar-footer #new-folder-parent option {
        padding: 10px 15px;
        margin-bottom: 2px;
        border-radius: 4px;
        color: var(--fc-text-dark, #231E39);
        font-family: var(--fc-font-family, "Roboto", sans-serif);
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
        border: none;
    }
    .gallery-sidebar-footer #new-folder-parent option:hover,
    .gallery-sidebar-footer #new-folder-parent option:checked,
    .gallery-sidebar-footer #new-folder-parent option:focus {
        background-color: var(--fc-primary-color, var(--e-global-color-primary, #FF3131)) !important;
        color: #ffffff !important;
    }
    .gallery-sidebar-footer #new-folder-name {
        width: -webkit-fill-available;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--fc-border-color);
        border-radius: var(--fc-border-radius);
        background-color: var(--fc-container-bg);
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .gallery-sidebar-footer #new-folder-name:focus {
        border-color: var(--fc-primary-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary-color) 20%, transparent);
        outline: none;
    }

    .frontcat-gallery-wrap .gallery-sidebar-footer .button {
        width: 100%;
    }

    .frontcat-folder-actions-row {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    .frontcat-folder-actions-row .button {
        width: auto;
        flex: 1 1 0;
    }

    .frontcat-gallery-wrap .button, .frontcat-gallery-wrap .button-secondary {
        background-color: var(--fc-primary-color);
        color: #fff;
        border: none;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 500;
        border-radius: var(--fc-border-radius);
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        white-space: nowrap;
    }
    .frontcat-gallery-wrap .button svg, .frontcat-gallery-wrap .button-secondary svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
        flex-shrink: 0;
    }
    .frontcat-gallery-wrap .button:hover {
        background-color: color-mix(in srgb, var(--fc-primary-color) 90%, black);
    }
    .frontcat-gallery-wrap .button.is-destructive {
        background-color: #d63638;
        color: #fff;
    }
    .frontcat-gallery-wrap .button.is-destructive:hover {
        background-color: #b02a2c;
    }
    .frontcat-gallery-wrap .button-secondary {
        background-color: #f0f0f1;
        color: #1e1e1e;
        border: 1px solid #dcdcde;
    }
    .frontcat-gallery-wrap .button-secondary:hover {
        background-color: #e7e7e8;
        border-color: #caccd0;
    }
    .frontcat-gallery-wrap .button-icon-only {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--fc-text-light);
    }
    .frontcat-gallery-wrap .button-icon-only:hover {
        background-color: #f0f0f1;
        color: var(--fc-text-dark);
    }
    .frontcat-gallery-wrap .button-icon-only svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }

    .frontcat-bulk-delete-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .frontcat-bulk-delete-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .frontcat-bulk-delete-hint {
        margin: 0;
        color: #111827;
        font-size: 14px;
        line-height: 1.55;
    }

    .frontcat-bulk-delete-counter {
        display: inline-flex;
        align-self: flex-start;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.06);
        color: #111827;
        font-size: 12px;
        line-height: 1;
        font-weight: 600;
    }

    .frontcat-bulk-folder-list {
        max-height: 280px;
        overflow: auto;
        border: 1px solid var(--fc-border-color);
        border-radius: 14px;
        padding: 8px;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .frontcat-bulk-folder-item {
        display: flex;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 12px;
        background: #fff;
        font-size: 14px;
        color: #111827;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
        box-sizing: border-box;
    }

    .frontcat-bulk-folder-item:hover {
        border-color: rgba(239, 68, 68, 0.16);
        background: #fff5f5;
    }

    .frontcat-bulk-folder-checkbox {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        pointer-events: none !important;
    }

    .frontcat-bulk-folder-check {
        width: 18px;
        height: 18px;
        min-width: 18px;
        flex: 0 0 18px;
        border-radius: 6px;
        border: 1px solid rgba(17, 24, 39, 0.16);
        background: #fff;
        box-sizing: border-box;
        position: relative;
        pointer-events: none;
        margin-top: 1px;
    }

    .frontcat-bulk-folder-checkbox:checked + .frontcat-bulk-folder-check {
        background: #ef4444;
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
    }

    .frontcat-bulk-folder-checkbox:checked + .frontcat-bulk-folder-check::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }

    .frontcat-bulk-folder-checkbox:focus-visible + .frontcat-bulk-folder-check {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
        border-color: color-mix(in srgb, var(--fc-primary-color) 70%, #ffffff);
    }

    .frontcat-bulk-folder-meta {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        gap: 2px;
        box-sizing: border-box;
    }

    .frontcat-bulk-folder-name {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        font-weight: 600;
        line-height: 1.35;
        color: #111827;
    }

    .frontcat-bulk-folder-path {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.35;
        font-size: 12px;
        color: #6b7280;
    }

    .frontcat-delete-media-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        background: #fff7ed;
        border: 1px solid rgba(251, 146, 60, 0.2);
        font-size: 14px;
        color: #111827;
    }

    .frontcat-delete-media-toggle input[type="checkbox"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        pointer-events: none !important;
    }

    .frontcat-delete-media-check {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1px solid rgba(17, 24, 39, 0.16);
        background: #fff;
        box-sizing: border-box;
        position: relative;
        flex: 0 0 18px;
        pointer-events: none;
    }

    .frontcat-delete-media-toggle input[type="checkbox"]:checked + .frontcat-delete-media-check {
        background: #ef4444;
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
    }

    .frontcat-delete-media-toggle input[type="checkbox"]:checked + .frontcat-delete-media-check::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }

    .frontcat-delete-media-toggle input[type="checkbox"]:focus-visible + .frontcat-delete-media-check {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
        border-color: color-mix(in srgb, var(--fc-primary-color) 70%, #ffffff);
    }

    .frontcat-delete-media-hint {
        margin: -4px 0 0 0;
        font-size: 13px;
        color: #4b5563;
    }


    .frontcat-gallery-wrap .gallery-folder-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .frontcat-gallery-wrap .gallery-folder-list li {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        min-width: 0; /* allow text ellipsis on desktop */
    }

    .frontcat-gallery-wrap .frontcat-folder-list__icon {
        display: inline-block;
        width: 32px;
        height: 26px;
        margin-right: 12px;
        position: relative;
        vertical-align: middle;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--fc-folder-base) 90%, #ffffff) 0%,
                color-mix(in srgb, var(--fc-folder-base) 75%, #ffffff) 40%,
                color-mix(in srgb, var(--fc-folder-base) 60%, #ffffff) 100%),
            linear-gradient(130deg,
                color-mix(in srgb, var(--fc-folder-base) 40%, #ffffff) 0%,
                transparent 55%),
            linear-gradient(0deg,
                color-mix(in srgb, var(--fc-folder-base) 60%, #000000) 0%,
                transparent 70%);
        background-color: var(--fc-folder-base);
        mask-image: var(--fc-folder-mask);
        -webkit-mask-image: var(--fc-folder-mask);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
    }
    .frontcat-gallery-wrap .frontcat-folder-list__icon::before { display: none; }
    .frontcat-gallery-wrap .frontcat-folder-list__label {
            display: block;
            vertical-align: middle;
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
            max-width: calc(100% - 48px); /* leave room for the options button */
        white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .frontcat-gallery-wrap .gallery-folder-list li a {
        flex-grow: 1;
        min-width: 0;
        width: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 10px;
        padding: 10px 52px 10px 15px;
        text-decoration: none;
        color: var(--fc-text-dark);
        border-radius: 6px;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        font-weight: 500;
        overflow: hidden;
    }
    .frontcat-gallery-wrap .gallery-folder-list li a[title],
    .frontcat-gallery-wrap .gallery-folder-list .frontcat-folder-list__label[title] {
        cursor: pointer;
    }

    .frontcat-gallery-wrap #frontcat-current-folder {
        display: none !important;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-list {
        width: 100%;
        box-sizing: border-box;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-meta {
        width: 100%;
        min-width: 0;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-name,
    .frontcat-confirm-panel .frontcat-bulk-folder-path {
        max-width: 100%;
    }

    .frontcat-gallery-wrap .gallery-folder-list li a:hover {
        background-color: #f0f0f0;
    }
    .frontcat-gallery-wrap .gallery-folder-list li a.active {
        background-color: color-mix(in srgb, var(--fc-primary-color) 10%, transparent);
        color: var(--fc-primary-color);
        font-weight: 600;
    }

    /* Drag & drop: highlight drop target for folder moves */
    .frontcat-gallery-wrap .gallery-folder-list li a.frontcat-folder-drop-target {
        background-color: color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #9e9e9e;
        background: transparent;
        border: none;
        border-radius: 8px;
        padding: 0;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-button:hover {
        background-color: #f0f0f1;
        color: var(--fc-text-dark);
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown {
        display: none;
        position: absolute;
        right: 8px;
        top: calc(50% + 18px);
        background: #fff;
        border: 1px solid #dcdcde;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        min-width: 150px;
        overflow: hidden;
        z-index: 2000;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown.is-open {
        display: block;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown button {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        background: none;
        border: none;
        border-bottom: 1px solid #f0f0f1;
        color: var(--fc-text-dark);
        font-size: 13px;
        line-height: 1.4;
        cursor: pointer;
        display: block;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown button:last-child {
        border-bottom: none;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown button:hover {
        background: #f7f7f9;
    }

    .frontcat-gallery-wrap .gallery-folder-list .folder-options-dropdown .delete-folder-button {
        color: #d63638;
    }

    .gallery-main {
        flex: 1;
        min-width: 0;
        min-height: 0;
        background-color: var(--fc-container-bg);
        border: 1px solid var(--fc-border-color);
        border-radius: var(--fc-border-radius);
        display: flex;
        flex-direction: column;
        box-shadow: var(--fc-box-shadow);
    }
    .gallery-main-header {
        padding: 12px 20px;
        border-bottom: 1px solid var(--fc-border-color);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .header-row-1 {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex-grow: 1;
    }
        .header-title-wrap {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
    .header-row-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .gallery-main-header h2 {
        font-size: 16px;
        margin: 0;
        flex-shrink: 0;
        color: var(--fc-text-dark);
        min-width: 0;
    }
    .gallery-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
        color: var(--fc-text-dark);
        line-height: 1.45;
        min-height: 16px;
        padding: 8px 12px;
        background: #f8fafc;
        border: 1px solid #d8e1ee;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .gallery-breadcrumb .frontcat-breadcrumb__link {
        background: none;
        border: none;
        padding: 0;
        color: var(--fc-primary-color);
        cursor: pointer;
        font-size: inherit;
        line-height: inherit;
        font-weight: 600;
        text-decoration: none;
    }
    .gallery-breadcrumb .frontcat-breadcrumb__link:hover,
    .gallery-breadcrumb .frontcat-breadcrumb__link:focus,
    .gallery-breadcrumb .frontcat-breadcrumb__link:active {
        text-decoration: none;
        color: var(--fc-primary-color);
        background: none;
        box-shadow: none;
        outline: none;
    }
    .gallery-breadcrumb .frontcat-breadcrumb__current {
        color: var(--fc-text-dark);
        font-weight: 700;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .gallery-breadcrumb .frontcat-breadcrumb__sep {
        color: #94a3b8;
        user-select: none;
        font-weight: 700;
    }
    .gallery-select-actions {
        display: flex;
        gap: 15px;
        font-size: 13px;
        align-items: center;
        flex: 1 1 240px;
        margin-right: 0;
    }

    .gallery-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex: 0 1 auto;
        flex-wrap: wrap;
    }
    .gallery-select-actions a {
        text-decoration: none;
        color: var(--fc-primary-color);
        font-weight: 500;
    }
    .gallery-select-actions a:hover {
        text-decoration: underline;
    }
    .gallery-main-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        flex-wrap: wrap;
    }
    .gallery-main-actions select {
        padding: 8px 12px;
        border: 1px solid var(--fc-border-color);
        border-radius: var(--fc-border-radius);
    }

    .gallery-main-actions #move-to-folder-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: var(--fc-body-bg, #f7f7f9);
        border: 1px solid var(--fc-border-color, #E7E7E7);
        border-radius: var(--fc-border-radius, 8px);
        color: var(--fc-text-dark, #231E39);
        font-family: var(--fc-font-family, "Roboto", sans-serif);
        font-size: 14px;
        line-height: 1.4;
        padding: 10px 12px;
        padding-right: 38px;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23231E39' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
    }
    .gallery-main-actions #move-to-folder-select::picker-icon { display: none; }
    .gallery-main-actions #move-to-folder-select:focus {
        outline: none;
        border-color: var(--fc-primary-color, var(--e-global-color-primary, #FF3131));
        background-color: var(--fc-container-bg, #FFFFFF);
        box-shadow: 0 0 0 3px rgba(255, 49, 49, 0.1);
    }
    .gallery-main-actions #move-to-folder-select::picker(select) {
        appearance: base-select;
        background-color: var(--fc-container-bg, #FFFFFF);
        border: 1px solid var(--fc-border-color, #E7E7E7);
        border-radius: var(--fc-border-radius, 8px);
        box-shadow: var(--fc-box-shadow, 0px 4px 12px rgba(0, 0, 0, 0.05));
        padding: 5px;
        margin-top: 5px;
        max-height: 240px;
        overflow-y: auto;
    }
    .gallery-main-actions #move-to-folder-select option {
        padding: 10px 15px;
        margin-bottom: 2px;
        border-radius: 4px;
        color: var(--fc-text-dark, #231E39);
        font-family: var(--fc-font-family, "Roboto", sans-serif);
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
        border: none;
    }
    .gallery-main-actions #move-to-folder-select option:hover,
    .gallery-main-actions #move-to-folder-select option:checked,
    .gallery-main-actions #move-to-folder-select option:focus {
        background-color: var(--fc-primary-color, var(--e-global-color-primary, #FF3131)) !important;
        color: #ffffff !important;
    }
    .gallery-main-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-height: 0;
        overflow: hidden;
        padding: 0;
    }

    .gallery-main-content,
    .gallery-image-grid {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .gallery-image-grid {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-gutter: stable both-edges;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-auto-rows: max-content;
        gap: 15px;
        align-content: start;
        align-items: stretch;
    }

    #frontcat-image-grid > .gallery-loader,
    #frontcat-image-grid > p {
        grid-column: 1 / -1;
    }

    #frontcat-image-grid .frontcat-folder-card {
        aspect-ratio: 1 / 1;
        min-height: 0;
        display: block;
    }

    #frontcat-image-grid .frontcat-folder-card__icon {
        height: 100%;
    }

    #frontcat-image-grid .frontcat-folder-card__name {
        display: none;
    }

    #frontcat-gallery-pagination.frontcat-gallery-pagination {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #frontcat-gallery-pagination.frontcat-pagination-wrapper {
        margin-top: 0;
        padding: 14px 20px 20px;
        border-top: 1px solid var(--fc-border-color);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
        align-items: center;
    }

    #frontcat-gallery-pagination.frontcat-pagination-infinite {
        margin-top: 0;
        padding: 14px 20px 20px;
        border-top: 1px solid var(--fc-border-color);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .frontcat-pagination-wrapper {
        display: flex;
        justify-content: center;
        transition: opacity 0.3s;
    }

    .frontcat-pagination-wrapper .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        margin: 0 4px;
        text-decoration: none;
        border: 1px solid var(--fc-border-color);
        color: var(--fc-text-light);
        background-color: var(--fc-container-bg);
        border-radius: var(--fc-border-radius);
        transition: all 0.2s;
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
    }

    .frontcat-pagination-wrapper .page-numbers:hover {
        border-color: var(--fc-primary-color);
        color: var(--fc-primary-color);
        background-color: color-mix(in srgb, var(--fc-primary-color) 10%, transparent);
    }

    .frontcat-pagination-wrapper .page-numbers.current {
        background-color: var(--fc-primary-color);
        border-color: var(--fc-primary-color);
        color: #fff;
        cursor: default;
    }

    .frontcat-pagination-wrapper .page-numbers.current:hover {
        background-color: var(--fc-primary-color);
        border-color: var(--fc-primary-color);
        color: #fff;
    }

    .frontcat-pagination-wrapper .page-numbers:disabled {
        opacity: 0.9;
        cursor: default;
    }

    .frontcat-pagination-wrapper .page-numbers.dots {
        border-color: transparent;
        background-color: transparent;
        cursor: default;
    }

    .frontcat-pagination-wrapper .page-numbers.dots:hover {
        color: var(--fc-text-light);
    }

    .frontcat-pagination-infinite {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .frontcat-pagination-infinite .frontcat-load-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 160px;
        height: 40px;
        padding: 0 16px;
        border: 1px solid var(--fc-border-color);
        color: var(--fc-text-light);
        background-color: var(--fc-container-bg);
        border-radius: var(--fc-border-radius);
        transition: all 0.2s;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }

    .frontcat-pagination-infinite .frontcat-load-more:hover {
        border-color: var(--fc-primary-color);
        color: var(--fc-primary-color);
        background-color: color-mix(in srgb, var(--fc-primary-color) 10%, transparent);
    }

    .frontcat-pagination-infinite .frontcat-load-more:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .frontcat-load-more-sentinel {
        width: 100%;
        height: 1px;
    }

    .frontcat-gallery-pagination {
        padding: var(--fc-gp-container-padding, 14px 20px 20px);
        border-top: var(--fc-gp-container-border, 1px solid var(--fc-border-color));
        background: var(--fc-gp-container-background, transparent);
        border-radius: var(--fc-gp-container-radius, 0);
        box-shadow: var(--fc-gp-container-shadow, none);
        margin-top: var(--fc-gp-container-margin-top, 0);
        display: flex;
        align-items: center;
        justify-content: var(--fc-gp-container-justify, center);
        gap: var(--fc-gp-container-gap, 12px);
        flex-wrap: wrap;
    }

    .frontcat-gallery-pagination .frontcat-gallery-pagination-note {
        font-size: clamp(12px, var(--fc-gp-note-font-size, 13px), 18px);
        color: var(--fc-gp-note-color, var(--fc-text-light));
        font-weight: var(--fc-gp-note-font-weight, 500);
        font-family: var(--fc-gp-note-font-family, inherit);
        line-height: var(--fc-gp-note-line-height, normal);
        letter-spacing: var(--fc-gp-note-letter-spacing, normal);
        text-transform: var(--fc-gp-note-text-transform, none);
    }

    .frontcat-gallery-pagination-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .frontcat-gallery-page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .frontcat-gallery-page-dots {
        color: var(--fc-gp-dots-color, var(--fc-text-light));
        font-weight: 700;
        user-select: none;
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-number {
        color: var(--fc-gp-number-color, #1e1e1e);
        background: var(--fc-gp-number-background, #f0f0f1);
        border: var(--fc-gp-number-border, 1px solid #dcdcde);
        border-radius: var(--fc-gp-number-radius, 6px);
        padding: var(--fc-gp-number-padding, 8px 12px);
        box-shadow: var(--fc-gp-number-shadow, none);
        font-family: var(--fc-gp-number-font-family, inherit);
        font-size: clamp(12px, var(--fc-gp-number-font-size, 13px), 18px);
        font-weight: var(--fc-gp-number-font-weight, 500);
        line-height: var(--fc-gp-number-line-height, normal);
        letter-spacing: var(--fc-gp-number-letter-spacing, normal);
        text-transform: var(--fc-gp-number-text-transform, none);
        min-width: 34px;
        min-height: 34px;
        box-sizing: border-box;
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-number:hover {
        color: var(--fc-gp-number-hover-color, var(--fc-gp-number-color, #1e1e1e));
        background: var(--fc-gp-number-hover-background, #e7e7e8);
        border: var(--fc-gp-number-hover-border, 1px solid #caccd0);
        border-radius: var(--fc-gp-number-hover-radius, var(--fc-gp-number-radius, 6px));
        padding: var(--fc-gp-number-hover-padding, var(--fc-gp-number-padding, 8px 12px));
        box-shadow: var(--fc-gp-number-hover-shadow, var(--fc-gp-number-shadow, none));
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-number.is-current,
    .frontcat-gallery-pagination .frontcat-gallery-page-number.is-current:hover {
        background: var(--fc-gp-number-active-background, var(--fc-primary-color));
        color: var(--fc-gp-number-active-color, #ffffff);
        border: var(--fc-gp-number-active-border, 1px solid transparent);
        cursor: default;
        opacity: 1;
        border-radius: var(--fc-gp-number-active-radius, var(--fc-gp-number-radius, 6px));
        padding: var(--fc-gp-number-active-padding, var(--fc-gp-number-padding, 8px 12px));
        box-shadow: var(--fc-gp-number-active-shadow, var(--fc-gp-number-shadow, none));
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-prev,
    .frontcat-gallery-pagination .frontcat-gallery-page-next {
        color: var(--fc-gp-nav-color, #1e1e1e);
        background: var(--fc-gp-nav-background, #f0f0f1);
        border: var(--fc-gp-nav-border, 1px solid #dcdcde);
        border-radius: var(--fc-gp-nav-radius, 6px);
        padding: var(--fc-gp-nav-padding, 8px 12px);
        box-shadow: var(--fc-gp-nav-shadow, none);
        font-family: var(--fc-gp-nav-font-family, inherit);
        font-size: clamp(12px, var(--fc-gp-nav-font-size, 13px), 18px);
        font-weight: var(--fc-gp-nav-font-weight, 500);
        line-height: var(--fc-gp-nav-line-height, normal);
        letter-spacing: var(--fc-gp-nav-letter-spacing, normal);
        text-transform: var(--fc-gp-nav-text-transform, none);
        min-height: 34px;
        box-sizing: border-box;
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-prev:hover,
    .frontcat-gallery-pagination .frontcat-gallery-page-next:hover {
        color: var(--fc-gp-nav-hover-color, var(--fc-gp-nav-color, #1e1e1e));
        background: var(--fc-gp-nav-hover-background, #e7e7e8);
        border: var(--fc-gp-nav-hover-border, 1px solid #caccd0);
        border-radius: var(--fc-gp-nav-hover-radius, var(--fc-gp-nav-radius, 6px));
        padding: var(--fc-gp-nav-hover-padding, var(--fc-gp-nav-padding, 8px 12px));
        box-shadow: var(--fc-gp-nav-hover-shadow, var(--fc-gp-nav-shadow, none));
    }

    .frontcat-gallery-pagination .frontcat-gallery-page-prev:disabled,
    .frontcat-gallery-pagination .frontcat-gallery-page-next:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .frontcat-gallery-load-more .frontcat-gallery-load-more-btn {
        color: var(--fc-gp-loadmore-color, #1e1e1e);
        background: var(--fc-gp-loadmore-background, #f0f0f1);
        border: var(--fc-gp-loadmore-border, 1px solid #dcdcde);
        border-radius: var(--fc-gp-loadmore-radius, 6px);
        padding: var(--fc-gp-loadmore-padding, 8px 12px);
        box-shadow: var(--fc-gp-loadmore-shadow, none);
        font-family: var(--fc-gp-loadmore-font-family, inherit);
        font-size: clamp(12px, var(--fc-gp-loadmore-font-size, 13px), 18px);
        font-weight: var(--fc-gp-loadmore-font-weight, 500);
        line-height: var(--fc-gp-loadmore-line-height, normal);
        letter-spacing: var(--fc-gp-loadmore-letter-spacing, normal);
        text-transform: var(--fc-gp-loadmore-text-transform, none);
        min-height: 34px;
        box-sizing: border-box;
    }

    .frontcat-gallery-pagination .frontcat-gallery-load-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .frontcat-gallery-load-more .frontcat-gallery-load-more-btn:hover {
        color: var(--fc-gp-loadmore-hover-color, var(--fc-gp-loadmore-color, #1e1e1e));
        background: var(--fc-gp-loadmore-hover-background, #e7e7e8);
        border: var(--fc-gp-loadmore-hover-border, 1px solid #caccd0);
        border-radius: var(--fc-gp-loadmore-hover-radius, var(--fc-gp-loadmore-radius, 6px));
        padding: var(--fc-gp-loadmore-hover-padding, var(--fc-gp-loadmore-padding, 8px 12px));
        box-shadow: var(--fc-gp-loadmore-hover-shadow, var(--fc-gp-loadmore-shadow, none));
    }
    .frontcat-folder-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: none;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        transition: transform 0.15s ease;
        min-height: 140px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .frontcat-folder-card:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary-color) 30%, transparent); }
    .frontcat-folder-card:hover { transform: translateY(-1px); }
    .frontcat-folder-card__icon {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        flex-shrink: 0;
        position: relative;
        display: grid;
        align-items: stretch;
        justify-items: stretch;
        overflow: hidden;
        background: transparent;
        isolation: isolate;
    }
    .frontcat-folder-card__icon .gallery-item-name {
        grid-area: 1 / 1;
        align-self: end;
        justify-self: stretch;
        padding: 4px 8px;
        font-family: var(--fc-font-family);
        font-weight: 600;
        text-align: center;
        color: #e3e3e3;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        font-size: 11px;
        line-height: 1.3;
        position: absolute;
        left: 10%;
        width: 80%;
        bottom: 12.5%;
        transform: translateX(-5%) !important;
        z-index: 5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .frontcat-folder-card__svg {
        grid-area: 1 / 1;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }
    .frontcat-folder-card__svg .folder-shape path.base-fill { fill: var(--fc-folder-base); }
    .frontcat-folder-card__svg .folder-shape .gradOverlay { mix-blend-mode: overlay; pointer-events: none; }
    .frontcat-folder-card__name {
        font-weight: 600;
        color: var(--fc-text-dark);
        line-height: 1.35;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .gallery-image-item, .gallery-video-item, .gallery-pdf-item {
        position: relative;
        border: 2px solid transparent;
        padding: 0;
        border-radius: 6px;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        min-width: 0;
        min-height: 0;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .gallery-video-item {
        background-color: #f0f0f1;
    }
    .gallery-image-item.selected, .gallery-video-item.selected, .gallery-pdf-item.selected {
        border-color: var(--fc-primary-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary-color) 40%, transparent);
    }
    .gallery-image-item > img,
    .gallery-pdf-item > img {
        position: absolute;
        inset: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        max-width: calc(100% - 8px);
        min-width: 0;
        object-fit: cover;
        display: block;
        border-radius: 4px;
        border: 1px solid var(--fc-border-color);
        box-sizing: border-box;
    }

    .gallery-video-item .frontcat-video-thumb {
        position: absolute;
        inset: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 4px;
        border: 1px solid var(--fc-border-color);
        overflow: hidden;
        box-sizing: border-box;
        background: #fff;
    }

    .gallery-video-item .frontcat-video-thumb video,
    .gallery-video-item .frontcat-video-thumb .frontcat-video-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .frontcat-gallery-wrap .gallery-image-item img,
    .frontcat-gallery-wrap .gallery-video-item img {
        height: 100% !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }

    .frontcat-gallery-wrap .gallery-pdf-item img {
        height: 100% !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }
    .gallery-video-item > img {
        object-fit: contain;
        padding: 20px;
    }

    .gallery-image-item.is-svg {
        background: #fff;
    }
    .gallery-image-item.is-svg img {
        object-fit: contain;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
    }

    .gallery-image-item img[src$=".svg"],
    .gallery-image-item img[src*=".svg?"],
    .gallery-image-item img[src*=".svg#"] {
        object-fit: contain;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
    }

    /* PDF thumbs: make the default WP mime icon look like a card */
    .gallery-pdf-item {
        background: #fff;
    }
    .gallery-pdf-item img {
        object-fit: contain;
        background: #fff;
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--fc-border-color) 70%, #cbd5e1 30%);
        box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    }
    .gallery-pdf-item::after {
        content: 'PDF';
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 3;
        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .4px;
        color: #fff;
        background: #d63638;
        padding: 3px 7px;
        border-radius: 999px;
        pointer-events: none;
    }
    .gallery-video-item.is-fallback-icon img {
        object-fit: contain;
        padding: 25%;
        box-sizing: border-box;
    }
    .gallery-video-item::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 32px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
        pointer-events: none;
    }
    .gallery-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 16px;
        color: var(--fc-text-light);
    }
    #create-folder-status {
        font-size: 12px;
        margin-top: 8px;
        text-align: center;
    }

    #toggle-sidebar-button {
        display: none;
    }
    #close-sidebar-button {
        display: none;
    }
    .gallery-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 99;
    }


    @media (max-width: 768px) {
        .frontcat-gallery-layout {
            flex-direction: column;
            padding: 0;
            gap: 0;
            position: relative;
        }
        #frontcat-gallery-close {
            top: 5px;
            right: 5px;
        }
        .gallery-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100%;
            z-index: 100;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            border-radius: 0;
            border-right: 1px solid var(--fc-border-color);
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }
        .gallery-sidebar.is-visible {
            transform: translateX(0);
        }
        .gallery-sidebar.is-visible ~ .gallery-overlay {
            display: block;
        }
        .gallery-main {
            width: 100%;
            border-radius: 0;
            border: none;
            box-shadow: none;
            height: 100%;
        }
        #toggle-sidebar-button {
            display: inline-flex;
        }
        #close-sidebar-button {
            display: inline-flex;
        }
        .gallery-main-header h2 {
            font-size: 14px;
        }
        .gallery-select-actions {
            display: none;
        }
        .header-row-2 {
            justify-content: space-between;
        }
        .header-row-1 {
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .header-title-wrap {
            width: 100%;
        }
        #frontcat-current-folder {
            flex: 1 1 auto;
            min-width: 0;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .gallery-breadcrumb {
            font-size: 12px;
            gap: 6px;
            padding: 6px 10px;
        }
        .gallery-main-actions, #frontcat-upload-container {
            flex-basis: auto;
            justify-content: flex-end;
        }
        .gallery-image-grid {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }
        .frontcat-gallery-wrap .gallery-main-actions .button span {
            display: none;
        }
        #use-image-button span {
            display: inline-block;
        }
        .frontcat-gallery-wrap .gallery-main-actions .button, .frontcat-gallery-wrap .gallery-main-actions .button-secondary {
            padding: 8px 12px;
        }
        #use-image-button svg {
            display: none;
        }
        .gallery-main-actions {
            flex-grow: 1;
            justify-content: flex-end;
        }
        #frontcat-upload-container {
        display: none;
        }
        .frontcat-gallery-wrap .gallery-folder-list .delete-folder-button {
            display: inline-flex;
            position: static;
            transform: none;
            margin-left: 8px;
            flex-shrink: 0;
        }
        .frontcat-gallery-wrap .gallery-folder-list li:hover .delete-folder-button {
            display: inline-flex;
        }
    }

    .gallery-item-name {
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 6px;
        padding: 2px 4px;
        font-size: 11px;
        color: #e3e3e3;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        max-width: calc(100% - 12px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dropdown actions (rename/delete) */
    .gallery-folder-list .rename-folder-button,
    .frontcat-gallery-wrap .gallery-folder-list .delete-folder-button {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px 12px;
        background: none;
        border-radius: 0;
        transform: none;
        z-index: 1;
    }


    /* Video thumbnail com vídeo real + overlay transparente */
    .gallery-video-item .frontcat-video-thumb {
        position: absolute;
        inset: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 4px;
        border: 1px solid var(--fc-border-color);
        overflow: hidden;
        box-sizing: border-box;
        background: #fff;
    }
    .gallery-video-item .frontcat-video-thumb video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 0;
    }
    .gallery-video-item .frontcat-video-thumb .frontcat-video-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        padding: 0;
        border-radius: 0;
        pointer-events: none;
    }

    /* Lightbox de visualização de mídia */
    .frontcat-media-lightbox {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frontcat-media-lightbox-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
    }
    .frontcat-media-lightbox-inner {
        position: relative;
        z-index: 5;
        max-width: 90vw;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .frontcat-media-lightbox .frontcat-media-lightbox-close {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        background: var(--fc-primary-color, var(--e-global-color-accent, #2563eb)) !important;
        border: 0 !important;
        outline: 0 !important;
        color: #fff !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        border-radius: 9999px !important;
        cursor: pointer !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
        transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
        text-align: center !important;
        text-indent: 0 !important;
    }
    .frontcat-media-lightbox .frontcat-media-lightbox-close:hover,
    .frontcat-media-lightbox .frontcat-media-lightbox-close:focus-visible {
        color: #fff !important;
        background: var(--fc-primary-color, var(--e-global-color-accent, #2563eb)) !important;
        filter: brightness(0.96) !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
        outline: none !important;
    }
    .frontcat-media-lightbox-content {
        max-width: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frontcat-media-lightbox-content img,
    .frontcat-media-lightbox-content video {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        display: block;
        border-radius: 4px;
    }

    /* Mobile: mostrar somente ícones nos botões de ação principais */
    @media (max-width: 768px) {
        /* Oculta textos para excluir, usar, enviar e exportar */
        #frontcat-export-media-button .gallery-action-text,
        #delete-image-button span,
        #use-image-button span,
        #frontcat-upload-container .frontcat-upload-button-main-text {
            display: none !important;
        }

        /* Mostra os SVGs (ícones) e garante tamanho apropriado */
        #frontcat-export-media-button svg,
        #delete-image-button svg,
        #use-image-button svg,
        #frontcat-upload-container label[for="frontcat-uploader"] svg {
            display: inline-block !important;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        /* Ajusta padding / largura para ficar apenas o ícone */
        #frontcat-export-media-button,
        #delete-image-button,
        #use-image-button,
        #frontcat-upload-container label[for="frontcat-uploader"] {
            padding-left: 10px;
            padding-right: 10px;
            min-width: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* O ícone de exportar usa o ícone de enviar (import) girado de cabeça para baixo */
        #frontcat-export-media-button svg.frontcat-export-icon {
            transform: rotate(180deg);
        }

        /* Move: no mobile, apenas ícone compacto, mantendo o select funcional */
        #move-to-folder-wrapper {
            position: relative;
            width: 40px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #dcdcde;
            border-radius: 8px;
            background: #f0f0f1;
        }
        #move-to-folder-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 20px;
            height: 20px;
            pointer-events: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23231E39'%3E%3Cpath d='M12 2 15.5 5.5 14.09 6.91 13 5.83V10h4.17l-1.08-1.09L17.5 7.5 21 11l-3.5 3.5-1.41-1.41L17.17 12H13v4.17l1.09-1.08L15.5 16.5 12 20l-3.5-3.5 1.41-1.41L11 16.17V12H6.83l1.08 1.09L6.5 14.5 3 11l3.5-3.5 1.41 1.41L6.83 10H11V5.83L9.91 6.91 8.5 5.5 12 2Z'/%3E%3C/svg%3E") no-repeat center;
            background-size: 20px 20px;
        }
        #move-to-folder-select {
            width: 100%;
            height: 100%;
            min-width: 40px;
            padding: 0;
            border-radius: 8px;
            text-indent: -9999px;
            color: transparent;
            background: transparent;
            border: none;
            cursor: pointer;
        }
        #move-to-folder-select option {
            text-indent: 0;
            color: inherit;
            font-size: 14px;
        }
        #move-to-folder-select:focus-visible {
            outline: 2px solid var(--fc-primary-color);
            outline-offset: 2px;
        }
    }


    /* FrontCat upload button progress (mirrors admin styles) */
    #frontcat-upload-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
    }

    #frontcat-upload-container label[for="frontcat-uploader"] {
        position: relative;
        overflow: hidden;
    }

    #frontcat-upload-container label[for="frontcat-uploader"]::before { z-index: 0 !important;
        content: "";
        position: absolute;
        inset: 0;
        width: var(--fc-upload-progress, 0%);
        border-radius: inherit;
        background: color-mix(in srgb, var(--fc-primary-color, #1d4ed8) 90%, #ffffff 10%);
        pointer-events: none;
        transition: width 0.2s ease;
    }

    #frontcat-upload-container label[for="frontcat-uploader"] span {
        position: relative;
        z-index: 5;
    }

    #frontcat-upload-container .frontcat-upload-button-subtext {
        font-size: 11px;
        opacity: 0.9;
        margin-left: 6px;
        display: none;
    }

    #frontcat-upload-container label[for="frontcat-uploader"].frontcat-uploading .frontcat-upload-button-subtext {
        display: inline;
    }




    #frontcat-upload-container label[for="frontcat-uploader"] * {
        position: relative;
        z-index: 5 !important;
    }

    /* Lightbox meta badges (título, tamanho e download) */
    .frontcat-media-lightbox-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .frontcat-media-lightbox-preview {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .frontcat-media-lightbox-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
        justify-content: center;
    }

    .frontcat-media-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1.4;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
    }

    .frontcat-media-badge--title {
        background-color: #111827;
    }

    .frontcat-media-badge--size {
        background-color: #4b5563;
    }

    .frontcat-media-badge--download {
        background-color: var(--fc-primary-color);
        text-decoration: none;
    }

    .frontcat-media-badge--download:hover {
        opacity: 0.9;
    }


/* V20.7.16-wizard: Use button group + clear selection icon */
.frontcat-use-btn-group{display:inline-flex;align-items:center;vertical-align:middle;border-radius:10px;overflow:hidden;}.frontcat-use-btn-group #use-image-button,.frontcat-use-btn-group .frontcat-clear-selection-button{height:44px;line-height:44px;}
.frontcat-use-btn-group #use-image-button{border-radius:0;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.frontcat-use-btn-group .frontcat-clear-selection-button{border-top-right-radius:10px;border-bottom-right-radius:10px;margin:0;border-left:1px solid rgba(0,0,0,.12);background:#e9ecef;color:#111;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;}
.frontcat-use-btn-group .frontcat-clear-selection-button:hover{background:#d6d8db;}
.frontcat-use-btn-group .frontcat-clear-selection-button:focus,.frontcat-use-btn-group .frontcat-clear-selection-button:focus-visible{outline:none;box-shadow:none;}
.frontcat-use-btn-group #use-image-button{margin:0;}


.frontcat-folder-created-flash {
    box-shadow: 0 0 0 2px rgba(17, 115, 187, 0.22), 0 0 0 4px rgba(17, 115, 187, 0.10) !important;
    border-radius: 10px;
    transition: box-shadow .18s ease;
}


body.frontcat-gallery-no-folder-sidebar .frontcat-gallery-layout {
    gap: 0;
}
body.frontcat-gallery-no-folder-sidebar .gallery-main {
    width: 100%;
    max-width: 100%;
}
body.frontcat-gallery-no-folder-sidebar #toggle-sidebar-button,
body.frontcat-gallery-no-folder-sidebar .gallery-sidebar,
body.frontcat-gallery-no-folder-sidebar .gallery-overlay {
    display: none !important;
}


    .frontcat-confirm-panel .frontcat-bulk-folder-item {
        align-items: flex-start;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-meta {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-name,
    .frontcat-confirm-panel .frontcat-bulk-folder-path {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: break-word;
        word-break: break-word;
        display: block;
    }

    .gallery-sidebar.is-locked-folder {
        display: none !important;
    }

    body.frontcat-gallery-no-folder-sidebar #frontcat-inline-gallery-root .gallery-sidebar,
    body.frontcat-gallery-no-folder-sidebar #frontcat-inline-gallery-root #toggle-sidebar-button,
    body.frontcat-gallery-no-folder-sidebar #frontcat-inline-gallery-root .gallery-overlay {
        display: none !important;
    }


    .frontcat-confirm-panel .frontcat-bulk-folder-item > .frontcat-bulk-folder-checkbox,
    .frontcat-confirm-panel .frontcat-bulk-folder-item > .frontcat-bulk-folder-check {
        flex: 0 0 18px;
    }

    .frontcat-confirm-panel .frontcat-bulk-folder-item > .frontcat-bulk-folder-meta {
        flex: 1 1 auto;
        width: auto;
    }