/* Baskibu Designer 0.23.0-dev64 — compact mobile sheets + floating painter palette
   Safe layer: CSS only. No new observers, lifecycle patches or runtime loops. */

/* --------------------------------------------------------------------------
   Painter palette: use the existing background tool as the control, so every
   already-tested dev60 click route continues to own opening/closing the sheet.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > svg,
.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] .bbd-v58-palette-icon,
.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] .bbd-v59-artist-palette,
.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] .bbd-v60-artist-palette {
  display: none !important;
}

.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"]::before {
  content: "" !important;
  width: 25px !important;
  height: 23px !important;
  flex: 0 0 25px !important;
  display: block !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M16.3 2.7C8.5 2.7 2.4 7.7 2.4 14c0 6.7 5.8 12 13.1 12h1.4c1.8 0 2.8-1.9 1.7-3.3-1.1-1.4-.7-3.4.7-4.4 1.3-1 3.2-1 4.6-.1l1.1.7c4 2.6 9-.6 7.8-5.1C31.1 7.6 24.5 2.7 16.3 2.7Z' fill='%23fff8ef' stroke='%23344054' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cellipse cx='25.9' cy='9.7' rx='2.8' ry='2.45' fill='white' stroke='%23667085' stroke-width='1.2'/%3E%3Ccircle cx='8.8' cy='10.4' r='1.85' fill='%23ff5b1f'/%3E%3Ccircle cx='13.1' cy='7.2' r='1.75' fill='%23f7c948'/%3E%3Ccircle cx='8.1' cy='15.7' r='1.75' fill='%2322b573'/%3E%3Ccircle cx='12.2' cy='20' r='1.75' fill='%233b82f6'/%3E%3Ccircle cx='17.7' cy='6.7' r='1.65' fill='%239b5de5'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------------------
   Phone/tablet navigation: Zemin leaves the crowded bottom navigation and
   becomes a visible quick tool at the right edge of the canvas.
   -------------------------------------------------------------------------- */
