@media screen {
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) body {
    isolation: isolate;
    background-color: var(--pos-background-color);
    background-image: none;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) body::before,
  html[data-pos-ui] .pos-theme-preview:not([data-pos-background=default])::before {
    content: "";
    position: fixed;
    inset: -40px;
    z-index: -1;
    pointer-events: none;
    background-image: var(--pos-wallpaper);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: var(--pos-wallpaper-opacity);
    filter: blur(var(--pos-wallpaper-blur)) saturate(var(--pos-wallpaper-saturation, 1));
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    :is(.container-body-layout, .container-swift-operation, .swift-general, .setting-page-container,
      .admin-backoffice-container, .work-schedule-container, .work-schedule-page,
      .catalog-container, .closedtickets-container, .closedtickets-layout, .giftcardmanager-container,
      ._client-container-redesign, .dashboard-layout, .sc2, .sc2-frame) {
    background-color: transparent;
    background-image: none;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    :is(.abo-main, .booking-page-body, .catalog-container .main, .closedtickets-content-wrapper,
      .gcm-table-wrapper, .settings-content, .work-schedule-page-content, .rpt-main-content, .sm) {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent);
  }
  /* Legacy Dark surface groups include ID selectors; keep these workspace-only overrides local. */
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) ._client-container-redesign {
    background-color: transparent !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) .sc2-frame__body,
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) .team-settings-layout {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent) !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) ._client-container-redesign #main-content {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent);
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) #turn-tracker-page-body-id {
    background-color: transparent;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    #turn-tracker-page-body-id #append-turn-tracker-id {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent);
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    #booking-page-body-id :is(.booking-calendar-area, .booking-list-view-area, .booking-action-area,
      .append-tech-filter-calendar) {
    background-color: transparent !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    :is(#quickSaleModal .quicksale-modal-content, #quickSaleModal .qs-pos-container) {
    background-color: transparent !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) .qs-landing {
    background-color: var(--pos-image-workspace, transparent) !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    #quickSaleModal .qs-pos-container > .main-content {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent) !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    #quickSaleModal :is(.tab-content-wrapper, .tab-content, .services-grid, .products-grid) {
    background-color: transparent !important;
    background-image: none !important;
  }
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default])
    #form-seat-map-body-id :is(.sm-floor, .sm-floor__main, .sm-plan, .sm-plan__body,
      .sm-queue--column, .sm-fp, .sm-fp__scroll, .sm-fp__stage) {
    background-color: transparent;
  }
  html[data-pos-ui] .pos-theme-preview:not([data-pos-background=default]) {
    position: relative;
    isolation: isolate;
    background-color: var(--pos-background-color);
  }
  html[data-pos-ui] .pos-theme-preview:not([data-pos-background=default])::before {
    position: absolute;
  }
  html[data-pos-ui] .pos-theme-preview:not([data-pos-background=default]) .pt-app-body {
    background-color: color-mix(in srgb, var(--pos-canvas) 68%, transparent);
  }
}