.feature-demo-backgrounds .feature-demo-panel .panel-tile{background:var(--panel-surface-muted);border:1px solid var(--panel-border);border-radius:var(--panel-radius-md);padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:background .18s ease,border-color .18s ease,transform .18s ease}.feature-demo-backgrounds .feature-demo-panel .panel-tile :where(span,p,div).panel-text-muted{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease}.feature-demo-backgrounds .feature-demo-panel .panel-tile:hover{background:var(--panel-surface-muted-hover)}.feature-demo-backgrounds .feature-demo-panel .panel-tile:hover .panel-text-muted{color:var(--panel-text)}.feature-demo-backgrounds .feature-demo-panel .panel-tile.active{border-color:var(--panel-accent);background:var(--panel-accent-soft);transform:translateY(-1px)}.feature-demo-backgrounds .feature-demo-panel .panel-tile.active .panel-text-muted{color:var(--panel-text)}.feature-demo-backgrounds .feature-demo-panel .panel-dropzone{border:1px dashed var(--panel-border-strong);background:var(--panel-surface-muted);border-radius:var(--panel-radius-md)}.feature-demo-backgrounds .feature-demo-panel .panel-dropzone:hover{background:var(--panel-surface-muted-hover);border-color:var(--panel-accent)}.feature-demo-backgrounds .feature-demo-panel .background-detail-panel{min-width:0}.feature-demo-backgrounds .feature-demo-panel .background-type-grid--compact{gap:16px}.feature-demo-backgrounds .feature-demo-panel .background-type-grid--compact .panel-tile{gap:8px;padding:12px}.feature-demo-backgrounds .feature-demo-panel .background-type-grid--compact .panel-tile svg{width:24px;height:24px}.feature-demo-backgrounds .feature-demo-panel .background-type-grid--compact .panel-tile span{font-size:12px;font-weight:600}.feature-demo-backgrounds .feature-demo-panel .background-preview-card{min-width:0;display:flex;flex-direction:column;gap:12px}.feature-demo-backgrounds .feature-demo-panel .background-detail-preview{position:relative;min-width:0}.feature-demo-backgrounds .feature-demo-panel .background-detail-preview--current{min-height:160px;background:var(
        --stylergpt-main-page-surface,var(
            --main-surface-background,var(--bg-primary,var(--main-surface-primary,var(--panel-bg)))
        )
    )}.feature-demo-backgrounds .feature-demo-panel .background-detail-preview--option{min-height:160px}.feature-demo-backgrounds .feature-demo-panel .background-detail-action--overlay{position:absolute;left:50%;top:calc(50% + 52px);z-index:3;width:auto;min-width:168px;max-width:min(100% - 32px,260px);transform:translate(-50%,-50%)}.feature-demo-backgrounds .feature-demo-panel .background-opacity-control{min-width:0;margin-bottom:0}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer{--background-preview-composer-border:var(
        --background-preview-composer-light-border,var(--panel-accent-strong)
    );--background-preview-composer-icon-color:var(
        --background-preview-composer-light-icon,var(--panel-text)
    );--background-preview-composer-prompt-color:var(
        --background-preview-composer-light-prompt,var(--panel-muted)
    );position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;gap:8px;width:min(86%,320px);height:30px;padding:4px 5px;transform:translate(-50%,-50%);pointer-events:none;color:var(--panel-text);background:color-mix(in srgb,var(--panel-surface) 90%,transparent);border:1px solid var(--background-preview-composer-border);border-radius:9999px;box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 0 0 1px color-mix(in srgb,#fff 20%,transparent);backdrop-filter:blur(8px)}.feature-demo-backgrounds .feature-demo-panel .demo-panel-root.dark .background-preview-composer,.feature-demo-backgrounds .feature-demo-panel .demo-panel-tokens.dark .background-preview-composer{--background-preview-composer-border:var(
        --background-preview-composer-dark-border,var(--panel-accent)
    );--background-preview-composer-icon-color:var(
        --background-preview-composer-dark-icon,var(--panel-text)
    );--background-preview-composer-prompt-color:var(
        --background-preview-composer-dark-prompt,var(--panel-muted)
    );background:color-mix(in srgb,var(--panel-surface) 92%,transparent);box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 0 0 1px hsla(0,0%,100%,.08)}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__icon,.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__send{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;border-radius:9999px}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__icon{color:var(--background-preview-composer-icon-color);background:transparent}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__icon--plus:after,.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__icon--plus:before{content:"";position:absolute;width:8px;height:1.5px;border-radius:9999px;background:currentColor}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__icon--plus:after{transform:rotate(90deg)}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__prompt{flex:1 1 auto;min-width:0;margin-left:3px;color:var(--background-preview-composer-prompt-color);font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__send{color:var(--panel-surface);background:var(--panel-text)}.feature-demo-backgrounds .feature-demo-panel .background-preview-composer__send svg{width:52%;height:52%}.feature-demo-backgrounds .feature-demo-panel .stylergpt-theme-root--modal-panel .backgrounds-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-demo-backgrounds .feature-demo-panel .background-detail-preview.panel-color-swatch,.feature-demo-backgrounds .feature-demo-panel .background-detail-preview.panel-image-frame.cursor-pointer{transition:border-color .18s ease,box-shadow .18s ease}.feature-demo-backgrounds .feature-demo-panel .background-detail-preview.panel-color-swatch:hover,.feature-demo-backgrounds .feature-demo-panel .background-detail-preview.panel-image-frame.cursor-pointer:not(.panel-hover-scale):hover{transform:none}.feature-demo-backgrounds .feature-demo-panel .panel-range::-webkit-slider-thumb{-webkit-transition:transform .18s ease;transition:transform .18s ease}.feature-demo-backgrounds .feature-demo-panel .panel-range::-moz-range-thumb{-moz-transition:transform .18s ease;transition:transform .18s ease}.feature-demo-backgrounds .feature-demo-panel .panel-range:hover::-moz-range-thumb,.feature-demo-backgrounds .feature-demo-panel .panel-range:hover::-webkit-slider-thumb{transform:scale(1.08)}.feature-demo-backgrounds .feature-demo-panel .panel-range:hover::-moz-range-track,.feature-demo-backgrounds .feature-demo-panel .panel-range:hover::-webkit-slider-runnable-track{background:var(--panel-border-strong)}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace--header .background-detail-panel{margin-top:0}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-type-selector .line-clamp-1{display:block;overflow:visible;white-space:normal;-webkit-line-clamp:unset;overflow-wrap:anywhere}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-preview{min-height:180px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace__inspector .background-detail-preview{min-height:130px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-type-selector{gap:6px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{min-height:54px;aspect-ratio:auto}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace .background-opacity-control{align-self:stretch;width:100%}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace__main>.background-detail-panel{margin-block:0;min-height:100%;flex:1 0 auto}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace__main>.background-detail-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,42%);grid-template-rows:minmax(180px,1fr);gap:16px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-preview-card{grid-column:1/-1;min-height:0;display:flex}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-preview{flex:1;height:100%}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-action{grid-column:2;grid-row:2;align-self:end;min-width:0;white-space:normal}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace:has(.stylergpt-section-editor) .background-opacity-control{grid-column:1/-1}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace--catalog [data-testid=background-image-tile-upload]{height:72px;aspect-ratio:auto}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-preview-composer__prompt{white-space:normal;overflow-wrap:anywhere;overflow:visible}@container (max-width: 480px){.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace__main>.background-detail-panel{min-height:240px;height:280px}}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace--header>.stylergpt-section-workspace__main>.background-detail-panel{flex:1;min-height:0}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-type-selector{grid-template-columns:repeat(4,minmax(0,1fr));padding:3px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{padding:6px 2px}.feature-demo-backgrounds .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace--catalog .background-opacity-control{grid-column:1/-1}