@media (max-width:1024px) {
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar,
  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    overflow: visible !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"],
  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] {
    position: absolute !important;
    z-index: 9705 !important;
    right: 11px !important;
    bottom: calc(100% + 52px) !important;
    left: auto !important;
    top: auto !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 6px 4px 5px !important;
    overflow: visible !important;
    border: 1px solid rgba(203,213,225,.96) !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.97) !important;
    color: #475467 !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 2px 7px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"]::before,
  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"]::before {
    width: 29px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > span:not(.bbd-v59-artist-palette):not(.bbd-v60-artist-palette),
  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > span:not(.bbd-v59-artist-palette):not(.bbd-v60-artist-palette) {
    display: block !important;
    width: auto !important;
    max-width: 48px !important;
    font-size: 8.5px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #475467 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"].is-active,
  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"].is-active {
    border-color: rgba(255,75,0,.36) !important;
    background: #fff7f3 !important;
    color: #e54b14 !important;
    box-shadow: 0 10px 28px rgba(229,75,20,.13), 0 0 0 2px rgba(255,75,0,.08) !important;
  }

  /* Once a foreground panel is open, keep the quick tool out of its way. */
  .bbd-app.bbd-pro-workspace-v0230-dev60.is-v60-sheet-open .bbd-sidebar .bbd-tool[data-panel="background"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   True phone layout: the sheet bar is the heading. Desktop-sized duplicate
   headings and cards are compacted into a touch-friendly mobile composition.
   -------------------------------------------------------------------------- */
@media (max-width:760px) {
  .bbd-app.bbd-pro-workspace-v0230-dev60 {
    --bbd-v64-sheet-height: min(47%, 390px);
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,
  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {
    height: var(--bbd-v64-sheet-height) !important;
    min-height: 300px !important;
    max-height: 390px !important;
    border-radius: 18px 18px 14px 14px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar {
    min-height: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    grid-template-columns: 28px minmax(0,1fr) 28px !important;
    padding: 5px 7px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-mobile-sheet-title {
    font-size: 11.5px !important;
    font-weight: 850 !important;
    letter-spacing: -.08px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-mobile-sheet-close,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-mobile-sheet-back {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {
    gap: 6px !important;
    padding: 8px 10px 12px !important;
    scroll-padding-top: 8px !important;
  }

  /* The foreground sheet bar already names the panel; remove repeated desktop headings. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) > h2,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) > .bbd-panel-heading,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-modules > .bbd-panel-heading,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-heading--sticky {
    display: none !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]),
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) * {
    box-sizing: border-box !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) > *,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) form,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) fieldset,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section:not([hidden]) label {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Inputs/actions: 36–40px instead of desktop slabs. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-field,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-search-field {
    gap: 3px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-field > span,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-field > strong,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-help,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel small {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel select,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel textarea,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-action-card,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-inline-actions button {
    min-height: 36px !important;
    height: auto !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-field-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-inline-actions,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-inline-actions--wide {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Product: one compact summary instead of stacked desktop cards. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="product"] {
    gap: 7px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-identity,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-compact-row,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-preflight {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-identity strong,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-preflight strong {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-identity span,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-identity em,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-preflight span,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-compact-row {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-flow-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-flow-actions button {
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }

  /* Upload: four long tabs become a clean 2×2 mobile grid. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow: row !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone {
    display: grid !important;
    grid-template-columns: 32px minmax(0,1fr) !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > svg,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > svg {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 27px !important;
    height: 27px !important;
    margin: 1px 0 0 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > strong,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > strong,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > span:not(.bbd-upload-format-badges),
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > span:not(.bbd-upload-format-badges) {
    grid-column: 2 !important;
    margin: 0 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > strong,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > strong {
    font-size: 12px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > span:not(.bbd-upload-format-badges),
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > span:not(.bbd-upload-format-badges) {
    font-size: 9.4px !important;
    line-height: 1.3 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > em,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone > em {
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 5px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-style: normal !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-format-badges {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-format-badges b {
    padding: 2px 5px !important;
    font-size: 8px !important;
    border-radius: 999px !important;
  }

  /* Templates: readable two-column cards with shorter previews. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card {
    min-width: 0 !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__preview {
    min-height: 82px !important;
    height: 82px !important;
    border-radius: 8px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card > strong {
    margin-top: 5px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card > small {
    margin-top: 2px !important;
    font-size: 8.5px !important;
  }

  /* Background: tabs + current colour + cards all fit without horizontal scroll. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-mode-tabs button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 5px 3px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-selection {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-selection .bbd-background-preview {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-selection strong {
    font-size: 10px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-selection button {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 9.5px !important;
    border-radius: 9px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v58-background-palette {
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v58-background-swatch {
    width: 100% !important;
    aspect-ratio: 1.35 / 1 !important;
    min-height: 34px !important;
    border-radius: 9px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card {
    min-height: 66px !important;
    padding: 7px !important;
    border-radius: 10px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card strong {
    font-size: 10px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card small {
    font-size: 8.5px !important;
  }

  /* Layers and graphics: dense but still finger-friendly. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-command-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-command-grid button {
    min-height: 34px !important;
    padding: 5px 4px !important;
    font-size: 9px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-list {
    min-height: 0 !important;
    gap: 5px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-clipart-grid,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-graphic-grid,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-shape-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  /* Prevent old desktop min-widths from bringing back a horizontal scrollbar. */
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-panel-section,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-mode-tabs,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-grid,
  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card-grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (max-width:390px) {
  .bbd-app.bbd-pro-workspace-v0230-dev60 {
    --bbd-v64-sheet-height: min(49%, 360px);
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,
  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {
    min-height: 286px !important;
    max-height: 360px !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] {
    right: 8px !important;
    bottom: calc(100% + 46px) !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__preview {
    height: 74px !important;
    min-height: 74px !important;
  }
}