.cgsl-designer {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}
.cgsl-designer *, .cgsl-designer *::before, .cgsl-designer *::after { box-sizing: border-box; }
.cgsl-title { margin: 0 0 18px; font-size: 22px; }
.cgsl-designer-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr); gap: 24px; align-items: start; }
.cgsl-field { margin-bottom: 16px; }
.cgsl-field label, .cgsl-option-label { display: block; font-weight: 600; margin-bottom: 6px; }
.cgsl-field input[type="text"], .cgsl-field input[type="file"], .cgsl-field select, .cgsl-field textarea { width: 100%; max-width: 100%; }
.cgsl-help { margin: 6px 0 0; font-size: 12px; color: #666; }
.cgsl-required { color: #cc0000; }
.cgsl-inline-check { display: inline-flex !important; align-items: center; gap: 8px; }
.cgsl-field-error { border-left: 3px solid #cc0000; padding-left: 10px; }
.cgsl-color-swatches, .cgsl-choice-list, .cgsl-design-color-swatches, .cgsl-button-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cgsl-color-swatch, .cgsl-align-button, .cgsl-choice-row, .cgsl-design-color-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 7px 11px;
    background: #fff;
    cursor: pointer;
    line-height: 1.2;
}
.cgsl-color-swatch.is-selected, .cgsl-align-button.is-selected, .cgsl-design-color-choice.is-selected { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.cgsl-color-dot, .cgsl-choice-color-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--cgsl-color); display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.cgsl-choice-color-dot { background: var(--cgsl-choice-color); }
.cgsl-range-field input[type="range"] { width: 100%; }

/* Preview stage */
.cgsl-preview {
    --cgsl-custom-wall-image: none;
    min-height: 410px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
    position: sticky;
    top: 20px;
    isolation: isolate;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -18px 52px rgba(0,0,0,0.28),
        0 18px 40px rgba(0,0,0,0.18);
    background-color: #111;
}
.cgsl-preview::before,
.cgsl-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cgsl-preview::before {
    z-index: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,0.07), transparent 26%),
        radial-gradient(circle at 82% 74%, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.24));
    mix-blend-mode: screen;
    opacity: 0.55;
}
.cgsl-preview::after {
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    opacity: 0.7;
}
.cgsl-preview-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* Background variants */
.cgsl-bg-no-background,
.cgsl-bg-dark-wall {
    background:
        radial-gradient(circle at center, rgba(52,52,52,0.34) 0%, rgba(7,7,7,1) 72%),
        linear-gradient(135deg, #232323 0%, #0a0a0a 58%, #060606 100%);
}
.cgsl-bg-brick-wall {
    background-color: #1a1313;
    background-image:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.04), transparent 45%),
        linear-gradient(90deg, rgba(255,255,255,0.06) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,0.05) 2px, transparent 2px),
        linear-gradient(0deg, rgba(0,0,0,0.22), rgba(0,0,0,0.22));
    background-size: auto, 58px 30px, 58px 30px, auto;
}
.cgsl-bg-bar-wall {
    background:
        radial-gradient(circle at 22% 18%, rgba(255,182,193,0.08), transparent 24%),
        radial-gradient(circle at 80% 80%, rgba(89,46,125,0.11), transparent 28%),
        linear-gradient(135deg, #0c0a10 0%, #241523 48%, #070709 100%);
}
.cgsl-bg-wedding-backdrop {
    background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,0.08), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 35%),
        linear-gradient(135deg, #2b2030 0%, #4c394c 55%, #151114 100%);
}
.cgsl-bg-storefront {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25)),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(135deg, #121418 0%, #26292e 52%, #090b0e 100%);
    background-size: auto, 42px 42px, auto;
}
.cgsl-bg-home-interior {
    background:
        radial-gradient(circle at 16% 19%, rgba(255,220,180,0.08), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)),
        linear-gradient(135deg, #231c18 0%, #4b3d32 56%, #15110e 100%);
}
.cgsl-bg-office-wall {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(135deg, #1a2027 0%, #33404f 58%, #10141a 100%);
    background-size: auto, 56px 56px, auto;
}
.cgsl-bg-custom-photo {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.36)),
        var(--cgsl-custom-wall-image);
    background-size: cover, cover;
    background-position: center center, center center;
}

