.bg_style {
    position: relative;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    width: 200px;
    height: 200px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
.bg_style__saturation {
    position: relative;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    flex-grow: 1;
    border-bottom: 12px solid transparent;
    border-radius: 8px 8px 0 0;
    background-image: -moz-linear-gradient(bottom, #000, transparent), -moz-linear-gradient(left, #fff, hsla(0, 0%, 100%, 0));
    background-image: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
}
.bg_style__alpha-gradient,
.bg_style__pointer-fill {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
}
.bg_style__alpha-gradient,
.bg_style__saturation {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.bg_style__alpha,
.bg_style__hue {
    position: relative;
    height: 24px;
}
.bg_style__hue {
    background: -moz-linear-gradient(left, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
    background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
}
.bg_style__last-control {
    border-radius: 0 0 8px 8px;
}
.bg_style__interactive {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    outline: none;
    touch-action: none;
}
.bg_style__pointer {
    position: absolute;
    z-index: 1;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.bg_style__interactive:focus .bg_style__pointer {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}
.bg_style__alpha,
.bg_style__alpha-pointer {
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');
}
.bg_style__saturation-pointer {
    z-index: 3;
}
.bg_style__hue-pointer {
    z-index: 2;
}


/* Moved from index.php (brand-svg-sidebar) */
.brand-svg-sidebar {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: stretch;
                -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                align-items: stretch;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                grid-column: 1 / -1;
                grid-row: 2;
                
                box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
                z-index: 3;
                width: 100%;
                overflow: hidden;
            }
            .brand-svg-sidebar > *:not(style) ~ *:not(style) {
                margin-top: 0rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-sidebar-header) */
.brand-svg-sidebar-header {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                width: 15rem;
                height: 100%;
                padding-left: 1rem;
                padding-right: 1rem;
                border-right: 1px solid rgba(255, 255, 255, 0.1);
            }
            .brand-svg-sidebar-header > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 0.5rem;
                margin-inline-start: 0.5rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-logo-text) */
.brand-svg-logo-text {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-flex: none;
                -ms-flex: none;
                flex: none;
            }

/* Moved from index.php (brand-svg-icon-button) */
.brand-svg-icon-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: 2.25rem;
                line-height: calc(1em + 0.125rem);
                border-radius: 9999px;
                font-weight: 600;
                height: 2.25rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 0;
                padding-right: 0;
                background: transparent;
                color: #666666;
            }
            .brand-svg-icon-button:focus,
            .brand-svg-icon-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-icon-button[disabled],
            .brand-svg-icon-button[disabled]:focus,
            .brand-svg-icon-button[disabled]:hover,
            .brand-svg-icon-button[aria-disabled="true"],
            .brand-svg-icon-button[aria-disabled="true"]:focus,
            .brand-svg-icon-button[aria-disabled="true"]:hover,
            .brand-svg-icon-button[data-disabled],
            .brand-svg-icon-button[data-disabled]:focus,
            .brand-svg-icon-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-icon-button:hover,
            .brand-svg-icon-button[data-hover] {
                background: rgba(255, 255, 255, 0.125);
            }
            .brand-svg-icon-button:hover[disabled],
            .brand-svg-icon-button[data-hover][disabled],
            .brand-svg-icon-button:hover[disabled]:focus,
            .brand-svg-icon-button[data-hover][disabled]:focus,
            .brand-svg-icon-button:hover[disabled]:hover,
            .brand-svg-icon-button[data-hover][disabled]:hover,
            .brand-svg-icon-button:hover[aria-disabled="true"],
            .brand-svg-icon-button[data-hover][aria-disabled="true"],
            .brand-svg-icon-button:hover[aria-disabled="true"]:focus,
            .brand-svg-icon-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-icon-button:hover[aria-disabled="true"]:hover,
            .brand-svg-icon-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-icon-button:hover[data-disabled],
            .brand-svg-icon-button[data-hover][data-disabled],
            .brand-svg-icon-button:hover[data-disabled]:focus,
            .brand-svg-icon-button[data-hover][data-disabled]:focus,
            .brand-svg-icon-button:hover[data-disabled]:hover,
            .brand-svg-icon-button[data-hover][data-disabled]:hover {
                background: rgba(255, 255, 255, 0.075);
            }
            .brand-svg-icon-button:active,
            .brand-svg-icon-button[data-active] {
                background: rgba(255, 255, 255, 0.205);
            }
            .brand-svg-icon-button:hover {
                background: rgba(0, 0, 0, 0.05);
            }
            .brand-svg-icon-button:focus {
                background: rgba(0, 0, 0, 0.05);
            }
            .brand-svg-icon-button:active {
                background: rgba(0, 0, 0, 0.1);
            }

/* Moved from index.php (brand-svg-icon) */
.brand-svg-icon {
                stroke: currentcolor;
                fill: none;
                width: 1.375rem;
                height: 1.375rem;
                font-size: calc(1 / 1.25 * 1.5rem);
            }

/* Moved from index.php (brand-svg-sidebar-content) */
.brand-svg-sidebar-content {
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                overflow: hidden;
                position: relative;
         
                height: 100%;
            }

/* Moved from index.php (brand-svg-scroll-container) */
.brand-svg-scroll-container {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                overflow-x: auto;
                overflow-y: hidden;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
                display: flex;
                align-items: center;
            }
            .brand-svg-scroll-container::-webkit-scrollbar {
                height: 0.5rem;
                width: 0.5rem;
            }
            .brand-svg-scroll-container::-webkit-scrollbar-track {
                background: transparent;
            }
            .brand-svg-scroll-container::-webkit-scrollbar-thumb {
                background: #cccccc;
                border: 0.125rem solid;
                border-color: #e0e0e0;
                border-radius: 9999px;
            }

/* Moved from index.php (brand-svg-list-stack) */
.brand-svg-list-stack {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                height: 100%;
                width: max-content;
            }
            .brand-svg-list-stack > *:not(style) ~ *:not(style) {
                margin-top: 0;
                margin-left: 0.5rem;
            }

/* Moved from index.php (brand-svg-btn-style) */
.brand-svg-btn-style {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: 8rem;
                line-height: calc(1em + 0.125rem);
                border-radius: 0;
                font-weight: 600;
                height: auto;
                min-width: 8rem;
                font-size: 0.875rem;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                color: #666666;
                background: transparent;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            .brand-svg-btn-style:focus,
            .brand-svg-btn-style[data-focus] {
                box-shadow: none;
            }
            .brand-svg-btn-style:focus > div,
            .brand-svg-btn-style[data-focus] > div {
                -webkit-transform: scale(1.0625);
                -moz-transform: scale(1.0625);
                -ms-transform: scale(1.0625);
                transform: scale(1.0625);
                -webkit-background-size: 120% !important;
                background-size: 120% !important;
            }
            .brand-svg-btn-style[disabled],
            .brand-svg-btn-style[disabled]:focus,
            .brand-svg-btn-style[disabled]:hover,
            .brand-svg-btn-style[aria-disabled="true"],
            .brand-svg-btn-style[aria-disabled="true"]:focus,
            .brand-svg-btn-style[aria-disabled="true"]:hover,
            .brand-svg-btn-style[data-disabled],
            .brand-svg-btn-style[data-disabled]:focus,
            .brand-svg-btn-style[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-btn-style:hover > div,
            .brand-svg-btn-style[data-hover] > div {
                -webkit-transform: scale(1.0625);
                -moz-transform: scale(1.0625);
                -ms-transform: scale(1.0625);
                transform: scale(1.0625);
                -webkit-background-size: 120% !important;
                background-size: 120% !important;
            }
            .brand-svg-btn-style:active > div,
            .brand-svg-btn-style[data-active] > div {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                -webkit-background-size: 100% !important;
                background-size: 100% !important;
            }
            .brand-svg-btn-style:hover {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-btn-style:focus {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-btn-style:active {
                background: rgba(0, 0, 0, 0.1);
                color: #666666;
            }

/* Moved from index.php (brand-svg-list-card) */
.brand-svg-list-card {
                border-radius: 0.5rem;
                width: 100%;
                box-shadow: none;
            }

/* Moved from index.php (brand-svg-card-aspect-ratio) */
.brand-svg-card-aspect-ratio {
                position: relative;
            }
            .brand-svg-card-aspect-ratio > * {
                overflow: hidden;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }
            .brand-svg-card-aspect-ratio > img,
            .brand-svg-card-aspect-ratio > video {
                object-fit: cover;
            }
            .brand-svg-card-aspect-ratio::before {
                height: 0;
                content: "";
                display: block;
                padding-bottom: 66.66666666666666%;
            }

/* Moved from index.php (brand-svg-card-content) */
.brand-svg-card-content {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
            }

/* Moved from index.php (brand-svg-card-text) */
.brand-svg-card-text {
                font-size: 0.575rem;
                line-height: calc(1em + 0.5rem);
                font-weight: 700;
                color: #fff!important;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

/* Moved from index.php (brand-svg-card-selected) */
.brand-svg-card-selected {
                border-radius: 0.5rem;
                width: 100%;
                box-shadow: 0 0 0 0.1875rem #fff, inset 0 0 0 0.25rem #666666;
            }

/* Moved from index.php (brand-svg-section-padding) */
.brand-svg-section-padding {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                -webkit-align-self: center;
                -ms-flex-item-align: center;
                align-self: center;
                padding-left: 1rem;
                padding-right: 1rem;
            }

/* Moved from index.php (brand-svg-flex-row) */
.brand-svg-flex-row {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
            }
            .brand-svg-flex-row > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 0.5rem;
                margin-inline-start: 0.5rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-action-button) */
.brand-svg-action-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: 1.75rem;
                line-height: calc(1em + 0.125rem);
                border-radius: 9999px;
                font-weight: 600;
                height: 1.75rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 0;
                padding-right: 0;
                background: transparent;
                color: #666666;
            }
            .brand-svg-action-button:focus,
            .brand-svg-action-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-action-button[disabled],
            .brand-svg-action-button[disabled]:focus,
            .brand-svg-action-button[disabled]:hover,
            .brand-svg-action-button[aria-disabled="true"],
            .brand-svg-action-button[aria-disabled="true"]:focus,
            .brand-svg-action-button[aria-disabled="true"]:hover,
            .brand-svg-action-button[data-disabled],
            .brand-svg-action-button[data-disabled]:focus,
            .brand-svg-action-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-action-button:hover,
            .brand-svg-action-button[data-hover] {
                background: rgba(255, 255, 255, 0.125);
            }
            .brand-svg-action-button:hover[disabled],
            .brand-svg-action-button[data-hover][disabled],
            .brand-svg-action-button:hover[disabled]:focus,
            .brand-svg-action-button[data-hover][disabled]:focus,
            .brand-svg-action-button:hover[disabled]:hover,
            .brand-svg-action-button[data-hover][disabled]:hover,
            .brand-svg-action-button:hover[aria-disabled="true"],
            .brand-svg-action-button[data-hover][aria-disabled="true"],
            .brand-svg-action-button:hover[aria-disabled="true"]:focus,
            .brand-svg-action-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-action-button:hover[aria-disabled="true"]:hover,
            .brand-svg-action-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-action-button:hover[data-disabled],
            .brand-svg-action-button[data-hover][data-disabled],
            .brand-svg-action-button:hover[data-disabled]:focus,
            .brand-svg-action-button[data-hover][data-disabled]:focus,
            .brand-svg-action-button:hover[data-disabled]:hover,
            .brand-svg-action-button[data-hover][data-disabled]:hover {
                background: rgba(255, 255, 255, 0.075);
            }
            .brand-svg-action-button:active,
            .brand-svg-action-button[data-active] {
                background: rgba(255, 255, 255, 0.205);
            }
            .brand-svg-action-button:hover {
                background: rgba(0, 0, 0, 0.05);
            }
            .brand-svg-action-button:focus {
                background: rgba(0, 0, 0, 0.05);
            }
            .brand-svg-action-button:active {
                background: rgba(0, 0, 0, 0.1);
            }

/* Moved from index.php (brand-svg-main-canvas) */
.brand-svg-main-canvas {
                grid-column: 1/2;
                grid-row: 1;
                overflow: scroll;
                height: 100%;
                
            }
            .brand-svg-main-canvas::-webkit-scrollbar {
                display: none;
            }

/* Moved from index.php (brand-svg-canvas-center) */
.brand-svg-canvas-center {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
 
                padding-left: 2.5rem;
                padding-right: 2.5rem;
                padding-top: 5rem;
                padding-bottom: 5rem;
                width: 100%;
                height: 100%;
                min-width: 32rem;
                min-height: 32rem;
            }

/* Moved from index.php (brand-svg-canvas-frame) */
.brand-svg-canvas-frame {
                display: grid;
                grid-template-rows: 1fr;
                grid-template-columns: 1fr;
              
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                position: relative;
            }

/* Moved from index.php (brand-svg-svg-layer) */
.brand-svg-svg-layer {
                grid-column: 1/-1;
                grid-row: 1/-1;
                z-index: 2;
            }
            .brand-svg-svg-layer svg {
                display: block;
                width: 100%;
                height: 100%;
            }

/* Moved from index.php (brand-svg-floating-action) */
.brand-svg-floating-action {
                position: absolute;
                bottom: 0;
                left: 50%;
                -webkit-transform: translate(-50%, 50%);
                -moz-transform: translate(-50%, 50%);
                -ms-transform: translate(-50%, 50%);
                transform: translate(-50%, 50%);
                z-index: 999;
                border: 0.375rem solid;
                border-color: #cccccc;
                border-radius: 9999px;
            }

/* Moved from index.php (brand-svg-floating-button-inner) */
.brand-svg-floating-button-inner button {
                width: 4rem;
                height: 4rem;
                background: #f0f0f0;
                color: #666666;
                border-radius: 9999px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .brand-svg-floating-button-inner button:hover {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .brand-svg-floating-button-inner button:focus {
                outline: none;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 0.25rem rgba(255, 255, 255, 0.36);
            }

/* Moved from index.php (brand-svg-large-icon) */
.brand-svg-large-icon {
                stroke: currentcolor;
                fill: none;
                width: 2.25rem;
                height: 2.25rem;
                font-size: calc(1 / 2.25 * 1.5rem);
            }

/* Moved from index.php (brand-svg-settings-panel) */
.brand-svg-settings-panel {
                grid-column: -2/-1;
                grid-row: 1;
               
                /* Premium SaaS Polish */
                background: #ffffff;
                border: 1px solid rgba(229, 231, 235, 1); /* #e5e7eb */
                border-radius: 12px;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                           0 2px 4px -1px rgba(0, 0, 0, 0.06);
                z-index: 10;
                margin: 16px;
                overflow: hidden; /* Ensure content respects border-radius */
            }

/* Moved from index.php (brand-svg-settings-flex) */
.brand-svg-settings-flex {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                height: 100%;
            }
            .brand-svg-settings-flex > *:not(style) ~ *:not(style) {
                margin-top: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-settings-content) */
.brand-svg-settings-content {
                -webkit-flex: 1 1 auto;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                position: relative;
            }

/* Moved from index.php (brand-svg-settings-scroll) */
.brand-svg-settings-scroll {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                overflow-y: scroll;
                padding-top: 1.25rem;
                padding-bottom: 2.5rem;
            }
            .brand-svg-settings-scroll::-webkit-scrollbar {
                width: 0.5rem;
            }
            .brand-svg-settings-scroll::-webkit-scrollbar-track {
                background: transparent;
            }
            .brand-svg-settings-scroll::-webkit-scrollbar-thumb {
                background: #cccccc;
                /* border: 0.125rem solid; */
                /* border-color: #171717; */
                border-radius: 9999px;
            }

/* Moved from index.php (brand-svg-settings-stack) */
.brand-svg-settings-stack {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
            .brand-svg-settings-stack > *:not(style) ~ *:not(style) {
                margin-top: 1.25rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-control-group) */
.brand-svg-control-group {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                padding-left: 1rem;
                padding-right: 1rem;
            }
            .brand-svg-control-group > *:not(style) ~ *:not(style) {
                margin-top: 0.5rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-control-label) */
.brand-svg-control-label {
                font-family: "Mntsrt", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-weight: 700;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: 0.03125rem;
                font-size: 0.75rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

/* Moved from index.php (brand-svg-control-input-wrapper) */
.brand-svg-control-input-wrapper {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            
                padding-top: 0.75rem;
            }
            .brand-svg-control-input-wrapper > *:not(style) ~ *:not(style) {
                margin-top: 0.5rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-select-button) */
.brand-svg-select-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                -webkit-justify-content: flex-start;
                justify-content: flex-start;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: auto;
                line-height: calc(1em + 0.125rem);
                border-radius: 0.5rem;
                font-weight: 600;
                height: 4rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 1rem;
                padding-right: 1rem;
                background: rgba(0, 0, 0, 0.05);
                color: #6b6b6b;
                text-align: left;
            }
            .brand-svg-select-button:focus,
            .brand-svg-select-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-select-button[disabled],
            .brand-svg-select-button[disabled]:focus,
            .brand-svg-select-button[disabled]:hover,
            .brand-svg-select-button[aria-disabled="true"],
            .brand-svg-select-button[aria-disabled="true"]:focus,
            .brand-svg-select-button[aria-disabled="true"]:hover,
            .brand-svg-select-button[data-disabled],
            .brand-svg-select-button[data-disabled]:focus,
            .brand-svg-select-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-select-button:hover[disabled],
            .brand-svg-select-button[data-hover][disabled],
            .brand-svg-select-button:hover[disabled]:focus,
            .brand-svg-select-button[data-hover][disabled]:focus,
            .brand-svg-select-button:hover[disabled]:hover,
            .brand-svg-select-button[data-hover][disabled]:hover,
            .brand-svg-select-button:hover[aria-disabled="true"],
            .brand-svg-select-button[data-hover][aria-disabled="true"],
            .brand-svg-select-button:hover[aria-disabled="true"]:focus,
            .brand-svg-select-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-select-button:hover[aria-disabled="true"]:hover,
            .brand-svg-select-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-select-button:hover[data-disabled],
            .brand-svg-select-button[data-hover][data-disabled],
            .brand-svg-select-button:hover[data-disabled]:focus,
            .brand-svg-select-button[data-hover][data-disabled]:focus,
            .brand-svg-select-button:hover[data-disabled]:hover,
            .brand-svg-select-button[data-hover][data-disabled]:hover {
                background: initial;
            }
            .brand-svg-select-button:hover {
                background: rgba(0, 0, 0, 0.02);
                color: #666666;
            }
            .brand-svg-select-button:focus {
                background: rgba(0, 0, 0, 0.01);
                color: #666666;
            }
            .brand-svg-select-button:active {
                background: rgba(0, 0, 0, 0.1);
                color: #666666;
            }

/* Moved from index.php (brand-svg-select-text-wrapper) */
.brand-svg-select-text-wrapper {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .brand-svg-select-text-wrapper > *:not(style) ~ *:not(style) {
                margin-top: 0.125rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-select-primary-text) */
.brand-svg-select-primary-text {
                font-size: 0.875rem;
                line-height: calc(1em + 0.125rem);
                font-weight: 600;
                color: #ffffff;
            }

/* Moved from index.php (brand-svg-select-secondary-text) */
.brand-svg-select-secondary-text {
                font-size: 0.75rem;
                line-height: calc(1em + 0.125rem);
                font-weight: 600;
                color: #6b6b6b;
            }

/* Moved from index.php (brand-svg-flex-none) */
.brand-svg-flex-none {
                -webkit-flex: none;
                -ms-flex: none;
                flex: none;
            }

/* Moved from index.php (brand-svg-small-icon) */
.brand-svg-small-icon {
                stroke: currentcolor;
                fill: none;
                width: 1rem;
                height: 1rem;
                font-size: calc(1 / 1 * 1.5rem);
            }

/* Moved from index.php (brand-svg-divider) */
.brand-svg-divider {
                opacity: 0.6;
                border: 0;
                border-color: #cccccc;
                border-style: solid;
                border-bottom-width: 1px;
                width: 100%;
            }

/* Moved from index.php (brand-svg-accordion-item) */
.brand-svg-accordion-item {
                border-top-width: 1px;
                border-color: inherit;
                overflow-anchor: none;
                border: 0;
            }
            .brand-svg-accordion-item:last-of-type {
                border-bottom-width: 1px;
            }

/* Moved from index.php (brand-svg-accordion-button) */
.brand-svg-accordion-button {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                padding-left: 1rem;
                padding-right: 1rem;
                height: 3rem;
            }
            .brand-svg-accordion-button > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 0.5rem;
                margin-inline-start: 0.5rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-accordion-title) */
.brand-svg-accordion-title {
                font-family: "Mntsrt", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-weight: 700;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: 0.03125rem;
                font-size: 0.75rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }

/* Moved from index.php (brand-svg-toggle-button) */
.brand-svg-toggle-button {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 1.5rem;
                -webkit-transition: all 0.2s;
                transition: all 0.2s;
                outline: 0;
                font-size: 1rem;
                padding-left: 1rem;
                padding-right: 1rem;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                margin-right: 0.375rem;
                height: 1.5rem;
                border-radius: 9999px;
                padding: 0;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
            }
            .brand-svg-toggle-button:focus,
            .brand-svg-toggle-button[data-focus] {
                color: #715df2;
                background: rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-toggle-button:hover,
            .brand-svg-toggle-button[data-hover] {
                color: #715df2;
                background: rgba(0, 0, 0, 0.05);
            }
            .brand-svg-toggle-button[disabled],
            .brand-svg-toggle-button[disabled]:focus,
            .brand-svg-toggle-button[disabled]:hover,
            .brand-svg-toggle-button[aria-disabled="true"],
            .brand-svg-toggle-button[aria-disabled="true"]:focus,
            .brand-svg-toggle-button[aria-disabled="true"]:hover,
            .brand-svg-toggle-button[data-disabled],
            .brand-svg-toggle-button[data-disabled]:focus,
            .brand-svg-toggle-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
            }

/* Moved from index.php (brand-svg-chevron-icon) */
.brand-svg-chevron-icon {
                stroke: currentcolor;
                fill: none;
                width: 1rem;
                height: 1rem;
                font-size: calc(1 / 1 * 1.5rem);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: -webkit-transform 0.25s ease;
                transition: transform 0.25s ease;
            }

/* Moved from index.php (brand-svg-accordion-panel) */
.brand-svg-accordion-panel {
                padding-top: 0rem;
                padding-left: 1rem;
                padding-right: 1rem;
                padding-bottom: 1.25rem;
            }

/* Moved from index.php (brand-svg-panel-stack) */
.brand-svg-panel-stack {
                display: -webkit-box;
                display: -webkit-flex;

                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
            .brand-svg-panel-stack > *:not(style) ~ *:not(style) {
                margin-top: 1rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-nested-stack) */
.brand-svg-nested-stack {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
            .brand-svg-nested-stack > *:not(style) ~ *:not(style) {
                margin-top: 0.625rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-sub-label) */
.brand-svg-sub-label {
                font-family: "Mntsrt", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-weight: 600;
                line-height: 1rem;
                font-size: 0.875rem;
                color: #666666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }

/* Moved from index.php (brand-svg-grid-2col) */
.brand-svg-grid-2col {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
                background: transparent;
                border-radius: 0.5rem;
                padding: 0.25rem;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

/* Moved from index.php (brand-svg-block) */
.brand-svg-block {
                display: block;
            }

/* Moved from index.php (brand-svg-tab-button) */
.brand-svg-tab-button {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 0.5rem;
                color: #ffffff;
                font-size: 0.875rem;
                font-weight: 600;
                height: 4rem;
                position: relative;
            }
            .brand-svg-tab-button:hover,
            .brand-svg-tab-button[data-hover] {
                color: #ffffff;
            }
            .brand-svg-tab-button:focus,
            .brand-svg-tab-button[data-focus] {
                color: #ffffff;
            }
            .brand-svg-tab-button:focus .underline,
            .brand-svg-tab-button[data-focus] .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 0.125rem rgba(255, 255, 255, 1), 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-tab-button .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                border-radius: 0.375rem;
            }

/* Moved from index.php (brand-svg-tab-text) */
.brand-svg-tab-text {
                z-index: 3;
                position: relative;
                line-height: 1.25rem;
                text-transform: capitalize;
            }

/* Moved from index.php (brand-svg-tab-content) */
.brand-svg-tab-content {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            .brand-svg-tab-content > *:not(style) ~ *:not(style) {
                margin-top: 0.25rem;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

/* Moved from index.php (brand-svg-tab-icon) */
.brand-svg-tab-icon {
                stroke: currentcolor;
                fill: currentcolor;
                width: 1.5rem;
                height: 1.5rem;
                font-size: calc(1 / 1.5 * 1.5rem);
            }

/* Moved from index.php (brand-svg-text-lg) */
.brand-svg-text-lg {
                font-size: 0.875rem;
                line-height: calc(1em + 0.375rem);
            }

/* Moved from index.php (brand-svg-tab-button-inactive) */
.brand-svg-tab-button-inactive {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 0.5rem;
                color: #666666;
                font-size: 0.875rem;
                font-weight: 600;
                height: 4rem;
                position: relative;
            }
            .brand-svg-tab-button-inactive:hover,
            .brand-svg-tab-button-inactive[data-hover] {
                color: #666666;
            }
            .brand-svg-tab-button-inactive:focus,
            .brand-svg-tab-button-inactive[data-focus] {
                color: #666666;
            }
            .brand-svg-tab-button-inactive:focus .underline,
            .brand-svg-tab-button-inactive[data-focus] .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 0.125rem rgba(255, 255, 255, 1), 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-tab-button-inactive .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                border-radius: 0.375rem;
            }

/* Moved from index.php (brand-svg-icon-xl) */
.brand-svg-icon-xl {
                stroke: currentcolor;
                fill: none;
                width: 1.5rem;
                height: 1.5rem;
                font-size: calc(1 / 1.5 * 1.5rem);
            }

/* Moved from index.php (brand-svg-grid-3col) */
.brand-svg-grid-3col {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(33.333333333333336%, 1fr));
                background: transparent;
                border-radius: 0.5rem;
                padding: 0.25rem;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

/* Moved from index.php (brand-svg-grid-4col) */
.brand-svg-grid-4col {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
                background: transparent;
                border-radius: 0.5rem;
                padding: 0.25rem;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

/* Moved from index.php (brand-svg-option-button) */
.brand-svg-option-button {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 0.5rem;
                color: #666666;
                font-size: 0.875rem;
                font-weight: 600;
                height: 1.75rem;
                position: relative;
            }
            .brand-svg-option-button:hover,
            .brand-svg-option-button[data-hover] {
                color: #666666;
            }
            .brand-svg-option-button:focus,
            .brand-svg-option-button[data-focus] {
                color: #666666;
            }
            .brand-svg-option-button:focus .underline,
            .brand-svg-option-button[data-focus] .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 0.125rem rgba(255, 255, 255, 1), 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-option-button .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                border-radius: 0.375rem;
            }

/* Moved from index.php (brand-svg-option-icon) */
.brand-svg-option-icon {
                stroke: currentcolor;
                fill: none;
                width: 1.25rem;
                height: 1.25rem;
                font-size: calc(1 / 1.25 * 1.5rem);
            }

/* Moved from index.php (brand-svg-option-button-active) */
.brand-svg-option-button-active {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 0.5rem;
                color: #666666;
                font-size: 0.875rem;
                font-weight: 600;
                height: 1.75rem;
                position: relative;
            }
            .brand-svg-option-button-active:hover,
            .brand-svg-option-button-active[data-hover] {
                color: #666666;
            }
            .brand-svg-option-button-active:focus,
            .brand-svg-option-button-active[data-focus] {
                color: #666666;
            }
            .brand-svg-option-button-active:focus .underline,
            .brand-svg-option-button-active[data-focus] .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 0.125rem rgba(255, 255, 255, 1), 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-option-button-active .underline {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                border-radius: 0.375rem;
            }

/* Moved from index.php (brand-svg-color-row) */
.brand-svg-color-row {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
            }
            .brand-svg-color-row > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 0.625rem;
                margin-inline-start: 0.625rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-color-button) */
.brand-svg-color-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: auto;
                line-height: calc(1em + 0.125rem);
                border-radius: 0.5rem;
                font-weight: 600;
                height: 2.25rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 1rem;
                padding-right: 1rem;
                /* background: #303030; */
                color: #666666;
            }
            .brand-svg-color-button:focus,
            .brand-svg-color-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-color-button[disabled],
            .brand-svg-color-button[disabled]:focus,
            .brand-svg-color-button[disabled]:hover,
            .brand-svg-color-button[aria-disabled="true"],
            .brand-svg-color-button[aria-disabled="true"]:focus,
            .brand-svg-color-button[aria-disabled="true"]:hover,
            .brand-svg-color-button[data-disabled],
            .brand-svg-color-button[data-disabled]:focus,
            .brand-svg-color-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-color-button:hover[disabled],
            .brand-svg-color-button[data-hover][disabled],
            .brand-svg-color-button:hover[disabled]:focus,
            .brand-svg-color-button[data-hover][disabled]:focus,
            .brand-svg-color-button:hover[disabled]:hover,
            .brand-svg-color-button[data-hover][disabled]:hover,
            .brand-svg-color-button:hover[aria-disabled="true"],
            .brand-svg-color-button[data-hover][aria-disabled="true"],
            .brand-svg-color-button:hover[aria-disabled="true"]:focus,
            .brand-svg-color-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-color-button:hover[aria-disabled="true"]:hover,
            .brand-svg-color-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-color-button:hover[data-disabled],
            .brand-svg-color-button[data-hover][data-disabled],
            .brand-svg-color-button:hover[data-disabled]:focus,
            .brand-svg-color-button[data-hover][data-disabled]:focus,
            .brand-svg-color-button:hover[data-disabled]:hover,
            .brand-svg-color-button[data-hover][data-disabled]:hover {
                background: initial;
            }
            .brand-svg-color-button:hover {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-color-button:focus {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-color-button:active {
                color: #303030;
                /* color: #ffffff; */
            }

/* Moved from index.php (brand-svg-slider-row) */
.brand-svg-slider-row {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                width: 100%;
            }
            .brand-svg-slider-row > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 1rem;
                margin-inline-start: 1rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-refresh-button) */
.brand-svg-refresh-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: 2.25rem;
                line-height: calc(1em + 0.125rem);
                border-radius: 9999px;
                font-weight: 600;
                height: 2.25rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 1rem;
                padding-right: 1rem;
                /* background: #303030; */
                color: #6b6b6b;
                padding: 0;
                -webkit-flex: none;
                -ms-flex: none;
                flex: none;
            }
            .brand-svg-refresh-button:focus,
            .brand-svg-refresh-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-refresh-button[disabled],
            .brand-svg-refresh-button[disabled]:focus,
            .brand-svg-refresh-button[disabled]:hover,
            .brand-svg-refresh-button[aria-disabled="true"],
            .brand-svg-refresh-button[aria-disabled="true"]:focus,
            .brand-svg-refresh-button[aria-disabled="true"]:hover,
            .brand-svg-refresh-button[data-disabled],
            .brand-svg-refresh-button[data-disabled]:focus,
            .brand-svg-refresh-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-refresh-button:hover[disabled],
            .brand-svg-refresh-button[data-hover][disabled],
            .brand-svg-refresh-button:hover[disabled]:focus,
            .brand-svg-refresh-button[data-hover][disabled]:focus,
            .brand-svg-refresh-button:hover[disabled]:hover,
            .brand-svg-refresh-button[data-hover][disabled]:hover,
            .brand-svg-refresh-button:hover[aria-disabled="true"],
            .brand-svg-refresh-button[data-hover][aria-disabled="true"],
            .brand-svg-refresh-button:hover[aria-disabled="true"]:focus,
            .brand-svg-refresh-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-refresh-button:hover[aria-disabled="true"]:hover,
            .brand-svg-refresh-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-refresh-button:hover[data-disabled],
            .brand-svg-refresh-button[data-hover][data-disabled],
            .brand-svg-refresh-button:hover[data-disabled]:focus,
            .brand-svg-refresh-button[data-hover][data-disabled]:focus,
            .brand-svg-refresh-button:hover[data-disabled]:hover,
            .brand-svg-refresh-button[data-hover][data-disabled]:hover {
                background: initial;
            }
            .brand-svg-refresh-button:hover {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-refresh-button:focus {
                background: rgba(0, 0, 0, 0.05);
                color: #666666;
            }
            .brand-svg-refresh-button:active {
                background: rgba(0, 0, 0, 0.1);
                color: #666666;
            }

/* Moved from index.php (brand-svg-checkbox-label) */
.brand-svg-checkbox-label {
                display: inline-block;
                position: relative;
                cursor: pointer;
                width: 100%;
            }
            .brand-svg-checkbox-label[disabled],
            .brand-svg-checkbox-label[disabled]:focus,
            .brand-svg-checkbox-label[disabled]:hover,
            .brand-svg-checkbox-label[aria-disabled="true"],
            .brand-svg-checkbox-label[aria-disabled="true"]:focus,
            .brand-svg-checkbox-label[aria-disabled="true"]:hover,
            .brand-svg-checkbox-label[data-disabled],
            .brand-svg-checkbox-label[data-disabled]:focus,
            .brand-svg-checkbox-label[data-disabled]:hover {
                opacity: 0.6;
                cursor: default;
                pointer-events: none;
            }

/* Moved from index.php (brand-svg-slider-track) */
.brand-svg-slider-track {
                overflow: hidden;
                border-radius: 0.375rem;
                background: #cccccc;
                height: 4px;
            }
            .brand-svg-slider-track[disabled],
            .brand-svg-slider-track[disabled]:focus,
            .brand-svg-slider-track[disabled]:hover,
            .brand-svg-slider-track[aria-disabled="true"],
            .brand-svg-slider-track[aria-disabled="true"]:focus,
            .brand-svg-slider-track[aria-disabled="true"]:hover,
            .brand-svg-slider-track[data-disabled],
            .brand-svg-slider-track[data-disabled]:focus,
            .brand-svg-slider-track[data-disabled]:hover {
                background: #e0e0e0;
            }

/* Moved from index.php (brand-svg-slider-filled) */
.brand-svg-slider-filled {
                width: inherit;
                height: inherit;
                background: #878787;
            }

/* Moved from index.php (brand-svg-slider-thumb) */
.brand-svg-slider-thumb {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                position: absolute;
                outline: 0;
                z-index: 1;
                border-radius: 9999px;
                background: #ffffff;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                border: 1px solid;
                border-color: transparent;
                -webkit-transition: -webkit-transform 0.2s;
                transition: transform 0.2s;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                width: 1.125rem;
                height: 1.125rem;
            }
            .brand-svg-slider-thumb:focus,
            .brand-svg-slider-thumb[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-slider-thumb[disabled],
            .brand-svg-slider-thumb[disabled]:focus,
            .brand-svg-slider-thumb[disabled]:hover,
            .brand-svg-slider-thumb[aria-disabled="true"],
            .brand-svg-slider-thumb[aria-disabled="true"]:focus,
            .brand-svg-slider-thumb[aria-disabled="true"]:hover,
            .brand-svg-slider-thumb[data-disabled],
            .brand-svg-slider-thumb[data-disabled]:focus,
            .brand-svg-slider-thumb[data-disabled]:hover {
                background: #878787;
            }
            .brand-svg-slider-thumb:active,
            .brand-svg-slider-thumb[data-active] {
                -webkit-transform: translateY(-50%) scale(1.15);
                -moz-transform: translateY(-50%) scale(1.15);
                -ms-transform: translateY(-50%) scale(1.15);
                transform: translateY(-50%) scale(1.15);
            }
            .brand-svg-slider-thumb:focus {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }

/* Moved from index.php (brand-svg-footer) */
.brand-svg-footer {
                padding-left: 1rem;
                padding-right: 1rem;
                padding-top: 1.25rem;
                padding-bottom: 1.25rem;
                background: transparent;
            }

/* Moved from index.php (brand-svg-footer-row) */
.brand-svg-footer-row {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                width: 100%;
                padding-top: 1.25rem;
            }
            .brand-svg-footer-row > *:not(style) ~ *:not(style) {
                -webkit-margin-start: 0.75rem;
                margin-inline-start: 0.75rem;
                margin-top: 0;
            }

/* Moved from index.php (brand-svg-download-button) */
.brand-svg-download-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: auto;
                line-height: calc(1em + 0.125rem);
                border-radius: 0.5rem;
                font-weight: 600;
                height: 2.25rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 1rem;
                padding-right: 1rem;
                background: #715df2;
                color: #ffffff;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .brand-svg-download-button:focus,
            .brand-svg-download-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-download-button[disabled],
            .brand-svg-download-button[disabled]:focus,
            .brand-svg-download-button[disabled]:hover,
            .brand-svg-download-button[aria-disabled="true"],
            .brand-svg-download-button[aria-disabled="true"]:focus,
            .brand-svg-download-button[aria-disabled="true"]:hover,
            .brand-svg-download-button[data-disabled],
            .brand-svg-download-button[data-disabled]:focus,
            .brand-svg-download-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-download-button:hover,
            .brand-svg-download-button[data-hover] {
                background: #a599f7;
            }
            .brand-svg-download-button:hover[disabled],
            .brand-svg-download-button[data-hover][disabled],
            .brand-svg-download-button:hover[disabled]:focus,
            .brand-svg-download-button[data-hover][disabled]:focus,
            .brand-svg-download-button:hover[disabled]:hover,
            .brand-svg-download-button[data-hover][disabled]:hover,
            .brand-svg-download-button:hover[aria-disabled="true"],
            .brand-svg-download-button[data-hover][aria-disabled="true"],
            .brand-svg-download-button:hover[aria-disabled="true"]:focus,
            .brand-svg-download-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-download-button:hover[aria-disabled="true"]:hover,
            .brand-svg-download-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-download-button:hover[data-disabled],
            .brand-svg-download-button[data-hover][data-disabled],
            .brand-svg-download-button:hover[data-disabled]:focus,
            .brand-svg-download-button[data-hover][data-disabled]:focus,
            .brand-svg-download-button:hover[data-disabled]:hover,
            .brand-svg-download-button[data-hover][data-disabled]:hover {
                background: #c0b7f9;
            }
            .brand-svg-download-button:active,
            .brand-svg-download-button[data-active] {
                background: #8b7af4;
            }
            .brand-svg-download-button:hover {
                background: #8b7af4;
            }
            .brand-svg-download-button:focus {
                background: #8b7af4;
            }
            .brand-svg-download-button:active {
                background: #715df2;
            }

/* Moved from index.php (brand-svg-random-button) */
.brand-svg-random-button {
                display: -webkit-inline-box;
                display: -webkit-inline-flex;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-transition: all 250ms;
                transition: all 250ms;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: relative;
                white-space: nowrap;
                vertical-align: middle;
                outline: none;
                width: auto;
                line-height: calc(1em + 0.125rem);
                border-radius: 0.5rem;
                font-weight: 600;
                height: 2.25rem;
                min-width: auto;
                font-size: 0.875rem;
                padding-left: 1rem;
                padding-right: 1rem;
                background: #18181b; /* Zinc-900 */
                color: #ffffff;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .brand-svg-random-button:focus,
            .brand-svg-random-button[data-focus] {
                box-shadow: 0 0 0 0.25rem rgba(139, 122, 244, 0.36);
            }
            .brand-svg-random-button[disabled],
            .brand-svg-random-button[disabled]:focus,
            .brand-svg-random-button[disabled]:hover,
            .brand-svg-random-button[aria-disabled="true"],
            .brand-svg-random-button[aria-disabled="true"]:focus,
            .brand-svg-random-button[aria-disabled="true"]:hover,
            .brand-svg-random-button[data-disabled],
            .brand-svg-random-button[data-disabled]:focus,
            .brand-svg-random-button[data-disabled]:hover {
                opacity: 0.4;
                cursor: not-allowed;
                box-shadow: none;
            }
            .brand-svg-random-button:hover[disabled],
            .brand-svg-random-button[data-hover][disabled],
            .brand-svg-random-button:hover[disabled]:focus,
            .brand-svg-random-button[data-hover][disabled]:focus,
            .brand-svg-random-button:hover[disabled]:hover,
            .brand-svg-random-button[data-hover][disabled]:hover,
            .brand-svg-random-button:hover[aria-disabled="true"],
            .brand-svg-random-button[data-hover][aria-disabled="true"],
            .brand-svg-random-button:hover[aria-disabled="true"]:focus,
            .brand-svg-random-button[data-hover][aria-disabled="true"]:focus,
            .brand-svg-random-button:hover[aria-disabled="true"]:hover,
            .brand-svg-random-button[data-hover][aria-disabled="true"]:hover,
            .brand-svg-random-button:hover[data-disabled],
            .brand-svg-random-button[data-hover][data-disabled],
            .brand-svg-random-button:hover[data-disabled]:focus,
            .brand-svg-random-button[data-hover][data-disabled]:focus,
            .brand-svg-random-button:hover[data-disabled]:hover,
            .brand-svg-random-button[data-hover][data-disabled]:hover {
                background: initial;
            }
            .brand-svg-random-button:hover {
                background: #27272a; /* Zinc-800 */
                color: #ffffff;
            }
            .brand-svg-random-button:focus {
                background: #27272a; /* Zinc-800 */
                color: #ffffff;
            }
            .brand-svg-random-button:active {
                background: #3f3f46; /* Zinc-700 */
                color: #ffffff;
            }

            
            body {
                background: var(--bg, #F6F7FB);
                color: var(--text, #666666);
                font-family: 'Inter', system-ui, -apple-system, sans-serif;
            }
            .brand-svg-sidebar {
                background: var(--surface, #FFFFFF) !important;
                border-right: 1px solid var(--border, #E2E4EA) !important;
                box-shadow: var(--shadow, 0 2px 8px rgba(17,24,39,0.06));
            }
            .brand-svg-sidebar-header {
                border-right: 1px solid var(--border, #E2E4EA) !important;
                background: var(--surface, #FFFFFF) !important;
            }
            .brand-svg-icon-button {
                background: transparent !important;
                color: var(--text-muted, #5F6A7A) !important;
                border: 1px solid transparent !important;
                border-radius: var(--radius-8, 8px) !important;
                transition: all 0.2s ease;
            }
            .brand-svg-icon-button:hover {
                background: var(--surface-2, #FAFBFF) !important;
                color: var(--brand-blue, #4C6FFF) !important;
            }
            .brand-svg-footer {
                background: var(--surface, #FFFFFF) !important;
                border-top: 1px solid var(--border, #E2E4EA);
            }
            .brand-svg-list-card {
                border: 1px solid var(--border, #E2E4EA);
                border-radius: var(--radius-12, 12px);
                background-color: var(--surface, #FFFFFF) !important;
                transition: all 0.2s ease !important;
            }
            .brand-svg-list-card:hover {
                box-shadow: var(--shadow-lg, 0 10px 30px rgba(17,24,39,0.12));
                transform: translateY(-2px) !important;
                border-color: var(--brand-blue, #4C6FFF);
            }
            /* Text colors */
            .bgtext, .brand-svg-card-text {
                color: var(--text, #666666) !important;
                font-weight: 500;
            }
            /* Scrollbars */
            .brand-svg-scroll-container {
                scrollbar-color: var(--border) transparent !important;
            }
            .brand-svg-scroll-container::-webkit-scrollbar-thumb {
                background-color: var(--border);
            }
            /* Inputs/Sliders if any */
            .brand-svg-slider-track {
                background: var(--border, #E2E4EA) !important;
            }
            .brand-svg-slider-thumb {
                background: var(--surface, #FFFFFF) !important;
                border: 2px solid var(--brand-blue, #4C6FFF) !important;
                box-shadow: var(--shadow);
            }
            .brand-svg-color-button {
                border: 1px solid var(--border, #E2E4EA);
            }
            /* Popovers */
            .brand-ai-popover__content, .popover-content {
                background-color: var(--surface, #FFFFFF) !important;
                border: 1px solid var(--border, #E2E4EA) !important;
                box-shadow: var(--shadow-lg, 0 10px 30px rgba(17,24,39,0.12)) !important;
                color: var(--text, #666666) !important;
            }
            .brand-ai-popover__arrow, .popover-arrow {
                background-color: var(--surface, #FFFFFF) !important;
                box-shadow: -1px -1px 1px 0px rgba(0,0,0,0.05) !important; /* Subtle shadow for arrow */
            }
            /* Main Container */
            .brand-svg-app-container, .brand-svg-grid-layout {
                background-color: var(--bg, #F6F7FB) !important;
                color: var(--text, #666666) !important;
            }
            /* Inputs inside popovers */
            .brand-ai-input {
    background-color: transparent !important;
    border: 1px solid var(--border, #E2E4EA) !important;
    color: #666666 !important;
}
            /* Section titles */
            .section-title, .brand-svg-control-label, .brand-svg-sub-label, .brand-svg-accordion-title {
                color: var(--text, #666666) !important;
            }
            /* Accordion panels */
            .brand-svg-accordion-panel {
                 /* background-color: var(--surface, #FFFFFF) !important; */
            }
.brand-svg-tab-button { color: #666666; }
.brand-svg-tab-button-inactive { color: #666666; }