/* Acrylic board and standoffs */
.cgsl-acrylic-board {
    --cgsl-board-width: 86%;
    --cgsl-board-height: 80%;
    position: relative;
    width: var(--cgsl-board-width);
    height: var(--cgsl-board-height);
    min-width: 260px;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03) 18%, rgba(255,255,255,0.01) 55%, rgba(255,255,255,0.05) 100%),
        rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 10px 24px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,255,255,0.05);
    backdrop-filter: blur(1.2px);
    transition: width .2s ease, height .2s ease, border-radius .2s ease, opacity .2s ease, background .2s ease;
}
.cgsl-acrylic-board::before {
    content: "";
    position: absolute;
    inset: 12px 18px auto 18px;
    height: 18%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0.62;
    pointer-events: none;
}
.cgsl-acrylic-board.is-no-board {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.cgsl-acrylic-board.is-no-board::before { display: none; }
.cgsl-acrylic-board.is-fitted {
    border-radius: 24px;
}
.cgsl-acrylic-board.is-hidden-standoffs .cgsl-standoff { display: none; }

.cgsl-standoff {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(225,225,225,0.95) 35%, #9aa0a6 65%, #6d737a 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.45),
        0 2px 5px rgba(0,0,0,0.28),
        0 0 0 1px rgba(255,255,255,0.18);
    z-index: 5;
}
.cgsl-standoff-tl { top: 12px; left: 12px; }
.cgsl-standoff-tr { top: 12px; right: 12px; }
.cgsl-standoff-bl { bottom: 12px; left: 12px; }
.cgsl-standoff-br { bottom: 12px; right: 12px; }

/* SVG neon renderer */
.cgsl-neon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cgsl-svg-text {
    font-family: Arial, sans-serif;
    dominant-baseline: middle;
    text-anchor: middle;
    paint-order: stroke fill;
    letter-spacing: var(--cgsl-letter-spacing, 0.01em);
}
.cgsl-svg-halo {
    fill: transparent;
    stroke: transparent;
    opacity: var(--cgsl-halo-opacity, .9);
    filter: blur(var(--cgsl-halo-blur, .4px));
}
.cgsl-svg-outer {
    fill: transparent;
    stroke: var(--cgsl-glow-mid, #ffd96a);
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: calc(var(--cgsl-edge-opacity, .76) * .88);
    filter: blur(var(--cgsl-edge-blur, .32px));
}
.cgsl-svg-edge {
    fill: transparent;
    stroke: var(--cgsl-tube-edge, #ffd96a);
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: var(--cgsl-edge-opacity, .76);
}
.cgsl-svg-core {
    fill: var(--cgsl-tube-core, #fffbe8);
    stroke: rgba(255,255,255,0.18);
    stroke-width: .55px;
}
.cgsl-svg-highlight {
    fill: var(--cgsl-tube-reflection, rgba(255,255,255,0.82));
    opacity: var(--cgsl-tube-highlight-opacity, 0.9);
    filter: blur(.3px);
}

.cgsl-product-options { margin: 20px 0; padding: 16px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fafafa; }
.cgsl-product-options h4 { margin: 0 0 14px; }
.cgsl-image-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.cgsl-image-choice { display: flex; flex-direction: column; gap: 7px; border: 1px solid #ddd; border-radius: 10px; padding: 10px; background: #fff; cursor: pointer; }
.cgsl-image-choice input { align-self: flex-start; }
.cgsl-image-choice img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #f2f2f2; }
.cgsl-image-choice.is-selected, .cgsl-image-choice:has(input:checked) { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.cgsl-choice-title { font-weight: 600; }
.cgsl-image-choice small { color: #666; }

@media (max-width: 768px) {
    .cgsl-designer-layout { grid-template-columns: 1fr; }
    .cgsl-preview { min-height: 320px; position: relative; top: auto; }
    .cgsl-preview-stage { min-height: 240px; }
    .cgsl-acrylic-board { width: 94%; height: 86%; }
}