/* BBD CSS: assets/css/editor-0230-dev42.css */
.bbd-app {



  --bbd-accent: #ff4b00;



  --bbd-accent-dark: #d63f00;



  --bbd-ink: #171717;



  --bbd-muted: #6b7280;



  --bbd-line: #e5e7eb;



  --bbd-bg: #f3f4f6;



  --bbd-panel: #ffffff;



  --bbd-radius: 14px;



}







/* v0.23.0-dev.2 — professional action cues and a stable edge handle. */



.bbd-pro-workspace-v0230-dev2 .bbd-pro-action-button {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-action-button .bbd-pro-action-icon,



.bbd-pro-workspace-v0230-dev2 .bbd-pro-icon-tab .bbd-pro-action-icon {



  flex: 0 0 auto;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-icon-tab {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 6px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-icon-tab .bbd-pro-action-icon {



  width: 15px;



  height: 15px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-flow-actions .bbd-pro-action-button {



  min-height: 42px;



  border-radius: 8px;



  font-weight: 750;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-handle {



  width: 36px;



  min-width: 36px;



  height: 54px;



  border-color: #d0d5dd;



  border-radius: 0 10px 10px 0;



  background: rgba(255, 255, 255, .98);



  color: #475467;



  box-shadow: 8px 4px 22px rgba(16, 24, 40, .13);



  backdrop-filter: blur(10px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel-edge-icon {



  display: grid;



  place-items: center;



  transition: transform 160ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel-edge-icon.is-outward {



  transform: rotate(180deg);



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-handle:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-handle:focus-visible {



  border-color: #ff8a5b;



  background: #fff7f2;



  color: #d9480f;



  box-shadow: 8px 4px 24px rgba(16, 24, 40, .16), 0 0 0 3px rgba(255, 75, 0, .10);



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-tabs,



.bbd-pro-workspace-v0230-dev2 .bbd-background-mode-tabs {



  scrollbar-width: thin;



}







@media (max-width: 760px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-pro-icon-tab {



    gap: 4px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-pro-icon-tab .bbd-pro-action-icon {



    width: 14px;



    height: 14px;



  }



}







/* v0.23.0-dev.2 — non-blocking print guidance and centralized quality feedback. */



.bbd-pro-workspace-v0230-dev2 .bbd-warning-layer {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner {



  position: absolute !important;



  z-index: 228 !important;



  top: 86px !important;



  left: 50% !important;



  width: min(680px, calc(100% - 48px)) !important;



  max-width: 680px !important;



  display: grid !important;



  grid-template-columns: auto minmax(0, 1fr) auto auto auto;



  align-items: center !important;



  gap: 10px !important;



  margin: 0 !important;



  padding: 10px 12px !important;



  transform: translateX(-50%);



  border: 1px solid #f0d39a !important;



  border-radius: 12px !important;



  background: rgba(255, 249, 232, .98) !important;



  color: #684514 !important;



  box-shadow: 0 14px 36px rgba(16, 24, 40, .16) !important;



  backdrop-filter: blur(12px);



  pointer-events: auto;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[hidden] {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-level="error"] {



  border-color: #f1b6af !important;



  background: rgba(255, 242, 240, .98) !important;



  color: #912018 !important;



}







.bbd-quality-banner__icon {



  grid-column: 1;



  grid-row: 1;



  width: 34px;



  height: 34px;



  display: grid;



  place-items: center;



  border-radius: 999px;



  background: #ffe9b8;



  color: #a15c00;



}







.bbd-quality-banner[data-level="error"] .bbd-quality-banner__icon {



  background: #ffe0dc;



  color: #b42318;



}







.bbd-quality-banner__copy {



  grid-column: 2;



  grid-row: 1;



  min-width: 0;



  display: grid;



  gap: 2px;



}







.bbd-quality-banner__copy strong {



  color: #382a16;



  font-size: 12px;



  font-weight: 800;



  line-height: 1.25;



  white-space: normal !important;



}







.bbd-quality-banner[data-level="error"] .bbd-quality-banner__copy strong {



  color: #6e1b15;



}







.bbd-quality-banner__copy span {



  overflow: hidden;



  color: currentColor;



  font-size: 11px;



  font-weight: 620;



  line-height: 1.35;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-quality-banner__action,



.bbd-quality-banner__toggle,



.bbd-quality-banner__close,



.bbd-quality-banner__detail {



  border: 0;



  background: transparent;



  color: inherit;



  font: inherit;



  cursor: pointer;



}







.bbd-quality-banner__action {



  grid-column: 3;



  grid-row: 1;



  min-height: 34px;



  display: inline-flex;



  align-items: center;



  gap: 4px;



  padding: 0 9px;



  border: 1px solid rgba(104, 69, 20, .24);



  border-radius: 8px;



  background: rgba(255, 255, 255, .72);



  font-size: 11px;



  font-weight: 800;



  white-space: nowrap;



}







.bbd-quality-banner__action:hover,



.bbd-quality-banner__action:focus-visible,



.bbd-quality-banner__toggle:hover,



.bbd-quality-banner__toggle:focus-visible,



.bbd-quality-banner__close:hover,



.bbd-quality-banner__close:focus-visible {



  background: rgba(255, 255, 255, .98);



  outline: none;



  box-shadow: 0 0 0 3px rgba(180, 117, 24, .14);



}







.bbd-quality-banner__toggle {



  grid-column: 4;



  grid-row: 1;



  min-height: 30px;



  padding: 0 7px;



  border-radius: 7px;



  font-size: 10px;



  font-weight: 800;



  white-space: nowrap;



}







.bbd-quality-banner__close {



  grid-column: 5;



  grid-row: 1;



  width: 30px;



  height: 30px;



  display: grid;



  place-items: center;



  border-radius: 7px;



  opacity: .72;



}







.bbd-quality-banner__details {



  grid-column: 1 / -1;



  grid-row: 2;



  display: grid;



  gap: 5px;



  padding-top: 9px;



  border-top: 1px solid rgba(104, 69, 20, .16);



}







.bbd-quality-banner__details[hidden] {



  display: none !important;



}







.bbd-quality-banner__detail {



  min-height: 34px;



  display: grid;



  grid-template-columns: 20px minmax(0, 1fr) auto;



  align-items: center;



  gap: 8px;



  padding: 5px 7px;



  border-radius: 7px;



  text-align: left;



}







.bbd-quality-banner__detail:hover,



.bbd-quality-banner__detail:focus-visible {



  background: rgba(255, 255, 255, .72);



  outline: none;



}







.bbd-quality-banner__detail span {



  font-size: 11px;



  font-weight: 650;



}







.bbd-quality-banner__detail b {



  font-size: 10px;



  font-weight: 800;



  white-space: nowrap;



}







.bbd-quality-icon {



  display: block;



  flex: 0 0 auto;



}







/* Printful-inspired layer cards: identity and print quality first, compact SVG actions second. */



.bbd-pro-workspace-v0230-dev2 .bbd-layer-row {



  min-height: 88px;



  display: grid;



  grid-template-columns: minmax(0, 1fr) repeat(5, 30px);



  grid-template-rows: minmax(48px, auto) 30px;



  gap: 2px 3px;



  padding: 7px;



  overflow: visible;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-main {



  grid-column: 1 / -1;



  grid-row: 1;



  min-height: 48px;



  display: grid;



  grid-template-columns: 38px minmax(0, 1fr);



  gap: 9px;



  padding: 3px 5px;



  border-radius: 7px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-eye { grid-column: 2; grid-row: 2; }



.bbd-pro-workspace-v0230-dev2 .bbd-layer-solo { grid-column: 3; grid-row: 2; }



.bbd-pro-workspace-v0230-dev2 .bbd-layer-lock { grid-column: 4; grid-row: 2; }



.bbd-pro-workspace-v0230-dev2 .bbd-layer-copy { grid-column: 5; grid-row: 2; }



.bbd-pro-workspace-v0230-dev2 .bbd-layer-trash { grid-column: 6; grid-row: 2; }







.bbd-pro-workspace-v0230-dev2 .bbd-layer-eye,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-solo,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-lock,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-copy,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-trash {



  width: 30px;



  min-height: 30px;



  display: grid;



  place-items: center;



  padding: 0;



  border: 0;



  border-radius: 7px;



  background: transparent;



  color: #667085;



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-eye:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-solo:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-lock:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-copy:hover {



  background: #f2f4f7;



  color: #344054;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-trash:hover {



  background: #fff1f0;



  color: #b42318;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-solo[aria-pressed="true"],



.bbd-pro-workspace-v0230-dev2 .bbd-layer-lock[aria-pressed="true"] {



  background: #fff1eb;



  color: #d9480f;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb {



  width: 36px;



  height: 36px;



  border-radius: 8px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-kind {



  width: 34px;



  height: 34px;



  color: #475467;



}







.bbd-layer-icon {



  display: block;



}







.bbd-layer-quality {



  overflow: hidden;



  font-size: 10px;



  font-weight: 760;



  line-height: 1.25;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-layer-quality.is-good { color: #087a55; }



.bbd-layer-quality.is-info { color: #526071; }



.bbd-layer-quality.is-medium { color: #9a5b00; }



.bbd-layer-quality.is-low,



.bbd-layer-quality.is-error { color: #b42318; }







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row[data-quality="low"] {



  border-color: rgba(183, 121, 31, .38);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row[data-quality="error"] {



  border-color: rgba(180, 35, 24, .38);



}







@media (max-width: 760px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner {



    top: 82px !important;



    right: 10px !important;



    left: 10px !important;



    width: auto !important;



    grid-template-columns: auto minmax(0, 1fr) auto;



    gap: 8px !important;



    transform: none;



  }







  .bbd-quality-banner__icon { grid-column: 1; grid-row: 1; }



  .bbd-quality-banner__copy { grid-column: 2; grid-row: 1; }



  .bbd-quality-banner__close { grid-column: 3; grid-row: 1; }



  .bbd-quality-banner__action { grid-column: 2; grid-row: 2; justify-self: start; }



  .bbd-quality-banner__toggle { grid-column: 3; grid-row: 2; }



  .bbd-quality-banner__details { grid-column: 1 / -1; grid-row: 3; }



}







.bbd-entry {



  margin: 0 0 14px;



}







.bbd-open-editor {



  width: 100% !important;



  min-height: 52px;



  display: inline-flex !important;



  align-items: center;



  justify-content: flex-start;



  gap: 9px;



  border-radius: 10px !important;



  background: #111 !important;



  color: #fff !important;



  border: 0 !important;



  font-weight: 700 !important;



  box-shadow: none !important;



}







.bbd-entry-action-copy { display:grid; gap:2px; min-width:0; text-align:left; line-height:1.2; }



.bbd-entry-action-copy strong { font-size:14px; font-weight:800; }



.bbd-entry-action-copy small { font-size:11px; font-weight:500; opacity:.76; }



.bbd-entry-action-arrow { margin-left:auto; font-size:20px; line-height:1; }



.bbd-open-editor.is-design-saved { background:#087f68 !important; }



.bbd-open-editor.is-design-saved .bbd-button-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.14); }







.bbd-open-editor:hover,



.bbd-open-editor:focus-visible {



  background: #007a63 !important;



  color: #fff !important;



}







.bbd-button-icon {



  display: inline-flex;



}







.bbd-entry-status {



  margin-top: 10px;



  min-height: 46px;



  display: flex;



  align-items: center;



  gap: 9px;



  padding: 10px 12px;



  border: 1px solid #b7e2d6;



  border-radius: 10px;



  background: #f1fbf8;



  color: #155e4f;



  font-size: 14px;



  font-weight: 650;



}







.bbd-entry-status[hidden] {



  display: none !important;



}







.bbd-entry-status__icon {



  width: 30px;



  height: 30px;



  flex: 0 0 auto;



  display:grid;



  place-items:center;



  border-radius: 50%;



  background: #0f9f78;



  color:#fff;



  box-shadow: 0 0 0 4px rgba(15,159,120,.12);



}



.bbd-entry-status__copy { display:grid; gap:2px; line-height:1.2; }



.bbd-entry-status__copy strong { font-size:13px; }



.bbd-entry-status__copy small { font-size:11px; font-weight:500; opacity:.78; }







.bbd-entry-edit {



  margin-left: auto;



  border: 0;



  padding: 4px 5px;



  background: transparent;



  color: inherit;



  font: inherit;



  text-decoration: underline;



  cursor: pointer;



}







.bbd-icon-action { display:inline-flex !important; align-items:center; justify-content:center; gap:7px; }



.bbd-icon-action .bbd-context-icon { flex:0 0 auto; }



.bbd-command-grid .bbd-icon-action { min-height:48px; flex-direction:column; gap:3px; padding:6px 4px; }



.bbd-command-grid .bbd-icon-action span { font-size:10px; line-height:1.1; }







html.bbd-editor-open,



body.bbd-editor-open {



  overflow: hidden !important;



}







.bbd-modal {



  position: fixed;



  inset: 0;



  z-index: 2147482000;



  background: rgba(15, 18, 22, 0.56);



  backdrop-filter: blur(3px);



}







.bbd-modal[hidden] {



  display: none !important;



}







.bbd-app {



  position: absolute;



  inset: 0;



  display: grid;



  grid-template-rows: 72px minmax(0, 1fr);



  background: var(--bbd-bg);



  color: var(--bbd-ink);



  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;



}







.bbd-topbar {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 18px;



  padding: 0 16px;



  border-bottom: 1px solid var(--bbd-line);



  background: rgba(255, 255, 255, 0.96);



  box-shadow: 0 1px 8px rgba(17, 24, 39, 0.04);



}







.bbd-topbar__left,



.bbd-topbar__actions {



  display: flex;



  align-items: center;



  gap: 10px;



}







.bbd-topbar__left strong,



.bbd-topbar__product {



  display: block;



  line-height: 1.25;



}







.bbd-topbar__left strong {



  font-size: 15px;



}







.bbd-topbar__product {



  margin-top: 3px;



  color: var(--bbd-muted);



  font-size: 12px;



  max-width: 380px;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-icon-button,



.bbd-inline-actions button {



  min-width: 42px;



  min-height: 42px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  border: 1px solid var(--bbd-line);



  border-radius: 10px;



  background: #fff;



  color: #27272a;



  cursor: pointer;



}







.bbd-icon-button:hover,



.bbd-inline-actions button:hover {



  border-color: #c8cbd1;



  background: #f9fafb;



}







.bbd-icon-button:disabled,



.bbd-primary-button:disabled {



  cursor: not-allowed;



  opacity: 0.45;



}







.bbd-primary-button {



  min-height: 44px;



  padding: 0 18px;



  border: 0;



  border-radius: 10px;



  background: var(--bbd-accent);



  color: #fff;



  font-weight: 750;



  cursor: pointer;



}







.bbd-primary-button:hover {



  background: var(--bbd-accent-dark);



}







.bbd-workspace {



  min-height: 0;



  display: grid;



  grid-template-columns: 82px 330px minmax(0, 1fr);



}







.bbd-sidebar {



  min-height: 0;



  display: flex;



  flex-direction: column;



  gap: 5px;



  padding: 12px 8px;



  border-right: 1px solid var(--bbd-line);



  background: #18181b;



}







.bbd-tool {



  min-height: 70px;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 7px;



  border: 0;



  border-radius: 11px;



  background: transparent;



  color: #d4d4d8;



  font-size: 11px;



  cursor: pointer;



}







.bbd-tool:hover,



.bbd-tool.is-active {



  background: var(--bbd-accent);



  color: #fff;



}







.bbd-panel {



  min-width: 0;



  min-height: 0;



  overflow-y: auto;



  padding: 22px;



  border-right: 1px solid var(--bbd-line);



  background: var(--bbd-panel);



}







.bbd-panel-section[hidden] {



  display: none !important;



}







.bbd-panel h2 {



  margin: 0 0 16px;



  color: var(--bbd-ink);



  font-size: 17px;



  line-height: 1.3;



}







.bbd-action-card,



.bbd-upload-card {



  width: 100%;



  display: flex;



  align-items: center;



  justify-content: center;



  min-height: 48px;



  margin: 0 0 10px;



  border: 1px solid var(--bbd-line);



  border-radius: 10px;



  background: #fff;



  color: #222;



  font-weight: 650;



  cursor: pointer;



}







.bbd-action-card:hover,



.bbd-upload-card:hover {



  border-color: #f59b75;



  background: #fff8f5;



}







.bbd-action-card--danger {



  color: #b42318;



}







.bbd-field {



  display: grid;



  gap: 7px;



  margin-top: 16px;



  color: #3f3f46;



  font-size: 12px;



  font-weight: 650;



}







.bbd-field select,



.bbd-field input[type="number"] {



  width: 100%;



  min-height: 42px;



  margin: 0;



  padding: 7px 10px;



  border: 1px solid var(--bbd-line);



  border-radius: 9px;



  background: #fff;



  color: #18181b;



  box-shadow: none;



}







.bbd-field input[type="color"] {



  width: 100%;



  min-height: 42px;



  padding: 3px;



  border: 1px solid var(--bbd-line);



  border-radius: 9px;



  background: #fff;



}







.bbd-field-grid {



  display: grid;



  grid-template-columns: 1fr 82px;



  gap: 10px;



}







.bbd-inline-actions {



  display: flex;



  gap: 8px;



  margin-top: 14px;



}







.bbd-inline-actions--wide button {



  flex: 1;



  padding: 0 8px;



  font-size: 12px;



  font-weight: 650;



}







.bbd-upload-card {



  min-height: 170px;



  flex-direction: column;



  gap: 8px;



  border-style: dashed;



  text-align: center;



}







.bbd-upload-card span,



.bbd-help {



  color: var(--bbd-muted);



  font-size: 12px;



  line-height: 1.55;



}







.bbd-stage-area {



  position: relative;



  min-width: 0;



  min-height: 0;



  display: grid;



  grid-template-rows: 42px minmax(0, 1fr) minmax(34px, auto);



  overflow: hidden;



  background: #eceef1;



}







.bbd-stage-meta {



  min-width: 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 14px;



  padding: 0 16px;



  border-bottom: 1px solid #dde0e4;



  color: #52525b;



  font-size: 12px;



}







.bbd-guide-legend {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  white-space: nowrap;



}







.bbd-guide-legend i {



  width: 18px;



  height: 0;



  display: inline-block;



  border-top: 2px dashed;



}







.bbd-guide-legend .is-bleed {



  border-color: #ef4444;



}







.bbd-guide-legend .is-safe {



  margin-left: 6px;



  border-color: #16a34a;



}







.bbd-canvas-shell {



  min-width: 0;



  min-height: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  overflow: auto;



  padding: 16px;



}







.bbd-canvas-shell .canvas-container {



  flex: 0 0 auto !important;



  max-width: none !important;



  max-height: none !important;



  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.13);



}







/* XStore/Elementor gibi temaların genel canvas responsive kuralları,



 * Fabric'in lower/upper canvas katmanlarını wrapper'dan bağımsız küçültmemeli. */



.bbd-canvas-shell .canvas-container > canvas,



.bbd-canvas-shell canvas.lower-canvas,



.bbd-canvas-shell canvas.upper-canvas {



  display: block !important;



  max-width: none !important;



  max-height: none !important;



  min-width: 0 !important;



  min-height: 0 !important;



  touch-action: none !important;



}







.bbd-status {



  min-height: 34px;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 0 16px;



  color: #52525b;



  font-size: 12px;



}







.bbd-status[data-type="success"] {



  color: #08775f;



}







.bbd-status[data-type="warning"] {



  color: #9a6700;



}







.bbd-status[data-type="error"] {



  color: #b42318;



}







.bbd-modal.is-busy::after {



  content: "";



  position: absolute;



  inset: 72px 0 0;



  z-index: 20;



  cursor: progress;



  background: rgba(255, 255, 255, 0.08);



}







@media (max-width: 900px) {



  .bbd-app {



    grid-template-rows: 64px minmax(0, 1fr);



  }







  .bbd-workspace {



    grid-template-columns: 68px minmax(0, 1fr);



    grid-template-rows: minmax(0, 1fr) 230px;



  }







  .bbd-sidebar {



    grid-row: 1 / span 2;



  }







  .bbd-panel {



    grid-column: 2;



    grid-row: 2;



    border-top: 1px solid var(--bbd-line);



    border-right: 0;



    padding: 14px 16px;



  }







  .bbd-stage-area {



    grid-column: 2;



    grid-row: 1;



  }







  .bbd-panel-section {



    max-width: 760px;



    margin: 0 auto;



  }







  .bbd-panel h2 {



    margin-bottom: 10px;



  }







  .bbd-action-card {



    min-height: 42px;



  }







  .bbd-upload-card {



    min-height: 105px;



  }



}







@media (max-width: 640px) {



  .bbd-topbar {



    padding: 0 8px;



  }







  .bbd-topbar__product {



    max-width: 150px;



  }







  .bbd-topbar__actions {



    gap: 5px;



  }







  .bbd-topbar__actions .bbd-icon-button {



    display: none;



  }







  .bbd-primary-button {



    min-height: 42px;



    padding: 0 11px;



    font-size: 12px;



  }







  .bbd-workspace {



    grid-template-columns: 56px minmax(0, 1fr);



    grid-template-rows: minmax(0, 1fr) 248px;



  }







  .bbd-sidebar {



    padding: 8px 4px;



  }







  .bbd-tool {



    min-height: 60px;



    gap: 4px;



    font-size: 9px;



  }







  .bbd-panel {



    padding: 12px;



  }







  .bbd-field-grid {



    grid-template-columns: 1fr 72px;



  }







  .bbd-stage-meta {



    padding: 0 10px;



  }







  .bbd-guide-legend {



    font-size: 0;



  }







  .bbd-guide-legend i {



    margin: 0 2px !important;



  }







  .bbd-canvas-shell {



    padding: 10px;



  }



}











/* v0.2.0 temel araçlar */



.bbd-shape-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }



.bbd-shape-grid button { min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px solid var(--bbd-line); border-radius:10px; background:#fff; font-weight:650; cursor:pointer; }



.bbd-shape-grid button:hover { border-color:#f59b75; background:#fff8f5; }



.bbd-shape-icon { width:34px; height:28px; display:block; border:2px solid currentColor; }



.bbd-shape-icon.is-circle { border-radius:50%; }



.bbd-shape-icon.is-triangle { width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:30px solid currentColor; border-top:0; }



.bbd-shape-icon.is-line { width:38px; height:0; border:0; border-top:3px solid currentColor; transform:rotate(-25deg); }



.bbd-field input[type="range"] { width:100%; accent-color:var(--bbd-accent); }



.bbd-field output { float:right; color:var(--bbd-muted); font-weight:500; }



.bbd-layer-list { display:grid; gap:7px; margin-bottom:14px; }



.bbd-layer-row { width:100%; min-height:46px; display:grid; grid-template-columns:34px minmax(0,1fr) 28px; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--bbd-line); border-radius:9px; background:#fff; text-align:left; cursor:pointer; }



.bbd-layer-row:hover,.bbd-layer-row.is-selected { border-color:#ff9d75; background:#fff7f3; }



.bbd-layer-kind { width:30px; height:30px; display:grid; place-items:center; border-radius:7px; background:#f4f4f5; font-weight:800; }



.bbd-layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; }



.bbd-layer-state { text-align:center; font-size:12px; }



.bbd-layer-empty { padding:18px 10px; border:1px dashed var(--bbd-line); border-radius:9px; color:var(--bbd-muted); text-align:center; font-size:12px; }



.bbd-object-toolbar { position:absolute; z-index:8; top:54px; left:50%; transform:translateX(-50%); display:flex; gap:5px; padding:5px; border:1px solid var(--bbd-line); border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(17,24,39,.12); }



.bbd-object-toolbar[hidden] { display:none !important; }



.bbd-object-toolbar button { width:36px; height:34px; border:0; border-radius:7px; background:transparent; font-size:17px; cursor:pointer; }



.bbd-object-toolbar button:hover { background:#f4f4f5; }



.bbd-object-toolbar button.is-danger { color:#b42318; }



.bbd-inline-actions button.is-active { border-color:#ff9d75; background:#fff7f3; color:var(--bbd-accent-dark); }



@media (max-width:640px) { .bbd-object-toolbar { top:50px; } .bbd-shape-grid button { min-height:72px; } }











/* v0.5.0 PRO TOOLING */



.bbd-zoom-controls {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  padding: 3px;



  border: 1px solid var(--bbd-line);



  border-radius: 11px;



  background: #fff;



}



.bbd-zoom-controls .bbd-icon-button {



  min-width: 34px;



  min-height: 34px;



  border: 0;



}



.bbd-zoom-controls output {



  min-width: 48px;



  text-align: center;



  color: #3f3f46;



  font-size: 12px;



  font-weight: 700;



}



#bbd-toggle-guides.is-off { opacity: .45; }







.bbd-shape-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



}



.bbd-shape-grid button {



  min-height: 72px;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 7px;



  border: 1px solid var(--bbd-line);



  border-radius: 10px;



  background: #fff;



  color: #222;



  font-weight: 650;



  cursor: pointer;



}



.bbd-shape-grid button:hover { border-color: #f59b75; background: #fff8f5; }



.bbd-shape-icon { width: 34px; height: 26px; display: inline-block; border: 2px solid #222; }



.bbd-shape-icon.is-rounded { border-radius: 9px; }



.bbd-shape-icon.is-circle { width: 30px; height: 30px; border-radius: 50%; }



.bbd-shape-icon.is-ellipse { width: 38px; height: 24px; border-radius: 50%; }



.bbd-shape-icon.is-triangle { width: 0; height: 0; border: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 31px solid #222; }



.bbd-shape-icon.is-line { width: 38px; height: 0; border: 0; border-top: 3px solid #222; transform: rotate(-24deg); }



.bbd-shape-icon.is-polygon { width: 32px; height: 28px; border: 0; background:#222; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }



.bbd-shape-icon.is-star, .bbd-shape-icon.is-arrow { width:auto; height:auto; border:0; font-size:30px; line-height:1; }







.bbd-layer-row {



  display: grid;



  grid-template-columns: minmax(0, 1fr) 34px 34px;



  align-items: center;



  gap: 4px;



  margin-bottom: 7px;



  border: 1px solid var(--bbd-line);



  border-radius: 10px;



  background: #fff;



  overflow: hidden;



}



.bbd-layer-row.is-selected { border-color: #ff8d5c; box-shadow: 0 0 0 2px rgba(255,75,0,.10); }



.bbd-layer-main, .bbd-layer-eye, .bbd-layer-lock {



  min-height: 42px;



  border: 0;



  background: transparent;



  cursor: pointer;



}



.bbd-layer-main {



  min-width: 0;



  display: grid;



  grid-template-columns: 26px minmax(0,1fr);



  align-items: center;



  text-align: left;



}



.bbd-layer-kind { font-weight:800; color:#71717a; text-align:center; }



.bbd-layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; }



.bbd-layer-eye, .bbd-layer-lock { color:#52525b; }



.bbd-layer-eye:hover, .bbd-layer-lock:hover { background:#f4f4f5; }







.bbd-object-toolbar {



  gap: 3px;



  max-width: calc(100% - 24px);



  overflow-x: auto;



}



.bbd-object-toolbar button { flex: 0 0 auto; }







.bbd-canvas-shell { position: relative; }



.bbd-snap-line {



  position: absolute;



  z-index: 20;



  pointer-events: none;



  background: #0ea5e9;



  box-shadow: 0 0 0 1px rgba(255,255,255,.7);



}



.bbd-snap-line.is-vertical { width:1px; top:16px; bottom:16px; left:50%; }



.bbd-snap-line.is-horizontal { height:1px; left:16px; right:16px; top:50%; }



.bbd-snap-line[hidden] { display:none !important; }







.bbd-busy-overlay {



  position: absolute;



  inset: 42px 0 34px;



  z-index: 100;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 12px;



  background: rgba(244,245,247,.78);



  backdrop-filter: blur(4px);



}



.bbd-busy-overlay[hidden] { display:none !important; }



.bbd-spinner {



  width: 34px;



  height: 34px;



  border: 3px solid #e5e7eb;



  border-top-color: var(--bbd-accent);



  border-radius: 50%;



  animation: bbd-spin .8s linear infinite;



}



@keyframes bbd-spin { to { transform:rotate(360deg); } }







@media (max-width: 980px) {



  .bbd-topbar { gap:8px; }



  .bbd-zoom-controls { display:none; }



  .bbd-topbar__product { max-width:190px; }



  .bbd-workspace { grid-template-columns: 76px 300px minmax(0,1fr); }



}



@media (max-width: 760px) {



  .bbd-app { grid-template-rows: 64px minmax(0,1fr); }



  .bbd-topbar { padding:0 10px; }



  .bbd-topbar__left strong { font-size:14px; }



  .bbd-topbar__product { max-width:145px; }



  .bbd-primary-button { padding:0 12px; font-size:12px; }



  #bbd-toggle-guides { display:none; }



  .bbd-workspace {



    grid-template-columns: 70px minmax(0,1fr);



    grid-template-rows: minmax(300px, 52vh) minmax(260px, 1fr);



  }



  .bbd-sidebar { grid-row:1 / 3; }



  .bbd-panel { grid-column:2; grid-row:2; border-right:0; border-top:1px solid var(--bbd-line); padding:16px; }



  .bbd-stage-area { grid-column:2; grid-row:1; }



  .bbd-object-toolbar { top:52px; }



}







/* v0.20.4 Professional workspace: calm hierarchy, clearer actions, less visual noise. */



.bbd-app[data-visual-version="0.20.4"] {



  --bbd-pro-border: #dde2e8;



  --bbd-pro-muted: #667085;



  --bbd-pro-surface: #fff;



  --bbd-pro-stage: #eef1f5;



  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;



}



.bbd-app[data-visual-version="0.20.4"] .bbd-topbar {



  min-height: 64px;



  border-bottom: 1px solid var(--bbd-pro-border);



  box-shadow: 0 1px 2px rgba(16,24,40,.04);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-panel {



  border-right: 1px solid var(--bbd-pro-border);



  background: var(--bbd-pro-surface);



  box-shadow: 8px 0 24px rgba(16,24,40,.035);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-panel-section > h2,



.bbd-app[data-visual-version="0.20.4"] .bbd-panel-heading h2 {



  letter-spacing: -.02em;



  color: #101828;



}



.bbd-app[data-visual-version="0.20.4"] .bbd-stage-area { background: var(--bbd-pro-stage); }



.bbd-app[data-visual-version="0.20.4"] .bbd-canvas-shell {



  border: 1px solid #d8dee6;



  box-shadow: 0 12px 32px rgba(16,24,40,.09);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-search-field input,



.bbd-app[data-visual-version="0.20.4"] .bbd-field input,



.bbd-app[data-visual-version="0.20.4"] .bbd-field select {



  min-height: 42px;



  border-color: #d0d5dd;



  border-radius: 8px;



  background: #fff;



}



.bbd-app[data-visual-version="0.20.4"] .bbd-layer-row {



  min-height: 58px;



  border: 1px solid #e4e7ec;



  border-radius: 10px;



  background: #fff;



  box-shadow: 0 1px 2px rgba(16,24,40,.04);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-layer-row.is-selected {



  border-color: #ff7a45;



  background: #fff8f5;



  box-shadow: 0 0 0 3px rgba(255,75,0,.09);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-inline-actions button,



.bbd-app[data-visual-version="0.20.4"] .bbd-action-card,



.bbd-app[data-visual-version="0.20.4"] .bbd-command-grid button {



  border-color: #d9dee5;



  border-radius: 8px;



  background: #fff;



  color: #344054;



  box-shadow: 0 1px 2px rgba(16,24,40,.035);



  transition: border-color .16s ease, background .16s ease, transform .16s ease;



}



.bbd-app[data-visual-version="0.20.4"] .bbd-inline-actions button:hover,



.bbd-app[data-visual-version="0.20.4"] .bbd-action-card:hover,



.bbd-app[data-visual-version="0.20.4"] .bbd-command-grid button:hover {



  border-color: #ff9a70;



  background: #fff8f5;



  transform: translateY(-1px);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-action-card--danger {



  border-color: #fda29b;



  color: #b42318;



  background: #fff;



}



.bbd-app[data-visual-version="0.20.4"] .bbd-context-toolbar {



  border: 1px solid #e1e5ea;



  border-radius: 10px;



  box-shadow: 0 8px 24px rgba(16,24,40,.10);



}



.bbd-app[data-visual-version="0.20.4"] .bbd-save-state {



  border-radius: 999px;



  padding-inline: 12px;



}











/* v0.8.0 SAVE + QUALITY */



.bbd-save-state {



  display:inline-flex;



  align-items:center;



  gap:7px;



  white-space:nowrap;



  color:#52525b;



  font-size:12px;



  font-weight:650;



}



.bbd-save-dot {



  width:8px;



  height:8px;



  border-radius:50%;



  background:#a1a1aa;



}



.bbd-save-state[data-state="dirty"] .bbd-save-dot { background:#f59e0b; }



.bbd-save-state[data-state="saving"] .bbd-save-dot { background:#0ea5e9; animation:bbd-pulse 1s infinite; }



.bbd-save-state[data-state="saved"] .bbd-save-dot { background:#16a34a; }



.bbd-save-state[data-state="error"] .bbd-save-dot { background:#dc2626; }



@keyframes bbd-pulse { 50% { opacity:.35; } }







.bbd-stage-footer {



  min-height:34px;



  display:flex;



  align-items:center;



  justify-content:center;



  gap:12px;



  padding:4px 12px;



}



.bbd-quality-summary {



  display:flex;



  align-items:center;



  gap:7px;



  max-width:720px;



  padding:5px 9px;



  border-radius:8px;



  background:#fff7ed;



  color:#9a3412;



  font-size:11px;



}



.bbd-quality-summary[hidden] { display:none !important; }



.bbd-quality-summary strong { white-space:nowrap; }







@media (max-width: 900px) {



  .bbd-save-state { display:none; }



}











/* v0.8.2 selection safety */



.bbd-stage-area {



  isolation: isolate;



}



.bbd-object-toolbar {



  z-index: 60 !important;



  position: absolute;



  max-width: calc(100% - 28px);



}



.bbd-canvas-shell {



  overflow: visible;



}











/* v0.8.3 pasteboard/artboard */



.bbd-canvas-shell {



  background: #e9edf2;



  overflow: hidden;



}











/* v0.9.0 upload queue + quality footer */



.bbd-upload-list {



  display: grid;



  gap: 8px;



  margin: 12px 0;



}



.bbd-upload-list[hidden] { display: none !important; }



.bbd-upload-row {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 8px;



  align-items: center;



  padding: 9px;



  border: 1px solid var(--bbd-line);



  border-radius: 9px;



  background: #fff;



}



.bbd-upload-row.is-failed,



.bbd-upload-row.is-cancelled {



  border-color: #fecaca;



  background: #fff5f5;



}



.bbd-upload-row__main {



  min-width: 0;



  display: grid;



  gap: 4px;



}



.bbd-upload-row__main strong,



.bbd-upload-row__main span {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.bbd-upload-row__main strong { font-size: 12px; }



.bbd-upload-row__main span {



  color: var(--bbd-muted);



  font-size: 11px;



}



.bbd-upload-row progress {



  width: 100%;



  height: 6px;



  accent-color: var(--bbd-accent);



}



.bbd-upload-row__actions button {



  min-height: 30px;



  padding: 0 8px;



  border: 1px solid var(--bbd-line);



  border-radius: 7px;



  background: #fff;



  cursor: pointer;



  font-size: 11px;



  font-weight: 650;



}



.bbd-stage-footer {



  min-height: 34px;



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  justify-content: center;



  gap: 8px 12px;



  padding: 4px 12px;



  border-top: 1px solid #dde0e4;



  background: #f6f7f8;



}



.bbd-stage-footer .bbd-status {



  min-height: 24px;



  padding: 0;



}











/* v0.10.0 non-blocking save, upload assets, and structured notices */



.bbd-icon-button:focus-visible,



.bbd-primary-button:focus-visible,



.bbd-action-card:focus-visible,



.bbd-upload-card:focus-visible,



.bbd-tool:focus-visible,



.bbd-inline-actions button:focus-visible,



.bbd-layer-row button:focus-visible,



.bbd-object-toolbar button:focus-visible,



.bbd-upload-asset button:focus-visible,



.bbd-notice-primary:focus-visible,



.bbd-notice-toggle:focus-visible,



.bbd-notice-detail:focus-visible {



  outline: 3px solid rgba(14, 165, 233, .55);



  outline-offset: 2px;



}







.bbd-upload-card.is-dragover {



  border-color: var(--bbd-accent);



  background: #fff7f2;



  box-shadow: inset 0 0 0 2px rgba(255, 75, 0, .12);



}







.bbd-upload-asset {



  display: grid;



  grid-template-columns: 58px minmax(0, 1fr);



  gap: 10px;



  padding: 10px;



  border: 1px solid var(--bbd-line);



  border-radius: 8px;



  background: #fff;



}







.bbd-upload-asset.is-failed,



.bbd-upload-asset.is-cancelled {



  border-color: #fecaca;



  background: #fff7f7;



}







.bbd-upload-asset.is-processed,



.bbd-upload-asset.is-done {



  border-color: #bbf7d0;



  animation: bbd-upload-complete .45s ease-out;



}







@keyframes bbd-upload-complete {



  from { box-shadow: 0 0 0 0 rgba(22, 163, 74, .22); }



  to { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }



}







.bbd-upload-asset__thumb {



  width: 58px;



  height: 58px;



  display: grid;



  place-items: center;



  overflow: hidden;



  border: 1px solid #e4e4e7;



  border-radius: 7px;



  background: #f4f4f5;



}







.bbd-upload-asset__thumb img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}







.bbd-upload-asset__body {



  min-width: 0;



  display: grid;



  gap: 5px;



}







.bbd-upload-asset__title {



  min-width: 0;



  display: flex;



  align-items: center;



  gap: 7px;



}







.bbd-upload-asset__title strong {



  min-width: 0;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



  font-size: 12px;



}







.bbd-upload-asset__title span {



  flex: 0 0 auto;



  color: #52525b;



  font-size: 11px;



  font-weight: 700;



}







.bbd-upload-asset__meta,



.bbd-upload-asset__quality,



.bbd-upload-asset__error {



  color: var(--bbd-muted);



  font-size: 11px;



  line-height: 1.35;



}







.bbd-upload-asset__error {



  color: #b42318;



}







.bbd-upload-asset__progress {



  height: 6px;



  overflow: hidden;



  border-radius: 999px;



  background: #eceef1;



}







.bbd-upload-asset__progress span {



  display: block;



  height: 100%;



  width: 0;



  border-radius: inherit;



  background: var(--bbd-accent);



  transition: width .18s ease;



}







.bbd-upload-asset__actions {



  grid-column: 1 / -1;



  display: flex;



  flex-wrap: wrap;



  gap: 6px;



}







.bbd-upload-asset__actions button {



  min-height: 30px;



  padding: 0 8px;



  border: 1px solid var(--bbd-line);



  border-radius: 7px;



  background: #fff;



  color: #27272a;



  cursor: pointer;



  font-size: 11px;



  font-weight: 650;



}







.bbd-upload-asset__actions button:hover {



  border-color: #c8cbd1;



  background: #f9fafb;



}







.bbd-quality-summary {



  position: relative;



  align-items: stretch;



  max-width: min(760px, 100%);



  padding: 0;



  background: transparent;



}







.bbd-notice-primary,



.bbd-notice-toggle,



.bbd-notice-detail {



  border: 1px solid #fed7aa;



  border-radius: 8px;



  background: #fff7ed;



  color: #9a3412;



  cursor: pointer;



  font-size: 11px;



  font-weight: 700;



}







.bbd-notice-primary {



  min-height: 28px;



  max-width: 520px;



  padding: 4px 9px;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-notice-toggle {



  min-width: 34px;



  padding: 0 8px;



}







.bbd-quality-summary[data-level="error"] .bbd-notice-primary,



.bbd-quality-summary[data-level="error"] .bbd-notice-toggle {



  border-color: #fecaca;



  background: #fff1f2;



  color: #b42318;



}







.bbd-quality-summary[data-level="info"] .bbd-notice-primary,



.bbd-quality-summary[data-level="info"] .bbd-notice-toggle {



  border-color: #bfdbfe;



  background: #eff6ff;



  color: #1d4ed8;



}







.bbd-notice-details {



  position: absolute;



  right: 0;



  bottom: calc(100% + 7px);



  z-index: 80;



  width: min(360px, calc(100vw - 24px));



  display: grid;



  gap: 6px;



  padding: 8px;



  border: 1px solid var(--bbd-line);



  border-radius: 8px;



  background: #fff;



  box-shadow: 0 14px 36px rgba(17, 24, 39, .16);



}







.bbd-notice-details[hidden] {



  display: none !important;



}







.bbd-notice-detail {



  min-height: 30px;



  padding: 5px 8px;



  text-align: left;



  white-space: normal;



}







.bbd-notice-detail.is-error {



  border-color: #fecaca;



  background: #fff1f2;



  color: #b42318;



}







.bbd-notice-detail.is-info {



  border-color: #bfdbfe;



  background: #eff6ff;



  color: #1d4ed8;



}







.bbd-canvas-shell {



  overflow: auto;



}







@media (max-width: 640px) {



  .bbd-upload-asset {



    grid-template-columns: 48px minmax(0, 1fr);



  }







  .bbd-upload-asset__thumb {



    width: 48px;



    height: 48px;



  }







  .bbd-notice-primary {



    max-width: 210px;



  }



}







/* v0.23.0-dev.2 Professional interaction workspace — Printful-inspired task clarity, Baskibu identity. */



.bbd-pro-workspace-v0230-dev2 {



  --bbd-pro-ink: #182230;



  --bbd-pro-muted: #667085;



  --bbd-pro-border: #e1e5ea;



  --bbd-pro-soft: #f7f8fa;



  --bbd-pro-stage: #edf0f4;



}







.bbd-pro-workspace-v0230-dev2 .bbd-stage-area {



  position: relative !important;



  isolation: isolate;



  background: var(--bbd-pro-stage);



}







/* Selection tools float above the canvas and never participate in grid flow. */



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar {



  position: absolute !important;



  z-index: 230 !important;



  top: 36px !important;



  left: 50% !important;



  grid-column: auto !important;



  order: initial !important;



  display: flex;



  flex: 0 0 auto !important;



  width: max-content !important;



  max-width: calc(100% - 32px) !important;



  min-height: 42px;



  overflow-x: auto;



  transform: translateX(-50%);



  padding: 4px !important;



  border: 1px solid rgba(16,24,40,.12) !important;



  border-radius: 10px !important;



  background: rgba(255,255,255,.97) !important;



  box-shadow: 0 10px 28px rgba(16,24,40,.14) !important;



  backdrop-filter: blur(12px);



  pointer-events: auto;



  scrollbar-width: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar::-webkit-scrollbar { display: none; }



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar[hidden] { display: none !important; }



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button {



  min-height: 34px;



  border-radius: 7px;



  color: #475467;



}



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button.is-active {



  background: #fff2ec;



  color: #d9480f;



}







.bbd-pro-workspace-v0230-dev2 .bbd-stage-meta {



  min-height: 38px !important;



  max-height: 38px;



  overflow: visible;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel {



  border-right: 1px solid var(--bbd-pro-border);



  background: #fff;



  box-shadow: 8px 0 28px rgba(16,24,40,.035);



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-section {



  color: var(--bbd-pro-ink);



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro {



  display: grid;



  gap: 4px;



  margin: 2px 0 16px;



  padding: 0 2px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro strong {



  color: #344054;



  font-size: 12px;



  font-weight: 760;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro span {



  color: var(--bbd-pro-muted);



  font-size: 11px;



  line-height: 1.45;



}







.bbd-pro-workspace-v0230-dev2 .bbd-tool {



  border-radius: 8px;



  color: #d0d5dd;



}



.bbd-pro-workspace-v0230-dev2 .bbd-tool:hover {



  background: rgba(255,255,255,.08);



  color: #fff;



}



.bbd-pro-workspace-v0230-dev2 .bbd-tool.is-active {



  background: #fff;



  color: #344054;



  box-shadow: 0 3px 12px rgba(0,0,0,.16);



}







.bbd-pro-workspace-v0230-dev2 .bbd-search-field input,



.bbd-pro-workspace-v0230-dev2 .bbd-field input,



.bbd-pro-workspace-v0230-dev2 .bbd-field select {



  min-height: 42px;



  border-color: #d0d5dd;



  border-radius: 8px;



  background: #fff;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row {



  min-height: 58px;



  border: 1px solid #e4e7ec;



  border-radius: 10px;



  box-shadow: 0 1px 2px rgba(16,24,40,.04);



}



.bbd-pro-workspace-v0230-dev2 .bbd-layer-row.is-selected {



  border-color: #ff8a5b;



  background: #fff7f2;



  box-shadow: 0 0 0 3px rgba(255,75,0,.09);



}







.bbd-upload-library { display: grid; gap: 12px; }



.bbd-upload-library[hidden] { display: none !important; }



.bbd-upload-library__head {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 10px;



  padding: 12px;



  border: 1px solid var(--bbd-pro-border);



  border-radius: 10px;



  background: var(--bbd-pro-soft);



}



.bbd-upload-library__head > div { display: grid; gap: 3px; }



.bbd-upload-library__head strong { color: #344054; font-size: 12px; }



.bbd-upload-library__head span { color: var(--bbd-pro-muted); font-size: 10px; }



.bbd-upload-library__head button {



  width: 32px;



  height: 32px;



  border: 1px solid #d0d5dd;



  border-radius: 7px;



  background: #fff;



  cursor: pointer;



}



.bbd-upload-library__grid { display: grid; gap: 8px; }



.bbd-upload-library-card {



  width: 100%;



  display: grid;



  grid-template-columns: 54px minmax(0,1fr) 18px;



  align-items: center;



  gap: 10px;



  padding: 8px;



  border: 1px solid #e4e7ec;



  border-radius: 10px;



  background: #fff;



  text-align: left;



  cursor: pointer;



}



.bbd-upload-library-card:hover { border-color: #ff9b73; background: #fff9f6; }



.bbd-upload-library-card__thumb {



  width: 54px;



  height: 54px;



  border: 1px solid #e4e7ec;



  border-radius: 7px;



  background: #f2f4f7 center/cover no-repeat;



}



.bbd-upload-library-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }



.bbd-upload-library-card strong { overflow: hidden; color: #344054; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }



.bbd-upload-library-card small { color: var(--bbd-pro-muted); font-size: 10px; }



.bbd-upload-library__empty {



  display: grid;



  justify-items: center;



  gap: 7px;



  padding: 30px 16px;



  border: 1px dashed #d0d5dd;



  border-radius: 10px;



  background: #fafbfc;



  text-align: center;



}



.bbd-upload-library__empty[hidden] { display: none !important; }



.bbd-upload-library__empty > span { font-size: 28px; color: #98a2b3; }



.bbd-upload-library__empty strong { font-size: 12px; color: #344054; }



.bbd-upload-library__empty p { margin: 0; color: var(--bbd-pro-muted); font-size: 10px; line-height: 1.4; }



.bbd-upload-library__empty button,



.bbd-background-image-note button {



  min-height: 36px;



  border: 0;



  border-radius: 7px;



  background: #ff4b00;



  color: #fff;



  padding: 0 13px;



  font-size: 11px;



  font-weight: 750;



  cursor: pointer;



}



.bbd-background-image-note { display: grid; gap: 7px; padding: 16px; border: 1px dashed #d0d5dd; border-radius: 10px; background: #fafbfc; }



.bbd-background-image-note[hidden] { display: none !important; }



.bbd-background-image-note strong { font-size: 12px; color: #344054; }



.bbd-background-image-note span { font-size: 10px; line-height: 1.45; color: var(--bbd-pro-muted); }



.bbd-background-image-note button { justify-self: start; }







@media (max-width: 760px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar {



    position: fixed !important;



    top: auto !important;



    right: 10px !important;



    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;



    left: 10px !important;



    width: auto !important;



    max-width: none !important;



    transform: none;



    justify-content: flex-start;



  }



  .bbd-pro-workspace-v0230-dev2 .bbd-context-label { display: none; }



  .bbd-pro-workspace-v0230-dev2 .bbd-context-label-short { display: inline; }



}











/* v0.10.2 responsive drawer hotfix */



.bbd-workspace {



  position: relative;



}







.bbd-primary-button {



  white-space: nowrap;



}







.bbd-modal[data-layout="drawer"] .bbd-workspace,



.bbd-modal[data-layout="bottom-sheet"] .bbd-workspace {



  grid-template-columns: 70px minmax(0, 1fr);



  grid-template-rows: minmax(0, 1fr);



}







.bbd-modal[data-layout="drawer"] .bbd-sidebar,



.bbd-modal[data-layout="bottom-sheet"] .bbd-sidebar {



  grid-column: 1;



  grid-row: 1;



  z-index: 90;



}







.bbd-modal[data-layout="drawer"] .bbd-stage-area,



.bbd-modal[data-layout="bottom-sheet"] .bbd-stage-area {



  grid-column: 2;



  grid-row: 1;



  min-width: 0;



}







.bbd-modal[data-layout="drawer"] .bbd-panel {



  position: absolute;



  z-index: 85;



  top: 0;



  bottom: 0;



  left: 70px;



  width: min(330px, calc(100% - 70px));



  max-width: calc(100% - 70px);



  border-right: 1px solid var(--bbd-line);



  box-shadow: 14px 0 30px rgba(17, 24, 39, .16);



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-workspace {



  grid-template-columns: 56px minmax(0, 1fr);



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-panel {



  position: absolute;



  z-index: 95;



  right: 0;



  bottom: 0;



  left: 56px;



  width: auto;



  max-height: min(46vh, 330px);



  min-height: 0;



  padding: 12px;



  border-top: 1px solid var(--bbd-line);



  border-right: 0;



  box-shadow: 0 -14px 30px rgba(17, 24, 39, .16);



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-sidebar {



  padding: 8px 4px;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-tool {



  min-height: 58px;



  font-size: 9px;



}







.bbd-modal[data-layout="drawer"] .bbd-canvas-shell,



.bbd-modal[data-layout="bottom-sheet"] .bbd-canvas-shell {



  min-width: 0;



  overflow: auto;



}







@media (max-width: 640px) {



  .bbd-topbar__left strong {



    max-width: 132px;



    overflow: hidden;



    text-overflow: ellipsis;



    white-space: nowrap;



  }







  .bbd-topbar__product,



  .bbd-save-state {



    display: none;



  }







  .bbd-primary-button {



    max-width: 132px;



    overflow: hidden;



    text-overflow: ellipsis;



  }







  .bbd-stage-footer {



    align-items: flex-start;



    justify-content: flex-start;



    overflow-x: auto;



  }



}











/* v0.12.1 premium editor foundation hotfix */



.bbd-app {



  --bbd-rail-width: 72px;



  --bbd-panel-width: 336px;



  --bbd-ruler-size: 24px;



  background: var(--bbd-color-surface-muted);



}







.bbd-topbar {



  background: var(--bbd-color-surface);



}







.bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr);



  transition: grid-template-columns var(--bbd-transition-normal);



}







.bbd-sidebar {



  padding: 10px 7px;



  background: var(--bbd-color-tool-rail);



}







.bbd-tool {



  min-height: 62px;



  border-radius: var(--bbd-radius-md);



}







.bbd-tool span {



  max-width: 100%;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-tool:hover,



.bbd-tool.is-active {



  background: var(--bbd-color-accent);



}







.bbd-panel {



  position: relative;



  width: var(--bbd-panel-width);



  padding: var(--bbd-space-lg);



  background: var(--bbd-color-surface);



  transition: width var(--bbd-transition-normal), padding var(--bbd-transition-normal), opacity var(--bbd-transition-fast);



}







.bbd-app.is-panel-collapsed .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr);



}







.bbd-app.is-panel-collapsed .bbd-panel {



  width: 0;



  min-width: 0;



  padding-right: 0;



  padding-left: 0;



  overflow: hidden;



  opacity: 0;



  pointer-events: none;



  border-right: 0;



}







.bbd-app.is-distraction-free .bbd-sidebar,



.bbd-app.is-distraction-free .bbd-panel {



  display: none;



}







.bbd-app.is-distraction-free .bbd-workspace {



  grid-template-columns: minmax(0, 1fr);



}







.bbd-stage-area {



  grid-template-rows: 42px var(--bbd-ruler-size) minmax(0, 1fr) minmax(34px, auto);



  grid-template-columns: var(--bbd-ruler-size) minmax(0, 1fr);



  background: var(--bbd-color-canvas-workspace);



}







.bbd-stage-meta {



  grid-column: 1 / -1;



}







.bbd-ruler {



  position: relative;



  z-index: 25;



  overflow: hidden;



  background: #f8fafc;



  color: var(--bbd-color-text-muted);



  font-size: 10px;



  user-select: none;



}







.bbd-ruler--horizontal {



  grid-column: 2;



  grid-row: 2;



  border-bottom: 1px solid var(--bbd-color-border);



}







.bbd-ruler--vertical {



  grid-column: 1;



  grid-row: 3;



  border-right: 1px solid var(--bbd-color-border);



}







.bbd-ruler__tick {



  position: absolute;



  top: 0;



  min-width: 36px;



  padding-top: 2px;



  border-left: 1px solid #cbd5e1;



  color: var(--bbd-color-text-muted);



  line-height: 1.1;



}







.bbd-ruler--vertical .bbd-ruler__tick {



  top: auto;



  left: 0;



  min-width: 0;



  width: 56px;



  transform: rotate(-90deg);



  transform-origin: 0 0;



}







.bbd-canvas-shell {



  grid-column: 2;



  grid-row: 3;



  background-color: var(--bbd-color-canvas-workspace);



}







.bbd-canvas-shell.is-grid-visible {



  background-image:



    linear-gradient(rgba(17, 24, 39, .08) 1px, transparent 1px),



    linear-gradient(90deg, rgba(17, 24, 39, .08) 1px, transparent 1px);



  background-size: 32px 32px;



}







.bbd-object-toolbar,



.bbd-busy-overlay {



  grid-column: 2;



  grid-row: 3;



}







.bbd-stage-footer {



  grid-column: 1 / -1;



}







.bbd-panel-heading {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: var(--bbd-space-sm);



  margin-bottom: var(--bbd-space-md);



}







.bbd-panel-heading h2 {



  margin: 0;



}







.bbd-panel-heading span,



.bbd-empty-state span,



.bbd-template-card small,



.bbd-preset-chip small,



.bbd-clipart-card small {



  color: var(--bbd-color-text-muted);



  font-size: 11px;



}







.bbd-search-field {



  display: block;



  margin: 0 0 var(--bbd-space-md);



}







.bbd-search-field input,



.bbd-field input[type="search"],



.bbd-field select {



  width: 100%;



  min-height: 40px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text);



}







.bbd-template-grid,



.bbd-preset-grid,



.bbd-clipart-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: var(--bbd-space-sm);



  margin-bottom: var(--bbd-space-md);



}







.bbd-template-card,



.bbd-preset-chip,



.bbd-clipart-card,



.bbd-empty-state,



.bbd-preview-card {



  min-width: 0;



  display: grid;



  gap: 6px;



  padding: 10px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text);



  text-align: left;



}







.bbd-template-card,



.bbd-preset-chip,



.bbd-clipart-card {



  cursor: pointer;



}







.bbd-template-card:hover,



.bbd-preset-chip:hover,



.bbd-clipart-card:hover {



  border-color: var(--bbd-color-accent);



  box-shadow: 0 0 0 2px rgba(255, 75, 0, .10);



}







.bbd-template-card strong,



.bbd-preset-chip strong,



.bbd-clipart-card strong {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



  font-size: 12px;



}







.bbd-template-card__preview,



.bbd-preview-card__art {



  width: 100%;



  aspect-ratio: 4 / 3;



  border-radius: var(--bbd-radius-sm);



  background:



    linear-gradient(135deg, rgba(255, 75, 0, .20), rgba(17, 24, 39, .08)),



    #fff;



}







.bbd-clipart-card__preview {



  width: 100%;



  aspect-ratio: 1;



  display: grid;



  place-items: center;



  border-radius: var(--bbd-radius-sm);



  background: #f8fafc;



}







.bbd-clipart-card__preview svg {



  width: 54px;



  max-width: 80%;



  height: auto;



}







.bbd-command-grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 6px;



}







.bbd-command-grid button {



  min-height: 34px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-sm);



  background: #fff;



  cursor: pointer;



  font-weight: 800;



}







.bbd-command-grid button:hover,



.bbd-inline-actions button.is-off {



  border-color: var(--bbd-color-accent);



}







.bbd-measurement-output {



  min-width: 180px;



  color: var(--bbd-color-text-muted);



  font-size: 11px;



  font-weight: 700;



}







.bbd-shortcut-list {



  display: grid;



  gap: 7px;



  margin: 14px 0 0;



}







.bbd-shortcut-list div {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 8px;



  padding: 7px 0;



  border-bottom: 1px solid var(--bbd-color-border);



}







.bbd-shortcut-list dt,



.bbd-shortcut-list dd {



  margin: 0;



  font-size: 11px;



}







.bbd-shortcut-list dd {



  color: var(--bbd-color-text-muted);



  font-weight: 700;



}







.bbd-shape-icon.is-bubble {



  border-radius: 12px;



  position: relative;



}







.bbd-shape-icon.is-bubble::after {



  content: "";



  position: absolute;



  right: 4px;



  bottom: -8px;



  width: 10px;



  height: 10px;



  border-right: 2px solid currentColor;



  border-bottom: 2px solid currentColor;



  transform: rotate(45deg);



  background: #fff;



}







.bbd-shape-icon.is-badge {



  border: 0;



  background: currentColor;



  clip-path: polygon(50% 0,61% 25%,88% 12%,75% 39%,100% 50%,75% 61%,88% 88%,61% 75%,50% 100%,39% 75%,12% 88%,25% 61%,0 50%,25% 39%,12% 12%,39% 25%);



}







.bbd-shape-icon.is-frame {



  border-width: 4px;



}







@media (max-width: 1180px) {



  .bbd-modal[data-layout="drawer"] .bbd-panel {



    width: min(var(--bbd-panel-width), calc(100% - var(--bbd-rail-width)));



  }







  .bbd-modal[data-layout="drawer"] .bbd-app.is-panel-collapsed .bbd-panel,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-panel-collapsed .bbd-panel {



    transform: translateX(-105%);



  }



}







@media (max-width: 760px) {



  .bbd-stage-area {



    grid-template-rows: 34px minmax(0, 1fr) minmax(34px, auto);



    grid-template-columns: minmax(0, 1fr);



  }







  .bbd-ruler {



    display: none;



  }







  .bbd-stage-meta,



  .bbd-canvas-shell,



  .bbd-object-toolbar,



  .bbd-busy-overlay,



  .bbd-stage-footer {



    grid-column: 1;



  }







  .bbd-canvas-shell,



  .bbd-object-toolbar,



  .bbd-busy-overlay {



    grid-row: 2;



  }







  .bbd-stage-footer {



    grid-row: 3;



  }







  .bbd-template-grid,



  .bbd-preset-grid,



  .bbd-clipart-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }



}







@media (max-width: 420px) {



  .bbd-template-grid,



  .bbd-preset-grid,



  .bbd-clipart-grid,



  .bbd-command-grid {



    grid-template-columns: 1fr;



  }







  .bbd-measurement-output {



    min-width: 0;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-workspace,



  .bbd-panel,



  .bbd-upload-asset,



  .bbd-spinner {



    animation: none !important;



    transition: none !important;



  }



}







/* v0.23.0-dev.2 — Product-Aware Templates & Public Launch. */



.bbd-pro-workspace-v0230-dev2 .bbd-product-family-pill {



  align-items: center;



  align-self: flex-start;



  background: #eefbf6;



  border: 1px solid #bfe9d8;



  border-radius: 999px;



  color: #087257;



  display: inline-flex;



  font-size: 11px;



  font-style: normal;



  font-weight: 750;



  gap: 6px;



  line-height: 1;



  margin-top: 8px;



  min-height: 25px;



  padding: 0 9px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-family-pill::before {



  background: #15966a;



  border-radius: 50%;



  content: "";



  height: 6px;



  width: 6px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-family-pill[data-dimension-verified="false"] {



  background: #f5f7fa;



  border-color: #d9dee7;



  color: #526070;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-family-pill[data-dimension-verified="false"]::before {



  background: #7a8797;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-setup-note {



  background: #f5f7fa;



  border: 1px solid #dfe4eb;



  border-radius: 9px;



  color: #586576;



  font-size: 10px;



  line-height: 1.45;



  margin: 10px 0;



  padding: 9px 10px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-context {



  background: linear-gradient(135deg, #fff7f1 0%, #ffffff 78%);



  border: 1px solid #ffd8c5;



  border-radius: 12px;



  display: grid;



  gap: 3px;



  margin: 8px 0 13px;



  padding: 11px 12px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-context strong {



  color: #172033;



  font-size: 12px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-context span {



  color: #667085;



  font-size: 10px;



  line-height: 1.35;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card {



  overflow: hidden;



  position: relative;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card.is-product-aware {



  border-color: #d6dce5;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card.is-product-aware:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-template-card.is-product-aware:focus-visible {



  border-color: #ff7840;



  box-shadow: 0 9px 25px rgba(15, 23, 42, .12);



  transform: translateY(-1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card__product-badge {



  background: #172033;



  border-radius: 999px;



  color: #fff;



  font-size: 8px;



  font-weight: 800;



  letter-spacing: .02em;



  padding: 4px 7px;



  position: absolute;



  right: 7px;



  text-transform: uppercase;



  top: 7px;



  z-index: 2;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preview__viewport[data-state="ready"],



.bbd-pro-workspace-v0230-dev2 .bbd-product-preview__viewport[data-state="warning"] {



  background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .96), rgba(232, 237, 243, .78));



}







@media (max-width: 780px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-template-context {



    margin-inline: 2px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-template-card__product-badge {



    font-size: 7px;



    padding: 3px 6px;



  }



}







/* v0.13.x Editor OS foundation */



.bbd-app {



  --bbd-inspector-width: 320px;



}







.bbd-topbar__surface {



  display: block;



  color: var(--bbd-color-text-muted);



  font-size: 11px;



  line-height: 1.2;



}







.bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr) var(--bbd-inspector-width);



}







.bbd-app.is-panel-collapsed .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr) var(--bbd-inspector-width);



}







.bbd-app.is-inspector-collapsed .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr) 0;



}







.bbd-app.is-panel-collapsed.is-inspector-collapsed .bbd-workspace,



.bbd-app.is-distraction-free .bbd-workspace,



.bbd-app.is-preview-mode .bbd-workspace {



  grid-template-columns: minmax(0, 1fr);



}







.bbd-inspector {



  min-width: 0;



  width: var(--bbd-inspector-width);



  overflow: auto;



  border-left: 1px solid var(--bbd-color-border);



  background: #fbfcfe;



  color: var(--bbd-color-text);



  transition: width var(--bbd-transition-normal), opacity var(--bbd-transition-fast);



}







.bbd-app.is-inspector-collapsed .bbd-inspector,



.bbd-app.is-distraction-free .bbd-inspector,



.bbd-app.is-preview-mode .bbd-inspector {



  width: 0;



  overflow: hidden;



  opacity: 0;



  pointer-events: none;



  border-left: 0;



}







.bbd-inspector__header {



  position: sticky;



  top: 0;



  z-index: 2;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 8px;



  padding: 14px;



  border-bottom: 1px solid var(--bbd-color-border);



  background: #ffffff;



}







.bbd-inspector__header strong,



.bbd-inspector-section h3 {



  display: block;



  margin: 0;



  font-size: 13px;



}







.bbd-inspector__header span {



  display: block;



  margin-top: 2px;



  color: var(--bbd-color-text-muted);



  font-size: 11px;



}







.bbd-inspector-section {



  padding: 14px;



  border-bottom: 1px solid var(--bbd-color-border);



}







.bbd-inspector-section .bbd-field {



  margin-top: 10px;



}







.bbd-inspector-list {



  display: grid;



  gap: 8px;



  margin: 10px 0 0;



}







.bbd-inspector-list div {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 10px;



  padding: 6px 0;



  border-bottom: 1px solid #edf0f4;



}







.bbd-inspector-list dt,



.bbd-inspector-list dd {



  margin: 0;



  font-size: 11px;



}







.bbd-inspector-list dd {



  color: var(--bbd-color-text-muted);



  font-weight: 700;



  text-align: right;



}







.bbd-inspector-text-only,



.bbd-image-actions {



  display: none;



}







.bbd-inspector-section.is-text-selection .bbd-inspector-text-only,



.bbd-inspector-section.is-image-selection .bbd-image-actions {



  display: grid;



}







.bbd-preflight-summary {



  margin-top: 10px;



  padding: 9px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: #ffffff;



  font-size: 12px;



  font-weight: 700;



}







.bbd-preflight-summary[data-level="success"] {



  border-color: rgba(15, 138, 101, .35);



  color: var(--bbd-color-success);



}







.bbd-preflight-summary[data-level="warning"] {



  border-color: rgba(183, 121, 31, .35);



  color: var(--bbd-color-warning);



}







.bbd-preflight-summary[data-level="error"] {



  border-color: rgba(180, 35, 24, .35);



  color: var(--bbd-color-error);



}







.bbd-preflight-list {



  display: grid;



  gap: 6px;



  margin-top: 8px;



}







.bbd-preflight-item {



  width: 100%;



  min-height: 34px;



  padding: 8px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-sm);



  background: #fff;



  color: var(--bbd-color-text);



  text-align: left;



  cursor: pointer;



}







.bbd-preflight-item.is-error { border-color: rgba(180, 35, 24, .35); }



.bbd-preflight-item.is-warning { border-color: rgba(183, 121, 31, .35); }



.bbd-preflight-item.is-info { border-color: rgba(29, 78, 216, .30); }







.bbd-object-toolbar {



  position: absolute !important;



  z-index: var(--bbd-toolbar-z);



  flex-wrap: nowrap;



  max-width: min(92vw, 360px);



  overflow-x: auto;



}







.bbd-context-menu {



  position: absolute;



  z-index: var(--bbd-context-menu-z);



  min-width: 210px;



  padding: 6px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: #ffffff;



  box-shadow: var(--bbd-shadow-md);



}







.bbd-context-menu[hidden],



.bbd-command-palette[hidden],



.bbd-recovery[hidden] {



  display: none !important;



}







.bbd-context-menu button {



  display: block;



  width: 100%;



  min-height: 34px;



  padding: 8px 10px;



  border: 0;



  border-radius: var(--bbd-radius-sm);



  background: transparent;



  color: var(--bbd-color-text);



  text-align: left;



  cursor: pointer;



}







.bbd-context-menu button:hover {



  background: #f4f6f8;



}







.bbd-context-menu button:disabled {



  color: #a1a7b3;



  cursor: not-allowed;



}







.bbd-context-menu button.is-danger {



  color: var(--bbd-color-error);



}







.bbd-command-palette {



  position: absolute;



  inset: 58px 16px auto;



  z-index: calc(var(--bbd-context-menu-z) + 1);



  display: grid;



  place-items: start center;



  pointer-events: none;



}







.bbd-command-palette__box {



  width: min(560px, calc(100vw - 32px));



  overflow: hidden;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: #ffffff;



  box-shadow: var(--bbd-shadow-md);



  pointer-events: auto;



}







.bbd-command-palette input {



  width: 100%;



  min-height: 46px;



  padding: 0 14px;



  border: 0;



  border-bottom: 1px solid var(--bbd-color-border);



  font-size: 14px;



}







.bbd-command-list {



  display: grid;



  max-height: 320px;



  overflow: auto;



  padding: 6px;



}







.bbd-command-list button,



.bbd-command-empty {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  align-items: center;



  gap: 10px;



  min-height: 38px;



  padding: 8px 10px;



  border: 0;



  border-radius: var(--bbd-radius-sm);



  background: transparent;



  color: var(--bbd-color-text);



  text-align: left;



}







.bbd-command-list button:hover {



  background: #f4f6f8;



}







.bbd-command-list kbd {



  color: var(--bbd-color-text-muted);



  font: 700 11px/1.2 system-ui, sans-serif;



}







.bbd-recovery {



  position: absolute;



  left: 50%;



  bottom: 18px;



  z-index: calc(var(--bbd-context-menu-z) + 2);



  display: flex;



  align-items: center;



  gap: 12px;



  max-width: min(560px, calc(100vw - 32px));



  padding: 10px 12px;



  border: 1px solid rgba(29, 78, 216, .25);



  border-radius: var(--bbd-radius-md);



  background: #ffffff;



  box-shadow: var(--bbd-shadow-md);



  transform: translateX(-50%);



}







.bbd-recovery strong {



  font-size: 12px;



}







.bbd-recovery div {



  display: flex;



  gap: 6px;



}







.bbd-recovery button {



  min-height: 32px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-sm);



  background: #fff;



  cursor: pointer;



}







.bbd-layer-row {



  grid-template-columns: minmax(0, 1fr) auto auto auto auto;



}







.bbd-layer-row.is-hidden-layer .bbd-layer-name {



  color: #8b95a3;



  text-decoration: line-through;



}







.bbd-layer-row.is-locked-layer {



  background: #fbfcfe;



}







.bbd-layer-copy,



.bbd-layer-trash {



  border: 0;



  background: transparent;



  cursor: pointer;



}







.bbd-layer-trash {



  color: var(--bbd-color-error);



}







.bbd-app.is-preview-mode .bbd-sidebar,



.bbd-app.is-preview-mode .bbd-panel,



.bbd-app.is-preview-mode .bbd-inspector,



.bbd-app.is-preview-mode .bbd-object-toolbar,



.bbd-app.is-preview-mode .bbd-ruler,



.bbd-app.is-preview-mode .bbd-stage-meta {



  display: none !important;



}







.bbd-app.is-preview-mode .bbd-stage-area {



  grid-template-rows: minmax(0, 1fr) minmax(34px, auto);



  grid-template-columns: minmax(0, 1fr);



}







.bbd-app.is-preview-mode .bbd-canvas-shell,



.bbd-app.is-preview-mode .bbd-busy-overlay {



  grid-column: 1;



  grid-row: 1;



}







.bbd-app.is-preview-mode .bbd-stage-footer {



  grid-column: 1;



  grid-row: 2;



}







@media (max-width: 1180px) {



  .bbd-workspace,



  .bbd-app.is-panel-collapsed .bbd-workspace,



  .bbd-app.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) minmax(0, 1fr);



  }







  .bbd-inspector {



    position: absolute;



    top: 58px;



    right: 0;



    bottom: 0;



    z-index: 90;



    width: min(var(--bbd-inspector-width), calc(100vw - var(--bbd-rail-width)));



    box-shadow: var(--bbd-shadow-md);



  }







  .bbd-app.is-inspector-collapsed .bbd-inspector {



    transform: translateX(105%);



  }



}







@media (max-width: 760px) {



  .bbd-workspace,



  .bbd-app.is-panel-collapsed .bbd-workspace,



  .bbd-app.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) minmax(0, 1fr);



  }







  .bbd-inspector {



    top: auto;



    left: var(--bbd-rail-width);



    width: calc(100vw - var(--bbd-rail-width));



    max-height: 48vh;



    border-top: 1px solid var(--bbd-color-border);



    border-left: 0;



  }







  .bbd-command-palette {



    inset: 54px 8px auto;



  }







  .bbd-recovery {



    left: calc(var(--bbd-rail-width) + 8px);



    right: 8px;



    bottom: 10px;



    transform: none;



    flex-wrap: wrap;



  }



}







/* v0.13.1 Editor OS polish layer. */



.bbd-app {



  --bbd-control-min: 44px;



  --bbd-selection-color: #f97316;



  color: var(--bbd-color-text-primary);



}







.bbd-app *:focus-visible {



  outline: none;



  box-shadow: var(--bbd-focus-ring);



}







.bbd-tool {



  min-height: 58px;



  border-left: 3px solid transparent;



  transition: background var(--bbd-transition-fast), color var(--bbd-transition-fast), border-color var(--bbd-transition-fast);



}







.bbd-tool.is-active {



  border-left-color: var(--bbd-color-accent);



  background: rgba(255, 255, 255, .1);



  color: #fff;



}







.bbd-panel-heading--compact {



  margin-top: var(--bbd-space-lg);



}







.bbd-panel-heading h3 {



  margin: 0;



  font-size: 13px;



}







.bbd-template-card,



.bbd-preset-chip,



.bbd-clipart-card,



.bbd-component-card,



.bbd-font-card {



  border-radius: var(--bbd-radius-md);



  transition: transform var(--bbd-transition-fast), border-color var(--bbd-transition-fast), background var(--bbd-transition-fast), box-shadow var(--bbd-transition-fast);



}







.bbd-template-card:hover,



.bbd-component-card:hover,



.bbd-font-card:hover,



.bbd-font-card.is-selected {



  transform: translateY(-1px);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-template-card__preview {



  position: relative;



  overflow: hidden;



  display: grid;



  align-content: end;



  gap: 5px;



  min-height: 92px;



  padding: 12px;



  background: color-mix(in srgb, var(--bbd-card-accent, #ff4b00) 14%, #fff);



}







.bbd-template-card__preview i,



.bbd-template-card__preview b,



.bbd-template-card__preview em {



  display: block;



  border-radius: 999px;



  background: var(--bbd-card-ink, #111827);



}







.bbd-template-card__preview i {



  width: 32px;



  height: 6px;



  background: var(--bbd-card-accent, #ff4b00);



}







.bbd-template-card__preview b {



  width: 74%;



  height: 12px;



}







.bbd-template-card__preview em {



  width: 48%;



  height: 8px;



  opacity: .45;



}







.bbd-component-grid,



.bbd-font-list {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: var(--bbd-space-sm);



  margin-bottom: var(--bbd-space-md);



}







.bbd-component-card,



.bbd-font-card {



  display: grid;



  gap: 7px;



  min-height: 146px;



  padding: 10px;



  border: 1px solid var(--bbd-color-border);



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text-primary);



  text-align: left;



  cursor: pointer;



}







.bbd-component-card:hover,



.bbd-component-card:focus-visible,



.bbd-font-card:hover,



.bbd-font-card:focus-visible,



.bbd-font-card.is-selected {



  border-color: var(--bbd-color-accent);



  background: var(--bbd-color-accent-soft);



}







.bbd-component-card strong,



.bbd-font-card span {



  overflow: hidden;



  font-size: 12px;



  font-weight: 750;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-component-card small,



.bbd-font-card small {



  color: var(--bbd-color-text-muted);



  font-size: 11px;



  line-height: 1.3;



}







.bbd-component-thumb {



  position: relative;



  overflow: hidden;



  display: grid;



  align-content: center;



  gap: 4px;



  min-height: 82px;



  padding: 10px;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-card-surface, #fff7ed);



  color: var(--bbd-card-ink, #111827);



}







.bbd-component-thumb i,



.bbd-component-thumb u {



  display: block;



  width: 38%;



  height: 6px;



  border-radius: 999px;



  background: var(--bbd-card-accent, #ff4b00);



  text-decoration: none;



}







.bbd-component-thumb b {



  overflow: hidden;



  font-size: 13px;



  line-height: 1.05;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-component-thumb em {



  overflow: hidden;



  color: var(--bbd-color-text-secondary);



  font-size: 10px;



  font-style: normal;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-component-thumb u {



  width: 55%;



  height: 18px;



  margin-top: 4px;



}







.bbd-font-picker {



  display: grid;



  gap: var(--bbd-space-sm);



  margin-bottom: var(--bbd-space-md);



}







.bbd-font-categories {



  display: flex;



  gap: 6px;



  overflow-x: auto;



  padding-bottom: 2px;



}







.bbd-font-categories button {



  flex: 0 0 auto;



  min-height: 34px;



  padding: 0 10px;



  border: 1px solid var(--bbd-color-border);



  border-radius: 999px;



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text-secondary);



  font-size: 11px;



  font-weight: 700;



  cursor: pointer;



}







.bbd-font-categories button.is-active {



  border-color: var(--bbd-color-accent);



  background: var(--bbd-color-accent-soft);



  color: var(--bbd-color-text-primary);



}







.bbd-font-card strong {



  min-height: 34px;



  font-size: 20px;



  line-height: 1.1;



}







.bbd-field--compact {



  margin-top: 0;



}







.bbd-inspector-advanced {



  margin-top: 10px;



  padding: 10px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-surface-muted);



}







.bbd-inspector-advanced summary {



  cursor: pointer;



  color: var(--bbd-color-text-secondary);



  font-size: 12px;



  font-weight: 750;



}







.bbd-object-toolbar {



  border-radius: var(--bbd-radius-md);



  z-index: var(--bbd-toolbar-z);



}







.bbd-object-toolbar button {



  min-width: 38px;



  min-height: 36px;



  color: var(--bbd-color-text-secondary);



  font-weight: 800;



}







.bbd-object-toolbar button:hover {



  color: var(--bbd-color-text-primary);



}







.bbd-object-toolbar .is-danger:hover {



  background: #fee2e2;



  color: var(--bbd-color-danger);



}







.bbd-toolbar-secondary {



  display: none;



}







.bbd-object-toolbar.is-more-open .bbd-toolbar-secondary {



  display: inline-grid;



}







.bbd-toast-region {



  position: fixed;



  right: 18px;



  bottom: 18px;



  z-index: var(--bbd-toast-z);



  display: grid;



  gap: 8px;



  width: min(360px, calc(100vw - 36px));



  pointer-events: none;



}







.bbd-toast {



  padding: 11px 13px;



  border: 1px solid var(--bbd-color-border);



  border-left: 4px solid var(--bbd-color-info);



  border-radius: var(--bbd-radius-md);



  background: rgba(255, 255, 255, .98);



  box-shadow: var(--bbd-shadow-md);



  color: var(--bbd-color-text-primary);



  font-size: 13px;



  line-height: 1.35;



  opacity: 1;



  transform: translateY(0);



  transition: opacity var(--bbd-transition-fast), transform var(--bbd-transition-fast);



}







.bbd-toast.is-success { border-left-color: var(--bbd-color-success); }



.bbd-toast.is-warning { border-left-color: var(--bbd-color-warning); }



.bbd-toast.is-error { border-left-color: var(--bbd-color-danger); }



.bbd-toast.is-progress { border-left-color: var(--bbd-color-accent); }



.bbd-toast.is-hiding {



  opacity: 0;



  transform: translateY(6px);



}







.bbd-dialog {



  position: fixed;



  inset: 0;



  z-index: var(--bbd-dialog-z);



  display: grid;



  place-items: center;



  padding: 18px;



  background: var(--bbd-overlay);



}







.bbd-dialog[hidden] {



  display: none !important;



}







.bbd-dialog__panel {



  width: min(460px, 100%);



  padding: 18px;



  border-radius: var(--bbd-radius-xl);



  background: var(--bbd-color-surface-elevated);



  box-shadow: var(--bbd-shadow-lg);



}







.bbd-dialog h2 {



  margin: 0 0 8px;



  font-size: 18px;



  line-height: 1.25;



}







.bbd-dialog p {



  margin: 0 0 14px;



  color: var(--bbd-color-text-secondary);



  font-size: 13px;



  line-height: 1.55;



}







.bbd-dialog__content[hidden] {



  display: none !important;



}







.bbd-dialog.is-save-review .bbd-dialog__panel {



  width: min(520px, 100%);



  padding: 24px;



}







.bbd-dialog.is-save-review h2 {



  margin-bottom: 7px;



  color: #182230;



  font-size: clamp(22px, 2.4vw, 28px);



  letter-spacing: -.025em;



}







.bbd-dialog.is-save-review #bbd-dialog-message {



  margin-bottom: 16px;



  color: #667085;



}







.bbd-dialog__detail-list {



  overflow: hidden;



  border: 1px solid #e2e6ec;



  border-radius: 13px;



  background: #fff;



}







.bbd-dialog__detail {



  display: grid;



  grid-template-columns: 38px minmax(0, 1fr);



  align-items: center;



  gap: 11px;



  min-height: 58px;



  padding: 9px 12px;



}







.bbd-dialog__detail + .bbd-dialog__detail {



  border-top: 1px solid #eef1f4;



}







.bbd-dialog__detail-icon {



  display: grid;



  place-items: center;



  width: 34px;



  height: 34px;



  border-radius: 10px;



  background: #f2f4f7;



  color: #475467;



}







.bbd-dialog__detail-icon .bbd-pro-action-icon {



  width: 18px;



  height: 18px;



}







.bbd-dialog__detail.is-ready .bbd-dialog__detail-icon {



  background: #eaf8f2;



  color: #087a59;



}







.bbd-dialog__detail.is-review .bbd-dialog__detail-icon {



  background: #fff4db;



  color: #a15c00;



}







.bbd-dialog__detail.is-critical .bbd-dialog__detail-icon {



  background: #feeceb;



  color: #b42318;



}







.bbd-dialog__detail-copy {



  min-width: 0;



  display: grid;



  gap: 2px;



}







.bbd-dialog__detail-copy small {



  color: #667085;



  font-size: 11px;



  font-weight: 650;



}







.bbd-dialog__detail-copy strong {



  overflow-wrap: anywhere;



  color: #182230;



  font-size: 13px;



  line-height: 1.35;



}







.bbd-dialog p.bbd-dialog__note {



  margin: 12px 0 0;



  padding: 10px 12px;



  border-radius: 10px;



  background: #f7f8fa;



  color: #475467;



  font-size: 12px;



}







.bbd-dialog__actions {



  display: flex;



  justify-content: flex-end;



  gap: 8px;



  margin-top: 14px;



}







.bbd-dialog__button {



  min-height: 40px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 7px;



  padding: 0 14px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text-primary);



  font-weight: 750;



  cursor: pointer;



}







.bbd-dialog__button .bbd-pro-action-icon {



  width: 16px;



  height: 16px;



}







.bbd-dialog__button.is-primary {



  border-color: var(--bbd-color-accent);



  background: var(--bbd-color-accent);



  color: #fff;



}







.bbd-dialog__button.is-danger {



  border-color: var(--bbd-color-danger);



  background: var(--bbd-color-danger);



}







.bbd-dialog__progress {



  overflow: hidden;



  height: 8px;



  border-radius: 999px;



  background: var(--bbd-color-surface-muted);



}







.bbd-dialog__progress span {



  display: block;



  width: 45%;



  height: 100%;



  border-radius: inherit;



  background: var(--bbd-color-accent);



  animation: bbd-progress 1.4s linear infinite;



}







@keyframes bbd-progress {



  from { transform: translateX(-100%); }



  to { transform: translateX(240%); }



}







@media (max-width: 760px) {



  .bbd-component-grid,



  .bbd-font-list {



    grid-template-columns: 1fr;



  }







  .bbd-panel,



  .bbd-inspector,



  .bbd-dialog__panel {



    border-radius: 14px 14px 0 0;



  }







  .bbd-toast-region {



    right: 10px;



    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);



    width: calc(100vw - 20px);



  }







  .bbd-dialog {



    align-items: end;



    padding: 0;



  }







  .bbd-dialog__panel {



    width: 100%;



    max-height: min(82vh, 640px);



    overflow: auto;



  }







  .bbd-dialog__actions {



    flex-direction: column-reverse;



  }







  .bbd-dialog__button {



    width: 100%;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-template-card,



  .bbd-preset-chip,



  .bbd-clipart-card,



  .bbd-component-card,



  .bbd-font-card,



  .bbd-toast,



  .bbd-dialog__progress span {



    transition: none !important;



    animation: none !important;



  }



}







/* v0.13.2 Editor UX unification, mobile shell and canvas recovery layer. */



.bbd-topbar-panel-toggle {



  display: none !important;



}







.bbd-save-label-short,



.bbd-tool-label-mobile,



.bbd-mobile-sheet-bar {



  display: none;



}







.bbd-panel {



  position: relative;



  min-width: 0;



}







.bbd-panel-edge-toggle {



  position: absolute;



  top: 50%;



  right: -15px;



  z-index: 40;



  display: grid;



  place-items: center;



  width: 30px;



  height: 64px;



  border: 1px solid var(--bbd-color-border);



  border-left: 0;



  border-radius: 0 var(--bbd-radius-md) var(--bbd-radius-md) 0;



  background: #fff;



  color: var(--bbd-color-text-secondary);



  box-shadow: var(--bbd-shadow-sm);



  cursor: pointer;



  transform: translateY(-50%);



}







.bbd-panel-edge-toggle:hover,



.bbd-panel-edge-toggle:focus-visible {



  color: var(--bbd-color-text-primary);



  box-shadow: var(--bbd-shadow-md), var(--bbd-focus-ring);



}







.bbd-app.is-panel-collapsed .bbd-panel {



  overflow: visible;



  border-right: 0;



}







.bbd-app.is-panel-collapsed .bbd-panel-section,



.bbd-app.is-panel-collapsed .bbd-mobile-sheet-bar {



  visibility: hidden;



  pointer-events: none;



}







.bbd-app.is-panel-collapsed .bbd-panel-edge-toggle {



  visibility: visible;



  pointer-events: auto;



}







.bbd-text-mode-tabs,



.bbd-upload-tabs,



.bbd-graphic-filters,



.bbd-component-categories,



.bbd-quick-add-row {



  display: flex;



  gap: 6px;



  margin-bottom: var(--bbd-space-md);



}







.bbd-text-mode-tabs,



.bbd-upload-tabs,



.bbd-component-categories {



  overflow-x: auto;



  padding-bottom: 2px;



}







.bbd-text-mode-tabs button,



.bbd-upload-tabs button,



.bbd-component-categories button {



  flex: 0 0 auto;



  min-height: 34px;



  padding: 0 10px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-surface);



  color: var(--bbd-color-text-secondary);



  font-size: 11px;



  font-weight: 750;



  cursor: pointer;



}







.bbd-text-mode-tabs button.is-active,



.bbd-upload-tabs button.is-active,



.bbd-component-categories button.is-active {



  border-color: var(--bbd-color-accent);



  background: var(--bbd-color-accent-soft);



  color: var(--bbd-color-text-primary);



}







.bbd-quick-add-row {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



}







.bbd-graphic-filters {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



}







.bbd-graphic-filters select {



  min-width: 0;



  min-height: 36px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: #fff;



  color: var(--bbd-color-text-primary);



  font-size: 12px;



}







.bbd-upload-card em {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  min-height: 34px;



  padding: 0 12px;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-color-accent);



  color: #fff;



  font-style: normal;



  font-weight: 800;



}







.bbd-stage-area {



  position: relative;



  overflow: hidden;



  grid-template-rows: minmax(0, 1fr);



  grid-template-columns: minmax(0, 1fr);



}







.bbd-canvas-shell,



.bbd-object-toolbar,



.bbd-busy-overlay {



  grid-column: 1;



  grid-row: 1;



}







.bbd-canvas-shell {



  min-width: 0;



  min-height: 0;



}







.bbd-canvas-hud {



  position: absolute;



  z-index: 24;



  display: flex;



  align-items: center;



  gap: 6px;



  pointer-events: none;



}







.bbd-canvas-hud > * {



  pointer-events: auto;



}







.bbd-canvas-hud--top {



  top: 10px;



  left: 10px;



  right: 10px;



  justify-content: space-between;



}







.bbd-canvas-hud--bottom {



  right: 10px;



  bottom: 10px;



  left: 10px;



  justify-content: space-between;



}







.bbd-hud-chip,



.bbd-stage-footer > *,



.bbd-stage-meta > * {



  max-width: min(42vw, 320px);



  padding: 6px 9px;



  border: 1px solid rgba(148, 163, 184, .36);



  border-radius: var(--bbd-radius-md);



  background: rgba(255, 255, 255, .92);



  box-shadow: var(--bbd-shadow-sm);



  color: var(--bbd-color-text-primary);



  font-size: 11px;



  font-weight: 750;



  backdrop-filter: blur(8px);



}







.bbd-ruler {



  position: absolute;



  z-index: 18;



  background: rgba(255, 255, 255, .84);



  pointer-events: none;



}







.bbd-ruler--horizontal {



  top: 48px;



  right: 12px;



  left: 68px;



}







.bbd-ruler--vertical {



  top: 82px;



  bottom: 54px;



  left: 12px;



}







.bbd-canvas-empty {



  position: absolute;



  inset: 50%;



  z-index: 22;



  display: grid;



  gap: 10px;



  width: min(420px, calc(100% - 32px));



  padding: 14px;



  border: 1px solid rgba(148, 163, 184, .38);



  border-radius: var(--bbd-radius-md);



  background: rgba(255, 255, 255, .94);



  box-shadow: var(--bbd-shadow-md);



  transform: translate(-50%, -50%);



}







.bbd-canvas-empty[hidden] {



  display: none !important;



}







.bbd-canvas-empty strong {



  font-size: 14px;



}







.bbd-canvas-empty div {



  display: grid;



  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 6px;



}







.bbd-canvas-empty button {



  min-height: 36px;



  border: 1px solid var(--bbd-color-border);



  border-radius: var(--bbd-radius-md);



  background: #fff;



  color: var(--bbd-color-text-primary);



  font-size: 12px;



  font-weight: 750;



  cursor: pointer;



}







.bbd-preview-card__art.has-preview {



  background-color: #f8fafc;



  background-position: center;



  background-repeat: no-repeat;



  background-size: contain;



}







.bbd-preflight-item {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  align-items: center;



  gap: 8px;



}







.bbd-preflight-item__message {



  overflow: hidden;



  text-overflow: ellipsis;



}







.bbd-preflight-item__action {



  color: var(--bbd-color-text-muted);



  font-size: 10px;



  font-weight: 800;



  white-space: nowrap;



}







.bbd-object-toolbar[data-kind="text"] #bbd-toolbar-edit-text {



  display: inline-grid;



}







.bbd-object-toolbar:not([data-kind="text"]) #bbd-toolbar-edit-text {



  display: none;



}







.bbd-app.is-preview-mode .bbd-stage-footer {



  display: none !important;



}







@media (max-width: 1180px) {



  .bbd-panel-edge-toggle {



    display: none;



  }



}







@media (max-width: 760px) {



  .bbd-save-label-full,



  .bbd-tool-label-full {



    display: none;



  }







  .bbd-save-label-short,



  .bbd-tool-label-mobile {



    display: inline;



  }







  .bbd-topbar {



    grid-template-columns: minmax(0, 1fr) auto;



    min-height: 52px;



    padding-inline: 10px;



  }







  .bbd-topbar__actions {



    gap: 6px;



  }







  .bbd-topbar__actions button {



    min-width: 40px;



    min-height: 40px;



    padding-inline: 9px;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-panel-collapsed .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) minmax(0, 1fr);



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-panel,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-inspector.is-mobile-sheet-active {



    position: absolute;



    top: auto;



    right: 0;



    bottom: 0;



    left: var(--bbd-rail-width);



    z-index: 88;



    display: flex;



    flex-direction: column;



    width: auto;



    max-height: min(76vh, 620px);



    border: 1px solid var(--bbd-color-border);



    border-right: 0;



    border-bottom: 0;



    border-radius: 16px 16px 0 0;



    background: #fff;



    box-shadow: 0 -18px 42px rgba(15, 23, 42, .18);



    opacity: 1;



    transform: none;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-panel-collapsed .bbd-panel-section,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-panel-collapsed .bbd-mobile-sheet-bar {



    visibility: visible;



    pointer-events: auto;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-panel[hidden],



  .bbd-modal[data-layout="bottom-sheet"] .bbd-inspector:not(.is-mobile-sheet-active),



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.is-inspector-collapsed .bbd-inspector:not(.is-mobile-sheet-active) {



    display: none !important;



  }







  .bbd-mobile-sheet-bar {



    position: sticky;



    top: 0;



    z-index: 2;



    display: grid;



    grid-template-columns: 40px minmax(0, 1fr) auto 40px;



    align-items: center;



    gap: 6px;



    padding: 8px 10px;



    border-bottom: 1px solid var(--bbd-color-border);



    background: #fff;



  }







  .bbd-mobile-sheet-grip {



    position: absolute;



    top: 5px;



    left: 50%;



    width: 42px;



    height: 4px;



    border-radius: 999px;



    background: #cbd5e1;



    transform: translateX(-50%);



  }







  .bbd-mobile-sheet-title {



    overflow: hidden;



    font-size: 13px;



    font-weight: 850;



    text-overflow: ellipsis;



    white-space: nowrap;



  }







  .bbd-mobile-sheet-bar button {



    min-width: 36px;



    min-height: 36px;



    border: 1px solid var(--bbd-color-border);



    border-radius: var(--bbd-radius-md);



    background: #fff;



    color: var(--bbd-color-text-primary);



    font-weight: 800;



  }







  .bbd-mobile-sheet-tabs {



    display: flex;



    gap: 4px;



  }







  .bbd-mobile-sheet-tabs button {



    min-width: 0;



    padding-inline: 8px;



    font-size: 11px;



  }







  .bbd-panel-section,



  .bbd-inspector {



    overflow: auto;



    -webkit-overflow-scrolling: touch;



  }







  .bbd-panel-section {



    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);



  }







  .bbd-stage-area {



    grid-template-rows: minmax(0, 1fr);



  }







  .bbd-canvas-hud--top {



    top: 8px;



    right: 8px;



    left: 8px;



  }







  .bbd-canvas-hud--bottom {



    right: 8px;



    bottom: 8px;



    left: 8px;



  }







  .bbd-hud-chip,



  .bbd-stage-footer > *,



  .bbd-stage-meta > * {



    max-width: 48vw;



    padding: 5px 7px;



  }







  .bbd-canvas-empty {



    width: min(340px, calc(100% - 24px));



  }







  .bbd-canvas-empty div {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .bbd-graphic-filters,



  .bbd-quick-add-row {



    grid-template-columns: 1fr;



  }







  .bbd-object-toolbar {



    max-width: calc(100vw - var(--bbd-rail-width) - 18px);



  }







  .bbd-object-toolbar button {



    min-width: 36px;



    min-height: 34px;



  }



}







/* v0.14.0 UX Pro layer */



.bbd-app {



  --bbd-rail-width: 82px;



  --bbd-toolbar-z: 62;



}







.bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr);



}







.bbd-sidebar {



  position: relative;



  width: var(--bbd-rail-width);



  padding: 10px 8px;



  gap: 6px;



}







.bbd-sidebar-active-indicator {



  position: absolute;



  top: 0;



  left: 4px;



  width: 4px;



  border-radius: 999px;



  background: #ff6a1a;



  box-shadow: 0 0 0 3px rgba(255, 106, 26, .16);



  transition: transform .2s ease, height .2s ease, opacity .15s ease;



  pointer-events: none;



}







.bbd-sidebar-active-indicator[hidden] {



  opacity: 0;



}







.bbd-tool {



  position: relative;



  z-index: 1;



  min-height: 58px;



  border-radius: 8px;



  font-size: 10px;



  line-height: 1.15;



}







.bbd-tool.is-active {



  background: rgba(255, 106, 26, .16);



  color: #fff;



}







.bbd-tool:hover {



  background: rgba(255, 106, 26, .24);



}







.bbd-tool-label-full,



.bbd-tool-label-mobile {



  letter-spacing: 0;



}







.bbd-panel-edge-toggle {



  width: 28px;



  min-width: 28px;



  border-radius: 8px 0 0 8px;



}







.bbd-component-card {



  position: relative;



  min-height: 138px;



  align-content: end;



  overflow: hidden;



  border-radius: 8px;



  border-color: rgba(15, 23, 42, .12);



  background:



    linear-gradient(135deg, var(--bbd-card-surface, #f8fafc) 0%, #fff 100%);



  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);



}







.bbd-component-card::before {



  content: "";



  position: absolute;



  inset: 12px 12px auto;



  height: 58px;



  border-radius: 7px;



  background:



    linear-gradient(90deg, var(--bbd-card-accent, #ff6a1a) 0 34%, transparent 34%),



    linear-gradient(var(--bbd-card-ink, #111827), var(--bbd-card-ink, #111827));



  background-size: 100% 100%, 62% 8px;



  background-position: 0 0, 0 46px;



  background-repeat: no-repeat;



  opacity: .14;



}







.bbd-component-card strong,



.bbd-component-card small {



  position: relative;



  z-index: 1;



}







.bbd-component-card strong {



  font-size: 13px;



  line-height: 1.2;



}







.bbd-component-card small {



  color: var(--bbd-color-text-muted, #64748b);



}







.bbd-object-toolbar {



  z-index: var(--bbd-toolbar-z);



  max-width: min(680px, calc(100vw - var(--bbd-rail-width) - 24px));



  flex-wrap: wrap;



  align-items: center;



  border-radius: 8px;



  transform: none;



}







.bbd-object-toolbar::after {



  content: "";



  position: absolute;



  left: 50%;



  width: 10px;



  height: 10px;



  border-right: 1px solid var(--bbd-color-border, #e5e7eb);



  border-bottom: 1px solid var(--bbd-color-border, #e5e7eb);



  background: rgba(255, 255, 255, .96);



  transform: translateX(-50%) rotate(45deg);



}







.bbd-object-toolbar[data-placement="above"]::after {



  bottom: -6px;



}







.bbd-object-toolbar[data-placement="below"]::after,



.bbd-object-toolbar[data-placement="pinned"]::after {



  top: -6px;



  transform: translateX(-50%) rotate(225deg);



}







.bbd-object-toolbar button {



  border-radius: 7px;



}







.bbd-object-toolbar button[hidden] {



  display: none !important;



}







.bbd-object-toolbar[data-kind="image"] #bbd-toolbar-color,



.bbd-object-toolbar[data-kind="graphic"] #bbd-toolbar-crop,



.bbd-object-toolbar[data-kind="graphic"] #bbd-toolbar-fit,



.bbd-object-toolbar[data-kind="graphic"] #bbd-toolbar-cover,



.bbd-object-toolbar[data-kind="text"] #bbd-toolbar-crop,



.bbd-object-toolbar[data-kind="text"] #bbd-toolbar-fit,



.bbd-object-toolbar[data-kind="text"] #bbd-toolbar-cover {



  display: none !important;



}







.bbd-object-popover {



  position: absolute;



  z-index: calc(var(--bbd-toolbar-z) + 1);



  width: min(300px, calc(100vw - var(--bbd-rail-width) - 24px));



  padding: 12px;



  border: 1px solid var(--bbd-color-border, #e5e7eb);



  border-radius: 8px;



  background: #fff;



  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);



}







.bbd-object-popover[hidden] {



  display: none !important;



}







.bbd-popover-title {



  margin-bottom: 10px;



  color: var(--bbd-color-text-primary, #111827);



  font-size: 13px;



  font-weight: 850;



}







.bbd-popover-body {



  display: grid;



  gap: 9px;



}







.bbd-popover-body label {



  display: grid;



  grid-template-columns: minmax(0, 90px) minmax(0, 1fr);



  align-items: center;



  gap: 8px;



  color: var(--bbd-color-text-muted, #64748b);



  font-size: 11px;



  font-weight: 750;



}







.bbd-popover-body input,



.bbd-popover-body button,



.bbd-popover-actions button {



  min-height: 32px;



  border: 1px solid var(--bbd-color-border, #e5e7eb);



  border-radius: 7px;



  background: #fff;



  color: var(--bbd-color-text-primary, #111827);



  font: inherit;



}







.bbd-popover-grid,



.bbd-popover-segment,



.bbd-popover-actions {



  display: grid;



  gap: 6px;



}







.bbd-popover-grid {



  grid-template-columns: repeat(2, minmax(0, 1fr));



}







.bbd-popover-segment {



  grid-template-columns: repeat(3, minmax(0, 1fr));



}







.bbd-popover-actions {



  grid-template-columns: minmax(0, 1fr) auto;



  margin-top: 10px;



}







.bbd-warning-layer {



  position: absolute;



  inset: 0;



  z-index: 31;



  pointer-events: none;



}







.bbd-warning-badge {



  position: absolute;



  width: 24px;



  height: 24px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  border: 2px solid #fff;



  border-radius: 999px;



  background: #f59e0b;



  color: #111827;



  font-size: 13px;



  font-weight: 900;



  box-shadow: 0 6px 18px rgba(15, 23, 42, .2);



  pointer-events: auto;



}







.bbd-warning-badge.is-error {



  background: #ef4444;



  color: #fff;



}







.bbd-warning-badge.is-info {



  background: #0ea5e9;



  color: #fff;



}







.bbd-measure-actions {



  display: inline-flex;



  align-items: center;



  gap: 4px;



}







.bbd-measure-actions[hidden] {



  display: none !important;



}







.bbd-measure-actions button {



  min-height: 26px;



  padding: 0 8px;



  border: 1px solid transparent;



  border-radius: 7px;



  background: transparent;



  color: inherit;



  font: inherit;



  font-weight: 800;



  cursor: pointer;



}







.bbd-measure-actions button:hover,



.bbd-measure-actions button.is-active {



  border-color: rgba(255, 106, 26, .32);



  background: rgba(255, 106, 26, .12);



}







.bbd-layer-row {



  grid-template-columns: minmax(0, 1fr) 28px 28px 28px 28px 28px;



}







.bbd-layer-solo {



  min-height: 34px;



  border: 0;



  border-radius: 7px;



  background: transparent;



  color: var(--bbd-color-text-muted, #64748b);



  font-size: 11px;



  font-weight: 900;



  cursor: pointer;



}







.bbd-layer-row.is-solo-layer {



  border-color: #0ea5e9;



  background: #eff6ff;



}







.bbd-layer-row.is-solo-layer .bbd-layer-solo {



  background: #0ea5e9;



  color: #fff;



}







@media (prefers-reduced-motion: reduce) {



  .bbd-sidebar-active-indicator {



    transition: none;



  }



}







@media (max-width: 760px) {



  .bbd-app {



    --bbd-rail-width: 78px;



  }







  .bbd-sidebar {



    padding-inline: 7px;



  }







  .bbd-tool {



    min-height: 54px;



  }







  .bbd-object-popover {



    width: min(300px, calc(100vw - var(--bbd-rail-width) - 18px));



  }







  .bbd-popover-actions,



  .bbd-popover-grid {



    grid-template-columns: 1fr;



  }



}







/* v0.14.1 desktop dock regression fix and focused UX refinements */



.bbd-app {



  --bbd-editor-header-height: 72px;



  --bbd-rail-width: 82px;



  --bbd-panel-width: 336px;



  --bbd-inspector-width: 320px;



  height: 100dvh;



  max-height: 100dvh;



  overflow: hidden;



}







.bbd-topbar {



  min-height: var(--bbd-editor-header-height);



}







.bbd-workspace {



  min-width: 0;



  min-height: 0;



  height: calc(100dvh - var(--bbd-editor-header-height));



  display: grid;



  grid-template-rows: minmax(0, 1fr);



  overflow: hidden;



}







.bbd-sidebar,



.bbd-panel,



.bbd-inspector {



  box-sizing: border-box;



}







.bbd-sidebar {



  width: var(--bbd-rail-width);



  max-width: var(--bbd-rail-width);



}







@media (min-width: 1024px) {



  .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr) var(--bbd-inspector-width);



  }







  .bbd-app.is-panel-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr) var(--bbd-inspector-width);



  }







  .bbd-app.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr) 0;



  }







  .bbd-app.is-panel-collapsed.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr) 0;



  }







  .bbd-sidebar,



  .bbd-panel,



  .bbd-stage-area,



  .bbd-inspector {



    grid-row: 1;



    min-width: 0;



    min-height: 0;



    height: 100%;



  }







  .bbd-sidebar {



    grid-column: 1;



    overflow: hidden auto;



  }







  .bbd-panel {



    grid-column: 2;



    display: flex;



    flex-direction: column;



    overflow: visible;



  }







  .bbd-panel-section:not([hidden]) {



    flex: 1 1 auto;



    min-height: 0;



    overflow: auto;



    padding-right: 2px;



  }







  .bbd-stage-area {



    grid-column: 3;



    grid-template-rows: minmax(0, 1fr);



    grid-template-columns: minmax(0, 1fr);



    overflow: hidden;



    position: relative;



  }







  .bbd-canvas-shell {



    min-width: 0;



    min-height: 0;



    overflow: auto;



  }







  .bbd-inspector {



    grid-column: 4;



    position: relative;



    inset: auto;



    width: auto;



    max-height: none;



    overflow: auto;



    transform: none;



    box-shadow: none;



  }







  .bbd-app.is-inspector-collapsed .bbd-inspector {



    width: auto;



    transform: none;



  }



}







.bbd-sidebar-active-indicator {



  left: 7px;



  right: 7px;



  width: auto;



  border-radius: 8px;



  background: rgba(255, 255, 255, .10);



  box-shadow: inset 4px 0 0 #ff6a1a, 0 8px 18px rgba(0, 0, 0, .14);



}







.bbd-tool {



  min-height: 56px;



  padding: 6px 4px;



  border-left: 0;



  font-size: 11px;



}







.bbd-tool svg {



  width: 21px;



  height: 21px;



}







.bbd-tool.is-active {



  background: transparent;



  color: #fff;



  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);



}







.bbd-tool span {



  max-width: 100%;



  white-space: normal;



}







.bbd-panel-edge-toggle {



  right: -44px;



  width: 44px;



  height: 48px;



  border-radius: 0 10px 10px 0;



  background: #fff;



  color: var(--bbd-color-text-primary);



  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);



  font-size: 22px;



}







.bbd-panel-heading--sticky {



  position: sticky;



  top: 0;



  z-index: 3;



  padding-bottom: 10px;



  background: linear-gradient(#fff 74%, rgba(255, 255, 255, .92));



}







.bbd-panel-section {



  padding-bottom: 18px;



}







.bbd-panel-section > h2 {



  margin-top: 0;



}







.bbd-panel-intro {



  margin: -6px 0 14px;



  color: var(--bbd-color-text-muted);



  font-size: 12px;



  line-height: 1.35;



}







.bbd-quick-add-row {



  grid-template-columns: repeat(2, minmax(0, 1fr));



}







.bbd-text-action-card {



  min-height: 86px;



  display: grid;



  grid-template-columns: 34px minmax(0, 1fr);



  grid-template-rows: auto auto;



  align-content: center;



  gap: 3px 9px;



  padding: 10px;



  text-align: left;



}







.bbd-text-action-card > span {



  grid-row: 1 / 3;



  width: 32px;



  height: 32px;



  display: grid;



  place-items: center;



  border-radius: 8px;



  background: var(--bbd-color-accent-soft);



  color: var(--bbd-color-accent);



  font-weight: 900;



}







.bbd-text-action-card strong,



.bbd-text-action-card small {



  min-width: 0;



  overflow: hidden;



  text-overflow: ellipsis;



}







.bbd-text-action-card small {



  color: var(--bbd-color-text-muted);



  font-size: 11px;



}







.bbd-background-modules {



  display: grid;



  gap: 12px;



}







[data-panel-content="background"] > .bbd-background-modules + h2 {



  display: none;



}







.bbd-background-card-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 10px;



}







.bbd-background-card {



  position: relative;



  min-height: 116px;



  display: grid;



  gap: 5px;



  padding: 10px;



  border: 1px solid var(--bbd-color-border);



  border-radius: 8px;



  background: #fff;



  color: var(--bbd-color-text-primary);



  text-align: left;



  cursor: pointer;



}







.bbd-background-card:hover,



.bbd-background-card:focus-visible {



  border-color: rgba(255, 106, 26, .65);



  transform: translateY(-1px);



}







.bbd-background-card.is-active {



  border-color: var(--bbd-color-accent);



  box-shadow: 0 0 0 2px rgba(255, 106, 26, .12);



}







.bbd-background-card.is-active::after {



  content: "✓";



  position: absolute;



  top: 8px;



  right: 8px;



  width: 20px;



  height: 20px;



  display: grid;



  place-items: center;



  border-radius: 999px;



  background: var(--bbd-color-accent);



  color: #fff;



  font-size: 12px;



  font-weight: 900;



}







.bbd-background-card em {



  display: none;



  color: var(--bbd-color-accent);



  font-size: 10px;



  font-style: normal;



  font-weight: 850;



}







.bbd-background-card.is-active em {



  display: inline;



}







.bbd-background-preview {



  width: 100%;



  height: 42px;



  border: 1px solid rgba(15, 23, 42, .10);



  border-radius: 7px;



  background: #fff;



}







.bbd-background-card.is-warm .bbd-background-preview {



  background: linear-gradient(135deg, #fff7ed, #fb7185);



}







.bbd-background-card.is-cool .bbd-background-preview {



  background: linear-gradient(135deg, #eff6ff, #2dd4bf);



}







.bbd-background-card.is-dots .bbd-background-preview {



  background-color: #fff;



  background-image: radial-gradient(rgba(255, 75, 0, .38) 2px, transparent 2px);



  background-size: 12px 12px;



}







.bbd-background-card.is-transparent .bbd-background-preview,



#bbd-background-swatch[data-kind="solid"][data-variant="transparent"] {



  background-color: #fff;



  background-image:



    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),



    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),



    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),



    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);



  background-position: 0 0, 0 6px, 6px -6px, -6px 0;



  background-size: 12px 12px;



}







.bbd-background-color-field {



  margin: 0;



}







.bbd-background-color-field input[type="color"] {



  width: 100%;



  min-height: 42px;



}







.bbd-legacy-background-actions[hidden] {



  display: none !important;



}







.bbd-component-card {



  min-height: 150px;



}







.bbd-component-thumb {



  position: relative;



  z-index: 1;



}







.bbd-object-toolbar {



  max-width: min(420px, calc(100vw - var(--bbd-rail-width) - 28px));



  flex-wrap: nowrap;



  overflow: visible;



}







.bbd-object-toolbar button {



  min-width: 34px;



  min-height: 32px;



}







.bbd-warning-badge {



  width: 22px;



  height: 22px;



  font-size: 12px;



  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);



}







.bbd-quality-summary {



  margin-left: auto;



}







.bbd-measurement-output {



  min-width: 0;



  max-width: none;



  display: inline-flex;



  align-items: center;



  gap: 8px;



  white-space: nowrap;



}







.bbd-measurement-output i {



  width: 1px;



  height: 16px;



  background: rgba(100, 116, 139, .32);



}







.bbd-measurement-output span {



  display: inline-block;



}







.bbd-measure-actions {



  margin-left: auto;



}







.bbd-canvas-empty {



  inset: auto;



  transform: translate(-50%, -100%);



  width: min(360px, calc(100% - 32px));



  gap: 9px;



}







.bbd-canvas-empty::after {



  content: "Dosyanı yükle veya hazır bir şablon seç";



  color: var(--bbd-color-text-muted);



  font-size: 12px;



}







.bbd-canvas-empty div {



  grid-template-columns: 1fr 1fr 1fr;



}







.bbd-canvas-empty button:first-child {



  grid-column: 1 / -1;



  min-height: 42px;



  border-color: var(--bbd-color-accent);



  background: var(--bbd-color-accent);



  color: #fff;



}







@media (max-width: 1023px) {



  .bbd-workspace,



  .bbd-app.is-panel-collapsed .bbd-workspace,



  .bbd-app.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) minmax(0, 1fr);



  }







  .bbd-background-card-grid,



  .bbd-quick-add-row {



    grid-template-columns: 1fr;



  }



}







/* v0.15.0 mega editor UX, graphics library, and resilient save layer */



.bbd-brand-slot {



  flex: 0 0 auto;



  height: 34px;



  min-width: 34px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  padding: 0 9px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface, #fff);



  color: var(--bbd-color-primary, #111827);



  font-size: 12px;



  font-weight: 900;



  letter-spacing: 0;



  box-shadow: var(--bbd-shadow-sm, 0 1px 3px rgba(15,23,42,.08));



}







.bbd-brand-slot img {



  display: block;



  width: auto;



  max-width: 104px;



  height: 24px;



  object-fit: contain;



}







.bbd-graphics-panel {



  --bbd-graphic-cell: minmax(52px, 1fr);



}







.bbd-graphics-panel .bbd-search-field {



  margin-bottom: 10px;



}







.bbd-graphics-panel .bbd-search-field input {



  min-height: 38px;



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface-muted, #f5f6f8);



}







.bbd-legacy-graphic-filters {



  position: absolute !important;



  width: 1px !important;



  height: 1px !important;



  overflow: hidden !important;



  clip: rect(0 0 0 0) !important;



  clip-path: inset(50%) !important;



  white-space: nowrap !important;



}







.bbd-graphic-category-rail {



  display: grid;



  grid-auto-flow: column;



  grid-auto-columns: minmax(58px, 74px);



  gap: 7px;



  margin: 0 -4px 10px;



  padding: 2px 4px 7px;



  overflow-x: auto;



  scrollbar-width: none;



  scroll-snap-type: x proximity;



  -webkit-overflow-scrolling: touch;



}







.bbd-graphic-category-rail::-webkit-scrollbar,



.bbd-scroll-tabs::-webkit-scrollbar {



  display: none;



}







.bbd-graphic-category-chip {



  min-width: 0;



  min-height: 52px;



  display: grid;



  grid-template-rows: 20px minmax(0, 1fr);



  place-items: center;



  gap: 4px;



  padding: 7px 5px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface, #fff);



  color: var(--bbd-color-text-secondary, #384152);



  cursor: pointer;



  scroll-snap-align: start;



  transition: border-color var(--bbd-transition-fast, 120ms ease), background var(--bbd-transition-fast, 120ms ease), color var(--bbd-transition-fast, 120ms ease), transform var(--bbd-transition-fast, 120ms ease);



}







.bbd-graphic-category-chip svg {



  width: 20px;



  height: 20px;



}







.bbd-graphic-category-chip span {



  width: 100%;



  overflow: hidden;



  font-size: 10px;



  font-weight: 800;



  line-height: 1.1;



  text-align: center;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-graphic-category-chip:hover,



.bbd-graphic-category-chip:focus-visible {



  border-color: rgba(255, 75, 0, .5);



  color: var(--bbd-color-primary, #111827);



  transform: translateY(-1px);



}







.bbd-graphic-category-chip.is-active {



  border-color: var(--bbd-color-accent, #ff4b00);



  background: var(--bbd-color-accent-soft, #fff1e8);



  color: var(--bbd-color-accent-dark, #d63f00);



  box-shadow: 0 0 0 2px rgba(255, 75, 0, .12);



}







.bbd-graphic-memory {



  display: grid;



  gap: 7px;



  margin: 0 0 12px;



}







.bbd-graphic-memory__group {



  display: grid;



  gap: 6px;



}







.bbd-graphic-memory__group[hidden] {



  display: none !important;



}







.bbd-graphic-memory__group strong {



  color: var(--bbd-color-text-muted, #616978);



  font-size: 11px;



  font-weight: 850;



}







.bbd-graphic-memory__group > div {



  display: flex;



  gap: 6px;



  overflow-x: auto;



  scrollbar-width: none;



}







.bbd-graphic-memory__group > div::-webkit-scrollbar {



  display: none;



}







.bbd-graphic-memory__group button {



  flex: 0 0 auto;



  max-width: 126px;



  min-height: 30px;



  padding: 0 9px;



  overflow: hidden;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  background: var(--bbd-color-surface-muted, #f5f6f8);



  color: var(--bbd-color-text-secondary, #384152);



  font-size: 11px;



  font-weight: 750;



  text-overflow: ellipsis;



  white-space: nowrap;



  cursor: pointer;



}







.bbd-clipart-grid,



.bbd-graphic-grid,



.bbd-shape-grid {



  display: grid;



  grid-template-columns: repeat(4, var(--bbd-graphic-cell));



  gap: 8px;



  align-items: stretch;



}







.bbd-clipart-card,



.bbd-shape-grid button,



.bbd-shape-grid [data-bbd-shape] {



  position: relative;



  min-width: 0;



  min-height: 58px;



  aspect-ratio: 1 / 1;



  display: grid;



  place-items: center;



  padding: 7px;



  overflow: hidden;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: linear-gradient(180deg, var(--bbd-color-surface, #fff), var(--bbd-color-surface-muted, #f5f6f8));



  color: var(--bbd-color-primary, #111827);



  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);



  cursor: grab;



  transition: border-color var(--bbd-transition-fast, 120ms ease), background var(--bbd-transition-fast, 120ms ease), box-shadow var(--bbd-transition-fast, 120ms ease), transform var(--bbd-transition-fast, 120ms ease);



}







.bbd-clipart-card:hover,



.bbd-clipart-card:focus-visible,



.bbd-shape-grid button:hover,



.bbd-shape-grid button:focus-visible,



.bbd-shape-grid [data-bbd-shape]:hover,



.bbd-shape-grid [data-bbd-shape]:focus-visible {



  border-color: rgba(255, 75, 0, .58);



  background: #fff;



  box-shadow: 0 8px 20px rgba(15, 23, 42, .11);



  transform: translateY(-1px);



}







.bbd-clipart-card:active,



.bbd-shape-grid button:active,



.bbd-shape-grid [data-bbd-shape]:active,



.bbd-style-chip:active,



.bbd-style-mini-actions button:active,



.bbd-stroke-stepper button:active,



.bbd-stroke-presets button:active {



  transform: scale(.98);



}







.bbd-clipart-card.is-favorite,



.bbd-shape-grid button.is-favorite,



.bbd-shape-grid [data-bbd-shape].is-favorite {



  border-color: var(--bbd-color-accent, #ff4b00);



  background: var(--bbd-color-accent-soft, #fff1e8);



}







.bbd-clipart-card__preview {



  width: min(38px, 80%);



  height: min(38px, 80%);



  display: grid;



  place-items: center;



}







.bbd-clipart-card__preview svg {



  width: 100%;



  height: 100%;



  display: block;



}







.bbd-clipart-card strong,



.bbd-clipart-card small,



.bbd-shape-label {



  position: absolute !important;



  width: 1px !important;



  height: 1px !important;



  margin: -1px !important;



  overflow: hidden !important;



  clip: rect(0 0 0 0) !important;



  clip-path: inset(50%) !important;



  white-space: nowrap !important;



}







.bbd-shape-icon {



  width: 32px;



  height: 32px;



  display: block;



  border-color: currentColor;



}







.bbd-shape-icon.is-rect,



.bbd-shape-icon.is-rounded,



.bbd-shape-icon.is-circle,



.bbd-shape-icon.is-ellipse {



  background: rgba(255, 75, 0, .08);



}







.bbd-shape-icon.is-line {



  width: 38px;



}







.bbd-shape-icon.is-star,



.bbd-shape-icon.is-arrow {



  font-size: 26px;



}







.bbd-graphic-favorite {



  position: absolute;



  top: 4px;



  right: 4px;



  z-index: 2;



  width: 24px;



  min-width: 24px;



  height: 24px;



  min-height: 24px;



  display: grid;



  place-items: center;



  border: 1px solid rgba(15, 23, 42, .08);



  border-radius: 999px;



  background: rgba(255, 255, 255, .92);



  color: var(--bbd-color-accent-dark, #d63f00);



  font-size: 14px;



  font-weight: 900;



  line-height: 1;



  opacity: 0;



  transform: scale(.9);



  cursor: pointer;



  transition: opacity var(--bbd-transition-fast, 120ms ease), transform var(--bbd-transition-fast, 120ms ease), background var(--bbd-transition-fast, 120ms ease);



}







.bbd-clipart-card:hover .bbd-graphic-favorite,



.bbd-clipart-card:focus-within .bbd-graphic-favorite,



.bbd-shape-grid button:hover .bbd-graphic-favorite,



.bbd-shape-grid button:focus-within .bbd-graphic-favorite,



.bbd-shape-grid [data-bbd-shape]:hover .bbd-graphic-favorite,



.bbd-shape-grid [data-bbd-shape]:focus-within .bbd-graphic-favorite,



.bbd-clipart-card.is-favorite .bbd-graphic-favorite,



.bbd-shape-grid button.is-favorite .bbd-graphic-favorite,



.bbd-shape-grid [data-bbd-shape].is-favorite .bbd-graphic-favorite {



  opacity: 1;



  transform: scale(1);



}







.bbd-quick-style-strip {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



  margin: 14px 0 10px;



  padding: 10px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface-muted, #f5f6f8);



}







.bbd-style-chip,



.bbd-stroke-stepper,



.bbd-stroke-dash,



.bbd-style-mini-actions button,



.bbd-stroke-presets button {



  min-height: 38px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  background: var(--bbd-color-surface, #fff);



  color: var(--bbd-color-text-primary, #171717);



}







.bbd-style-chip {



  min-width: 0;



  display: grid;



  grid-template-columns: 18px 20px minmax(0, 1fr);



  grid-template-rows: auto auto;



  align-items: center;



  gap: 1px 6px;



  padding: 5px 7px;



  cursor: pointer;



}







.bbd-style-icon {



  grid-row: 1 / 3;



  width: 16px;



  height: 16px;



  border: 2px solid currentColor;



}







.bbd-style-icon.is-fill {



  background: currentColor;



}







.bbd-style-icon.is-stroke {



  background: transparent;



}







.bbd-style-chip i {



  grid-row: 1 / 3;



  width: 20px;



  height: 20px;



  border: 1px solid rgba(15, 23, 42, .18);



  border-radius: 5px;



  background: #ff4b00;



}







.bbd-style-chip strong,



.bbd-style-chip small {



  min-width: 0;



  overflow: hidden;



  line-height: 1.05;



  text-align: left;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-style-chip strong {



  font-size: 11px;



  font-weight: 850;



}







.bbd-style-chip small {



  color: var(--bbd-color-text-muted, #616978);



  font-size: 10px;



  font-weight: 750;



}







.bbd-stroke-stepper {



  display: grid;



  grid-template-columns: 34px minmax(0, 1fr) 34px;



  align-items: center;



  overflow: hidden;



}







.bbd-stroke-stepper button {



  height: 100%;



  border: 0;



  background: transparent;



  color: var(--bbd-color-text-primary, #171717);



  font-size: 17px;



  font-weight: 900;



  cursor: pointer;



}







.bbd-stroke-stepper output {



  color: var(--bbd-color-text-secondary, #384152);



  font-size: 12px;



  font-weight: 850;



  text-align: center;



}







.bbd-stroke-presets,



.bbd-style-mini-actions {



  display: flex;



  gap: 5px;



}







.bbd-stroke-presets {



  grid-column: 1 / -1;



  overflow-x: auto;



  scrollbar-width: none;



}







.bbd-stroke-presets::-webkit-scrollbar {



  display: none;



}







.bbd-stroke-presets button {



  flex: 1 0 32px;



  padding: 0 4px;



  font-size: 11px;



  font-weight: 850;



  cursor: pointer;



}







.bbd-stroke-dash {



  width: 100%;



  padding: 0 8px;



  font-size: 12px;



  font-weight: 800;



}







.bbd-style-mini-actions {



  justify-content: stretch;



}







.bbd-style-mini-actions button {



  flex: 1 1 0;



  min-width: 34px;



  padding: 0 5px;



  font-size: 12px;



  font-weight: 900;



  cursor: pointer;



}







.bbd-native-style-fallback {



  position: absolute !important;



  width: 1px !important;



  height: 1px !important;



  overflow: hidden !important;



  clip: rect(0 0 0 0) !important;



  clip-path: inset(50%) !important;



}







.bbd-color-popover {



  position: absolute;



  z-index: calc(var(--bbd-dialog-z, 1400) - 1);



  width: 260px;



  display: grid;



  gap: 10px;



  padding: 12px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface, #fff);



  box-shadow: var(--bbd-shadow-lg, 0 22px 60px rgba(15,23,42,.18));



  animation: bbd-pop-in var(--bbd-transition-fast, 120ms ease);



}







.bbd-color-popover__title,



.bbd-color-popover__actions {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 8px;



}







.bbd-color-popover__title strong,



.bbd-color-popover__section span,



.bbd-color-hex span {



  color: var(--bbd-color-text-secondary, #384152);



  font-size: 11px;



  font-weight: 850;



}







.bbd-color-popover__title button,



.bbd-color-popover__actions button {



  min-height: 34px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  background: #fff;



  color: var(--bbd-color-text-primary, #171717);



  font-weight: 850;



  cursor: pointer;



}







.bbd-color-popover__actions button:last-child {



  border-color: var(--bbd-color-accent, #ff4b00);



  background: var(--bbd-color-accent, #ff4b00);



  color: #fff;



}







.bbd-color-popover__section {



  display: grid;



  gap: 6px;



}







.bbd-color-swatches {



  display: grid;



  grid-template-columns: repeat(6, 32px);



  gap: 6px;



}







.bbd-color-swatches button {



  width: 32px;



  height: 32px;



  border: 1px solid rgba(15, 23, 42, .16);



  border-radius: 7px;



  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .68);



  cursor: pointer;



}







.bbd-color-hex {



  display: grid;



  gap: 5px;



}







.bbd-color-hex input {



  width: 100%;



  min-height: 38px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  padding: 0 9px;



  font: inherit;



  font-weight: 800;



  text-transform: uppercase;



}







@keyframes bbd-pop-in {



  from {



    opacity: 0;



    transform: scale(.98) translateY(-3px);



  }



  to {



    opacity: 1;



    transform: scale(1) translateY(0);



  }



}







.bbd-graphic-empty {



  display: grid;



  place-items: center;



  gap: 8px;



  margin-top: 12px;



  padding: 22px 14px;



  border: 1px dashed var(--bbd-color-border-strong, #c8ced8);



  border-radius: var(--bbd-radius-md, 8px);



  background: var(--bbd-color-surface-muted, #f5f6f8);



  color: var(--bbd-color-text-secondary, #384152);



  text-align: center;



}







.bbd-graphic-empty[hidden] {



  display: none !important;



}







.bbd-graphic-empty > span {



  width: 34px;



  height: 34px;



  border: 2px solid var(--bbd-color-accent, #ff4b00);



  border-radius: 10px;



  background:



    linear-gradient(90deg, transparent 46%, var(--bbd-color-accent, #ff4b00) 46% 54%, transparent 54%),



    linear-gradient(transparent 46%, var(--bbd-color-accent, #ff4b00) 46% 54%, transparent 54%);



  opacity: .82;



}







.bbd-graphic-empty strong {



  font-size: 13px;



  font-weight: 900;



}







.bbd-graphic-empty p {



  max-width: 260px;



  margin: 0;



  color: var(--bbd-color-text-muted, #616978);



  font-size: 12px;



  line-height: 1.4;



}







.bbd-graphic-empty div {



  display: flex;



  gap: 7px;



  flex-wrap: wrap;



  justify-content: center;



}







.bbd-graphic-empty button {



  min-height: 34px;



  padding: 0 10px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  background: #fff;



  color: var(--bbd-color-text-primary, #171717);



  font-size: 12px;



  font-weight: 800;



  cursor: pointer;



}







.bbd-canvas-shell.is-graphic-dragover {



  outline: 2px solid var(--bbd-color-accent, #ff4b00);



  outline-offset: -10px;



  background:



    linear-gradient(rgba(255, 75, 0, .08), rgba(255, 75, 0, .08)),



    #e9edf2;



}







.bbd-background-mode-tabs {



  display: grid;



  grid-template-columns: repeat(5, minmax(0, 1fr));



  gap: 6px;



  margin: 0 0 10px;



}







.bbd-background-mode-tabs button {



  min-width: 0;



  min-height: 42px;



  padding: 0 5px;



  overflow: hidden;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-sm, 6px);



  background: #fff;



  color: var(--bbd-color-text-secondary, #384152);



  font-size: 10px;



  font-weight: 850;



  text-overflow: ellipsis;



  white-space: nowrap;



  cursor: pointer;



}







.bbd-background-mode-tabs button:hover,



.bbd-background-mode-tabs button:focus-visible,



.bbd-background-mode-tabs button.is-active {



  border-color: var(--bbd-color-accent, #ff4b00);



  background: var(--bbd-color-accent-soft, #fff1e8);



  color: var(--bbd-color-accent-dark, #d63f00);



}







.bbd-upload-panel-v2 .bbd-upload-dropzone-compact {



  min-height: 118px;



  border-radius: var(--bbd-radius-md, 8px);



  background:



    linear-gradient(180deg, var(--bbd-color-surface, #fff), var(--bbd-color-surface-muted, #f5f6f8));



}







.bbd-upload-panel-v2 input[type="file"] {



  position: absolute !important;



  width: 1px !important;



  height: 1px !important;



  overflow: hidden !important;



  clip: rect(0 0 0 0) !important;



  clip-path: inset(50%) !important;



}







.bbd-scroll-tabs {



  display: flex;



  gap: 6px;



  overflow-x: auto;



  scrollbar-width: none;



}







.bbd-upload-row {



  border-radius: var(--bbd-radius-md, 8px);



}







.bbd-upload-row.is-uploading progress {



  accent-color: var(--bbd-color-info, #1d4ed8);



}







.bbd-upload-row.is-complete {



  border-color: rgba(15, 138, 101, .28);



  background: #f2fbf6;



}







.bbd-save-state[data-state="retrying"] .bbd-save-dot {



  background: var(--bbd-color-warning, #b7791f);



  animation: bbd-pulse 1s infinite;



}







.bbd-save-state[data-state="auth"] .bbd-save-dot {



  background: var(--bbd-color-danger, #b42318);



  box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);



}







@media (min-width: 1280px) {



  .bbd-clipart-grid,



  .bbd-graphic-grid,



  .bbd-shape-grid {



    grid-template-columns: repeat(5, var(--bbd-graphic-cell));



  }



}







@media (min-width: 1024px) {



  .bbd-panel {



    position: relative;



  }







  .bbd-panel-edge-toggle {



    position: absolute;



    top: 50%;



    right: -42px;



    z-index: 140;



    width: 42px;



    min-width: 42px;



    height: 48px;



    min-height: 48px;



    border: 1px solid var(--bbd-color-border, #dfe3ea);



    border-left: 0;



    border-radius: 0 var(--bbd-radius-md, 8px) var(--bbd-radius-md, 8px) 0;



    background: var(--bbd-color-surface, #fff);



    box-shadow: 8px 8px 22px rgba(15, 23, 42, .14);



    transform: translateY(-50%);



  }







  .bbd-app.is-panel-collapsed .bbd-panel {



    overflow: visible;



  }







  .bbd-app.is-panel-collapsed .bbd-panel-edge-toggle {



    right: -42px;



  }







  .bbd-panel-edge-toggle:hover,



  .bbd-panel-edge-toggle:focus-visible {



    border-color: rgba(255, 75, 0, .42);



    color: var(--bbd-color-accent-dark, #d63f00);



  }



}







@media (max-width: 1023px) {



  .bbd-clipart-grid,



  .bbd-graphic-grid,



  .bbd-shape-grid {



    grid-template-columns: repeat(4, var(--bbd-graphic-cell));



  }







  .bbd-background-mode-tabs {



    grid-template-columns: repeat(3, minmax(0, 1fr));



  }



}







@media (max-width: 760px) {



  .bbd-brand-slot {



    max-width: 82px;



    height: 30px;



    padding-inline: 7px;



    font-size: 11px;



  }







  .bbd-brand-slot img {



    max-width: 76px;



    height: 20px;



  }







  .bbd-graphic-category-rail {



    grid-auto-columns: minmax(54px, 66px);



  }







  .bbd-graphic-category-chip {



    min-height: 50px;



  }







  .bbd-clipart-grid,



  .bbd-graphic-grid,



  .bbd-shape-grid {



    grid-template-columns: repeat(3, minmax(0, 1fr));



  }







  .bbd-clipart-card,



  .bbd-shape-grid button,



  .bbd-shape-grid [data-bbd-shape] {



    min-height: 56px;



  }







  .bbd-graphic-favorite {



    opacity: 1;



  }







  .bbd-quick-style-strip {



    grid-template-columns: 1fr 1fr;



    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);



  }







  .bbd-color-popover.is-mobile-sheet {



    position: fixed;



    right: 0;



    bottom: 0;



    left: var(--bbd-rail-width, 78px);



    z-index: var(--bbd-dialog-z, 1400);



    width: auto;



    max-height: min(72vh, 540px);



    overflow: auto;



    border-radius: 16px 16px 0 0;



    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);



  }







  .bbd-color-swatches {



    grid-template-columns: repeat(6, minmax(36px, 1fr));



  }







  .bbd-color-swatches button,



  .bbd-color-popover__actions button,



  .bbd-color-popover__title button {



    min-height: 44px;



  }







  .bbd-background-mode-tabs {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-graphic-category-chip,



  .bbd-clipart-card,



  .bbd-shape-grid button,



  .bbd-shape-grid [data-bbd-shape],



  .bbd-style-chip,



  .bbd-style-mini-actions button,



  .bbd-stroke-stepper button,



  .bbd-stroke-presets button,



  .bbd-graphic-favorite {



    transition: none;



  }







  .bbd-color-popover {



    animation: none;



  }



}







/* v0.15.1 workspace intelligence and compact editor UX */



.bbd-brand-title-block {



  display: grid;



  min-width: 0;



  gap: 2px;



}







.bbd-brand-title-block strong,



.bbd-topbar__product {



  min-width: 0;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-brand-slot {



  flex: 0 0 auto;



}







.bbd-brand-slot img {



  display: block;



  width: auto;



  max-width: 132px;



  object-fit: contain;



}







.bbd-app.is-logo-only-title .bbd-brand-slot {



  min-width: 34px;



}







.bbd-topbar-panel-toggle {



  display: none;



}







.bbd-panel-resize-handle,



.bbd-inspector-resize-handle {



  position: absolute;



  top: 0;



  bottom: 0;



  z-index: 120;



  width: 10px;



  cursor: col-resize;



  touch-action: none;



}







.bbd-panel-resize-handle {



  right: -5px;



}







.bbd-inspector-resize-handle {



  left: -5px;



}







.bbd-panel-resize-handle::after,



.bbd-inspector-resize-handle::after {



  position: absolute;



  top: 50%;



  left: 50%;



  width: 3px;



  height: 46px;



  border-radius: 999px;



  background: rgba(15, 23, 42, .18);



  content: "";



  transform: translate(-50%, -50%);



}







.bbd-panel-resize-handle:focus-visible::after,



.bbd-panel-resize-handle:hover::after,



.bbd-inspector-resize-handle:focus-visible::after,



.bbd-inspector-resize-handle:hover::after {



  background: var(--bbd-color-accent, #ff4b00);



}







.bbd-inspector-edge-toggle {



  display: none;



}







@media (min-width: 1024px) {



  .bbd-inspector-edge-toggle {



    position: absolute;



    top: 50%;



    right: 10px;



    z-index: 145;



    display: grid;



    place-items: center;



    width: 42px;



    min-width: 42px;



    height: 48px;



    min-height: 48px;



    border: 1px solid var(--bbd-color-border, #dfe3ea);



    border-right: 0;



    border-radius: var(--bbd-radius-md, 8px) 0 0 var(--bbd-radius-md, 8px);



    background: var(--bbd-color-surface, #fff);



    color: var(--bbd-color-text, #111827);



    box-shadow: -8px 8px 22px rgba(15, 23, 42, .14);



    transform: translateY(-50%);



  }







  .bbd-app:not(.is-inspector-collapsed) .bbd-inspector-edge-toggle {



    right: calc(var(--bbd-inspector-width, 304px) - 1px);



  }







  .bbd-inspector-edge-toggle:hover,



  .bbd-inspector-edge-toggle:focus-visible {



    border-color: rgba(255, 75, 0, .42);



    color: var(--bbd-color-accent-dark, #d63f00);



  }



}







.bbd-panel-has-sticky-tools .bbd-sticky-panel-tool,



.bbd-category-chip-row {



  position: sticky;



  top: 0;



  z-index: 40;



  background: var(--bbd-color-surface, #fff);



}







.bbd-sticky-panel-tool {



  padding-block: 4px 8px;



  box-shadow: 0 8px 12px rgba(255, 255, 255, .92);



}







.bbd-category-chip-row,



.bbd-text-preset-categories {



  display: flex;



  gap: 6px;



  overflow-x: auto;



  padding: 4px 0 8px;



  scrollbar-width: thin;



}







.bbd-category-chip-row button,



.bbd-text-preset-categories button {



  flex: 0 0 auto;



  min-height: 32px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: 999px;



  background: var(--bbd-color-surface, #fff);



  padding: 5px 10px;



  color: var(--bbd-color-text-muted, #5f6673);



  font-size: 12px;



  font-weight: 700;



}







.bbd-category-chip-row button.is-active,



.bbd-text-preset-categories button.is-active {



  border-color: rgba(255, 75, 0, .38);



  background: #fff4ef;



  color: var(--bbd-color-accent-dark, #d63f00);



}







.bbd-panel-subtitle {



  margin: 12px 0 8px;



  font-size: 13px;



  font-weight: 800;



}







.bbd-quick-text-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



}







.bbd-text-action-card {



  min-height: 44px;



  border-radius: var(--bbd-radius-md, 8px);



  padding: 7px 8px;



}







.bbd-text-action-card > span {



  width: 28px;



  height: 28px;



  border-radius: 8px;



}







.bbd-text-action-card small {



  display: none;



}







.bbd-visual-preset-card {



  position: relative;



  display: grid;



  grid-template-columns: 54px minmax(0, 1fr);



  grid-template-rows: minmax(0, 1fr) auto;



  min-height: 76px;



  border-radius: var(--bbd-radius-md, 8px);



  padding-right: 34px;



}







.bbd-preset-preview {



  position: relative;



  grid-row: 1 / span 2;



  display: grid;



  place-items: center;



  width: 46px;



  height: 54px;



  border-radius: 8px;



  background: linear-gradient(135deg, #fff7ed, #eef6ff);



  color: var(--bbd-preset-accent, #ff4b00);



  font-family: var(--bbd-preset-font, Arial), Arial, sans-serif;



  font-size: 18px;



  font-weight: 900;



}







.bbd-preset-preview i,



.bbd-preset-preview em {



  position: absolute;



  display: block;



  border-radius: 999px;



  background: currentColor;



  opacity: .18;



}







.bbd-preset-preview i {



  width: 18px;



  height: 18px;



  transform: translate(14px, -14px);



}







.bbd-preset-preview em {



  width: 26px;



  height: 4px;



  transform: translate(-8px, 16px);



}







.bbd-preset-favorite {



  position: absolute;



  top: 8px;



  right: 8px;



  display: grid;



  place-items: center;



  width: 24px;



  height: 24px;



  border-radius: 999px;



  color: var(--bbd-color-accent-dark, #d63f00);



}







.bbd-preset-favorite:hover,



.bbd-preset-favorite:focus-visible {



  background: #fff4ef;



  outline: 2px solid rgba(255, 75, 0, .24);



}







.bbd-text-memory {



  display: grid;



  gap: 8px;



  margin: 8px 0 12px;



}







.bbd-text-memory > div {



  display: grid;



  gap: 6px;



}







.bbd-text-memory strong {



  font-size: 12px;



}







.bbd-text-memory div div {



  display: flex;



  gap: 6px;



  overflow-x: auto;



}







.bbd-text-memory button {



  flex: 0 0 auto;



  min-height: 30px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: 999px;



  background: #fff;



  padding: 4px 9px;



  font-size: 12px;



}







.bbd-text-memory p {



  margin: 0;



  color: var(--bbd-color-text-muted, #667085);



  font-size: 12px;



}







.bbd-inspector-clean .bbd-diagnostics-section {



  border-style: dashed;



}







.bbd-design-health {



  display: grid;



  gap: 7px;



  margin-bottom: 10px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: var(--bbd-radius-md, 8px);



  background: #f8fafc;



  padding: 10px;



}







.bbd-design-health[data-level="ready"],



.bbd-design-health[data-level="good"] {



  border-color: rgba(15, 138, 101, .24);



  background: #f3fbf6;



}







.bbd-design-health[data-level="review"] {



  border-color: rgba(183, 121, 31, .28);



  background: #fff8e7;



}







.bbd-design-health[data-level="critical"] {



  border-color: rgba(180, 35, 24, .28);



  background: #fff1f0;



}







.bbd-design-health strong,



.bbd-design-health span {



  font-size: 12px;



}







.bbd-design-health ul {



  display: grid;



  gap: 4px;



  margin: 0;



  padding: 0;



  list-style: none;



}







.bbd-design-health li {



  display: flex;



  justify-content: space-between;



  gap: 8px;



  font-size: 12px;



}







.bbd-quick-personalizer .bbd-personalizer-fields {



  display: grid;



  gap: 8px;



}







.bbd-personalizer-field {



  display: grid;



  grid-template-columns: minmax(72px, .8fr) minmax(0, 1fr) auto;



  align-items: center;



  gap: 6px;



  font-size: 12px;



}







.bbd-personalizer-field input,



.bbd-personalizer-field textarea {



  min-width: 0;



  min-height: 34px;



}







.bbd-personalizer-field button {



  min-height: 34px;



  border: 1px solid var(--bbd-color-border, #dfe3ea);



  border-radius: 8px;



  background: #fff;



  padding-inline: 8px;



}







.bbd-distance-overlay {



  position: absolute;



  z-index: 85;



  display: flex;



  flex-wrap: wrap;



  gap: 4px;



  max-width: 280px;



  transform: translateX(-50%);



  pointer-events: none;



}







.bbd-distance-overlay span {



  border: 1px solid rgba(14, 116, 144, .2);



  border-radius: 999px;



  background: rgba(240, 253, 250, .96);



  padding: 3px 7px;



  color: #155e75;



  font-size: 11px;



  font-weight: 800;



  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);



}







.bbd-surface-chip-row {



  display: inline-flex;



  gap: 6px;



  align-items: center;



}







.bbd-surface-chip-row button {



  min-height: 28px;



  border: 1px solid rgba(15, 23, 42, .12);



  border-radius: 999px;



  background: rgba(255, 255, 255, .86);



  padding: 3px 9px;



  font-size: 11px;



  font-weight: 800;



}







.bbd-surface-chip-row button.is-active {



  border-color: rgba(255, 75, 0, .38);



  background: #fff4ef;



  color: var(--bbd-color-accent-dark, #d63f00);



}







.bbd-layer-main {



  grid-template-columns: 34px minmax(0, 1fr) auto;



}







.bbd-layer-thumb {



  display: grid;



  place-items: center;



  width: 30px;



  height: 30px;



  border: 1px solid rgba(15, 23, 42, .08);



  border-radius: 7px;



  background-color: #f4f4f5;



  background-position: center;



  background-size: cover;



}







.bbd-layer-thumb.has-image-thumb .bbd-layer-kind {



  opacity: 0;



}







.bbd-layer-text {



  display: grid;



  min-width: 0;



  gap: 2px;



}







.bbd-layer-meta {



  overflow: hidden;



  color: var(--bbd-color-text-muted, #667085);



  font-size: 11px;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-layer-warning {



  display: grid;



  place-items: center;



  width: 18px;



  height: 18px;



  border-radius: 999px;



  background: #fff4df;



  color: #9a5b00;



  font-size: 11px;



  font-weight: 900;



}







.bbd-layer-row.has-warning {



  border-color: rgba(183, 121, 31, .32);



}







.bbd-context-menu__title {



  padding: 8px 10px 5px;



  color: var(--bbd-color-text-muted, #667085);



  font-size: 12px;



  font-weight: 800;



}







@media (max-width: 1023px) {



  .bbd-panel-resize-handle,



  .bbd-inspector-resize-handle,



  .bbd-inspector-edge-toggle {



    display: none;



  }



}







@media (max-width: 760px) {



  .bbd-quick-text-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .bbd-visual-preset-card {



    grid-template-columns: 48px minmax(0, 1fr);



    min-height: 72px;



  }







  .bbd-personalizer-field {



    grid-template-columns: 1fr;



  }



}







/* v0.15.2 Creative Workspace Visual Redesign */



.bbd-app.bbd-creative-workspace {



  --bbd-canvas-background: #e8ebef;



  --bbd-canvas-surface: #ffffff;



  --bbd-panel-background: #f7f8fa;



  --bbd-panel-elevated: #ffffff;



  --bbd-panel-muted: #eef1f5;



  --bbd-sidebar-background: #202124;



  --bbd-sidebar-selected: rgba(255, 255, 255, .12);



  --bbd-sidebar-hover: rgba(255, 255, 255, .08);



  --bbd-text-primary: #17191f;



  --bbd-text-secondary: #525866;



  --bbd-text-muted: #7b8290;



  --bbd-accent: #ff5a1f;



  --bbd-accent-hover: #e64712;



  --bbd-accent-soft: #fff0e8;



  --bbd-border-subtle: rgba(30, 33, 39, .08);



  --bbd-border-interactive: rgba(255, 90, 31, .42);



  --bbd-success: #0f8a65;



  --bbd-warning: #b7791f;



  --bbd-danger: #b42318;



  --bbd-info: #0e7490;



  --bbd-focus-ring: 0 0 0 3px rgba(255, 90, 31, .24);



  --bbd-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);



  --bbd-shadow-md: 0 14px 34px rgba(15, 23, 42, .12);



  --bbd-shadow-floating: 0 18px 46px rgba(15, 23, 42, .18);



  --bbd-radius-sm: 6px;



  --bbd-radius-md: 8px;



  --bbd-radius-lg: 12px;



  --bbd-spacing-1: 4px;



  --bbd-spacing-2: 8px;



  --bbd-spacing-3: 12px;



  --bbd-spacing-4: 16px;



  --bbd-spacing-5: 20px;



  --bbd-spacing-6: 24px;



  --bbd-spacing-7: 32px;



  --bbd-spacing-8: 40px;



  --bbd-transition-fast: 120ms ease;



  --bbd-transition-normal: 180ms ease;



  --bbd-color-surface: var(--bbd-panel-elevated);



  --bbd-color-surface-muted: var(--bbd-panel-background);



  --bbd-color-canvas-workspace: var(--bbd-canvas-background);



  --bbd-color-tool-rail: var(--bbd-sidebar-background);



  --bbd-color-text: var(--bbd-text-primary);



  --bbd-color-text-muted: var(--bbd-text-muted);



  --bbd-color-border: var(--bbd-border-subtle);



  --bbd-color-accent: var(--bbd-accent);



  --bbd-color-accent-dark: var(--bbd-accent-hover);



  --bbd-line: var(--bbd-border-subtle);



  --bbd-bg: var(--bbd-canvas-background);



  --bbd-panel: var(--bbd-panel-background);



  --bbd-rail-width: 78px;



  color: var(--bbd-text-primary);



  background: var(--bbd-canvas-background);



}







.bbd-creative-workspace [hidden] {



  display: none !important;



}







.bbd-creative-workspace .bbd-topbar {



  display: grid;



  grid-template-columns: minmax(220px, .9fr) minmax(0, 2fr);



  min-height: 68px;



  padding: 10px 16px;



  border-bottom: 0;



  background: rgba(255, 255, 255, .94);



  box-shadow: var(--bbd-shadow-sm);



  backdrop-filter: blur(12px);



}







.bbd-creative-workspace .bbd-topbar__left {



  min-width: 0;



  gap: 10px;



}







.bbd-creative-workspace .bbd-brand-title-block strong {



  color: var(--bbd-text-primary);



  font-size: 14px;



  font-weight: 820;



  line-height: 1.1;



}







.bbd-creative-workspace .bbd-topbar__product {



  max-width: 260px;



  color: var(--bbd-text-muted);



  font-size: 11px;



  font-weight: 650;



}







.bbd-creative-workspace .bbd-brand-slot img {



  max-height: 30px;



  filter: saturate(.96);



}







.bbd-creative-workspace .bbd-topbar__actions {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  align-items: center;



  gap: 12px;



  min-width: 0;



}







.bbd-creative-workspace .bbd-topbar__center,



.bbd-creative-workspace .bbd-topbar__right,



.bbd-creative-workspace .bbd-zoom-controls {



  display: inline-flex;



  align-items: center;



  gap: 6px;



}







.bbd-creative-workspace .bbd-topbar__center {



  justify-self: center;



  padding: 5px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-topbar__right {



  justify-self: end;



}







.bbd-creative-workspace .bbd-icon-button,



.bbd-creative-workspace .bbd-more-menu summary,



.bbd-creative-workspace .bbd-object-toolbar button {



  min-width: 36px;



  min-height: 36px;



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: transparent;



  color: var(--bbd-text-secondary);



  transition: background var(--bbd-transition-fast), color var(--bbd-transition-fast), box-shadow var(--bbd-transition-fast);



}







.bbd-creative-workspace .bbd-icon-button:hover,



.bbd-creative-workspace .bbd-icon-button:focus-visible,



.bbd-creative-workspace .bbd-more-menu summary:hover,



.bbd-creative-workspace .bbd-more-menu summary:focus-visible,



.bbd-creative-workspace .bbd-object-toolbar button:hover,



.bbd-creative-workspace .bbd-object-toolbar button:focus-visible {



  background: var(--bbd-panel-muted);



  color: var(--bbd-text-primary);



  outline: 0;



  box-shadow: var(--bbd-focus-ring);



}







.bbd-creative-workspace .bbd-zoom-controls {



  padding: 0 4px;



  border: 0;



  background: transparent;



}







.bbd-creative-workspace .bbd-zoom-controls output,



.bbd-creative-workspace .bbd-save-state,



.bbd-creative-workspace .bbd-stage-meta > *,



.bbd-creative-workspace .bbd-stage-footer > * {



  min-height: 28px;



  border: 0;



  border-radius: 999px;



  background: var(--bbd-panel-muted);



  padding: 5px 10px;



  color: var(--bbd-text-secondary);



  font-size: 11px;



  font-weight: 760;



}







.bbd-creative-workspace .bbd-save-state {



  background: #edf8f4;



  color: var(--bbd-success);



}







.bbd-creative-workspace .bbd-primary-button {



  min-height: 40px;



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-accent);



  color: #fff;



  padding: 0 16px;



  font-size: 13px;



  font-weight: 820;



  box-shadow: 0 10px 22px rgba(255, 90, 31, .24);



}







.bbd-creative-workspace .bbd-primary-button:hover,



.bbd-creative-workspace .bbd-primary-button:focus-visible {



  background: var(--bbd-accent-hover);



  box-shadow: var(--bbd-focus-ring), 0 12px 26px rgba(255, 90, 31, .24);



}







.bbd-creative-workspace .bbd-more-menu {



  position: relative;



}







.bbd-creative-workspace .bbd-more-menu summary {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 6px;



  padding: 0 10px;



  cursor: pointer;



  list-style: none;



}







.bbd-creative-workspace .bbd-more-menu summary::-webkit-details-marker {



  display: none;



}







.bbd-creative-workspace .bbd-more-menu summary strong {



  font-size: 11px;



}







.bbd-creative-workspace .bbd-more-menu__content {



  position: absolute;



  top: calc(100% + 10px);



  right: 0;



  z-index: 260;



  display: grid;



  grid-template-columns: repeat(3, 38px);



  gap: 6px;



  min-width: 142px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  padding: 8px;



  box-shadow: var(--bbd-shadow-floating);



}







.bbd-creative-workspace .bbd-more-menu:not([open]) .bbd-more-menu__content {



  display: none;



}







.bbd-creative-workspace .bbd-workspace {



  background: var(--bbd-canvas-background);



}







.bbd-creative-workspace .bbd-sidebar {



  border-right: 0;



  background:



    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%),



    var(--bbd-sidebar-background);



  padding: 10px 8px;



}







.bbd-creative-workspace .bbd-tool {



  min-height: 54px;



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: transparent;



  color: rgba(255, 255, 255, .62);



}







.bbd-creative-workspace .bbd-tool:hover {



  background: var(--bbd-sidebar-hover);



  color: #fff;



}







.bbd-creative-workspace .bbd-tool.is-active {



  background: var(--bbd-sidebar-selected);



  color: #fff;



  box-shadow: inset 3px 0 0 var(--bbd-accent), 0 8px 20px rgba(0, 0, 0, .14);



}







.bbd-creative-workspace .bbd-sidebar-active-indicator {



  width: 3px;



  border-radius: 999px;



  background: var(--bbd-accent);



  opacity: .85;



}







.bbd-creative-workspace .bbd-panel,



.bbd-creative-workspace .bbd-inspector {



  border: 0;



  background: var(--bbd-panel-background);



  box-shadow: none;



}







.bbd-creative-workspace .bbd-panel {



  padding: var(--bbd-spacing-5) var(--bbd-spacing-4);



}







.bbd-creative-workspace .bbd-panel-section {



  display: grid;



  align-content: start;



  gap: var(--bbd-spacing-4);



  padding: 0;



  border: 0;



}







.bbd-creative-workspace .bbd-panel h2,



.bbd-creative-workspace .bbd-panel-heading h2,



.bbd-creative-workspace .bbd-inspector__header strong {



  margin: 0;



  color: var(--bbd-text-primary);



  font-size: 18px;



  font-weight: 860;



  line-height: 1.15;



}







.bbd-creative-workspace .bbd-panel-intro,



.bbd-creative-workspace .bbd-panel-heading span,



.bbd-creative-workspace .bbd-help {



  margin: 0;



  color: var(--bbd-text-muted);



  font-size: 12px;



  line-height: 1.45;



}







.bbd-creative-workspace .bbd-search-field {



  margin: 0;



}







.bbd-creative-workspace .bbd-search-field input,



.bbd-creative-workspace .bbd-field input,



.bbd-creative-workspace .bbd-field select,



.bbd-creative-workspace .bbd-field textarea {



  border: 1px solid transparent;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  box-shadow: inset 0 0 0 1px var(--bbd-border-subtle);



}







.bbd-creative-workspace .bbd-search-field input:focus,



.bbd-creative-workspace .bbd-field input:focus,



.bbd-creative-workspace .bbd-field select:focus,



.bbd-creative-workspace .bbd-field textarea:focus {



  border-color: var(--bbd-border-interactive);



  outline: 0;



  box-shadow: var(--bbd-focus-ring);



}







.bbd-creative-workspace .bbd-sticky-panel-tool {



  margin-inline: calc(var(--bbd-spacing-1) * -1);



  padding: 6px var(--bbd-spacing-1) 10px;



  background: linear-gradient(180deg, var(--bbd-panel-background) 75%, rgba(247, 248, 250, 0));



  box-shadow: none;



}







.bbd-creative-workspace .bbd-text-mode-tabs,



.bbd-creative-workspace .bbd-upload-tabs,



.bbd-creative-workspace .bbd-background-mode-tabs {



  display: flex;



  gap: 6px;



  border: 0;



  border-radius: 999px;



  background: var(--bbd-panel-muted);



  padding: 4px;



}







.bbd-creative-workspace .bbd-text-mode-tabs button,



.bbd-creative-workspace .bbd-upload-tabs button,



.bbd-creative-workspace .bbd-background-mode-tabs button {



  min-height: 34px;



  border: 0;



  border-radius: 999px;



  background: transparent;



  color: var(--bbd-text-secondary);



  padding: 6px 11px;



  font-size: 12px;



  font-weight: 780;



}







.bbd-creative-workspace .bbd-text-mode-tabs button.is-active,



.bbd-creative-workspace .bbd-upload-tabs button.is-active,



.bbd-creative-workspace .bbd-background-mode-tabs button.is-active {



  background: var(--bbd-panel-elevated);



  color: var(--bbd-text-primary);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-quick-text-grid,



.bbd-creative-workspace .bbd-quick-add-row {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: var(--bbd-spacing-2);



}







.bbd-creative-workspace .bbd-action-card,



.bbd-creative-workspace .bbd-text-action-card,



.bbd-creative-workspace .bbd-template-card,



.bbd-creative-workspace .bbd-preset-chip,



.bbd-creative-workspace .bbd-component-card,



.bbd-creative-workspace .bbd-clipart-card,



.bbd-creative-workspace .bbd-background-card,



.bbd-creative-workspace .bbd-upload-card {



  border: 1px solid transparent;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  color: var(--bbd-text-primary);



  box-shadow: var(--bbd-shadow-sm);



  transition: transform var(--bbd-transition-fast), box-shadow var(--bbd-transition-fast), border-color var(--bbd-transition-fast), background var(--bbd-transition-fast);



}







.bbd-creative-workspace .bbd-action-card:hover,



.bbd-creative-workspace .bbd-text-action-card:hover,



.bbd-creative-workspace .bbd-template-card:hover,



.bbd-creative-workspace .bbd-preset-chip:hover,



.bbd-creative-workspace .bbd-component-card:hover,



.bbd-creative-workspace .bbd-clipart-card:hover,



.bbd-creative-workspace .bbd-background-card:hover,



.bbd-creative-workspace .bbd-upload-card:hover,



.bbd-creative-workspace .bbd-template-card:focus-visible,



.bbd-creative-workspace .bbd-preset-chip:focus-visible,



.bbd-creative-workspace .bbd-component-card:focus-visible,



.bbd-creative-workspace .bbd-clipart-card:focus-visible {



  border-color: var(--bbd-border-interactive);



  box-shadow: var(--bbd-shadow-md);



  outline: 0;



  transform: translateY(-1px);



}







.bbd-creative-workspace .bbd-template-grid,



.bbd-creative-workspace .bbd-preset-grid,



.bbd-creative-workspace .bbd-component-grid,



.bbd-creative-workspace .bbd-clipart-grid,



.bbd-creative-workspace .bbd-background-card-grid {



  gap: var(--bbd-spacing-3);



  margin: 0;



}







.bbd-creative-workspace .bbd-template-card,



.bbd-creative-workspace .bbd-component-card {



  position: relative;



  overflow: hidden;



  padding: 10px;



}







.bbd-creative-workspace .bbd-template-card__preview,



.bbd-creative-workspace .bbd-component-thumb,



.bbd-creative-workspace .bbd-preset-preview,



.bbd-creative-workspace .bbd-clipart-card__preview {



  border: 0;



  border-radius: var(--bbd-radius-md);



  background:



    linear-gradient(135deg, color-mix(in srgb, var(--bbd-card-accent, var(--bbd-accent)) 18%, #fff), #f2f7f5),



    var(--bbd-panel-elevated);



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);



}







.bbd-creative-workspace .bbd-visual-preset-card {



  grid-template-columns: 60px minmax(0, 1fr);



  min-height: 84px;



  padding: 10px 36px 10px 10px;



}







.bbd-creative-workspace .bbd-preset-preview {



  width: 52px;



  height: 62px;



}







.bbd-creative-workspace .bbd-preset-chip strong,



.bbd-creative-workspace .bbd-template-card strong,



.bbd-creative-workspace .bbd-component-card strong,



.bbd-creative-workspace .bbd-clipart-card strong {



  color: var(--bbd-text-primary);



  font-size: 12px;



  font-weight: 820;



}







.bbd-creative-workspace .bbd-preset-chip small,



.bbd-creative-workspace .bbd-template-card small,



.bbd-creative-workspace .bbd-component-card small,



.bbd-creative-workspace .bbd-clipart-card small {



  color: var(--bbd-text-muted);



  font-size: 10px;



  font-weight: 720;



}







.bbd-creative-workspace .bbd-template-card::after,



.bbd-creative-workspace .bbd-preset-chip::after,



.bbd-creative-workspace .bbd-component-card::after {



  content: "Ekle";



  position: absolute;



  right: 9px;



  bottom: 9px;



  opacity: 0;



  border-radius: 999px;



  background: var(--bbd-accent);



  padding: 4px 8px;



  color: #fff;



  font-size: 10px;



  font-weight: 820;



  transform: translateY(4px);



  transition: opacity var(--bbd-transition-fast), transform var(--bbd-transition-fast);



}







.bbd-creative-workspace .bbd-template-card:hover::after,



.bbd-creative-workspace .bbd-preset-chip:hover::after,



.bbd-creative-workspace .bbd-component-card:hover::after {



  opacity: 1;



  transform: translateY(0);



}







.bbd-creative-workspace .bbd-text-memory,



.bbd-creative-workspace .bbd-graphic-memory {



  gap: var(--bbd-spacing-2);



  margin: 0;



}







.bbd-creative-workspace .bbd-text-memory > div,



.bbd-creative-workspace .bbd-graphic-memory__group {



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-muted);



  padding: var(--bbd-spacing-2);



}







.bbd-creative-workspace .bbd-upload-panel-v2 {



  gap: var(--bbd-spacing-4);



}







.bbd-creative-workspace .bbd-upload-card {



  min-height: 190px;



  place-items: center;



  border: 1px dashed rgba(255, 90, 31, .42);



  background:



    radial-gradient(circle at 50% 34%, rgba(255, 90, 31, .12), transparent 42%),



    var(--bbd-panel-elevated);



  text-align: center;



}







.bbd-creative-workspace .bbd-upload-card svg {



  width: 42px;



  height: 42px;



  color: var(--bbd-accent);



}







.bbd-creative-workspace .bbd-upload-card em {



  display: inline-flex;



  align-items: center;



  min-height: 34px;



  border-radius: 999px;



  background: var(--bbd-accent);



  padding: 0 13px;



  color: #fff;



  font-style: normal;



  font-weight: 820;



}







.bbd-creative-workspace .bbd-upload-info-strip {



  border-radius: var(--bbd-radius-lg);



  background: #eef8f6;



  padding: 10px 12px;



  color: #27675f;



  font-size: 12px;



  font-weight: 720;



}







.bbd-creative-workspace .bbd-background-modules {



  display: grid;



  gap: var(--bbd-spacing-3);



}







.bbd-creative-workspace .bbd-background-color-field {



  grid-template-columns: auto 1fr;



  align-items: center;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  padding: 10px;



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-background-color-field input[type="color"],



.bbd-creative-workspace .bbd-field input[type="color"] {



  width: 38px;



  min-height: 38px;



  overflow: hidden;



  border: 0;



  border-radius: 999px;



  padding: 0;



  box-shadow: inset 0 0 0 1px var(--bbd-border-subtle);



}







.bbd-creative-workspace .bbd-background-card.is-active,



.bbd-creative-workspace .bbd-background-card[aria-pressed="true"] {



  border-color: var(--bbd-border-interactive);



  background: var(--bbd-accent-soft);



}







.bbd-creative-workspace .bbd-graphics-panel .bbd-legacy-graphic-filters {



  display: none;



}







.bbd-creative-workspace .bbd-graphic-category-rail,



.bbd-creative-workspace .bbd-text-preset-categories,



.bbd-creative-workspace .bbd-category-chip-row {



  gap: 7px;



  padding-bottom: 8px;



}







.bbd-creative-workspace .bbd-graphic-category-chip,



.bbd-creative-workspace .bbd-text-preset-categories button,



.bbd-creative-workspace .bbd-category-chip-row button {



  min-height: 32px;



  border: 0;



  border-radius: 999px;



  background: var(--bbd-panel-elevated);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-graphic-category-chip.is-active,



.bbd-creative-workspace .bbd-text-preset-categories button.is-active,



.bbd-creative-workspace .bbd-category-chip-row button.is-active {



  background: var(--bbd-accent-soft);



  color: var(--bbd-accent-hover);



}







.bbd-creative-workspace .bbd-clipart-card,



.bbd-creative-workspace .bbd-shape-grid > div {



  position: relative;



  aspect-ratio: 1;



  display: grid;



  place-items: center;



  padding: 10px;



}







.bbd-creative-workspace .bbd-clipart-card strong,



.bbd-creative-workspace .bbd-clipart-card small,



.bbd-creative-workspace .bbd-shape-label {



  position: absolute;



  left: 8px;



  right: 8px;



  bottom: 8px;



  opacity: 0;



  text-align: center;



  transform: translateY(4px);



  transition: opacity var(--bbd-transition-fast), transform var(--bbd-transition-fast);



}







.bbd-creative-workspace .bbd-clipart-card:hover strong,



.bbd-creative-workspace .bbd-clipart-card:hover small,



.bbd-creative-workspace .bbd-shape-grid > div:hover .bbd-shape-label {



  opacity: 1;



  transform: translateY(0);



}







.bbd-creative-workspace .bbd-clipart-card strong {



  bottom: 23px;



}







.bbd-creative-workspace .bbd-clipart-card small,



.bbd-creative-workspace .bbd-shape-label {



  bottom: 8px;



}







.bbd-creative-workspace .bbd-inspector {



  padding: var(--bbd-spacing-4);



  overflow: auto;



}







.bbd-creative-workspace .bbd-inspector__header {



  margin: 0 0 var(--bbd-spacing-3);



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: transparent;



  padding: 0 0 var(--bbd-spacing-2);



  box-shadow: none;



}







.bbd-creative-workspace .bbd-inspector-section {



  margin: 0 0 var(--bbd-spacing-3);



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  padding: var(--bbd-spacing-3);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-inspector-section h3 {



  color: var(--bbd-text-primary);



  font-size: 12px;



  font-weight: 840;



}







.bbd-creative-workspace .bbd-inspector-list {



  gap: 6px;



}







.bbd-creative-workspace .bbd-inspector-list div {



  grid-template-columns: minmax(0, 1fr) auto;



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-panel-muted);



  padding: 8px 9px;



}







.bbd-creative-workspace .bbd-inspector-list dt {



  color: var(--bbd-text-secondary);



}







.bbd-creative-workspace .bbd-inspector-list dd {



  color: var(--bbd-text-primary);



}







.bbd-creative-workspace .bbd-inspector-advanced {



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-muted);



  padding: 0;



}







.bbd-creative-workspace .bbd-inspector-advanced summary {



  min-height: 38px;



  border-radius: var(--bbd-radius-lg);



  padding: 9px 10px;



}







.bbd-creative-workspace .bbd-preflight-summary,



.bbd-creative-workspace .bbd-design-health {



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-muted);



  padding: 10px;



}







.bbd-creative-workspace .bbd-design-health[data-level="ready"],



.bbd-creative-workspace .bbd-design-health[data-level="good"],



.bbd-creative-workspace .bbd-preflight-summary[data-level="success"] {



  background: #edf8f4;



  color: var(--bbd-success);



}







.bbd-creative-workspace .bbd-design-health[data-level="review"],



.bbd-creative-workspace .bbd-preflight-summary[data-level="warning"] {



  background: #fff7e7;



  color: var(--bbd-warning);



}







.bbd-creative-workspace .bbd-design-health[data-level="critical"],



.bbd-creative-workspace .bbd-preflight-summary[data-level="error"] {



  background: #fff0ee;



  color: var(--bbd-danger);



}







.bbd-creative-workspace .bbd-preflight-item {



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-panel-muted);



  padding: 8px 9px;



}







.bbd-creative-workspace .bbd-diagnostics-section {



  border: 1px dashed var(--bbd-border-subtle);



  background: transparent;



}







.bbd-creative-workspace .bbd-stage-area {



  padding: var(--bbd-spacing-4);



  background:



    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .72), transparent 34%),



    var(--bbd-canvas-background);



}







.bbd-creative-workspace .bbd-canvas-shell {



  border-radius: var(--bbd-radius-lg);



  background-color: var(--bbd-canvas-background);



}







.bbd-creative-workspace .bbd-canvas-container,



.bbd-creative-workspace .bbd-canvas-shell canvas {



  filter: drop-shadow(0 20px 42px rgba(15, 23, 42, .20));



}







.bbd-creative-workspace .bbd-stage-meta,



.bbd-creative-workspace .bbd-stage-footer {



  min-height: 36px;



  gap: 7px;



}







.bbd-creative-workspace .bbd-object-toolbar {



  border: 1px solid var(--bbd-border-subtle);



  border-radius: var(--bbd-radius-lg);



  background: rgba(255, 255, 255, .94);



  padding: 5px;



  box-shadow: var(--bbd-shadow-md);



  backdrop-filter: blur(10px);



}







.bbd-creative-workspace .bbd-object-toolbar button.is-danger {



  color: var(--bbd-danger);



}







.bbd-creative-workspace .bbd-layer-row {



  min-height: 48px;



  border: 1px solid transparent;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-elevated);



  box-shadow: var(--bbd-shadow-sm);



}







.bbd-creative-workspace .bbd-layer-row:hover {



  border-color: var(--bbd-border-subtle);



  box-shadow: var(--bbd-shadow-md);



}







.bbd-creative-workspace .bbd-layer-row.is-selected {



  border-color: var(--bbd-border-interactive);



  background: var(--bbd-accent-soft);



  box-shadow: var(--bbd-focus-ring);



}







.bbd-creative-workspace .bbd-layer-thumb {



  border: 0;



  border-radius: var(--bbd-radius-md);



  background-color: var(--bbd-panel-muted);



}







.bbd-creative-workspace .bbd-empty-state,



.bbd-creative-workspace .bbd-graphic-empty,



.bbd-creative-workspace .bbd-layer-empty,



.bbd-creative-workspace .bbd-command-empty {



  border: 0;



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-muted);



  padding: var(--bbd-spacing-4);



  color: var(--bbd-text-secondary);



  text-align: center;



}







@media (max-width: 1180px) {



  .bbd-creative-workspace .bbd-topbar {



    grid-template-columns: minmax(170px, .75fr) minmax(0, 1.6fr);



  }







  .bbd-creative-workspace .bbd-more-menu summary strong,



  .bbd-creative-workspace .bbd-save-state-text,



  .bbd-creative-workspace #bbd-save-state-text {



    max-width: 96px;



    overflow: hidden;



    text-overflow: ellipsis;



    white-space: nowrap;



  }



}







@media (max-width: 760px) {



  .bbd-app.bbd-creative-workspace {



    --bbd-rail-width: 62px;



  }







  .bbd-creative-workspace .bbd-topbar {



    grid-template-columns: minmax(0, 1fr) auto;



    min-height: 58px;



    padding: 8px 10px;



  }







  .bbd-creative-workspace .bbd-brand-title-block strong {



    font-size: 13px;



  }







  .bbd-creative-workspace .bbd-topbar__product,



  .bbd-creative-workspace .bbd-more-menu summary strong,



  .bbd-creative-workspace .bbd-save-state,



  .bbd-creative-workspace .bbd-zoom-controls output {



    display: none;



  }







  .bbd-creative-workspace .bbd-topbar__actions {



    display: flex;



    gap: 6px;



  }







  .bbd-creative-workspace .bbd-topbar__center {



    padding: 3px;



    box-shadow: none;



  }







  .bbd-creative-workspace .bbd-topbar__center #bbd-undo,



  .bbd-creative-workspace .bbd-topbar__center #bbd-redo,



  .bbd-creative-workspace .bbd-topbar__center #bbd-zoom-out,



  .bbd-creative-workspace .bbd-topbar__center #bbd-zoom-in {



    display: none;



  }







  .bbd-creative-workspace .bbd-primary-button {



    min-width: 68px;



    padding-inline: 12px;



  }







  .bbd-creative-workspace .bbd-panel,



  .bbd-creative-workspace .bbd-inspector {



    padding: var(--bbd-spacing-4);



  }







  .bbd-creative-workspace .bbd-template-grid,



  .bbd-creative-workspace .bbd-preset-grid,



  .bbd-creative-workspace .bbd-component-grid,



  .bbd-creative-workspace .bbd-clipart-grid,



  .bbd-creative-workspace .bbd-background-card-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .bbd-creative-workspace .bbd-upload-card {



    min-height: 160px;



  }







  .bbd-creative-workspace .bbd-stage-area {



    padding: var(--bbd-spacing-2);



  }



}







@media (max-width: 430px) {



  .bbd-creative-workspace .bbd-template-grid,



  .bbd-creative-workspace .bbd-preset-grid,



  .bbd-creative-workspace .bbd-component-grid,



  .bbd-creative-workspace .bbd-clipart-grid,



  .bbd-creative-workspace .bbd-background-card-grid {



    grid-template-columns: 1fr;



  }







  .bbd-creative-workspace .bbd-topbar__left {



    gap: 6px;



  }







  .bbd-creative-workspace .bbd-brand-slot img {



    max-width: 86px;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-creative-workspace *,



  .bbd-creative-workspace *::before,



  .bbd-creative-workspace *::after {



    transition-duration: .01ms !important;



    animation-duration: .01ms !important;



  }



}







/* v0.16.0 Product-first workspace foundation */



.bbd-product-first-workspace {



  --bbd-rail-width: 72px;



  --bbd-panel-width: clamp(330px, 24vw, 360px);



}







.bbd-product-first-workspace .bbd-sidebar {



  padding: 8px 7px;



}







.bbd-product-first-workspace .bbd-tool {



  min-height: 52px;



  gap: 4px;



}







.bbd-product-first-workspace .bbd-tool.is-active {



  background: rgba(255, 255, 255, .18);



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);



}







.bbd-product-first-workspace .bbd-sidebar-active-indicator {



  display: none;



}







.bbd-product-first-workspace .bbd-topbar__center {



  gap: 7px;



}







.bbd-workspace-mode-tabs,



.bbd-context-route-toolbar,



.bbd-ai-source-options,



.bbd-ai-placement-options,



.bbd-product-surface-list {



  display: flex;



  flex-wrap: wrap;



  gap: 6px;



}







.bbd-workspace-mode-tabs {



  flex-wrap: nowrap;



  border-radius: 999px;



  background: rgba(15, 23, 42, .06);



  padding: 4px;



}







.bbd-workspace-mode-tabs button,



.bbd-context-route-toolbar button,



.bbd-ai-source-options button,



.bbd-ai-placement-options button,



.bbd-product-surface-list button {



  min-height: 36px;



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-panel-muted, #f2f4f7);



  color: var(--bbd-text-primary, #171717);



  padding: 8px 10px;



  font-size: 12px;



  font-weight: 760;



}







.bbd-workspace-mode-tabs button.is-active,



.bbd-context-route-toolbar button.is-active,



.bbd-ai-source-options button.is-active,



.bbd-ai-placement-options button.is-active,



.bbd-product-surface-list button.is-active {



  background: var(--bbd-accent-soft, #fff1e8);



  color: var(--bbd-accent-dark, #d63f00);



  box-shadow: inset 0 0 0 1px rgba(255, 75, 0, .24);



}







.bbd-context-route-toolbar {



  min-width: min(520px, 100%);



  overflow-x: auto;



  flex-wrap: nowrap;



  scrollbar-width: thin;



}







.bbd-context-route-toolbar button {



  white-space: nowrap;



}







.bbd-product-summary {



  display: grid;



  gap: 8px;



}







.bbd-product-summary div,



.bbd-ai-result,



.bbd-context-note,



.bbd-product-preflight {



  border-radius: var(--bbd-radius-lg);



  background: var(--bbd-panel-muted, #f2f4f7);



  padding: 10px;



}







.bbd-product-summary span,



.bbd-context-note span,



.bbd-ai-result span,



.bbd-product-preflight span {



  display: block;



  color: var(--bbd-text-muted, #616978);



  font-size: 12px;



  line-height: 1.42;



}







.bbd-product-summary strong,



.bbd-context-note strong,



.bbd-ai-result strong,



.bbd-product-preflight strong {



  display: block;



  color: var(--bbd-text-primary, #171717);



  font-size: 13px;



  line-height: 1.35;



}







.bbd-product-flow-actions {



  display: grid;



  gap: 8px;



}







.bbd-product-flow-actions button,



.bbd-context-heading > button {



  min-height: 40px;



  border: 0;



  border-radius: var(--bbd-radius-md);



  background: var(--bbd-accent, #ff4b00);



  color: #fff;



  font-weight: 800;



}







.bbd-context-heading {



  align-items: start;



  display: flex;



  justify-content: space-between;



  gap: 10px;



}







.bbd-context-panel-body {



  display: grid;



  gap: 12px;



}







.bbd-context-swatches {



  display: grid;



  grid-template-columns: repeat(6, minmax(0, 1fr));



  gap: 6px;



}







.bbd-context-swatches button {



  aspect-ratio: 1;



  min-height: 36px;



  border: 2px solid #fff;



  border-radius: var(--bbd-radius-md);



  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);



}







.bbd-ai-intake {



  display: grid;



  gap: 12px;



}







.bbd-ai-intake[hidden] {



  display: none;



}







.bbd-ai-result ul {



  display: grid;



  gap: 5px;



  margin: 8px 0 0;



  padding-left: 18px;



  color: var(--bbd-text-secondary, #384152);



  font-size: 12px;



}







@media (min-width: 1025px) {



  .bbd-product-first-workspace.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr);



  }







  .bbd-product-first-workspace .bbd-stage-area {



    padding: 14px;



  }



}







/* v0.16.1 Product-first UX cleanup and shell stabilization */



.bbd-app.bbd-shell-v0161 {



  --bbd-rail-width: 72px;



  --bbd-panel-width: clamp(330px, 25vw, 360px);



  --bbd-editor-header-height: 64px;



  grid-template-rows: var(--bbd-editor-header-height) minmax(0, 1fr);



}







.bbd-shell-v0161 .bbd-legacy-inspector,



.bbd-shell-v0161 .bbd-inspector,



.bbd-shell-v0161 .bbd-inspector-edge-toggle,



.bbd-shell-v0161 .bbd-inspector-resize-handle,



.bbd-shell-v0161 #bbd-inspector-toggle,



.bbd-shell-v0161 #bbd-preview-toggle,



.bbd-shell-v0161 .bbd-object-toolbar,



.bbd-shell-v0161 .bbd-quick-style-strip,



.bbd-shell-v0161 .bbd-graphics-object-controls {



  display: none !important;



}







.bbd-shell-v0161 .bbd-topbar {



  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);



  min-height: var(--bbd-editor-header-height);



  padding: 8px 14px;



  border-bottom: 1px solid var(--bbd-border-subtle);



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-topbar__actions {



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 10px;



}







.bbd-shell-v0161 .bbd-topbar__center {



  gap: 4px;



  min-width: 0;



  padding: 0;



  border: 0;



  border-radius: 0;



  background: transparent;



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-topbar__right {



  gap: 8px;



}







.bbd-shell-v0161 .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr);



  height: calc(100dvh - var(--bbd-editor-header-height));



  overflow: hidden;



}







.bbd-shell-v0161.is-panel-collapsed .bbd-workspace,



.bbd-shell-v0161.is-panel-collapsed.is-inspector-collapsed .bbd-workspace,



.bbd-shell-v0161.is-inspector-collapsed .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr);



}







.bbd-shell-v0161:not(.is-panel-collapsed).is-inspector-collapsed .bbd-workspace {



  grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr);



}







.bbd-shell-v0161 .bbd-sidebar {



  grid-column: 1;



  display: flex;



  box-sizing: border-box;



  flex-direction: column;



  gap: 5px;



  width: var(--bbd-rail-width);



  max-width: var(--bbd-rail-width);



  overflow: hidden auto;



  padding: 8px 6px;



}







.bbd-shell-v0161 .bbd-tool {



  flex: 0 0 auto;



  min-width: 0;



  min-height: 54px;



  border-radius: 8px;



  padding: 6px 3px;



  gap: 3px;



}







.bbd-shell-v0161 .bbd-tool span {



  display: block;



  max-width: 100%;



  overflow: visible;



  color: inherit;



  font-size: 9px;



  line-height: 1.08;



  text-align: center;



  text-overflow: clip;



  white-space: normal;



}







.bbd-shell-v0161 .bbd-tool.is-active {



  background: rgba(255, 255, 255, .18);



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);



}







.bbd-shell-v0161 .bbd-tool:focus-visible {



  outline: 2px solid #fff;



  outline-offset: -3px;



  box-shadow: 0 0 0 3px rgba(255, 90, 31, .46);



}







.bbd-shell-v0161 .bbd-panel {



  grid-column: 2;



  box-sizing: border-box;



  width: var(--bbd-panel-width);



  min-width: 0;



  padding: 14px 13px;



  border-right: 1px solid var(--bbd-border-subtle);



  background: var(--bbd-panel-background);



  overflow: visible;



}







.bbd-shell-v0161 .bbd-panel-section:not([hidden]) {



  display: grid;



  align-content: start;



  gap: 12px;



  min-height: 0;



  overflow: auto;



  padding: 0 2px 16px 0;



}







.bbd-shell-v0161 .bbd-panel-heading,



.bbd-shell-v0161 .bbd-panel-heading--sticky {



  position: sticky;



  top: 0;



  z-index: 4;



  margin: 0;



  padding: 2px 0 9px;



  background: var(--bbd-panel-background);



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-panel h2,



.bbd-shell-v0161 .bbd-panel-heading h2 {



  font-size: 17px;



  line-height: 1.2;



}







.bbd-shell-v0161 .bbd-panel-edge-toggle {



  top: 50%;



  right: -40px;



  z-index: 150;



  display: grid;



  width: 40px;



  min-width: 40px;



  height: 48px;



  border: 1px solid var(--bbd-border-subtle);



  border-left: 0;



  border-radius: 0 8px 8px 0;



  background: var(--bbd-panel-elevated);



  box-shadow: 8px 4px 18px rgba(15, 23, 42, .1);



}







.bbd-shell-v0161.is-panel-collapsed .bbd-panel-edge-toggle {



  right: -40px;



  visibility: visible;



  pointer-events: auto;



}







.bbd-shell-v0161 .bbd-stage-area {



  grid-column: 3;



  display: grid;



  box-sizing: border-box;



  grid-template-columns: minmax(0, 1fr);



  grid-template-rows: auto minmax(0, 1fr);



  min-width: 0;



  min-height: 0;



  overflow: hidden;



  padding: 10px 12px 12px;



  background: #e8ebef;



}







.bbd-shell-v0161 .bbd-stage-meta {



  position: relative;



  inset: auto;



  grid-column: 1;



  grid-row: 1;



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  justify-content: flex-start;



  gap: 6px;



  min-width: 0;



  min-height: 36px;



  padding: 0 0 8px;



  pointer-events: none;



}







.bbd-shell-v0161 .bbd-stage-meta > * {



  pointer-events: auto;



}







.bbd-shell-v0161 .bbd-context-route-toolbar {



  order: 20;



  display: flex;



  flex: 1 0 100%;



  width: 100%;



  min-width: 0;



  min-height: 44px;



  justify-content: center;



  gap: 4px;



  overflow-x: auto;



  padding: 3px 0 0;



  border: 0;



  border-radius: 0;



  background: transparent;



  scrollbar-width: thin;



}







.bbd-shell-v0161 .bbd-context-route-toolbar[hidden] {



  display: none !important;



}







.bbd-shell-v0161 .bbd-context-route-toolbar button {



  flex: 0 0 auto;



  min-height: 40px;



  border-radius: 8px;



  background: rgba(255, 255, 255, .86);



  color: var(--bbd-text-secondary);



}







.bbd-shell-v0161 .bbd-context-route-toolbar button.is-active {



  background: var(--bbd-accent-soft);



  color: var(--bbd-accent-hover);



}







.bbd-shell-v0161 .bbd-context-route-toolbar button:focus-visible,



.bbd-shell-v0161 .bbd-workspace-mode-tabs button:focus-visible,



.bbd-shell-v0161 .bbd-panel-edge-toggle:focus-visible {



  outline: 0;



  box-shadow: var(--bbd-focus-ring);



}







.bbd-shell-v0161 .bbd-canvas-shell {



  grid-column: 1;



  grid-row: 2;



  display: flex;



  align-items: center;



  justify-content: center;



  min-width: 0;



  min-height: 0;



  overflow: auto;



  border: 0;



  border-radius: 0;



  background: #e8ebef;



  box-shadow: none;



  scrollbar-gutter: stable both-edges;



}







.bbd-shell-v0161 .bbd-canvas-container,



.bbd-shell-v0161 .bbd-canvas-shell canvas {



  filter: drop-shadow(0 12px 28px rgba(15, 23, 42, .15));



}







.bbd-shell-v0161 .bbd-ruler,



.bbd-shell-v0161 .bbd-busy-overlay {



  grid-row: 2;



}







.bbd-shell-v0161 .bbd-stage-footer {



  right: 12px;



  bottom: 10px;



  left: 12px;



  gap: 5px;



}







.bbd-shell-v0161 .bbd-canvas-empty {



  width: min(360px, calc(100% - 32px));



  gap: 7px;



  border: 0;



  border-radius: 8px;



  background: rgba(255, 255, 255, .9);



  padding: 12px;



  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);



  pointer-events: none;



}







.bbd-shell-v0161 .bbd-canvas-empty::after {



  content: none;



}







.bbd-shell-v0161 .bbd-canvas-empty > span {



  color: var(--bbd-text-muted);



  font-size: 12px;



  line-height: 1.4;



}







.bbd-shell-v0161 .bbd-canvas-empty div {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 7px;



  pointer-events: auto;



}







.bbd-shell-v0161 .bbd-canvas-empty button,



.bbd-shell-v0161 .bbd-canvas-empty button:first-child {



  grid-column: auto;



  min-height: 40px;



  border-radius: 7px;



}







.bbd-shell-v0161 .bbd-product-identity {



  display: grid;



  gap: 4px;



  padding: 2px 0 9px;



  border-bottom: 1px solid var(--bbd-border-subtle);



}







.bbd-shell-v0161 .bbd-product-identity strong {



  display: -webkit-box;



  overflow: hidden;



  color: var(--bbd-text-primary);



  font-size: 15px;



  line-height: 1.3;



  -webkit-box-orient: vertical;



  -webkit-line-clamp: 2;



}







.bbd-shell-v0161 .bbd-product-identity span,



.bbd-shell-v0161 .bbd-product-compact-row span {



  color: var(--bbd-text-muted);



  font-size: 12px;



}







.bbd-shell-v0161 .bbd-product-compact-row {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  min-height: 38px;



  border-bottom: 1px solid var(--bbd-border-subtle);



}







.bbd-shell-v0161 .bbd-product-compact-row strong {



  color: var(--bbd-text-secondary);



  font-size: 12px;



}







.bbd-shell-v0161 .bbd-product-flow-actions {



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 8px;



}







.bbd-shell-v0161 .bbd-product-flow-actions button {



  min-height: 42px;



  border: 1px solid transparent;



  border-radius: 8px;



  padding: 0 12px;



}







.bbd-shell-v0161 .bbd-product-flow-actions .is-secondary {



  border-color: var(--bbd-border-subtle);



  background: var(--bbd-panel-elevated);



  color: var(--bbd-text-primary);



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-product-preflight,



.bbd-shell-v0161 .bbd-context-note,



.bbd-shell-v0161 .bbd-ai-result {



  border-radius: 8px;



  padding: 10px;



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-context-heading {



  display: grid;



  grid-template-columns: 40px minmax(0, 1fr);



  align-items: center;



  justify-content: start;



}







.bbd-shell-v0161 .bbd-context-heading > button {



  width: 40px;



  min-width: 40px;



  min-height: 40px;



  border: 1px solid var(--bbd-border-subtle);



  background: var(--bbd-panel-elevated);



  color: var(--bbd-text-primary);



}







.bbd-shell-v0161 .bbd-mobile-more-actions {



  display: grid;



  gap: 8px;



}







.bbd-shell-v0161 .bbd-mobile-more-actions button {



  min-height: 48px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: 8px;



  background: var(--bbd-panel-elevated);



  color: var(--bbd-text-primary);



  text-align: left;



  padding: 0 13px;



  font-weight: 800;



}







.bbd-shell-v0161 .bbd-graphics-panel .bbd-search-field {



  position: sticky;



  top: 38px;



  z-index: 3;



  padding: 4px 0 8px;



  background: var(--bbd-panel-background);



}







.bbd-shell-v0161 .bbd-graphic-category-rail {



  display: flex;



  flex-wrap: nowrap;



  overflow-x: auto;



  gap: 6px;



  padding-bottom: 5px;



}







.bbd-shell-v0161 .bbd-graphic-category-chip {



  flex: 0 0 auto;



  min-height: 40px;



}







.bbd-shell-v0161 .bbd-clipart-grid,



.bbd-shell-v0161 .bbd-shape-grid {



  grid-auto-rows: 76px;



  gap: 8px;



}







.bbd-shell-v0161 .bbd-clipart-card,



.bbd-shell-v0161 .bbd-shape-grid > div {



  width: 100%;



  min-width: 0;



  height: 76px;



  min-height: 76px;



  aspect-ratio: auto;



  border-radius: 8px;



}







.bbd-shell-v0161 .bbd-background-mode-tabs {



  display: flex;



  flex-wrap: nowrap;



  overflow-x: auto;



  border-radius: 8px;



  padding: 3px;



}







.bbd-shell-v0161 .bbd-background-mode-tabs button {



  flex: 1 0 auto;



  min-height: 40px;



  border-radius: 7px;



}







.bbd-shell-v0161 .bbd-background-card,



.bbd-shell-v0161 .bbd-background-color-field {



  min-height: 58px;



  border-radius: 8px;



  padding: 8px;



  box-shadow: none;



}







.bbd-shell-v0161 .bbd-background-card-grid {



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



}







.bbd-shell-v0161 .bbd-background-image-note {



  border-radius: 8px;



  background: var(--bbd-panel-muted);



  padding: 12px;



  color: var(--bbd-text-secondary);



  font-size: 12px;



  line-height: 1.45;



}







@media (min-width: 1025px) {



  .bbd-shell-v0161 .bbd-sidebar,



  .bbd-shell-v0161 .bbd-panel,



  .bbd-shell-v0161 .bbd-stage-area {



    grid-row: 1;



    height: 100%;



  }



}







@media (max-width: 1366px) and (min-width: 1025px) {



  .bbd-app.bbd-shell-v0161 {



    --bbd-panel-width: 330px;



  }







  .bbd-shell-v0161 .bbd-topbar {



    grid-template-columns: minmax(190px, .72fr) minmax(0, 2.3fr);



    padding-inline: 10px;



  }







  .bbd-shell-v0161 .bbd-topbar__product {



    max-width: 190px;



  }







  .bbd-shell-v0161 .bbd-more-menu summary strong,



  .bbd-shell-v0161 #bbd-save-state-text {



    display: none;



  }



}







@media (max-width: 1024px) {



  .bbd-app.bbd-shell-v0161 {



    --bbd-rail-width: 100%;



    --bbd-panel-width: min(360px, 92vw);



  }







  .bbd-shell-v0161 .bbd-workspace,



  .bbd-shell-v0161.is-panel-collapsed .bbd-workspace,



  .bbd-shell-v0161.is-inspector-collapsed .bbd-workspace,



  .bbd-shell-v0161:not(.is-panel-collapsed).is-inspector-collapsed .bbd-workspace,



  .bbd-modal[data-layout="drawer"] .bbd-shell-v0161 .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0161 .bbd-workspace {



    grid-template-columns: minmax(0, 1fr);



    grid-template-rows: minmax(0, 1fr) 68px;



  }







  .bbd-shell-v0161 .bbd-stage-area,



  .bbd-modal[data-layout="drawer"] .bbd-shell-v0161 .bbd-stage-area,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0161 .bbd-stage-area {



    grid-column: 1;



    grid-row: 1;



    padding: 8px;



  }







  .bbd-shell-v0161 .bbd-sidebar,



  .bbd-modal[data-layout="drawer"] .bbd-shell-v0161 .bbd-sidebar,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0161 .bbd-sidebar {



    position: relative;



    inset: auto;



    grid-column: 1;



    grid-row: 2;



    z-index: 120;



    display: grid;



    grid-template-columns: repeat(6, minmax(0, 1fr));



    width: 100%;



    max-width: none;



    height: 68px;



    overflow: hidden;



    padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));



    border-top: 1px solid rgba(255, 255, 255, .08);



  }







  .bbd-shell-v0161 .bbd-tool {



    min-height: 56px;



    height: 56px;



    padding: 4px 2px;



  }







  .bbd-shell-v0161 .bbd-tool svg {



    width: 19px;



    height: 19px;



  }







  .bbd-shell-v0161 .bbd-tool span {



    font-size: 9px;



    white-space: nowrap;



  }







  .bbd-shell-v0161 .bbd-panel,



  .bbd-modal[data-layout="drawer"] .bbd-shell-v0161 .bbd-panel,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0161 .bbd-panel {



    position: absolute;



    top: 0;



    right: auto;



    bottom: 68px;



    left: 0;



    z-index: 130;



    width: var(--bbd-panel-width);



    max-width: 92vw;



    max-height: none;



    border: 0;



    border-right: 1px solid var(--bbd-border-subtle);



    border-radius: 0;



    background: var(--bbd-panel-background);



    padding: 0 13px 13px;



    box-shadow: 18px 0 42px rgba(15, 23, 42, .18);



  }







  .bbd-shell-v0161 .bbd-panel[hidden] {



    display: none !important;



  }







  .bbd-shell-v0161 .bbd-mobile-sheet-bar {



    position: sticky;



    top: 0;



    z-index: 6;



    display: grid;



    grid-template-columns: 40px minmax(0, 1fr) 40px;



    align-items: center;



    gap: 7px;



    margin-inline: -13px;



    padding: 10px 13px 8px;



    border-bottom: 1px solid var(--bbd-border-subtle);



    background: var(--bbd-panel-background);



  }







  .bbd-shell-v0161 .bbd-mobile-sheet-bar > strong {



    overflow: hidden;



    text-overflow: ellipsis;



    white-space: nowrap;



  }







  .bbd-shell-v0161 .bbd-panel-edge-toggle,



  .bbd-shell-v0161 .bbd-panel-resize-handle {



    display: none !important;



  }







  .bbd-shell-v0161 .bbd-context-route-toolbar {



    justify-content: flex-start;



  }



}







@media (max-width: 760px) {



  .bbd-app.bbd-shell-v0161 {



    --bbd-editor-header-height: 58px;



  }







  .bbd-shell-v0161 .bbd-topbar {



    grid-template-columns: minmax(0, 1fr) auto;



    min-height: var(--bbd-editor-header-height);



    padding: 6px 8px;



  }







  .bbd-shell-v0161 .bbd-brand-title-block strong,



  .bbd-shell-v0161 .bbd-topbar__product,



  .bbd-shell-v0161 .bbd-topbar__center > #bbd-undo,



  .bbd-shell-v0161 .bbd-topbar__center > #bbd-redo,



  .bbd-shell-v0161 .bbd-topbar__center > .bbd-zoom-controls,



  .bbd-shell-v0161 .bbd-topbar__center > #bbd-toggle-guides,



  .bbd-shell-v0161 .bbd-more-menu summary strong,



  .bbd-shell-v0161 .bbd-save-state {



    display: none !important;



  }







  .bbd-shell-v0161 .bbd-brand-slot {



    max-width: 92px;



  }







  .bbd-shell-v0161 .bbd-brand-slot img {



    max-width: 92px;



    object-fit: contain;



  }







  .bbd-shell-v0161 .bbd-topbar__actions {



    display: flex;



    gap: 5px;



  }







  .bbd-shell-v0161 .bbd-topbar__center {



    order: -1;



  }







  .bbd-shell-v0161 .bbd-workspace-mode-tabs {



    width: auto;



    padding: 2px;



  }







  .bbd-shell-v0161 .bbd-workspace-mode-tabs button {



    min-height: 36px;



    padding: 6px 8px;



    font-size: 10px;



  }







  .bbd-shell-v0161 .bbd-primary-button {



    min-width: 66px;



    min-height: 42px;



    padding-inline: 10px;



  }







  .bbd-shell-v0161 .bbd-stage-meta {



    min-height: 34px;



    padding-bottom: 5px;



  }







  .bbd-shell-v0161 .bbd-stage-meta > .bbd-hud-chip,



  .bbd-shell-v0161 .bbd-surface-chip-row {



    max-width: 48%;



    min-height: 30px;



    overflow: hidden;



    padding: 4px 7px;



    text-overflow: ellipsis;



    white-space: nowrap;



  }







  .bbd-shell-v0161 .bbd-guide-legend {



    display: none;



  }







  .bbd-shell-v0161 .bbd-context-route-toolbar {



    min-height: 48px;



    justify-content: flex-start;



    padding-bottom: 2px;



  }







  .bbd-shell-v0161 .bbd-context-route-toolbar button {



    min-height: 44px;



    padding-inline: 11px;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0161 .bbd-panel {



    top: auto;



    right: 0;



    bottom: 68px;



    left: 0;



    width: 100%;



    max-width: none;



    max-height: min(62vh, 560px);



    border-radius: 12px 12px 0 0;



    box-shadow: 0 -18px 42px rgba(15, 23, 42, .18);



  }







  .bbd-shell-v0161 .bbd-canvas-empty {



    width: min(320px, calc(100% - 24px));



    padding: 10px;



  }







  .bbd-shell-v0161 .bbd-canvas-empty div {



    grid-template-columns: 1fr;



  }







  .bbd-shell-v0161 .bbd-product-flow-actions {



    grid-template-columns: 1fr;



  }







  .bbd-shell-v0161 .bbd-stage-footer {



    right: 6px;



    bottom: 6px;



    left: 6px;



    max-width: calc(100% - 12px);



    overflow-x: auto;



  }



}







@media (max-width: 430px) {



  .bbd-shell-v0161 .bbd-more-menu {



    display: none;



  }







  .bbd-shell-v0161 .bbd-workspace-mode-tabs button {



    padding-inline: 6px;



  }







  .bbd-shell-v0161 .bbd-primary-button {



    min-width: 58px;



    padding-inline: 8px;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-shell-v0161 .bbd-workspace,



  .bbd-shell-v0161 .bbd-panel,



  .bbd-shell-v0161 .bbd-tool,



  .bbd-shell-v0161 .bbd-context-route-toolbar button {



    transition: none !important;



  }



}







/* v0.16.2 contextual simplification and visual polish */



.bbd-app.bbd-shell-v0161.bbd-shell-v0162 {



  --bbd-rail-width: 72px;



  --bbd-panel-width: 344px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-sidebar {



  width: var(--bbd-rail-width);



  max-width: var(--bbd-rail-width);



  padding-inline: 7px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-tool {



  width: 58px;



  min-height: 56px;



  margin-inline: auto;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-tool span {



  font-size: 11px;



  letter-spacing: 0;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-tool svg {



  width: 22px;



  height: 22px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-panel {



  padding: 16px 15px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-panel h2,



.bbd-shell-v0161.bbd-shell-v0162 .bbd-panel-heading h2 {



  font-size: 19px;



  letter-spacing: 0;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-stage-meta {



  display: grid;



  grid-template-columns: auto auto minmax(0, 1fr);



  align-items: center;



  min-height: 38px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar {



  grid-column: 1 / -1;



  justify-self: center;



  display: flex;



  flex: 0 1 auto;



  width: max-content;



  max-width: 100%;



  min-height: 44px;



  justify-content: center;



  gap: 2px;



  overflow-x: auto;



  padding: 3px;



  border: 1px solid rgba(15, 23, 42, .1);



  border-radius: 8px;



  background: rgba(255, 255, 255, .96);



  box-shadow: 0 7px 18px rgba(15, 23, 42, .1);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar button {



  display: inline-flex;



  flex: 0 0 auto;



  align-items: center;



  justify-content: center;



  gap: 6px;



  min-width: 38px;



  min-height: 38px;



  padding: 0 9px;



  border: 0;



  border-radius: 6px;



  background: transparent;



  font-size: 12px;



  letter-spacing: 0;



  white-space: nowrap;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar button.is-active {



  background: var(--bbd-accent-soft);



  color: var(--bbd-accent-hover);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar button:hover:not(:disabled) {



  background: var(--bbd-panel-muted);



  color: var(--bbd-text-primary);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar button:disabled,



.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-more-menu button:disabled {



  opacity: .42;



  cursor: not-allowed;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-icon {



  flex: 0 0 18px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-label-short {



  display: none;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-object-toolbar {



  display: none !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-object-popover.bbd-context-more-menu {



  position: absolute;



  z-index: 190;



  display: grid;



  width: 220px;



  gap: 2px;



  padding: 6px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: 8px;



  background: var(--bbd-panel-elevated);



  box-shadow: 0 16px 38px rgba(15, 23, 42, .18);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-object-popover.bbd-context-more-menu[hidden] {



  display: none !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-more-menu button {



  display: flex;



  align-items: center;



  gap: 9px;



  min-height: 40px;



  border: 0;



  border-radius: 6px;



  background: transparent;



  padding: 0 10px;



  text-align: left;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-more-menu button.is-destructive {



  color: #b42318;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-more-menu button:hover:not(:disabled) {



  background: var(--bbd-panel-muted);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-heading {



  grid-template-columns: minmax(0, 1fr);



  gap: 7px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-heading > button {



  display: inline-flex;



  width: max-content;



  max-width: 100%;



  min-height: 34px;



  align-items: center;



  gap: 4px;



  border: 0;



  background: transparent;



  padding: 0;



  font-size: 11px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-context-heading > button span {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-product-flow-actions {



  grid-template-columns: minmax(0, 1fr) auto;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-product-flow-actions .is-primary {



  min-height: 44px;



  font-weight: 800;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-product-flow-actions .is-secondary {



  min-height: 40px;



  background: transparent;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-product-flow-actions .is-secondary:disabled {



  opacity: .45;



  cursor: not-allowed;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-grid {



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 9px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-visual-preset-card {



  position: relative;



  min-height: 150px;



  overflow: hidden;



  padding: 9px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-preview {



  display: grid;



  width: 100%;



  height: 82px;



  min-height: 82px;



  place-items: center;



  overflow: hidden;



  padding: 8px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-preview b {



  display: -webkit-box;



  max-width: 100%;



  overflow: hidden;



  font-family: var(--bbd-preset-font), sans-serif;



  font-size: 18px;



  line-height: 1.05;



  letter-spacing: 0;



  text-align: center;



  -webkit-box-orient: vertical;



  -webkit-line-clamp: 3;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-favorite {



  position: absolute;



  top: 6px;



  right: 6px;



  z-index: 2;



  display: grid;



  width: 30px;



  height: 30px;



  place-items: center;



  border-radius: 50%;



  background: rgba(255, 255, 255, .92);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-text-legacy-edit-controls[hidden] {



  display: none !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-selection {



  display: grid;



  grid-template-columns: 38px minmax(0, 1fr) auto;



  align-items: center;



  gap: 9px;



  min-height: 54px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: 8px;



  background: var(--bbd-panel-elevated);



  padding: 7px 8px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-selection > span:nth-child(2) {



  display: grid;



  min-width: 0;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-selection small {



  color: var(--bbd-text-secondary);



  font-size: 11px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-selection button {



  min-height: 36px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: 6px;



  background: transparent;



  padding: 0 9px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-selection .bbd-background-preview {



  width: 38px;



  height: 38px;



  border: 1px solid var(--bbd-border-subtle);



  border-radius: 6px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-preview[data-variant="transparent"],



.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-card.is-transparent .bbd-background-preview {



  background-color: #fff !important;



  background-image: linear-gradient(45deg, #d9dde3 25%, transparent 25%), linear-gradient(-45deg, #d9dde3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d9dde3 75%), linear-gradient(-45deg, transparent 75%, #d9dde3 75%) !important;



  background-position: 0 0, 0 7px, 7px -7px, -7px 0 !important;



  background-size: 14px 14px !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-visually-hidden-control {



  position: absolute !important;



  width: 1px !important;



  height: 1px !important;



  overflow: hidden !important;



  clip: rect(0 0 0 0) !important;



  clip-path: inset(50%) !important;



  white-space: nowrap !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-background-card {



  min-height: 74px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-stage-footer {



  right: 10px;



  bottom: 8px;



  left: auto;



  width: max-content;



  max-width: calc(100% - 20px);



  justify-self: end;



  gap: 4px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measurement-output {



  display: inline-flex;



  min-height: 34px;



  align-items: center;



  gap: 8px;



  padding: 5px 8px;



  font-size: 11px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measurement-output[hidden] {



  display: none !important;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measurement-output strong,



.bbd-shell-v0161.bbd-shell-v0162 .bbd-measure-position {



  white-space: nowrap;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measurement-output strong {



  color: var(--bbd-text-primary);



  font-size: 12px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measure-position {



  color: var(--bbd-text-secondary);



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measure-actions {



  min-height: 34px;



  padding: 3px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-measure-actions button {



  min-height: 28px;



  padding-inline: 7px;



  font-size: 10px;



}







.bbd-shell-v0161.bbd-shell-v0162 .bbd-distance-overlay {



  z-index: 45;



  max-width: min(360px, calc(100% - 24px));



  border-radius: 6px;



  box-shadow: 0 5px 14px rgba(15, 23, 42, .14);



  pointer-events: none;



}







@media (max-width: 1366px) and (min-width: 761px) {



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-label { display: none; }



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-label-short { display: inline; }



}







@media (max-width: 1024px) {



  .bbd-app.bbd-shell-v0161.bbd-shell-v0162 {



    --bbd-rail-width: 100%;



    --bbd-panel-width: min(360px, 92vw);



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-tool {



    width: 100%;



    margin: 0;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar {



    justify-self: stretch;



    width: 100%;



    justify-content: flex-start;



    box-shadow: inset -14px 0 12px -14px rgba(15, 23, 42, .5), 0 6px 16px rgba(15, 23, 42, .08);



  }



}







@media (max-width: 760px) {



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-route-toolbar button {



    min-width: 44px;



    min-height: 44px;



    padding: 0;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-label,



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-label-short {



    display: none;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-context-icon {



    width: 20px;



    height: 20px;



    flex-basis: 20px;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-product-flow-actions {



    grid-template-columns: 1fr;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-stage-footer {



    right: 6px;



    left: 6px;



    max-width: calc(100% - 12px);



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-measure-position,



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-stage-footer .bbd-quality-summary,



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-stage-footer .bbd-status {



    display: none !important;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-visual-preset-card {



    min-height: 136px;



    padding: 7px;



  }







  .bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-preview {



    height: 72px;



    min-height: 72px;



  }



}







@media (max-width: 390px) {



  .bbd-shell-v0161.bbd-shell-v0162 .bbd-preset-preview b {



    font-size: 15px;



  }



}







/* v0.18.0 owns customer workspace geometry and removes legacy width animation. */



.bbd-app.bbd-shell-v0180 {



  --bbd-rail-width: 72px;



  --bbd-panel-width: 344px;



}







.bbd-shell-v0180 .bbd-panel-resize-handle,



.bbd-shell-v0180 .bbd-legacy-inspector {



  display: none !important;



}







.bbd-shell-v0180 .bbd-command-grid button {



  min-width: 0;



  padding-inline: 6px;



  overflow-wrap: anywhere;



  line-height: 1.15;



}







@media (min-width: 1025px) {



  .bbd-shell-v0180 .bbd-workspace {



    grid-template-columns: 72px 344px minmax(0, 1fr) !important;



    transition: none !important;



  }







  .bbd-shell-v0180 .bbd-panel {



    width: 344px !important;



    min-width: 344px !important;



    max-width: 344px !important;



    transition: none !important;



  }







  .bbd-shell-v0180.is-panel-collapsed .bbd-workspace {



    grid-template-columns: 72px 0 minmax(0, 1fr) !important;



  }







  .bbd-shell-v0180.is-panel-collapsed .bbd-panel {



    width: 0 !important;



    min-width: 0 !important;



    max-width: 0 !important;



  }







  .bbd-shell-v0180.is-distraction-free .bbd-workspace,



  .bbd-shell-v0180.is-preview-mode .bbd-workspace {



    grid-template-columns: minmax(0, 1fr) !important;



  }



}







@media (min-width: 761px) and (max-width: 1024px) {



  .bbd-app.bbd-shell-v0180 {



    --bbd-panel-width: min(344px, calc(100vw - 56px));



  }



}







/* v0.19.0 real product preview and mockup presentation surface */



.bbd-product-preview {



  min-width: 0;



  min-height: 0;



  display: none;



  grid-template-rows: auto minmax(0, 1fr) auto;



  gap: 12px;



  overflow: hidden;



  padding: 18px clamp(14px, 2.4vw, 34px) calc(18px + env(safe-area-inset-bottom, 0px));



  background: #f3f4f5;



}







.bbd-app.is-preview-mode .bbd-product-preview {



  display: grid;



  grid-column: 1;



  grid-row: 1;



}







.bbd-app.is-preview-mode .bbd-canvas-shell,



.bbd-app.is-preview-mode .bbd-busy-overlay,



.bbd-app.is-preview-mode .bbd-stage-footer {



  display: none !important;



}







.bbd-app.is-preview-mode .bbd-stage-area {



  grid-column: 1 !important;



  grid-row: 1 !important;



  grid-template-columns: minmax(0, 1fr) !important;



  grid-template-rows: minmax(0, 1fr) !important;



  background: #f3f4f5;



}







.bbd-app.is-preview-mode #bbd-undo,



.bbd-app.is-preview-mode #bbd-redo,



.bbd-app.is-preview-mode .bbd-zoom-controls,



.bbd-app.is-preview-mode #bbd-focus-selection,



.bbd-app.is-preview-mode #bbd-toggle-guides,



.bbd-app.is-preview-mode #bbd-distraction-toggle,



.bbd-app.is-preview-mode #bbd-command-palette-toggle {



  display: none !important;



}







.bbd-product-preview__header,



.bbd-product-preview__footer {



  min-width: 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 14px;



}







.bbd-product-preview__header > div {



  min-width: 0;



}







.bbd-product-preview__header span {



  color: #59616c;



  font-size: 12px;



  font-weight: 720;



}







.bbd-product-preview__header h2 {



  margin: 2px 0 0;



  overflow: hidden;



  color: #171717;



  font-size: 17px;



  line-height: 1.25;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-product-preview__scene {



  display: flex;



  align-items: center;



  gap: 8px;



}







.bbd-product-preview__scene select {



  min-height: 36px;



  max-width: 220px;



  border: 1px solid #cfd3d8;



  border-radius: 6px;



  background: #fff;



  color: #171717;



  padding: 6px 28px 6px 9px;



}







.bbd-product-preview__viewport {



  position: relative;



  min-width: 0;



  min-height: 0;



  display: grid;



  place-items: center;



  overflow: hidden;



}







.bbd-product-preview__viewport canvas {



  position: absolute;



  inset: 0;



  display: block;



  width: 100%;



  height: 100%;



  max-width: 100%;



  max-height: 100%;



  object-fit: contain;



  background: transparent;



}







.bbd-product-preview__loading {



  position: absolute;



  inset: 0;



  z-index: 2;



  display: grid;



  place-content: center;



  gap: 12px;



  color: #59616c;



  text-align: center;



}







.bbd-product-preview__loading[hidden] {



  display: none;



}







.bbd-product-preview__loading i {



  width: min(58vw, 420px);



  aspect-ratio: 4 / 3;



  border-radius: 6px;



  background: linear-gradient(90deg, #e4e6e8 25%, #f0f1f2 50%, #e4e6e8 75%);



  background-size: 200% 100%;



  animation: bbd-preview-loading 1.4s ease-in-out infinite;



}







@keyframes bbd-preview-loading {



  to { background-position: -200% 0; }



}







.bbd-product-preview__footer p {



  margin: 0;



  color: #59616c;



  font-size: 12px;



  line-height: 1.45;



}







.bbd-product-preview__footer button {



  min-height: 38px;



  flex: 0 0 auto;



  border: 1px solid #cfd3d8;



  border-radius: 6px;



  background: #fff;



  color: #171717;



  padding: 7px 12px;



  font-weight: 740;



  cursor: pointer;



}







.bbd-product-preview__footer button:focus-visible,



.bbd-product-preview__scene select:focus-visible {



  outline: 0;



  box-shadow: var(--bbd-focus-ring);



}







@media (max-width: 760px) {



  .bbd-product-preview {



    gap: 8px;



    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));



  }







  .bbd-product-preview__header h2 {



    font-size: 14px;



  }







  .bbd-product-preview__scene span {



    display: none;



  }







  .bbd-product-preview__scene select {



    max-width: 150px;



  }







  .bbd-product-preview__footer {



    align-items: flex-start;



  }







  .bbd-product-preview__footer p {



    max-width: 66%;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-product-preview__loading i {



    animation: none;



  }



}







@media (max-width: 760px) {



  .bbd-app.bbd-shell-v0180 {



    --bbd-rail-width: 100%;



    --bbd-panel-width: min(344px, 92vw);



  }







  .bbd-shell-v0180 .bbd-command-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-shell-v0180 .bbd-panel {



    position: fixed !important;



    top: auto !important;



    right: 0 !important;



    bottom: 68px !important;



    left: 0 !important;



    width: 100vw !important;



    min-width: 0 !important;



    max-width: none !important;



    transform: none !important;



  }



}







/* Final v0.23.0-dev.2 Pro Editing Pack cascade lock. */



.bbd-pro-workspace-v0230-dev2 .bbd-layer-row {



  min-height: 88px;



  grid-template-columns: minmax(0, 1fr) repeat(5, 30px);



  grid-template-rows: minmax(48px, auto) 30px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-main {



  grid-template-columns: 14px 38px minmax(0, 1fr);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-drag-handle {



  width: 14px;



  display: grid;



  place-items: center;



  color: #98a2b3;



  cursor: grab;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-drag-handle .bbd-layer-icon {



  width: 14px;



  height: 20px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row.is-dragging {



  opacity: .56;



  transform: scale(.99);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row.is-drop-target {



  border-color: #ff6b2c;



  box-shadow: 0 -3px 0 #ff6b2c, 0 0 0 3px rgba(255, 75, 0, .1);



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight {



  position: relative;



  padding-left: 38px;



  border: 1px solid transparent;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight::before {



  position: absolute;



  top: 12px;



  left: 12px;



  width: 16px;



  height: 16px;



  display: grid;



  place-items: center;



  border-radius: 999px;



  content: "✓";



  background: #dff7ec;



  color: #087a55;



  font-size: 10px;



  font-weight: 900;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="info"] {



  border-color: #c8e4f3;



  background: #f2f9fc;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="info"]::before {



  content: "i";



  background: #d9eff9;



  color: #176987;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="warning"],



.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="error"] {



  border-color: #efd49b;



  background: #fff9e9;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="warning"]::before,



.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="error"]::before {



  content: "!";



  background: #ffe9b8;



  color: #9a5b00;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="error"] {



  border-color: #f1b6af;



  background: #fff2f0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="error"]::before {



  background: #ffe0dc;



  color: #b42318;



}







.bbd-product-personalizer,



.bbd-product-history {



  display: grid;



  gap: 10px;



  padding: 12px;



  border: 1px solid #e2e6ec;



  border-radius: 12px;



  background: #fff;



  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);



}







.bbd-product-personalizer[hidden] {



  display: none !important;



}







.bbd-product-personalizer__heading,



.bbd-product-history {



  grid-template-columns: minmax(0, 1fr) auto;



  align-items: center;



}







.bbd-product-personalizer__heading {



  display: grid;



  grid-template-columns: 30px minmax(0, 1fr);



  gap: 9px;



}







.bbd-product-personalizer__heading > .bbd-pro-action-icon {



  width: 28px;



  height: 28px;



  padding: 6px;



  border-radius: 8px;



  background: #fff1eb;



  color: #d9480f;



}







.bbd-product-personalizer__heading span,



.bbd-product-history__copy {



  min-width: 0;



  display: grid;



  gap: 2px;



}







.bbd-product-personalizer__heading strong,



.bbd-product-history__copy strong {



  color: #182230;



  font-size: 12px;



  font-weight: 800;



}







.bbd-product-personalizer__heading small,



.bbd-product-history__copy span {



  color: #667085;



  font-size: 10px;



  line-height: 1.35;



}







.bbd-product-personalizer .bbd-personalizer-field {



  display: grid;



  grid-template-columns: 1fr;



  gap: 5px;



}







.bbd-product-personalizer .bbd-personalizer-field > label {



  color: #475467;



  font-size: 10px;



  font-weight: 750;



}







.bbd-product-personalizer .bbd-personalizer-field > div {



  display: grid;



  grid-template-columns: minmax(0, 1fr) 36px;



  align-items: start;



  gap: 6px;



}







.bbd-product-personalizer .bbd-personalizer-field input,



.bbd-product-personalizer .bbd-personalizer-field textarea {



  width: 100%;



  min-height: 38px;



  padding: 8px 10px;



  border: 1px solid #d0d5dd;



  border-radius: 8px;



  background: #fff;



  color: #182230;



  font: inherit;



}







.bbd-product-personalizer .bbd-personalizer-field textarea {



  min-height: 82px;



  resize: vertical;



  line-height: 1.45;



  white-space: pre-wrap;



}







.bbd-product-personalizer .bbd-personalizer-field input:focus,



.bbd-product-personalizer .bbd-personalizer-field textarea:focus {



  border-color: #ff8a5b;



  outline: 3px solid rgba(255, 90, 31, .12);



}







.bbd-product-personalizer .bbd-personalizer-field button,



.bbd-product-history__actions button {



  width: 36px;



  min-height: 36px;



  display: grid;



  place-items: center;



  padding: 0;



  border: 1px solid #d0d5dd;



  border-radius: 8px;



  background: #fff;



  color: #475467;



  cursor: pointer;



}







.bbd-product-history__actions {



  display: flex;



  gap: 6px;



}







.bbd-product-history__actions button:disabled {



  opacity: .38;



  cursor: not-allowed;



}







.bbd-product-history__actions button:not(:disabled):hover,



.bbd-product-personalizer .bbd-personalizer-field button:hover {



  border-color: #ff8a5b;



  background: #fff7f2;



  color: #d9480f;



}







.bbd-image-placement-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



}







.bbd-image-placement-grid > button {



  min-height: 76px;



  display: grid;



  grid-template-columns: 26px minmax(0, 1fr);



  align-items: start;



  gap: 8px;



  padding: 10px;



  border: 1px solid #dfe3e8;



  border-radius: 10px;



  background: #fff;



  color: #475467;



  text-align: left;



  cursor: pointer;



}







.bbd-image-placement-grid > button span {



  display: grid;



  gap: 3px;



}







.bbd-image-placement-grid > button strong {



  color: #182230;



  font-size: 11px;



}







.bbd-image-placement-grid > button small {



  color: #667085;



  font-size: 9px;



  line-height: 1.3;



}







.bbd-image-placement-grid > button:hover,



.bbd-image-placement-grid > button.is-active {



  border-color: #ff8a5b;



  background: #fff7f2;



  color: #d9480f;



  box-shadow: 0 0 0 2px rgba(255, 75, 0, .08);



}







.bbd-action-card--icon {



  display: flex !important;



  align-items: center;



  justify-content: center;



  gap: 8px;



}







.bbd-context-help {



  margin: 0;



  color: #667085;



  font-size: 10px;



  line-height: 1.45;



}







.bbd-inspector-advanced[open] > summary {



  margin-bottom: 10px;



}







@media (max-width: 420px) {



  .bbd-image-placement-grid {



    grid-template-columns: 1fr;



  }



}







/* --------------------------------------------------------------------------



 * v0.23.0-dev.2 — Visual System Final



 * One scoped cascade owns customer-facing polish without changing the stable



 * editor geometry or participating in the canvas layout.



 * ----------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final {



  --bbd-v5-ink: #172033;



  --bbd-v5-copy: #3e4a5d;



  --bbd-v5-muted: #6f7a8b;



  --bbd-v5-faint: #98a2b3;



  --bbd-v5-line: #e3e7ed;



  --bbd-v5-line-strong: #cfd5df;



  --bbd-v5-panel: #ffffff;



  --bbd-v5-soft: #f7f8fa;



  --bbd-v5-soft-blue: #f4f7fb;



  --bbd-v5-canvas: #e7eaf0;



  --bbd-v5-rail: #171c26;



  --bbd-v5-rail-hover: #252d3a;



  --bbd-v5-orange: var(--bbd-color-accent, #ff4b00);



  --bbd-v5-orange-hover: var(--bbd-color-accent-hover, #e64300);



  --bbd-v5-orange-soft: #fff2eb;



  --bbd-v5-green: #0f8a65;



  --bbd-v5-green-soft: #eaf8f3;



  --bbd-v5-radius-sm: 7px;



  --bbd-v5-radius-md: 10px;



  --bbd-v5-radius-lg: 14px;



  --bbd-v5-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 5px 14px rgba(15, 23, 42, .035);



  --bbd-v5-shadow-float: var(--bbd-shadow-toolbar, 0 8px 24px rgba(15, 23, 42, .14));



  --bbd-v5-shadow-canvas: var(--bbd-shadow-artboard, 0 18px 48px rgba(15, 23, 42, .16));



  font-family: var(--bbd-font-ui, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);



  color: var(--bbd-v5-ink);



  font-size: 13px;



  -webkit-font-smoothing: antialiased;



  text-rendering: optimizeLegibility;



}







.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final button,



.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final input,



.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final select,



.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final textarea {



  font: inherit;



}







.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final button {



  -webkit-tap-highlight-color: transparent;



}







/* 01–03: typography, top bar and a single SVG icon language. */



.bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final .bbd-topbar {



  min-height: 64px;



  padding: 0 16px;



  border-bottom: 1px solid var(--bbd-v5-line);



  background: rgba(255, 255, 255, .98);



  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);



}







.bbd-pro-workspace-v0230-dev2 .bbd-brand-title-block {



  gap: 2px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-brand-title-block strong {



  color: var(--bbd-v5-ink);



  font-size: 13px;



  font-weight: 780;



  letter-spacing: -.012em;



}







.bbd-pro-workspace-v0230-dev2 .bbd-topbar__product {



  max-width: 210px;



  color: var(--bbd-v5-muted);



  font-size: 10px;



  font-weight: 570;



}







.bbd-pro-workspace-v0230-dev2 .bbd-topbar__center,



.bbd-pro-workspace-v0230-dev2 .bbd-topbar__right,



.bbd-pro-workspace-v0230-dev2 .bbd-zoom-controls {



  align-items: center;



}







.bbd-pro-workspace-v0230-dev2 .bbd-topbar__center {



  gap: 5px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-icon-button,



.bbd-pro-workspace-v0230-dev2 .bbd-system-icon-button {



  width: 36px;



  min-width: 36px;



  min-height: 36px;



  display: inline-grid;



  place-items: center;



  border: 1px solid transparent;



  border-radius: 9px;



  background: transparent;



  color: #526073;



  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-icon-button:not(:disabled):hover,



.bbd-pro-workspace-v0230-dev2 .bbd-system-icon-button:not(:disabled):hover {



  border-color: #e5e9ef;



  background: #f6f7f9;



  color: var(--bbd-v5-ink);



}







.bbd-pro-workspace-v0230-dev2 .bbd-icon-button:not(:disabled):active,



.bbd-pro-workspace-v0230-dev2 .bbd-system-icon-button:not(:disabled):active {



  transform: translateY(1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-icon-button:disabled {



  color: #b2bac6;



  opacity: .62;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-action-icon,



.bbd-pro-workspace-v0230-dev2 .bbd-context-icon,



.bbd-pro-workspace-v0230-dev2 .bbd-tool svg {



  vector-effect: non-scaling-stroke;



}







.bbd-pro-workspace-v0230-dev2 .bbd-zoom-controls {



  min-height: 38px;



  gap: 0;



  padding: 2px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 11px;



  background: var(--bbd-v5-soft);



}







.bbd-pro-workspace-v0230-dev2 .bbd-zoom-controls .bbd-icon-button {



  width: 32px;



  min-width: 32px;



  min-height: 32px;



  border-radius: 8px;



}







.bbd-pro-workspace-v0230-dev2 #bbd-zoom-value {



  min-width: 48px;



  color: #4a5668;



  font-size: 10px;



  font-weight: 760;



  font-variant-numeric: tabular-nums;



}







.bbd-pro-workspace-v0230-dev2 .bbd-workspace-mode-tabs {



  min-height: 40px;



  gap: 2px;



  padding: 3px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 11px;



  background: #f4f5f7;



}







.bbd-pro-workspace-v0230-dev2 .bbd-workspace-mode-tabs button {



  min-height: 32px;



  padding: 0 12px;



  border-radius: 8px;



  background: transparent;



  color: #536073;



  font-size: 11px;



  font-weight: 690;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-workspace-mode-tabs button.is-active {



  border: 1px solid #ffc8ad;



  background: #fff;



  color: #d8450a;



  box-shadow: 0 2px 7px rgba(15, 23, 42, .08);



}







.bbd-pro-workspace-v0230-dev2 .bbd-more-menu summary {



  min-height: 36px;



  gap: 6px;



  border: 1px solid transparent;



  border-radius: 9px;



  color: #536073;



}







.bbd-pro-workspace-v0230-dev2 .bbd-more-menu summary > span {



  display: grid;



  place-items: center;



}







.bbd-pro-workspace-v0230-dev2 .bbd-more-menu summary > span .bbd-pro-action-icon {



  width: 18px;



  height: 18px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-more-menu[open] summary,



.bbd-pro-workspace-v0230-dev2 .bbd-more-menu summary:hover {



  border-color: var(--bbd-v5-line);



  background: var(--bbd-v5-soft);



  color: var(--bbd-v5-ink);



}







.bbd-pro-workspace-v0230-dev2 .bbd-more-menu__content {



  overflow: hidden;



  padding: 6px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 12px;



  background: #fff;



  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);



}







/* 04, 10 and 11: tokenized status and premium primary action. */



.bbd-pro-workspace-v0230-dev2 .bbd-save-state {



  min-height: 30px;



  gap: 7px;



  padding: 0 10px;



  border: 1px solid #d8eee7;



  border-radius: 999px;



  background: var(--bbd-v5-green-soft);



  color: #087658;



  font-size: 10px;



  font-weight: 680;



}







.bbd-pro-workspace-v0230-dev2 .bbd-save-dot {



  width: 6px;



  height: 6px;



  box-shadow: 0 0 0 4px rgba(15, 138, 101, .09);



}







.bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save {



  min-height: 42px;



  display: inline-flex;



  align-items: center;



  gap: 9px;



  padding: 0 15px 0 17px;



  border: 1px solid #ec4807;



  border-radius: 10px;



  background: linear-gradient(180deg, #ff6530 0%, var(--bbd-v5-orange) 100%);



  color: #fff;



  box-shadow: 0 8px 18px rgba(255, 75, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .22);



  font-size: 11px;



  font-weight: 760;



  letter-spacing: -.005em;



  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save:hover:not(:disabled) {



  background: linear-gradient(180deg, #ff713d 0%, var(--bbd-v5-orange-hover) 100%);



  box-shadow: 0 11px 24px rgba(255, 75, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25);



  transform: translateY(-1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save:active:not(:disabled) {



  box-shadow: 0 5px 12px rgba(255, 75, 0, .2), inset 0 1px 2px rgba(0, 0, 0, .12);



  transform: translateY(1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save .bbd-pro-action-icon {



  width: 16px;



  height: 16px;



  transition: transform 150ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save:hover .bbd-pro-action-icon {



  transform: translateX(2px);



}







/* 02: calmer, more legible dark tool rail. */



.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail {



  gap: 3px;



  padding: 8px 7px;



  border-right: 1px solid #2c3441;



  background: linear-gradient(180deg, #171c26 0%, #121720 100%);



  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025);



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool {



  position: relative;



  width: 58px;



  min-height: 58px;



  gap: 5px;



  margin: 0 auto;



  border: 1px solid transparent;



  border-radius: 10px;



  background: transparent;



  color: #aeb7c4;



  animation: bbd-v5-tool-in 260ms both;



  animation-delay: calc(var(--bbd-tool-order, 0) * 24ms);



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool svg {



  width: 21px;



  height: 21px;



  stroke-width: 1.75;



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool span {



  max-width: 56px;



  color: inherit;



  font-size: 9px;



  font-weight: 620;



  letter-spacing: .005em;



  line-height: 1.1;



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool:hover {



  border-color: rgba(255, 255, 255, .07);



  background: var(--bbd-v5-rail-hover);



  color: #fff;



  transform: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool.is-active {



  border-color: rgba(255, 255, 255, .11);



  background: linear-gradient(135deg, #343d4b, #252c38);



  color: #fff;



  box-shadow: inset 3px 0 0 var(--bbd-v5-orange), 0 5px 12px rgba(0, 0, 0, .16);



}







.bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool.is-active svg {



  color: #ff8655;



}







/* 05–06: clearer panel hierarchy with fewer visual strips. */



.bbd-pro-workspace-v0230-dev2 .bbd-panel {



  padding: 16px 14px 22px;



  border-right: 1px solid var(--bbd-v5-line);



  background: var(--bbd-v5-panel);



  box-shadow: 8px 0 30px rgba(15, 23, 42, .025);



  scrollbar-color: #c3c9d2 transparent;



  scrollbar-width: thin;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel-section,



.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-section {



  gap: 12px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel-heading,



.bbd-pro-workspace-v0230-dev2 .bbd-panel-heading--sticky,



.bbd-pro-workspace-v0230-dev2 .bbd-background-modules > .bbd-panel-heading {



  min-height: 30px;



  padding: 0 0 4px;



  border: 0;



  background: #fff;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel h2,



.bbd-pro-workspace-v0230-dev2 .bbd-panel-heading h2 {



  margin: 0;



  color: var(--bbd-v5-ink);



  font-size: 18px;



  font-weight: 790;



  letter-spacing: -.025em;



  line-height: 1.2;



}







.bbd-pro-workspace-v0230-dev2 .bbd-panel-heading > span {



  padding: 4px 7px;



  border-radius: 999px;



  background: var(--bbd-v5-soft);



  color: var(--bbd-v5-muted);



  font-size: 9px;



  font-weight: 650;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro {



  gap: 3px;



  margin: -5px 0 4px;



  padding: 0 1px 9px;



  border: 0;



  border-bottom: 1px solid #edf0f3;



  border-radius: 0;



  background: transparent;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro strong {



  color: #3b4759;



  font-size: 10px;



  font-weight: 740;



}







.bbd-pro-workspace-v0230-dev2 .bbd-pro-panel-intro span,



.bbd-pro-workspace-v0230-dev2 .bbd-panel-intro,



.bbd-pro-workspace-v0230-dev2 .bbd-help {



  color: var(--bbd-v5-muted);



  font-size: 10px;



  line-height: 1.45;



}







.bbd-pro-workspace-v0230-dev2 .bbd-search-field input,



.bbd-pro-workspace-v0230-dev2 .bbd-field input,



.bbd-pro-workspace-v0230-dev2 .bbd-field select,



.bbd-pro-workspace-v0230-dev2 .bbd-field textarea,



.bbd-pro-workspace-v0230-dev2 .bbd-personalizer-field input,



.bbd-pro-workspace-v0230-dev2 .bbd-personalizer-field textarea {



  min-height: var(--bbd-control-height, 38px);



  border: 1px solid var(--bbd-v5-line-strong);



  border-radius: 9px;



  background: #fff;



  color: var(--bbd-v5-ink);



  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);



  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-search-field input:focus,



.bbd-pro-workspace-v0230-dev2 .bbd-field input:focus,



.bbd-pro-workspace-v0230-dev2 .bbd-field select:focus,



.bbd-pro-workspace-v0230-dev2 .bbd-field textarea:focus,



.bbd-pro-workspace-v0230-dev2 .bbd-personalizer-field input:focus,



.bbd-pro-workspace-v0230-dev2 .bbd-personalizer-field textarea:focus {



  border-color: #ff9b72;



  outline: 0;



  box-shadow: 0 0 0 3px rgba(255, 75, 0, .1);



}







/* 07–08: premium pasteboard and quieter print guides. */



.bbd-pro-workspace-v0230-dev2 .bbd-stage-area {



  position: relative !important;



  isolation: isolate;



  background:



    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .58), transparent 46%),



    linear-gradient(135deg, #ebedf2 0%, #e3e7ed 100%);



}







.bbd-pro-workspace-v0230-dev2 .bbd-stage-area::before {



  content: "";



  position: absolute;



  z-index: -1;



  inset: 0;



  opacity: .28;



  background-image: radial-gradient(circle, rgba(81, 94, 112, .18) .65px, transparent .75px);



  background-size: 18px 18px;



  pointer-events: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-stage-meta {



  z-index: 35;



  min-height: 38px !important;



  max-height: 38px;



  gap: 5px;



  padding: 6px 8px 0;



  overflow: visible;



}







.bbd-pro-workspace-v0230-dev2 .bbd-hud-chip {



  min-height: 27px;



  display: inline-flex;



  align-items: center;



  padding: 0 9px;



  border: 1px solid rgba(207, 213, 223, .78);



  border-radius: 999px;



  background: rgba(248, 250, 252, .78);



  color: #657083;



  box-shadow: none;



  font-size: 9px;



  font-weight: 670;



  backdrop-filter: blur(8px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-guide-legend {



  gap: 5px;



  color: #778294;



}







.bbd-pro-workspace-v0230-dev2 .bbd-guide-legend i {



  width: 14px;



  opacity: .72;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-shell.bbd-premium-canvas-shell {



  border: 0;



  background: transparent;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-shell .canvas-container {



  outline: 1px solid rgba(94, 105, 121, .12);



  box-shadow: var(--bbd-v5-shadow-canvas);



  transition: box-shadow 180ms ease, outline-color 180ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-shell .canvas-container:hover {



  outline-color: rgba(94, 105, 121, .2);



  box-shadow: 0 22px 56px rgba(15, 23, 42, .19), 0 3px 10px rgba(15, 23, 42, .08);



}







/* 09: compact floating toolbar; it never enters the grid flow. */



.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar {



  position: absolute !important;



  z-index: 230 !important;



  top: 38px !important;



  left: 50% !important;



  grid-column: auto !important;



  grid-row: auto !important;



  order: initial !important;



  width: max-content !important;



  max-width: calc(100% - 28px) !important;



  min-width: 0 !important;



  min-height: 40px;



  flex: 0 0 auto !important;



  gap: 1px;



  overflow-x: auto;



  padding: 3px !important;



  border: 1px solid rgba(15, 23, 42, .1) !important;



  border-radius: 11px !important;



  background: rgba(255, 255, 255, .97) !important;



  box-shadow: var(--bbd-v5-shadow-float) !important;



  transform: translateX(-50%);



  backdrop-filter: blur(14px);



  scrollbar-width: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar[hidden] {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button {



  min-width: 34px;



  min-height: 34px;



  gap: 5px;



  padding: 0 8px;



  border: 1px solid transparent;



  border-radius: 8px;



  background: transparent;



  color: #536073;



  font-size: 10px;



  font-weight: 670;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button:hover:not(:disabled) {



  border-color: #e8ebef;



  background: #f6f7f9;



  color: var(--bbd-v5-ink);



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button.is-active {



  border-color: #ffd0ba;



  background: var(--bbd-v5-orange-soft);



  color: #d8450a;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar .bbd-context-icon {



  width: 16px;



  height: 16px;



  flex-basis: 16px;



}







/* 12–13: real template previews and richer card states. */



.bbd-pro-workspace-v0230-dev2 .bbd-template-grid {



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 10px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card {



  display: grid;



  gap: 7px;



  overflow: hidden;



  padding: 8px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 12px;



  background: #fff;



  box-shadow: var(--bbd-v5-shadow-card);



  text-align: left;



  transform: translateY(0);



  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card::after {



  display: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-template-card:focus-visible {



  border-color: #ffad88;



  outline: 0;



  box-shadow: 0 10px 24px rgba(15, 23, 42, .1), 0 0 0 3px rgba(255, 75, 0, .07);



  transform: translateY(-2px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card__preview {



  position: relative;



  width: 100%;



  aspect-ratio: 4 / 3;



  display: grid;



  place-items: center;



  overflow: hidden;



  border: 1px solid #e8ebef;



  border-radius: 9px;



  background: linear-gradient(145deg, #f7f8fa, #eef1f5);



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card__svg {



  width: 78%;



  height: 88%;



  display: block;



  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .12));



  transition: transform 180ms ease, filter 180ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card:hover .bbd-template-card__svg {



  filter: drop-shadow(0 5px 7px rgba(15, 23, 42, .16));



  transform: scale(1.025);



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card__preview-action {



  position: absolute;



  right: 7px;



  bottom: 7px;



  padding: 4px 7px;



  border-radius: 999px;



  background: rgba(23, 32, 51, .88);



  color: #fff;



  font-size: 8px;



  font-style: normal;



  font-weight: 750;



  opacity: 0;



  transform: translateY(3px);



  transition: opacity 150ms ease, transform 150ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card:hover .bbd-template-card__preview-action,



.bbd-pro-workspace-v0230-dev2 .bbd-template-card:focus-visible .bbd-template-card__preview-action {



  opacity: 1;



  transform: translateY(0);



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card > strong {



  padding-inline: 2px;



  color: var(--bbd-v5-ink);



  font-size: 11px;



  font-weight: 750;



}







.bbd-pro-workspace-v0230-dev2 .bbd-template-card > small {



  min-height: 24px;



  padding-inline: 2px;



  color: var(--bbd-v5-muted);



  font-size: 8.5px;



  font-weight: 560;



  line-height: 1.35;



}







.bbd-pro-workspace-v0230-dev2 .bbd-action-card,



.bbd-pro-workspace-v0230-dev2 .bbd-preset-chip,



.bbd-pro-workspace-v0230-dev2 .bbd-component-card,



.bbd-pro-workspace-v0230-dev2 .bbd-clipart-card,



.bbd-pro-workspace-v0230-dev2 .bbd-background-card {



  border-color: var(--bbd-v5-line);



  border-radius: 11px;



  background: #fff;



  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);



}







.bbd-pro-workspace-v0230-dev2 .bbd-action-card:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-preset-chip:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-component-card:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-clipart-card:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-background-card:hover {



  border-color: #ffb18e;



  background: #fffaf7;



  box-shadow: 0 7px 18px rgba(15, 23, 42, .075);



}







/* 14–15: quieter layer list with meaningful object thumbnails. */



.bbd-pro-workspace-v0230-dev2 .bbd-layer-list {



  gap: 7px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row {



  min-height: 80px;



  grid-template-columns: minmax(0, 1fr) repeat(5, 28px);



  grid-template-rows: minmax(46px, auto) 28px;



  gap: 2px;



  padding: 7px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 11px;



  background: #fff;



  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);



  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row:hover {



  border-color: #d3d9e2;



  background: #fbfcfd;



  box-shadow: 0 5px 14px rgba(15, 23, 42, .05);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row.is-selected {



  border-color: #ff9b72;



  background: #fff7f2;



  box-shadow: 0 0 0 2px rgba(255, 75, 0, .07);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-main {



  grid-template-columns: 12px 42px minmax(0, 1fr);



  gap: 7px;



  padding: 0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-drag-handle {



  opacity: .48;



  transition: opacity 120ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row:hover .bbd-layer-drag-handle {



  opacity: 1;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb {



  --bbd-layer-preview-color: #667085;



  width: 40px;



  height: 40px;



  display: grid;



  place-items: center;



  overflow: hidden;



  border: 1px solid #dfe4ea;



  border-radius: 9px;



  background: #f4f6f8;



  color: var(--bbd-layer-preview-color);



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-image-thumb {



  background-color: #eef1f4;



  background-position: center;



  background-repeat: no-repeat;



  background-size: cover;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-text-thumb {



  background: linear-gradient(145deg, #fff, #eef1f5);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-kind--text-preview {



  color: var(--bbd-layer-preview-color);



  font-family: Georgia, "Times New Roman", serif;



  font-size: 20px;



  font-weight: 760;



  line-height: 1;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb {



  position: relative;



  background: #f6f7f9;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb::before {



  content: "";



  position: absolute;



  width: 20px;



  height: 20px;



  border-radius: 4px;



  background: var(--bbd-layer-preview-color);



  box-shadow: 0 2px 4px rgba(15, 23, 42, .16);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb[data-shape*="circle"]::before,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb[data-shape*="ellipse"]::before {



  border-radius: 50%;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb[data-shape*="triangle"]::before {



  width: 0;



  height: 0;



  border-right: 11px solid transparent;



  border-bottom: 20px solid var(--bbd-layer-preview-color);



  border-left: 11px solid transparent;



  border-radius: 0;



  background: transparent;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-thumb.has-shape-thumb .bbd-layer-kind {



  opacity: 0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-name {



  color: var(--bbd-v5-ink);



  font-size: 10.5px;



  font-weight: 710;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-meta {



  color: var(--bbd-v5-muted);



  font-size: 8.5px;



  font-weight: 540;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-quality {



  margin-top: 2px;



  color: var(--bbd-v5-green);



  font-size: 8px;



  font-weight: 680;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-eye,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-solo,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-lock,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-copy,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-trash {



  width: 28px;



  min-width: 28px;



  min-height: 28px;



  border: 0;



  border-radius: 7px;



  background: transparent;



  color: #7d8796;



  opacity: .28;



  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row:hover > button,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-row:focus-within > button,



.bbd-pro-workspace-v0230-dev2 .bbd-layer-row.is-selected > button {



  opacity: 1;



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row > button:hover {



  background: #eef1f4;



  color: var(--bbd-v5-ink);



}







.bbd-pro-workspace-v0230-dev2 .bbd-layer-row .bbd-layer-trash:hover {



  background: #fff0ee;



  color: #b42318;



}







/* 16: quick personalization behaves like a small professional form. */



.bbd-pro-workspace-v0230-dev2 .bbd-product-personalizer,



.bbd-pro-workspace-v0230-dev2 .bbd-product-history {



  gap: 11px;



  padding: 12px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 12px;



  background: linear-gradient(180deg, #fff, #fbfcfd);



  box-shadow: var(--bbd-v5-shadow-card);



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-personalizer__heading > .bbd-pro-action-icon {



  width: 30px;



  height: 30px;



  padding: 7px;



  border-radius: 9px;



  background: var(--bbd-v5-orange-soft);



  color: #d8450a;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-personalizer__heading strong,



.bbd-pro-workspace-v0230-dev2 .bbd-product-history__copy strong {



  color: var(--bbd-v5-ink);



  font-size: 11px;



  font-weight: 760;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-personalizer .bbd-personalizer-field > label {



  color: #4d596b;



  font-size: 9px;



  font-weight: 680;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-personalizer .bbd-personalizer-field button,



.bbd-pro-workspace-v0230-dev2 .bbd-product-history__actions button {



  border-color: var(--bbd-v5-line-strong);



  border-radius: 9px;



  background: #fff;



  color: #667085;



}







/* 17: upload area with clear hierarchy, format badges and queue states. */



.bbd-pro-workspace-v0230-dev2 .bbd-upload-tabs,



.bbd-pro-workspace-v0230-dev2 .bbd-background-mode-tabs {



  min-height: 39px;



  gap: 2px;



  padding: 3px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 10px;



  background: #f4f6f8;



  box-shadow: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-tabs button,



.bbd-pro-workspace-v0230-dev2 .bbd-background-mode-tabs button {



  min-height: 31px;



  padding: 0 10px;



  border-radius: 7px;



  color: #5f6b7d;



  font-size: 9px;



  font-weight: 650;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-tabs button.is-active,



.bbd-pro-workspace-v0230-dev2 .bbd-background-mode-tabs button.is-active {



  background: #fff;



  color: var(--bbd-v5-ink);



  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card {



  min-height: 180px;



  display: grid;



  place-items: center;



  align-content: center;



  gap: 8px;



  padding: 18px 14px;



  border: 1.5px dashed #ff9e78;



  border-radius: 14px;



  background:



    radial-gradient(circle at 50% 18%, rgba(255, 75, 0, .08), transparent 32%),



    #fffaf7;



  color: var(--bbd-v5-ink);



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);



  text-align: center;



  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card.is-dragover {



  border-color: var(--bbd-v5-orange);



  background: #fff5ef;



  box-shadow: 0 9px 24px rgba(255, 75, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, .8);



  transform: translateY(-1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card > svg {



  width: 36px;



  height: 36px;



  padding: 7px;



  border-radius: 11px;



  background: #fff;



  color: var(--bbd-v5-orange);



  box-shadow: 0 5px 14px rgba(255, 75, 0, .12);



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card > strong {



  color: var(--bbd-v5-ink);



  font-size: 12px;



  font-weight: 760;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card > span:not(.bbd-upload-format-badges) {



  max-width: 245px;



  color: var(--bbd-v5-muted);



  font-size: 9px;



  line-height: 1.45;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-card.bbd-premium-upload-card > em {



  min-height: 34px;



  display: inline-flex;



  align-items: center;



  padding: 0 13px;



  border-radius: 9px;



  background: var(--bbd-v5-orange);



  color: #fff;



  box-shadow: 0 5px 12px rgba(255, 75, 0, .18);



  font-size: 10px;



  font-style: normal;



  font-weight: 730;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-format-badges {



  display: flex;



  gap: 5px;



  margin-top: 1px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-format-badges b {



  padding: 3px 6px;



  border: 1px solid #e7e9ee;



  border-radius: 999px;



  background: rgba(255, 255, 255, .86);



  color: #7b8492;



  font-size: 7px;



  font-weight: 720;



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-row {



  border-color: var(--bbd-v5-line);



  border-radius: 11px;



  background: #fff;



  box-shadow: var(--bbd-v5-shadow-card);



}







.bbd-pro-workspace-v0230-dev2 .bbd-upload-row.is-complete {



  border-color: #bfe3d7;



  background: #f4fbf8;



}







/* 18: color controls with native picker, visual sample and optional eyedropper. */



.bbd-pro-workspace-v0230-dev2 .bbd-color-popover {



  width: 286px;



  gap: 12px;



  padding: 12px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 14px;



  background: rgba(255, 255, 255, .98);



  box-shadow: 0 22px 58px rgba(15, 23, 42, .2);



  backdrop-filter: blur(16px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__title strong {



  color: var(--bbd-v5-ink);



  font-size: 12px;



  font-weight: 780;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__title > button {



  width: 30px;



  min-height: 30px;



  border: 0;



  border-radius: 8px;



  background: var(--bbd-v5-soft);



  color: #667085;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__picker {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 7px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native {



  position: relative;



  min-height: 50px;



  display: grid;



  grid-template-columns: 34px minmax(0, 1fr);



  align-items: center;



  gap: 8px;



  padding: 7px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 10px;



  background: var(--bbd-v5-soft);



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native input {



  position: absolute;



  width: 1px;



  height: 1px;



  overflow: hidden;



  opacity: 0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native__sample {



  width: 34px;



  height: 34px;



  border: 3px solid #fff;



  border-radius: 9px;



  box-shadow: 0 0 0 1px #cfd5dd, 0 3px 8px rgba(15, 23, 42, .1);



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native > span:last-child {



  min-width: 0;



  display: grid;



  gap: 2px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native strong {



  color: var(--bbd-v5-ink);



  font-size: 10px;



  font-weight: 720;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-native small {



  color: var(--bbd-v5-muted);



  font-size: 8px;



}







.bbd-pro-workspace-v0230-dev2 [data-bbd-color-eyedropper] {



  min-width: 66px;



  display: grid;



  place-items: center;



  align-content: center;



  gap: 3px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 10px;



  background: #fff;



  color: #536073;



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 [data-bbd-color-eyedropper][hidden] {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 [data-bbd-color-eyedropper] strong {



  font-size: 8px;



  font-weight: 690;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__section {



  gap: 7px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__section > span {



  color: #5d6879;



  font-size: 8px;



  font-weight: 720;



  letter-spacing: .06em;



  text-transform: uppercase;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-swatches {



  grid-template-columns: repeat(6, 1fr);



  gap: 6px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-swatches button {



  width: 34px;



  height: 34px;



  border: 3px solid #fff;



  border-radius: 9px;



  box-shadow: 0 0 0 1px #d7dce3;



  transition: transform 120ms ease, box-shadow 120ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-swatches button:hover {



  box-shadow: 0 0 0 2px var(--bbd-v5-orange), 0 4px 10px rgba(15, 23, 42, .12);



  transform: translateY(-1px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-hex {



  min-height: 40px;



  overflow: hidden;



  border: 1px solid var(--bbd-v5-line-strong);



  border-radius: 9px;



  background: #fff;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-hex > span {



  height: 100%;



  display: grid;



  place-items: center;



  padding: 0 9px;



  border-right: 1px solid var(--bbd-v5-line);



  background: var(--bbd-v5-soft);



  color: #657083;



  font-size: 8px;



  font-weight: 760;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-hex input {



  min-height: 38px;



  border: 0;



  border-radius: 0;



  box-shadow: none;



  font-size: 11px;



  font-weight: 680;



  font-variant-numeric: tabular-nums;



}







.bbd-pro-workspace-v0230-dev2 .bbd-color-popover__actions button {



  min-height: 36px;



  border-radius: 9px;



  font-size: 10px;



  font-weight: 700;



}







/* 19: a real visual checkpoint in the final-review dialog. */



.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__panel {



  width: min(720px, calc(100vw - 28px));



  max-width: 720px;



  padding: 22px;



  border: 1px solid rgba(255, 255, 255, .75);



  border-radius: 18px;



  background: #fff;



  box-shadow: 0 30px 90px rgba(15, 23, 42, .28);



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__panel > h2 {



  margin: 0;



  color: var(--bbd-v5-ink);



  font-size: 25px;



  font-weight: 810;



  letter-spacing: -.035em;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__panel > p {



  max-width: 600px;



  margin: 5px 0 0;



  color: var(--bbd-v5-muted);



  font-size: 11px;



  line-height: 1.5;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__content {



  display: grid;



  grid-template-columns: minmax(0, 1fr);



  gap: 14px;



  margin-top: 17px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__content.has-preview {



  grid-template-columns: minmax(180px, .78fr) minmax(260px, 1.22fr);



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__content[hidden] {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview {



  grid-row: 1 / span 2;



  align-self: stretch;



  display: grid;



  grid-template-rows: minmax(180px, 1fr) auto;



  gap: 0;



  overflow: hidden;



  margin: 0;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 13px;



  background: linear-gradient(145deg, #eef1f5, #e4e8ee);



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview img {



  width: 100%;



  height: 100%;



  min-height: 180px;



  display: block;



  object-fit: contain;



  padding: 14px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview figcaption {



  display: grid;



  grid-template-columns: 28px minmax(0, 1fr);



  align-items: center;



  gap: 8px;



  padding: 9px 11px;



  border-top: 1px solid var(--bbd-v5-line);



  background: rgba(255, 255, 255, .92);



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview figcaption > .bbd-pro-action-icon {



  width: 26px;



  height: 26px;



  padding: 5px;



  border-radius: 8px;



  background: var(--bbd-v5-orange-soft);



  color: #d8450a;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview figcaption span {



  display: grid;



  gap: 1px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview figcaption strong {



  color: var(--bbd-v5-ink);



  font-size: 10px;



  font-weight: 740;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview figcaption small {



  color: var(--bbd-v5-muted);



  font-size: 8px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__detail-list {



  gap: 7px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__detail {



  min-height: 52px;



  padding: 9px;



  border: 1px solid var(--bbd-v5-line);



  border-radius: 10px;



  background: #fbfcfd;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__detail.is-ready {



  border-color: #cce9df;



  background: #f4fbf8;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__detail.is-review {



  border-color: #f0dda9;



  background: #fffbef;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__detail.is-critical {



  border-color: #f0c2bc;



  background: #fff5f3;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__note {



  padding: 9px 11px;



  border-radius: 9px;



  background: var(--bbd-v5-soft-blue);



  color: #536073;



  font-size: 9px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__actions {



  gap: 8px;



  margin-top: 16px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__button {



  min-height: 40px;



  padding: 0 14px;



  border-radius: 9px;



  font-size: 10px;



  font-weight: 720;



}







.bbd-pro-workspace-v0230-dev2 .bbd-dialog__button.is-primary {



  border-color: #ec4807;



  background: linear-gradient(180deg, #ff6530, var(--bbd-v5-orange));



  box-shadow: 0 7px 15px rgba(255, 75, 0, .2);



}







/* 20: micro motion and state feedback. */



@keyframes bbd-v5-tool-in {



  from { opacity: 0; transform: translateX(-5px); }



  to { opacity: 1; transform: translateX(0); }



}







@keyframes bbd-v5-pop-in {



  from { opacity: 0; transform: translate(-50%, -4px) scale(.985); }



  to { opacity: 1; transform: translate(-50%, 0) scale(1); }



}







@keyframes bbd-v5-toast-in {



  from { opacity: 0; transform: translateY(8px) scale(.985); }



  to { opacity: 1; transform: translateY(0) scale(1); }



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar:not([hidden]) {



  animation: bbd-v5-pop-in 150ms ease-out both;



}







.bbd-pro-workspace-v0230-dev2 .bbd-toast {



  overflow: hidden;



  border: 1px solid rgba(15, 23, 42, .1);



  border-left: 3px solid var(--bbd-v5-green);



  border-radius: 11px;



  background: rgba(255, 255, 255, .97);



  color: var(--bbd-v5-ink);



  box-shadow: 0 14px 38px rgba(15, 23, 42, .16);



  animation: bbd-v5-toast-in 190ms ease-out both;



  backdrop-filter: blur(12px);



}







.bbd-pro-workspace-v0230-dev2 .bbd-toast.is-error {



  border-left-color: #b42318;



}







.bbd-pro-workspace-v0230-dev2 .bbd-toast.is-progress {



  border-left-color: #1d4ed8;



}







.bbd-pro-workspace-v0230-dev2 .bbd-toast.is-hiding {



  opacity: 0;



  transform: translateY(5px);



  transition: opacity 180ms ease, transform 180ms ease;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight {



  border-radius: 11px;



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight::before {



  box-shadow: 0 0 0 4px rgba(15, 138, 101, .07);



}







/* 1366px keeps every primary action while reducing labels and spacing. */



@media (min-width: 1025px) and (max-width: 1366px) {



  .bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final .bbd-topbar {



    padding-inline: 10px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-topbar__product {



    max-width: 130px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-topbar__center,



  .bbd-pro-workspace-v0230-dev2 .bbd-topbar__right {



    gap: 3px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-icon-button,



  .bbd-pro-workspace-v0230-dev2 .bbd-system-icon-button {



    width: 33px;



    min-width: 33px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-workspace-mode-tabs button {



    padding-inline: 9px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar .bbd-context-label {



    display: none;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar .bbd-context-label-short {



    display: inline;



  }



}







@media (max-width: 1024px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail {



    padding: 5px 7px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool {



    min-height: 54px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-panel {



    box-shadow: 10px 0 36px rgba(15, 23, 42, .12);



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar {



    top: 40px !important;



    justify-content: flex-start !important;



  }



}







@media (max-width: 760px) {



  .bbd-pro-workspace-v0230-dev2.bbd-interaction-trust-final .bbd-topbar {



    min-height: 58px;



    padding: 0 8px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-brand-title-block strong {



    font-size: 11px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail {



    border-top: 1px solid #2c3441;



    border-right: 0;



    background: #151a23;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool {



    width: auto;



    min-height: 58px;



    animation: none;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar {



    top: 36px !important;



    left: 8px !important;



    width: calc(100% - 16px) !important;



    max-width: none !important;



    transform: none;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar:not([hidden]) {



    animation: bbd-v5-toast-in 150ms ease-out both;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-context-route-toolbar button {



    min-width: 42px;



    min-height: 40px;



    padding: 0 8px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-color-popover.is-mobile-sheet {



    width: auto;



    border-radius: 16px 16px 0 0;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__panel {



    max-height: calc(100dvh - 24px);



    overflow-y: auto;



    padding: 18px;



    border-radius: 16px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__panel > h2 {



    font-size: 21px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__content,



  .bbd-pro-workspace-v0230-dev2 .bbd-dialog.is-save-review .bbd-dialog__content.has-preview {



    grid-template-columns: 1fr;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview {



    grid-row: auto;



    grid-template-rows: minmax(130px, 180px) auto;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog__preview img {



    min-height: 130px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-dialog__actions {



    position: sticky;



    bottom: -18px;



    padding: 12px 0 18px;



    background: linear-gradient(180deg, rgba(255,255,255,.4), #fff 24%);



  }



}







@media (max-width: 430px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-save-state,



  .bbd-pro-workspace-v0230-dev2 .bbd-more-menu {



    display: none;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save {



    min-width: 62px;



    padding-inline: 11px;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-primary-button.bbd-premium-save .bbd-pro-action-icon {



    display: none;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-template-grid {



    gap: 8px;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev2 *,



  .bbd-pro-workspace-v0230-dev2 *::before,



  .bbd-pro-workspace-v0230-dev2 *::after {



    scroll-behavior: auto !important;



    animation-duration: .01ms !important;



    animation-iteration-count: 1 !important;



    transition-duration: .01ms !important;



  }



}







/* v0.23.0-dev.2 — Interaction & Trust Final. */



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner {



  top: 86px !important;



  width: min(760px, calc(100% - 44px)) !important;



  max-width: 760px !important;



  grid-template-columns: 38px minmax(220px, 1fr) auto 32px !important;



  grid-template-rows: auto auto auto !important;



  grid-template-areas:



    "quality-icon quality-copy quality-action quality-close"



    "quality-icon quality-copy quality-continue quality-toggle"



    "quality-details quality-details quality-details quality-details" !important;



  column-gap: 12px !important;



  row-gap: 7px !important;



  padding: 11px 12px !important;



  border: 1px solid #d8e0ea !important;



  border-left: 3px solid var(--bbd-color-advisory) !important;



  border-radius: 12px !important;



  background: rgba(255, 255, 255, .97) !important;



  color: #344054 !important;



  box-shadow: 0 14px 38px rgba(15, 23, 42, .13), 0 2px 6px rgba(15, 23, 42, .06) !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="caution"] {



  border-left-color: var(--bbd-color-caution) !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="critical"] {



  border-color: #f1c1bc !important;



  border-left-color: var(--bbd-color-danger) !important;



  background: rgba(255, 253, 252, .98) !important;



  color: #7a271a !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__icon {



  grid-area: quality-icon !important;



  align-self: start;



  width: 36px;



  height: 36px;



  background: var(--bbd-color-advisory-soft);



  color: var(--bbd-color-advisory);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="caution"] .bbd-quality-banner__icon {



  background: var(--bbd-color-caution-soft);



  color: var(--bbd-color-caution);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="critical"] .bbd-quality-banner__icon {



  background: var(--bbd-color-critical-soft);



  color: var(--bbd-color-danger);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__copy {



  grid-area: quality-copy !important;



  align-self: center;



  gap: 3px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__copy em {



  width: max-content;



  margin: 0 0 1px;



  color: var(--bbd-color-advisory);



  font-size: 9px;



  font-style: normal;



  font-weight: 850;



  letter-spacing: .055em;



  line-height: 1.2;



  text-transform: uppercase;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="caution"] .bbd-quality-banner__copy em {



  color: var(--bbd-color-caution);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="critical"] .bbd-quality-banner__copy em {



  color: var(--bbd-color-danger);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__copy strong {



  color: #172033 !important;



  font-size: 12px;



  font-weight: 820;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-tone="critical"] .bbd-quality-banner__copy strong {



  color: #7a271a !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__copy span {



  overflow: visible;



  color: #526071;



  font-size: 10.5px;



  font-weight: 580;



  line-height: 1.42;



  text-overflow: clip;



  white-space: normal;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__action,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__continue,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__toggle,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__close {



  border: 0;



  font-family: var(--bbd-font-ui);



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__action {



  grid-area: quality-action !important;



  min-height: 34px;



  justify-content: center;



  border: 1px solid #172033 !important;



  background: #172033 !important;



  color: #fff !important;



  box-shadow: 0 2px 5px rgba(15, 23, 42, .12);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__action:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__action:focus-visible {



  background: #263248 !important;



  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14), 0 4px 10px rgba(15, 23, 42, .14) !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__continue {



  grid-area: quality-continue;



  min-height: 28px;



  justify-self: end;



  padding: 0 5px;



  border-radius: 6px;



  background: transparent;



  color: #526071;



  font-size: 10px;



  font-weight: 760;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__continue:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__continue:focus-visible {



  background: #f1f5f9;



  color: #172033;



  outline: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__toggle {



  grid-area: quality-toggle !important;



  align-self: center;



  justify-self: center;



  color: #526071;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__close {



  grid-area: quality-close !important;



  align-self: start;



  color: #667085;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__details {



  grid-area: quality-details !important;



  border-top-color: #e4e9f0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-compact="true"] {



  top: 68px !important;



  right: 18px !important;



  left: auto !important;



  width: auto !important;



  max-width: min(260px, calc(100% - 36px)) !important;



  display: block !important;



  padding: 0 !important;



  transform: none !important;



  border: 0 !important;



  background: transparent !important;



  box-shadow: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip {



  display: grid;



  grid-template-columns: 20px minmax(0, 1fr) 14px;



  align-items: center;



  gap: 8px;



  min-height: 42px;



  width: 100%;



  padding: 7px 9px;



  border: 1px solid #d8e0ea;



  border-radius: 10px;



  background: rgba(255, 255, 255, .96);



  color: #344054;



  text-align: left;



  box-shadow: 0 8px 22px rgba(15, 23, 42, .11);



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip:focus-visible {



  border-color: #9eb5d4;



  outline: none;



  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12), 0 10px 24px rgba(15, 23, 42, .12);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip > .bbd-quality-icon:first-child {



  color: var(--bbd-color-advisory);



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip > .bbd-quality-icon:last-child {



  width: 14px;



  height: 14px;



  color: #667085;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip span {



  min-width: 0;



  display: grid;



  gap: 1px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip strong,



.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip small {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip strong {



  color: #172033;



  font-size: 10.5px;



  font-weight: 820;



}







.bbd-pro-workspace-v0230-dev2 .bbd-quality-chip small {



  color: #667085;



  font-size: 9px;



  font-weight: 620;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="warning"] {



  border-color: #d8e0ea !important;



  background: #f7f9fc !important;



  color: #344054 !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-product-preflight[data-level="warning"]::before {



  background: var(--bbd-color-advisory) !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu,



.bbd-pro-workspace-v0230-dev2 .bbd-object-popover.bbd-context-more-menu,



.bbd-pro-workspace-v0230-dev2 .bbd-context-menu {



  z-index: var(--bbd-context-menu-z) !important;



  display: grid;



  width: 258px !important;



  min-width: 258px !important;



  max-width: calc(100vw - 20px);



  max-height: min(520px, calc(100vh - 76px));



  gap: 2px;



  overflow-x: hidden;



  overflow-y: auto;



  padding: 8px !important;



  border: 1px solid #dce2ea !important;



  border-radius: 12px !important;



  background: var(--bbd-color-command-surface) !important;



  color: #172033;



  box-shadow: var(--bbd-shadow-command) !important;



  scrollbar-width: thin;



  transform-origin: top left;



  animation: bbd-command-menu-in-dev6 130ms cubic-bezier(.2,.75,.3,1) both;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-menu[data-placement-x="left"] {



  transform-origin: top right;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-menu[data-placement-y="up"] {



  transform-origin: bottom left;



}







.bbd-pro-workspace-v0230-dev2 .bbd-context-menu[data-placement-x="left"][data-placement-y="up"] {



  transform-origin: bottom right;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu[hidden],



.bbd-pro-workspace-v0230-dev2 .bbd-object-popover.bbd-context-more-menu[hidden],



.bbd-pro-workspace-v0230-dev2 .bbd-context-menu[hidden] {



  display: none !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header {



  display: grid;



  grid-template-columns: 32px minmax(0, 1fr);



  align-items: center;



  gap: 9px;



  min-height: 48px;



  padding: 5px 7px 7px;



  border-bottom: 1px solid #e9edf3;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header > .bbd-context-icon {



  width: 30px;



  height: 30px;



  padding: 6px;



  border-radius: 8px;



  background: #f1f5f9;



  color: #344054;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header span {



  min-width: 0;



  display: grid;



  gap: 1px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header strong,



.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header small {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header strong {



  font-size: 11.5px;



  font-weight: 820;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__header small {



  color: #667085;



  font-size: 9.5px;



  font-weight: 620;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__separator {



  height: 1px;



  margin: 5px 4px;



  background: #e9edf3;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu .bbd-command-menu__item,



.bbd-pro-workspace-v0230-dev2 .bbd-context-more-menu .bbd-command-menu__item,



.bbd-pro-workspace-v0230-dev2 .bbd-context-menu .bbd-command-menu__item {



  display: grid !important;



  grid-template-columns: 20px minmax(0, 1fr) auto;



  align-items: center;



  gap: 9px;



  width: 100%;



  min-height: 40px;



  padding: 6px 8px !important;



  border: 0;



  border-radius: 8px;



  background: transparent;



  color: #344054;



  text-align: left;



  cursor: pointer;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu .bbd-command-menu__item:hover:not(:disabled),



.bbd-pro-workspace-v0230-dev2 .bbd-command-menu .bbd-command-menu__item:focus-visible {



  background: var(--bbd-color-command-hover) !important;



  color: #101828;



  outline: none;



  box-shadow: inset 0 0 0 1px #e4e9f0;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item > .bbd-context-icon {



  width: 18px;



  height: 18px;



  color: #526071;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__copy {



  min-width: 0;



  display: grid;



  gap: 1px;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__copy strong {



  overflow: hidden;



  font-size: 11px;



  font-weight: 740;



  line-height: 1.25;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__copy small {



  overflow: hidden;



  color: #8490a2;



  font-size: 8.5px;



  font-weight: 580;



  line-height: 1.2;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item kbd {



  min-width: 34px;



  padding: 2px 5px;



  border: 1px solid #dde3eb;



  border-bottom-color: #c8d0db;



  border-radius: 5px;



  background: #f8fafc;



  color: #667085;



  font: 650 8px/1.2 var(--bbd-font-ui);



  text-align: center;



  white-space: nowrap;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item:disabled {



  opacity: .52 !important;



  cursor: not-allowed !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item.is-destructive {



  color: var(--bbd-color-danger) !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item.is-destructive > .bbd-context-icon {



  color: var(--bbd-color-danger);



}







.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item.is-destructive:hover:not(:disabled),



.bbd-pro-workspace-v0230-dev2 .bbd-command-menu__item.is-destructive:focus-visible {



  background: var(--bbd-color-critical-soft) !important;



  box-shadow: inset 0 0 0 1px #f1c1bc;



}







@keyframes bbd-command-menu-in-dev6 {



  from { opacity: 0; transform: translateY(-3px) scale(.985); }



  to { opacity: 1; transform: translateY(0) scale(1); }



}







@media (max-width: 820px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner {



    top: 76px !important;



    width: min(560px, calc(100% - 28px)) !important;



    grid-template-columns: 34px minmax(0, 1fr) 30px !important;



    grid-template-areas:



      "quality-icon quality-copy quality-close"



      "quality-action quality-action quality-action"



      "quality-continue quality-continue quality-toggle"



      "quality-details quality-details quality-details" !important;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__action {



    width: 100%;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner__continue {



    justify-self: start;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner[data-compact="true"] {



    top: 70px !important;



    right: 12px !important;



    width: auto !important;



  }



}







@media (max-width: 520px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-quality-banner {



    top: 62px !important;



    max-height: min(58vh, 430px);



    overflow-y: auto;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-command-menu,



  .bbd-pro-workspace-v0230-dev2 .bbd-context-menu,



  .bbd-pro-workspace-v0230-dev2 .bbd-object-popover.bbd-context-more-menu {



    width: min(276px, calc(100vw - 20px)) !important;



    min-width: min(276px, calc(100vw - 20px)) !important;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev2 .bbd-command-menu,



  .bbd-pro-workspace-v0230-dev2 .bbd-context-menu,



  .bbd-pro-workspace-v0230-dev2 .bbd-object-popover.bbd-context-more-menu {



    animation: none !important;



  }



}







/* v0.23.0-dev.2 — Empty State Placement Final. */



.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] {



  inset: auto !important;



  box-sizing: border-box;



  width: min(var(--bbd-empty-card-width, 320px), calc(100% - 32px)) !important;



  justify-items: center;



  gap: 8px !important;



  padding: 16px !important;



  overflow: visible;



  border: 1px solid #d8e0ea !important;



  border-radius: 14px !important;



  background: rgba(255, 255, 255, .97) !important;



  box-shadow: 0 16px 38px rgba(15, 23, 42, .15), 0 2px 8px rgba(15, 23, 42, .07) !important;



  color: #172033;



  text-align: center;



  transform: translate(-50%, -50%) !important;



  animation: bbd-empty-state-in-dev7 160ms cubic-bezier(.2, .75, .3, 1) both;



  pointer-events: none;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"]::before {



  content: "+";



  width: 34px;



  height: 34px;



  display: grid;



  place-items: center;



  border: 1px solid #ffd4c2;



  border-radius: 10px;



  background: #fff5f0;



  color: var(--bbd-color-accent);



  font-size: 23px;



  font-weight: 500;



  line-height: 1;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] > strong {



  color: #172033;



  font-size: 14px;



  font-weight: 820;



  line-height: 1.25;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] > span {



  max-width: 28em;



  color: #667085;



  font-size: 10.5px;



  font-weight: 580;



  line-height: 1.42;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] > div {



  width: 100%;



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 7px;



  margin-top: 4px;



  pointer-events: auto;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button,



.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button:first-child {



  grid-column: auto;



  min-width: 0;



  min-height: 38px;



  padding: 8px 10px;



  border-radius: 8px;



  font-size: 10.5px;



  font-weight: 780;



  line-height: 1.2;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button:first-child {



  border-color: var(--bbd-color-accent) !important;



  background: var(--bbd-color-accent) !important;



  color: #fff !important;



  box-shadow: 0 5px 12px rgba(255, 75, 0, .2);



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button:last-child {



  border-color: #d8e0ea !important;



  background: #fff !important;



  color: #283548 !important;



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button:hover,



.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button:focus-visible {



  outline: none;



  transform: translateY(-1px);



  box-shadow: 0 0 0 3px rgba(255, 75, 0, .13), 0 7px 16px rgba(15, 23, 42, .12);



}







.bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"][data-layout="stacked"] > div {



  grid-template-columns: 1fr;



}







@keyframes bbd-empty-state-in-dev7 {



  from { opacity: 0; transform: translate(-50%, calc(-50% + 5px)) scale(.985); }



  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }



}







@media (max-width: 520px) {



  .bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] {



    width: min(var(--bbd-empty-card-width, 280px), calc(100% - 20px)) !important;



    padding: 13px !important;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] {



    animation: none !important;



  }







  .bbd-pro-workspace-v0230-dev2 .bbd-canvas-empty[data-placement="surface-center"] button {



    transform: none !important;



  }



}











/* ============================================================



 * v0.23.0-dev.3 — Yelken Shaped Surface Pilot



 * ------------------------------------------------------------



 * The physical silhouette itself is drawn by Fabric so it stays



 * in the same coordinate system as selection, zoom and preview.



 * CSS only clarifies the studio/edit context around that surface.



 * ============================================================ */



.bbd-app.bbd-pro-workspace-v0230-dev3[data-edit-surface="feather"] .bbd-canvas-shell {



  background:



    radial-gradient(circle at 50% 36%, rgba(255,255,255,.96) 0, rgba(244,247,250,.9) 34%, rgba(225,231,237,.92) 76%, rgba(215,222,229,.96) 100%) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev3[data-edit-surface="feather"] .bbd-canvas-stage::before {



  content:"YELKEN KUMAŞ YÜZEYİ";



  position:absolute;



  left:18px;



  bottom:16px;



  z-index:2;



  pointer-events:none;



  padding:6px 9px;



  border:1px solid rgba(15,23,42,.09);



  border-radius:999px;



  background:rgba(255,255,255,.78);



  color:#5b6675;



  font-size:9px;



  font-weight:850;



  letter-spacing:.08em;



  backdrop-filter:blur(8px);



}



.bbd-app.bbd-pro-workspace-v0230-dev3[data-edit-surface="feather"] [data-bbd-product-mockup] {



  color:#0f766e;



}



.bbd-app.bbd-pro-workspace-v0230-dev3[data-edit-surface="feather"] .bbd-product-family-pill::after {



  content:" · şekilli yüzey";



  opacity:.72;



}



@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev3[data-edit-surface="feather"] .bbd-canvas-stage::before {



    left:10px;



    bottom:10px;



    font-size:8px;



  }



}











/* v0.23.0-dev.6 — Procedural true-feather geometry pilot */



.bbd-product-preview__viewport.is-three-preview{position:relative;overflow:hidden;min-height:clamp(440px,62vh,720px);background:#e8edf2}



.bbd-product-preview__three-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:none;outline:none}



.bbd-product-preview__three-canvas.is-dragging{cursor:grabbing}



.bbd-product-preview__three-canvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,75,0,.42)}



.bbd-product-preview__three-controls{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px 9px 12px;border:1px solid rgba(148,163,184,.46);border-radius:14px;background:rgba(255,255,255,.86);box-shadow:0 12px 28px rgba(15,23,42,.10);backdrop-filter:blur(10px);pointer-events:auto}



.bbd-product-preview__three-controls>span{display:grid;gap:1px;min-width:0}.bbd-product-preview__three-controls strong{font-size:10px;line-height:1.2;letter-spacing:.08em;color:#0f172a}.bbd-product-preview__three-controls small{font-size:11px;color:#64748b}.bbd-product-preview__three-controls>div{display:flex;gap:6px}.bbd-product-preview__three-controls button{min-width:44px;min-height:36px;padding:6px 10px;border:1px solid #d7dee7;border-radius:9px;background:#fff;color:#1e293b;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.bbd-product-preview__three-controls button:hover,.bbd-product-preview__three-controls button:focus-visible{border-color:#ff4b00;color:#d63f00;outline:none}



@media(max-width:760px){.bbd-product-preview__viewport.is-three-preview{min-height:500px}.bbd-product-preview__three-controls{left:10px;right:10px;bottom:10px;padding:8px}.bbd-product-preview__three-controls small{display:none}}











/* v0.23.0-dev.6 — procedural true-feather polish */



.bbd-pro-workspace-v0230-dev6 .bbd-product-preview__viewport.is-three-preview{background:linear-gradient(180deg,#edf1f4 0%,#e5eaee 100%)}



.bbd-pro-workspace-v0230-dev6 .bbd-product-preview__three-controls strong::after{content:" · PARAMETRİK MODEL";font-size:9px;color:#64748b;font-weight:800;letter-spacing:.04em}







/* v0.23.0-dev.6 — true feather silhouette + template fit */



.bbd-pro-workspace-v0230-dev6 .bbd-product-preview__three-controls strong::after{content:" · TRUE FEATHER";font-size:9px;color:#64748b;font-weight:800;letter-spacing:.04em}







/* v0.23.0-dev.8 — exact CDR production cutline blueprint */



.bbd-pro-workspace-v0230-dev8 .bbd-product-preview__three-controls strong::after{content:" · CDR BLUEPRINT";font-size:9px;color:#64748b;font-weight:800;letter-spacing:.04em}











/* ============================================================



 * v0.23.0-dev.9 — Fabric Artboard Focus



 * ------------------------------------------------------------



 * In shaped Yelken editing the only visible "paper" is the fabric.



 * The Fabric canvas stays rectangular for interaction math, but the



 * rectangle becomes visually transparent and inherits the studio.



 * Hardware remains exclusive to Product Preview.



 * ============================================================ */



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-shell {



  background: #e8edf2 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-stage::before {



  content: "KUMAŞ TASARIM ALANI";



  left: 14px;



  bottom: 12px;



  border-color: rgba(100,116,139,.16);



  background: rgba(248,250,252,.82);



  color: #64748b;



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container:hover {



  border: 0 !important;



  border-radius: 0 !important;



  background: transparent !important;



  box-shadow: none !important;



  outline: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {



  background: transparent !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-container {



  background: transparent !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-product-family-pill::after {



  content: " · kumaş yüzeyi";



}



.bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-empty[data-placement="surface-center"] {



  max-width: min(300px, calc(100% - 24px)) !important;



}



.bbd-pro-workspace-v0230-dev9 .bbd-product-preview__three-controls strong::after {



  content: " · FABRIC-FIRST";



  font-size: 9px;



  color: #64748b;



  font-weight: 800;



  letter-spacing: .04em;



}



@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev9[data-edit-surface="feather"] .bbd-canvas-stage::before {



    display:none;



  }



}







/* ============================================================



 * v0.23.0-dev.10 — Realistic Studio Mockup Scene



 * ------------------------------------------------------------



 * Product Preview is a self-contained neutral ecommerce studio:



 * cyclorama + soft shadows + full-product camera fit. No remote



 * photo background is required, so the scene is fast and safe for



 * commercial use.



 * ============================================================ */



.bbd-pro-workspace-v0230-dev10 .bbd-product-preview__viewport.is-three-preview {



  min-height: clamp(500px, 66vh, 780px);



  border: 1px solid rgba(148,163,184,.28);



  border-radius: 18px;



  background: #e7ebef;



  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 18px 44px rgba(15,23,42,.08);



}



.bbd-pro-workspace-v0230-dev10 .bbd-product-preview__viewport.is-three-preview::before {



  content: "STÜDYO SAHNESİ";



  position: absolute;



  top: 14px;



  left: 14px;



  z-index: 6;



  pointer-events: none;



  padding: 7px 9px;



  border: 1px solid rgba(148,163,184,.28);



  border-radius: 999px;



  background: rgba(255,255,255,.78);



  color: #475569;



  box-shadow: 0 8px 22px rgba(15,23,42,.07);



  backdrop-filter: blur(10px);



  font-size: 9px;



  line-height: 1;



  font-weight: 900;



  letter-spacing: .09em;



}



.bbd-pro-workspace-v0230-dev10 .bbd-product-preview__three-controls {



  left: 18px;



  right: 18px;



  bottom: 18px;



  border-color: rgba(148,163,184,.34);



  background: rgba(255,255,255,.90);



  box-shadow: 0 16px 36px rgba(15,23,42,.12);



}



.bbd-pro-workspace-v0230-dev10 .bbd-product-preview__three-controls strong::after {



  content: " · STÜDYO";



  font-size: 9px;



  color: #64748b;



  font-weight: 850;



  letter-spacing: .05em;



}



@media(max-width:760px){



  .bbd-pro-workspace-v0230-dev10 .bbd-product-preview__viewport.is-three-preview {



    min-height: 520px;



    border-radius: 14px;



  }



  .bbd-pro-workspace-v0230-dev10 .bbd-product-preview__viewport.is-three-preview::before {



    top: 10px;



    left: 10px;



  }



  .bbd-pro-workspace-v0230-dev10 .bbd-product-preview__three-controls {



    left: 10px;



    right: 10px;



    bottom: 10px;



  }



}











/* ============================================================



 * v0.23.0-dev.11 — Preview Stability + Mockup Realism



 * ============================================================ */



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-stage,



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {



  background: transparent !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev11[data-edit-surface="feather"] .bbd-canvas-stage::before {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev11 .bbd-product-preview__viewport.is-three-preview {



  background: #e9edf1;



  overflow: hidden;



}



.bbd-pro-workspace-v0230-dev11 .bbd-product-preview__viewport.is-three-preview::before {



  content: "STÜDYO · GERÇEK ÜRÜN KADRAJI";



}



.bbd-pro-workspace-v0230-dev11 .bbd-product-preview__three-controls strong::after {



  content: " · STABİL";



}



@media (min-width: 1025px) {



  .bbd-pro-workspace-v0230-dev11 .bbd-product-preview__three-controls {



    left: 22px;



    right: 22px;



    bottom: 18px;



  }



}







/* ============================================================



 * v0.23.0-dev.12 — Balanced Safe Area + SVG Layered Templates



 * ============================================================ */



.bbd-app.bbd-pro-workspace-v0230-dev12[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev12[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev12[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {



  background: transparent !important;



  box-shadow: none !important;



}







/* Product-aware feather cards now preview the actual silhouette, not a poster. */



.bbd-pro-workspace-v0230-dev12 .bbd-template-card__svg--feather {



  width: 64%;



  height: 94%;



  overflow: visible;



  filter: drop-shadow(0 5px 8px rgba(15,23,42,.16));



}



.bbd-pro-workspace-v0230-dev12 .bbd-template-preview-layer {



  transform-box: fill-box;



  transform-origin: center;



  transition: transform 170ms cubic-bezier(.2,.75,.2,1), opacity 170ms ease;



  will-change: transform;



}



.bbd-pro-workspace-v0230-dev12 .bbd-template-preview-layer--depth-1 {



  transform: translate(var(--bbd-px1, 0px), var(--bbd-py1, 0px));



}



.bbd-pro-workspace-v0230-dev12 .bbd-template-preview-layer--depth-2 {



  transform: translate(var(--bbd-px2, 0px), var(--bbd-py2, 0px));



}



.bbd-pro-workspace-v0230-dev12 .bbd-template-preview-layer--depth-3 {



  transform: translate(var(--bbd-px3, 0px), var(--bbd-py3, 0px));



}



.bbd-pro-workspace-v0230-dev12 .bbd-template-preview-feather-outline {



  vector-effect: non-scaling-stroke;



  pointer-events: none;



}



@media (hover:hover) and (pointer:fine) {



  .bbd-pro-workspace-v0230-dev12 .bbd-template-card:hover .bbd-template-card__svg--feather {



    transform: scale(1.035) rotate(.35deg);



    filter: drop-shadow(0 9px 13px rgba(15,23,42,.20));



  }



  .bbd-pro-workspace-v0230-dev12 .bbd-template-card:hover .bbd-template-card__preview {



    background:



      radial-gradient(circle at 76% 20%, rgba(255,255,255,.96), transparent 32%),



      linear-gradient(145deg, #f8fafc, #e9eef4);



  }



}



@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev12 .bbd-template-preview-layer,



  .bbd-pro-workspace-v0230-dev12 .bbd-template-card__svg--feather {



    transition: none !important;



    transform: none !important;



  }



}







/* A tiny legend refinement: the guides are visual production aids, not frame borders. */



.bbd-pro-workspace-v0230-dev12 .bbd-product-family-pill::after {



  content: " · gerçek kumaş yüzeyi";



}











/* ============================================================



 * v0.23.0-dev.13 — Physical Safe Offset + Pro Template Pack v2



 * ============================================================ */



.bbd-app.bbd-pro-workspace-v0230-dev13[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev13[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev13[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {



  background: transparent !important;



  box-shadow: none !important;



}



.bbd-pro-workspace-v0230-dev13 .bbd-template-card__preview {



  perspective: 620px;



  overflow: hidden;



  isolation: isolate;



}



.bbd-pro-workspace-v0230-dev13 .bbd-template-card__preview::before {



  content: "";



  position: absolute;



  inset: 0;



  pointer-events: none;



  z-index: 4;



  background: radial-gradient(circle at var(--bbd-shine-x,50%) var(--bbd-shine-y,50%), rgba(255,255,255,.52), rgba(255,255,255,0) 36%);



  opacity: .0;



  transition: opacity 160ms ease;



  mix-blend-mode: screen;



}



.bbd-pro-workspace-v0230-dev13 .bbd-template-card__svg--feather {



  transform-style: preserve-3d;



  transform: perspective(620px) rotateX(var(--bbd-tilt-x,0deg)) rotateY(var(--bbd-tilt-y,0deg)) scale(1.01);



  transition: transform 170ms cubic-bezier(.2,.75,.2,1), filter 170ms ease;



}



@media (hover:hover) and (pointer:fine) {



  .bbd-pro-workspace-v0230-dev13 .bbd-template-card:hover .bbd-template-card__preview::before { opacity: .62; }



  .bbd-pro-workspace-v0230-dev13 .bbd-template-card:hover .bbd-template-card__svg--feather {



    transform: perspective(620px) rotateX(var(--bbd-tilt-x,0deg)) rotateY(var(--bbd-tilt-y,0deg)) scale(1.045);



    filter: drop-shadow(0 10px 16px rgba(15,23,42,.22));



  }



}



.bbd-pro-workspace-v0230-dev13 .bbd-template-preview-layer--depth-1 { opacity: .96; }



.bbd-pro-workspace-v0230-dev13 .bbd-template-preview-layer--depth-2 { opacity: .985; }



.bbd-pro-workspace-v0230-dev13 .bbd-template-preview-layer--depth-3 { opacity: 1; }



.bbd-pro-workspace-v0230-dev13 .bbd-product-preview__viewport.is-three-preview::before {



  content: "STÜDYO · TEMİZ GÖLGE · KUMAŞ DOKUSU";



}



.bbd-pro-workspace-v0230-dev13 .bbd-product-preview__three-controls strong::after {



  content: " · PRO";



}



@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev13 .bbd-template-card__svg--feather { transform: none !important; }



  .bbd-pro-workspace-v0230-dev13 .bbd-template-card__preview::before { display:none !important; }



}











/* v0.23.0-dev.14 — Final Config Sync + True Contour Safe */



.bbd-app.bbd-pro-workspace-v0230-dev14[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev14[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev14[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas{background:transparent!important;}



.bbd-pro-workspace-v0230-dev14 .bbd-template-card__preview{transform-style:preserve-3d;}



@media (prefers-reduced-motion: reduce){.bbd-pro-workspace-v0230-dev14 .bbd-template-card__svg--feather{transform:none!important;}}











/* ============================================================



 * v0.23.0-dev.15 — Live Configurator Sync + Workspace Polish



 * ============================================================ */



.bbd-pro-workspace-v0230-dev15 #bbd-size-label[data-config-sync="live"] {



  position: relative;



  padding-left: 22px;



  border-color: rgba(5,150,105,.22);



  background: linear-gradient(180deg,#f7fffc,#eefbf6);



  color: #0f513f;



}



.bbd-pro-workspace-v0230-dev15 #bbd-size-label[data-config-sync="live"]::before {



  content: "";



  position: absolute;



  left: 9px;



  top: 50%;



  width: 7px;



  height: 7px;



  margin-top: -3.5px;



  border-radius: 50%;



  background: #10b981;



  box-shadow: 0 0 0 3px rgba(16,185,129,.12);



}



.bbd-pro-workspace-v0230-dev15 #bbd-size-label.is-sync-pulse::before { animation: bbdDev15SyncPulse .7s ease-out; }



@keyframes bbdDev15SyncPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.42)} 100%{box-shadow:0 0 0 7px rgba(16,185,129,0)} }







/* Fabric-first workspace: remove the last rectangular-card feeling around the shaped product. */



.bbd-app.bbd-pro-workspace-v0230-dev15[data-edit-surface="feather"] .bbd-canvas-stage,



.bbd-app.bbd-pro-workspace-v0230-dev15[data-edit-surface="feather"] .bbd-canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev15[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container {



  background: transparent !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev15[data-edit-surface="feather"] .bbd-canvas-stage::before { display:none!important; }







/* Cleaner template browsing: stronger selected state, quieter chrome, more artwork. */



.bbd-pro-workspace-v0230-dev15 .bbd-template-card { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }



.bbd-pro-workspace-v0230-dev15 .bbd-template-card:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(15,23,42,.08); }



.bbd-pro-workspace-v0230-dev15 .bbd-template-card.is-active,



.bbd-pro-workspace-v0230-dev15 .bbd-template-card[aria-pressed="true"] { border-color: rgba(255,75,0,.58)!important; box-shadow: 0 0 0 2px rgba(255,75,0,.10),0 10px 24px rgba(15,23,42,.08); }



.bbd-pro-workspace-v0230-dev15 .bbd-template-card__preview { min-height: 102px; background: linear-gradient(145deg,#fbfcfe,#eef2f6); }







/* Preview should open as a product hero rather than a distant technical viewport. */



.bbd-pro-workspace-v0230-dev15 .bbd-product-preview__viewport.is-three-preview { background: linear-gradient(180deg,#edf0f2 0%,#e5e9ec 100%); }



.bbd-pro-workspace-v0230-dev15 .bbd-product-preview__viewport.is-three-preview::before { content:"STÜDYO · CANLI ÜRÜN"; letter-spacing:.055em; }



@media (prefers-reduced-motion: reduce){



  .bbd-pro-workspace-v0230-dev15 #bbd-size-label.is-sync-pulse::before { animation:none; }



  .bbd-pro-workspace-v0230-dev15 .bbd-template-card { transition:none; }



}







/* ============================================================



 * v0.23.0-dev.16 — Authoritative Size Sync + UX Polish



 * ============================================================ */



.bbd-pro-workspace-v0230-dev16 #bbd-size-label[data-config-sync="live"] {



  box-shadow: 0 0 0 1px rgba(16,185,129,.08), 0 5px 16px rgba(15,23,42,.05);



}



.bbd-pro-workspace-v0230-dev16 #bbd-upload-help[data-size-sync="live"] {



  position: relative;



  padding-left: 30px !important;



  border: 1px solid rgba(16,185,129,.13) !important;



  background: linear-gradient(180deg,#f8fffc,#edf9f5) !important;



  color: #315b4f !important;



}



.bbd-pro-workspace-v0230-dev16 #bbd-upload-help[data-size-sync="live"]::before {



  content: "";



  position: absolute;



  left: 13px;



  top: 50%;



  width: 7px;



  height: 7px;



  margin-top: -3.5px;



  border-radius: 999px;



  background: #10b981;



  box-shadow: 0 0 0 3px rgba(16,185,129,.11);



}



/* The Fabric workspace outside the feather itself is truly transparent now. */



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-shell {



  background:



    radial-gradient(circle at 50% 42%, rgba(255,255,255,.74), rgba(244,247,250,.28) 35%, rgba(226,232,240,.12) 70%),



    #edf1f5 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-stage,



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev16[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {



  background: transparent !important;



  box-shadow: none !important;



}



/* Preview always starts front-facing; make the selected camera preset obvious. */



.bbd-pro-workspace-v0230-dev16 .bbd-product-preview__three-controls button[data-view] {



  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;



}



.bbd-pro-workspace-v0230-dev16 .bbd-product-preview__three-controls button[data-view].is-active,



.bbd-pro-workspace-v0230-dev16 .bbd-product-preview__three-controls button[data-view][aria-pressed="true"] {



  color: #c2410c;



  border-color: rgba(249,115,22,.36);



  background: #fff7ed;



  box-shadow: 0 0 0 2px rgba(249,115,22,.08);



}



.bbd-pro-workspace-v0230-dev16 .bbd-product-preview__viewport.is-three-preview::before {



  content: "STÜDYO · ÖNDEN BAŞLAT · CANLI ÜRÜN";



}



/* Keep the product clear of the control dock on desktop previews. */



@media (min-width: 1025px) {



  .bbd-pro-workspace-v0230-dev16 .bbd-product-preview__viewport.is-three-preview {



    min-height: clamp(540px, 68vh, 800px);



  }



  .bbd-pro-workspace-v0230-dev16 .bbd-product-preview__three-controls {



    bottom: 14px;



  }



}



@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev16 .bbd-product-preview__three-controls button[data-view] { transition: none; }



}



.bbd-pro-workspace-v0230-dev16 .bbd-measure-kind {



  color: #64748b;



  font-size: 10px;



  font-weight: 800;



  letter-spacing: .02em;



  white-space: nowrap;



}



.bbd-pro-workspace-v0230-dev16 .bbd-measure-crop {



  display: inline-flex;



  align-items: center;



  min-height: 22px;



  padding: 0 8px;



  border-radius: 999px;



  background: #fff7ed;



  color: #c2410c;



  font-size: 10px;



  font-style: normal;



  font-weight: 800;



  white-space: nowrap;



}







/* ============================================================



 * v0.23.0-dev.21 — PRO SUITE / FIVE-LEVEL UPGRADE



 * Levels 17→21 combined in one release:



 * 17 Product-first workspace coach



 * 18 Adaptive template presentation



 * 19 Responsive 3D hero framing



 * 20 Premium studio/material polish



 * 21 Preflight + handoff clarity



 * ============================================================ */







/* ----- Level 17: product-first HUD + cleaner workspace ----- */



.bbd-pro-workspace-v0230-dev21 .bbd-stage-meta {



  gap: 8px;



  padding-right: 14px;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools {



  margin-left: auto;



  display: inline-flex;



  align-items: center;



  gap: 7px;



  min-width: 0;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button,



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight {



  min-height: 30px;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 0 10px;



  border: 1px solid rgba(148,163,184,.28);



  border-radius: 999px;



  background: rgba(255,255,255,.82);



  box-shadow: 0 4px 14px rgba(15,23,42,.045);



  color: #475569;



  font-size: 10px;



  font-weight: 800;



  white-space: nowrap;



  backdrop-filter: blur(10px);



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button {



  cursor: pointer;



  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button:hover,



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button:focus-visible {



  outline: none;



  color: #0f766e;



  border-color: rgba(13,148,136,.28);



  background: #f0fdfa;



  transform: translateY(-1px);



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button[aria-pressed="false"] {



  opacity: .64;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-dot,



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight > i,



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-live > i {



  width: 7px;



  height: 7px;



  flex: 0 0 7px;



  border-radius: 999px;



  background: #10b981;



  box-shadow: 0 0 0 3px rgba(16,185,129,.10);



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight {



  gap: 7px;



  padding-right: 11px;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight strong {



  color: #1e293b;



  font-size: 10px;



  font-weight: 900;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight small {



  color: #7c8797;



  font-size: 9px;



  font-weight: 700;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight[data-tone="ready"] {



  border-color: rgba(16,185,129,.22);



  background: #f0fdf8;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight[data-tone="warning"] {



  border-color: rgba(245,158,11,.22);



  background: #fffbeb;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight[data-tone="warning"] > i { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.10); }



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight[data-tone="error"] {



  border-color: rgba(239,68,68,.22);



  background: #fef2f2;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight[data-tone="error"] > i { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.10); }







/* The first-action card now behaves like a product coach, not a modal over the fabric. */



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"] {



  width: min(var(--bbd-empty-card-width, 300px), 310px) !important;



  display: grid !important;



  justify-items: start;



  gap: 9px;



  padding: 16px !important;



  border: 1px solid rgba(148,163,184,.24) !important;



  border-radius: 16px !important;



  background: rgba(255,255,255,.94) !important;



  box-shadow: 0 18px 48px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.05) !important;



  text-align: left !important;



  transform: translate(-50%,-50%) !important;



  pointer-events: none;



  backdrop-filter: blur(14px);



}



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"]::before {



  content:"+";



  width:36px;



  height:36px;



  display:grid;



  place-items:center;



  border-radius:11px;



  background:#fff4ef;



  border:1px solid #ffd7c7;



  color:#ff4b00;



  font-size:24px;



  line-height:1;



}



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"] > strong {



  font-size:15px;



  color:#162033;



}



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"] > span {



  max-width:27em;



  color:#667085;



  font-size:11px;



  line-height:1.45;



}



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"] > div {



  width:100%;



  display:grid;



  grid-template-columns:1fr;



  gap:7px;



  pointer-events:auto;



}



.bbd-pro-workspace-v0230-dev21 .bbd-canvas-empty[data-placement="product-coach"] button {



  min-height:40px;



  border-radius:10px;



  font-weight:850;



}







.bbd-app.bbd-pro-workspace-v0230-dev21[data-edit-surface="feather"] .bbd-canvas-shell {



  background:



    radial-gradient(circle at 58% 45%, rgba(255,255,255,.82), rgba(246,249,252,.48) 34%, rgba(231,237,243,.18) 68%),



    #edf2f6 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev21[data-edit-surface="feather"] .bbd-canvas-shell::after {



  content:"";



  position:absolute;



  inset:0;



  pointer-events:none;



  background:linear-gradient(90deg,rgba(15,23,42,.018),transparent 22%,transparent 78%,rgba(15,23,42,.014));



}







/* ----- Level 18: adaptive template presentation ----- */



.bbd-pro-workspace-v0230-dev21 .bbd-template-grid {



  gap: 10px;



}



.bbd-pro-workspace-v0230-dev21 .bbd-template-card {



  border-radius: 14px;



  overflow: hidden;



  background: #fff;



  box-shadow: 0 4px 13px rgba(15,23,42,.035);



}



.bbd-pro-workspace-v0230-dev21 .bbd-template-card__preview {



  min-height: 118px;



  padding: 8px 8px 5px;



  display:grid;



  place-items:center;



  background:



    radial-gradient(circle at 50% 26%,rgba(255,255,255,.92),rgba(244,247,250,.70) 54%,rgba(231,236,242,.86));



  overflow:hidden;



}



.bbd-pro-workspace-v0230-dev21 .bbd-template-card__svg {



  height: 108px !important;



  width: auto !important;



  max-width: 82% !important;



  filter: drop-shadow(0 8px 10px rgba(15,23,42,.10));



  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;



}



.bbd-pro-workspace-v0230-dev21 .bbd-template-card:hover .bbd-template-card__svg {



  transform: translateY(-2px) scale(1.025);



  filter: drop-shadow(0 12px 14px rgba(15,23,42,.14));



}



.bbd-pro-workspace-v0230-dev21[data-product-aspect="extra-tall"] .bbd-template-card__svg { height:114px !important; max-width:72% !important; }



.bbd-pro-workspace-v0230-dev21[data-product-aspect="tall"] .bbd-template-card__svg { height:111px !important; max-width:76% !important; }



.bbd-pro-workspace-v0230-dev21 .bbd-template-card__preview-action {



  border-radius:999px;



  padding:5px 8px;



  background:rgba(15,23,42,.88);



  color:#fff;



  box-shadow:0 5px 12px rgba(15,23,42,.15);



}







/* ----- Level 19: responsive 3D product hero framing ----- */



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview {



  padding-bottom: 8px;



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__viewport.is-three-preview {



  min-height: clamp(560px, 72vh, 850px);



  border-radius: 20px;



  overflow: hidden;



  border: 1px solid rgba(148,163,184,.26);



  background: #e8edf1;



  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 20px 48px rgba(15,23,42,.09);



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__viewport.is-three-preview::before {



  content:"PREMIUM STÜDYO";



  top:14px;



  left:14px;



  padding:7px 10px;



  border-color:rgba(148,163,184,.24);



  background:rgba(255,255,255,.82);



  color:#475569;



  letter-spacing:.085em;



  box-shadow:0 7px 18px rgba(15,23,42,.06);



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preview-meta {



  position:absolute;



  top:14px;



  right:14px;



  z-index:7;



  display:flex;



  align-items:center;



  gap:7px;



  pointer-events:none;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-preview-meta > span {



  min-height:28px;



  display:inline-flex;



  align-items:center;



  gap:6px;



  padding:0 9px;



  border:1px solid rgba(148,163,184,.24);



  border-radius:999px;



  background:rgba(255,255,255,.82);



  color:#475569;



  box-shadow:0 7px 18px rgba(15,23,42,.05);



  backdrop-filter:blur(10px);



  font-size:9px;



  font-weight:900;



  letter-spacing:.025em;



}



.bbd-pro-workspace-v0230-dev21 .bbd-dev21-live { color:#0f766e !important; }



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls {



  left:50%;



  right:auto;



  bottom:16px;



  width:min(760px,calc(100% - 36px));



  transform:translateX(-50%);



  padding:9px 10px 9px 13px;



  border:1px solid rgba(148,163,184,.28);



  border-radius:16px;



  background:rgba(255,255,255,.91);



  box-shadow:0 18px 40px rgba(15,23,42,.12);



  backdrop-filter:blur(16px);



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls strong::after {



  content:" · PRO" !important;



  color:#0f766e !important;



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls button {



  min-width:48px;



  min-height:36px;



  border-radius:10px;



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls button[data-bbd-three-fit] {



  min-width:58px;



  color:#0f766e;



  border-color:rgba(13,148,136,.22);



  background:#f0fdfa;



}







/* ----- Level 20: premium studio/material presentation ----- */



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-canvas {



  filter: saturate(.99) contrast(1.01);



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__header h2 {



  letter-spacing:-.035em;



}



.bbd-pro-workspace-v0230-dev21 .bbd-product-preview__header > div > span {



  color:#64748b;



  letter-spacing:.04em;



  text-transform:uppercase;



  font-weight:800;



}







/* ----- Level 21: finish-state clarity ----- */



.bbd-pro-workspace-v0230-dev21 .bbd-quality-banner {



  max-width:min(420px,calc(100vw - 34px));



}



.bbd-pro-workspace-v0230-dev21 .bbd-save-state {



  border-radius:999px;



}



.bbd-pro-workspace-v0230-dev21 #bbd-size-label[data-config-sync="live"] {



  border-color:rgba(16,185,129,.22);



  background:linear-gradient(180deg,#f4fffb,#ecfaf5);



  box-shadow:0 0 0 1px rgba(16,185,129,.06),0 6px 18px rgba(15,23,42,.045);



}







@media (max-width: 1180px) {



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight small { display:none; }



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button { padding:0 8px; }



}



@media (max-width: 900px) {



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools { margin-left:0; }



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-preflight { display:none; }



  .bbd-pro-workspace-v0230-dev21 .bbd-product-preview__viewport.is-three-preview { min-height:520px; border-radius:15px; }



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-preview-meta > span:first-child { display:none; }



  .bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls { width:calc(100% - 20px); bottom:10px; }



}



@media (max-width: 620px) {



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button span:not(.bbd-dev21-dot) { display:none; }



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button { min-width:30px; justify-content:center; }



  .bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls > span small { display:none; }



  .bbd-pro-workspace-v0230-dev21 .bbd-product-preview__three-controls button[data-bbd-three-fit] { display:none; }



}



@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev21 .bbd-template-card__svg,



  .bbd-pro-workspace-v0230-dev21 .bbd-dev21-hud-tools > button { transition:none !important; }



}











/* ============================================================



 * v0.23.0-dev.22 — FINAL UX PRO



 * Studio-grade workspace, contextual editing and preflight review.



 * ============================================================ */







/* 01 — Product HUD: one calm line, no duplicated engineering legend. */



.bbd-pro-workspace-v0230-dev22 .bbd-stage-meta {



  top: 10px;



  left: 18px;



  right: 18px;



  z-index: 72;



  display:flex;



  align-items:center;



  flex-wrap:nowrap;



  gap:8px;



  width:auto;



  min-height:38px;



  pointer-events:none;



}



.bbd-pro-workspace-v0230-dev22 .bbd-stage-meta > * { pointer-events:auto; }



.bbd-pro-workspace-v0230-dev22 #bbd-surface-label,



.bbd-pro-workspace-v0230-dev22 .bbd-stage-meta > .bbd-guide-legend { display:none !important; }



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-hud-tools {



  margin-left:0;



  gap:7px;



  flex-wrap:nowrap;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-hud-tools > button,



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight,



.bbd-pro-workspace-v0230-dev22 #bbd-size-label {



  min-height:32px;



  border-radius:999px !important;



  box-shadow:0 6px 18px rgba(15,23,42,.055);



  backdrop-filter:blur(12px);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight {



  cursor:pointer;



  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight:hover,



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight:focus-visible {



  outline:none;



  transform:translateY(-1px);



  border-color:rgba(13,148,136,.28);



  box-shadow:0 9px 24px rgba(15,23,42,.09);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight small { display:none; }







/* 02 — True smart empty state. Hidden always wins over placement styling. */



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[hidden],



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"][hidden],



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="surface-center"][hidden] {



  display:none !important;



  visibility:hidden !important;



}



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"] {



  width:min(268px,calc(100vw - 32px)) !important;



  padding:14px !important;



  gap:8px;



  border-radius:18px !important;



  background:rgba(255,255,255,.965) !important;



  box-shadow:0 24px 68px rgba(15,23,42,.14),0 3px 10px rgba(15,23,42,.05) !important;



}



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"]::before {



  width:32px;height:32px;border-radius:10px;font-size:21px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"] > strong { font-size:14px; }



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"] > span { font-size:10.5px; }



.bbd-pro-workspace-v0230-dev22 .bbd-canvas-empty[data-placement="product-coach"] button { min-height:38px; }







/* 03 — Context toolbar follows the selected object, like a real design application. */



.bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar {



  top:var(--bbd-toolbar-top,38px) !important;



  left:var(--bbd-toolbar-left,50%) !important;



  transform:var(--bbd-toolbar-transform,translateX(-50%)) !important;



  min-height:38px;



  gap:2px;



  padding:4px !important;



  border-radius:14px !important;



  border-color:rgba(15,23,42,.09) !important;



  background:rgba(255,255,255,.965) !important;



  box-shadow:0 18px 44px rgba(15,23,42,.14),0 2px 7px rgba(15,23,42,.05) !important;



}



.bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar button {



  min-height:32px;



  min-width:32px;



  padding:0 7px;



  border-radius:9px;



  font-size:9.5px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar .bbd-context-icon { width:15px;height:15px;flex-basis:15px; }



@media (min-width:1367px) {



  .bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar .bbd-context-label { display:inline; }



  .bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar .bbd-context-label-short { display:none; }



}



@media (min-width:761px) and (max-width:1366px) {



  .bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar .bbd-context-label { display:none; }



  .bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar .bbd-context-label-short { display:inline; }



}







/* 04 — Template browser: more artwork, less repeated chrome. */



.bbd-pro-workspace-v0230-dev22 .bbd-template-card__product-badge { display:none !important; }



.bbd-pro-workspace-v0230-dev22 .bbd-template-grid { gap:12px 10px; }



.bbd-pro-workspace-v0230-dev22 .bbd-template-card {



  border:1px solid rgba(148,163,184,.26);



  border-radius:16px;



  box-shadow:0 5px 16px rgba(15,23,42,.045);



}



.bbd-pro-workspace-v0230-dev22 .bbd-template-card:hover {



  border-color:rgba(100,116,139,.32);



  transform:translateY(-2px);



  box-shadow:0 15px 30px rgba(15,23,42,.09);



}



.bbd-pro-workspace-v0230-dev22 .bbd-template-card.is-active,



.bbd-pro-workspace-v0230-dev22 .bbd-template-card[aria-pressed="true"] {



  border-color:rgba(249,115,22,.62) !important;



  box-shadow:0 0 0 3px rgba(249,115,22,.10),0 16px 32px rgba(15,23,42,.09) !important;



}



.bbd-pro-workspace-v0230-dev22 .bbd-template-card__preview {



  min-height:130px;



  padding:10px 9px 6px;



  background:radial-gradient(circle at 50% 24%,#fff 0%,#f7f9fb 42%,#edf1f5 100%);



}



.bbd-pro-workspace-v0230-dev22 .bbd-template-card__svg { height:118px !important; }







/* 05 — Hero mockup: product first, studio second. */



.bbd-pro-workspace-v0230-dev22 .bbd-product-preview__viewport.is-three-preview {



  min-height:clamp(570px,73vh,880px);



  border-radius:22px;



  background:linear-gradient(180deg,#eef1f3 0%,#e7ebee 56%,#dde3e7 100%);



  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 24px 60px rgba(15,23,42,.095);



}



.bbd-pro-workspace-v0230-dev22 .bbd-product-preview__viewport.is-three-preview::before {



  content:"ÜRÜN STÜDYOSU";



  padding:6px 10px;



  border-radius:999px;



  background:rgba(255,255,255,.82);



  letter-spacing:.08em;



}



.bbd-pro-workspace-v0230-dev22 .bbd-product-preview__three-canvas {



  filter:saturate(1.035) contrast(1.025);



}



.bbd-pro-workspace-v0230-dev22 .bbd-product-preview__three-controls {



  width:min(670px,calc(100% - 40px));



  bottom:18px;



  min-height:50px;



  border-radius:18px;



  background:rgba(255,255,255,.94);



  box-shadow:0 20px 50px rgba(15,23,42,.13);



}



.bbd-pro-workspace-v0230-dev22 .bbd-product-preview__three-controls strong::after { content:" · CANLI" !important; }



.bbd-pro-workspace-v0230-dev22 .bbd-dev21-preview-meta > span {



  background:rgba(255,255,255,.9);



  box-shadow:0 8px 22px rgba(15,23,42,.07);



}







/* 06 — Final preflight is a real production checkpoint, not a tall generic modal. */



.bbd-pro-workspace-v0230-dev22 .bbd-dialog {



  padding:16px;



  background:rgba(15,23,42,.46);



  backdrop-filter:blur(8px);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__panel {



  position:relative;



  width:min(820px,calc(100vw - 28px));



  max-width:820px;



  max-height:calc(100dvh - 32px);



  display:flex;



  flex-direction:column;



  overflow:hidden;



  padding:22px 22px 0;



  border-radius:22px;



  border:1px solid rgba(255,255,255,.82);



  box-shadow:0 34px 110px rgba(15,23,42,.32);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__close {



  position:absolute;



  top:14px;



  right:14px;



  z-index:4;



  width:36px;



  height:36px;



  display:grid;



  place-items:center;



  padding:0;



  border:1px solid #e7ebef;



  border-radius:11px;



  background:#fff;



  color:#64748b;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__close:hover,



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__close:focus-visible {



  outline:none;



  background:#f8fafc;



  color:#111827;



  border-color:#d7dde4;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__panel > h2 {



  padding-right:52px;



  font-size:27px;



  letter-spacing:-.04em;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__panel > #bbd-dialog-message {



  margin-top:5px;



  font-size:11px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content,



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content.has-preview {



  min-height:0;



  flex:1 1 auto;



  overflow:auto;



  overscroll-behavior:contain;



  grid-template-columns:minmax(210px,.78fr) minmax(300px,1.22fr);



  grid-template-rows:auto 1fr auto;



  gap:12px 16px;



  margin-top:16px;



  padding:2px 2px 14px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status {



  grid-column:2;



  display:flex;



  align-items:center;



  gap:10px;



  min-height:54px;



  padding:10px 12px;



  border:1px solid #cce9df;



  border-radius:13px;



  background:linear-gradient(180deg,#f5fcf9,#eef9f5);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status > .bbd-pro-action-icon {



  width:32px;height:32px;padding:7px;border-radius:10px;background:#e5f7ef;color:#0f8a65;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status > span { display:grid;gap:1px; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status small { font-size:8px;font-weight:900;letter-spacing:.08em;color:#0f8a65; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status strong { font-size:12px;color:#163b31; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-review { border-color:#f0dda9;background:#fffbef; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-review > .bbd-pro-action-icon { background:#fff2c9;color:#a16207; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-review small { color:#a16207; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-critical { border-color:#f0c2bc;background:#fff5f3; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-critical > .bbd-pro-action-icon { background:#fee4e2;color:#b42318; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog__review-status.is-critical small { color:#b42318; }



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__preview {



  grid-column:1;



  grid-row:1 / span 3;



  align-self:start;



  width:100%;



  height:min(54vh,430px);



  min-height:300px;



  grid-template-rows:minmax(0,1fr) auto;



  border-radius:16px;



  background:radial-gradient(circle at 50% 38%,#f7fbfa,#edf3f2 55%,#e7ecec);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__preview img {



  min-height:0;



  width:100%;height:100%;



  padding:16px;



  object-fit:contain;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__detail-list {



  grid-column:2;



  display:grid;



  grid-template-columns:1fr 1fr;



  gap:8px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__detail {



  min-height:60px;



  padding:10px;



  border-radius:12px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__note {



  grid-column:2;



  margin:0;



  padding:10px 12px;



  border:1px solid #e6edf3;



  background:#f8fafc;



  color:#536173;



  font-size:9.5px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__actions {



  position:sticky;



  bottom:0;



  z-index:3;



  flex:0 0 auto;



  display:grid;



  grid-template-columns:minmax(130px,.72fr) minmax(220px,1.28fr);



  gap:10px;



  margin:0 -22px;



  padding:14px 22px 16px;



  border-top:1px solid #edf0f3;



  background:rgba(255,255,255,.97);



  box-shadow:0 -14px 30px rgba(15,23,42,.055);



  backdrop-filter:blur(14px);



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__button {



  width:100%;



  min-height:46px;



  border-radius:12px;



  font-size:11px;



  font-weight:850;



}



.bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__button.is-primary {



  background:linear-gradient(180deg,#ff6a36,#ff4b00);



  border-color:#e94708;



  box-shadow:0 10px 22px rgba(255,75,0,.22);



}







/* 07 — Canvas and chrome polish. */



.bbd-pro-workspace-v0230-dev22[data-edit-surface="feather"] .bbd-canvas-shell {



  background:radial-gradient(circle at 58% 42%,rgba(255,255,255,.88),rgba(244,248,251,.42) 37%,rgba(230,236,241,.18) 72%),#edf2f6 !important;



}



.bbd-pro-workspace-v0230-dev22 .bbd-stage-footer {



  bottom:10px;



  right:12px;



  gap:6px;



}



.bbd-pro-workspace-v0230-dev22 .bbd-hud-chip {



  border-color:rgba(148,163,184,.25);



  background:rgba(255,255,255,.90);



  backdrop-filter:blur(10px);



}







@media (max-width:900px) {



  .bbd-pro-workspace-v0230-dev22 .bbd-stage-meta { left:10px;right:10px;gap:5px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight strong { font-size:9px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__panel { width:min(680px,calc(100vw - 20px));padding:18px 18px 0; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content,



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content.has-preview { grid-template-columns:minmax(150px,.68fr) minmax(250px,1.32fr);gap:10px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__actions { margin:0 -18px;padding:12px 18px 14px; }



}



@media (max-width:680px) {



  .bbd-pro-workspace-v0230-dev22 .bbd-stage-meta { top:6px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight { display:none; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog { padding:8px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__panel { width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px 14px 0;border-radius:18px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content,



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__content.has-preview { display:block;overflow:auto;padding-bottom:12px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__review-status { margin-bottom:10px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__preview { height:270px;min-height:270px;margin-bottom:10px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__detail-list { grid-template-columns:1fr; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__note { margin-top:10px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-dialog.is-save-review .bbd-dialog__actions { grid-template-columns:1fr;margin:0 -14px;padding:10px 14px 12px; }



  .bbd-pro-workspace-v0230-dev22 .bbd-context-route-toolbar { left:8px !important;right:8px !important;top:38px !important;width:auto !important;transform:none !important; }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-pro-workspace-v0230-dev22 .bbd-dev21-preflight,



  .bbd-pro-workspace-v0230-dev22 .bbd-template-card { transition:none !important; }



}











/* =========================================================



   BASKIBU DESIGNER 0.23.0-dev30 — MEGA PACK PRO



   Product-grade workspace, brand variants, quality score,



   guide center, smart layout and preview scene controls.



   ========================================================= */







.bbd-pro-workspace-v0230-dev30 {



  --bbd-mega-green:#0f8a65;



  --bbd-mega-green-soft:#e9f8f3;



  --bbd-mega-ink:#0f172a;



  --bbd-mega-muted:#667085;



  --bbd-mega-line:#dce5e1;



  --bbd-mega-shadow:0 18px 50px rgba(15,23,42,.16);



}







.bbd-pro-workspace-v0230-dev30 .bbd-dev21-hud-tools {



  display:flex;



  align-items:center;



  gap:7px;



  flex-wrap:wrap;



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions {



  display:flex;



  align-items:center;



  gap:6px;



  min-width:0;



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button,



.bbd-pro-workspace-v0230-dev30 [data-mega-guide] {



  min-height:34px;



  border:1px solid rgba(15,23,42,.09);



  border-radius:999px;



  background:rgba(255,255,255,.94);



  color:#344054;



  padding:0 11px;



  display:inline-flex;



  align-items:center;



  justify-content:center;



  gap:6px;



  font-size:10px;



  font-weight:850;



  line-height:1;



  box-shadow:0 5px 14px rgba(15,23,42,.06);



  cursor:pointer;



  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;



  white-space:nowrap;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button:hover,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button.is-open,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button.is-active {



  transform:translateY(-1px);



  border-color:rgba(15,138,101,.30);



  background:#fff;



  box-shadow:0 8px 20px rgba(15,23,42,.09);



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button:disabled,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button.is-disabled {



  opacity:.42;



  cursor:not-allowed;



  transform:none;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-icon {



  width:18px;



  height:18px;



  border-radius:7px;



  display:grid;



  place-items:center;



  background:#f2f4f7;



  color:#475467;



  font-size:11px;



  font-weight:900;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button.is-active .bbd-mega-icon,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button.is-open .bbd-mega-icon {



  background:var(--bbd-mega-green-soft);



  color:var(--bbd-mega-green);



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-score {



  padding:0 9px !important;



  min-width:62px;



  gap:2px !important;



  font-variant-numeric:tabular-nums;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score span {



  font-size:13px;



  font-weight:950;



  letter-spacing:-.3px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score small {



  font-size:8px;



  color:#98a2b3;



  font-weight:850;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score[data-tone="ready"] {



  color:#067647;



  border-color:#b7e3d1;



  background:#f1fbf7;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score[data-tone="good"] {



  color:#175cd3;



  border-color:#bfd5ff;



  background:#f5f8ff;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score[data-tone="warning"] {



  color:#b54708;



  border-color:#fedf89;



  background:#fffaeb;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-score[data-tone="error"] {



  color:#b42318;



  border-color:#fecdca;



  background:#fff5f4;



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover {



  position:absolute;



  z-index:420;



  width:min(350px,calc(100% - 24px));



  max-height:min(620px,calc(100% - 70px));



  overflow:auto;



  padding:12px;



  border:1px solid rgba(15,23,42,.10);



  border-radius:18px;



  background:rgba(255,255,255,.985);



  box-shadow:var(--bbd-mega-shadow);



  backdrop-filter:blur(16px);



  color:var(--bbd-mega-ink);



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover[hidden] { display:none !important; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover::-webkit-scrollbar { width:7px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover::-webkit-scrollbar-thumb { background:#d0d5dd;border-radius:99px; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header {



  display:flex;



  align-items:flex-start;



  justify-content:space-between;



  gap:12px;



  padding:2px 2px 10px;



  border-bottom:1px solid #eef1f4;



  margin-bottom:10px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header > span {



  display:grid;



  gap:2px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header small {



  color:var(--bbd-mega-green);



  font-size:8px;



  font-weight:950;



  letter-spacing:.09em;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header strong {



  font-size:16px;



  letter-spacing:-.35px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header em {



  max-width:270px;



  color:var(--bbd-mega-muted);



  font-size:10px;



  line-height:1.4;



  font-style:normal;



  font-weight:600;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__header > button {



  flex:0 0 30px;



  width:30px;



  height:30px;



  border:0;



  border-radius:9px;



  background:#f2f4f7;



  color:#475467;



  font-size:19px;



  line-height:1;



  cursor:pointer;



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch-list {



  display:grid;



  gap:7px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch {



  width:100%;



  border:1px solid #e8ecef;



  border-radius:13px;



  background:#fff;



  padding:9px 10px;



  display:flex;



  align-items:center;



  justify-content:space-between;



  gap:10px;



  text-align:left;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch > span { display:grid; gap:1px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch strong { font-size:11px;color:#1d2939; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch small { font-size:9px;color:#98a2b3;line-height:1.35; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch > i {



  position:relative;



  width:34px;



  height:20px;



  flex:0 0 34px;



  border-radius:999px;



  background:#d0d5dd;



  transition:.18s ease;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch > i::after {



  content:"";



  position:absolute;



  width:14px;



  height:14px;



  left:3px;



  top:3px;



  border-radius:50%;



  background:#fff;



  box-shadow:0 1px 4px rgba(15,23,42,.18);



  transition:.18s ease;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch.is-on {



  border-color:#c8eadf;



  background:#f8fcfa;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch.is-on > i { background:var(--bbd-mega-green); }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-switch.is-on > i::after { transform:translateX(14px); }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__actions {



  display:flex;



  gap:7px;



  margin-top:10px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__actions > button {



  min-height:36px;



  flex:1 1 0;



  border:1px solid #dfe4e8;



  border-radius:10px;



  background:#fff;



  color:#344054;



  font-size:9px;



  font-weight:850;



  padding:7px 9px;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-popover__actions > button:first-child {



  border-color:#bfe4d8;



  background:#f4fbf8;



  color:#067647;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-hint {



  margin:9px 2px 0;



  padding-top:8px;



  border-top:1px dashed #e5e7eb;



  color:#98a2b3;



  font-size:8.5px;



  line-height:1.45;



}







.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid {



  display:grid;



  grid-template-columns:repeat(2,minmax(0,1fr));



  gap:8px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid > button {



  min-height:92px;



  border:1px solid #e6eaee;



  border-radius:14px;



  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);



  padding:10px;



  display:grid;



  align-content:start;



  gap:3px;



  text-align:left;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid > button:hover:not(:disabled) {



  border-color:#b9dfd3;



  box-shadow:0 8px 20px rgba(15,23,42,.06);



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid > button:disabled { opacity:.38;cursor:not-allowed; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid > button > span {



  width:25px;height:25px;border-radius:8px;background:#f1f8f5;color:#087a5b;display:grid;place-items:center;font-size:13px;font-weight:900;margin-bottom:3px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid strong { font-size:10.5px;color:#1d2939; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid small { font-size:8.5px;line-height:1.35;color:#98a2b3; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current {



  padding:9px 10px;



  border:1px solid #edf0f2;



  border-radius:12px;



  display:flex;



  align-items:center;



  justify-content:space-between;



  gap:8px;



  margin-bottom:9px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current > span { display:grid;gap:1px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current strong { font-size:10px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current small { font-size:8px;color:#98a2b3; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current > div { display:flex;align-items:center; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-brand-current i {



  width:22px;height:22px;border-radius:50%;background:var(--mega-color);border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.10);margin-left:-5px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid {



  display:grid;



  grid-template-columns:repeat(2,minmax(0,1fr));



  gap:7px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid > button {



  min-height:62px;



  border:1px solid #e5e9ed;



  border-radius:12px;



  background:#fff;



  display:grid;



  align-content:center;



  gap:6px;



  padding:8px;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid > button.is-active {



  border-color:#6ec6aa;



  box-shadow:0 0 0 2px rgba(15,138,101,.10);



  background:#f7fcfa;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid > button:disabled { opacity:.4;cursor:not-allowed; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid > button > span { display:flex;justify-content:center; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid i {



  width:20px;height:20px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.08);margin-left:-3px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-palette-grid strong { font-size:9.5px;color:#344054; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero {



  display:grid;



  grid-template-columns:72px minmax(0,1fr);



  gap:12px;



  align-items:center;



  padding:11px;



  border:1px solid #e7ebee;



  border-radius:15px;



  background:#fafbfc;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero[data-tone="ready"] { background:#f2fbf7;border-color:#c5e7da; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero[data-tone="warning"] { background:#fffaeb;border-color:#fedf89; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero[data-tone="error"] { background:#fff5f4;border-color:#fecdca; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-ring {



  width:68px;height:68px;border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:20px;box-sizing:border-box;



  background:conic-gradient(var(--bbd-mega-green) 0 calc(var(--mega-score,0) * 1%),#e9edef calc(var(--mega-score,0) * 1%) 100%);



  box-shadow:inset 0 0 0 7px #fff;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-ring strong { font-size:18px;line-height:1;font-weight:950; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-ring small { font-size:7px;color:#98a2b3;margin-left:1px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero > span { display:grid;gap:2px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero > span > small { color:var(--bbd-mega-green);font-size:8px;font-weight:950;letter-spacing:.08em; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero > span > strong { font-size:14px;letter-spacing:-.25px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-hero > span > em { color:#667085;font-size:9px;font-style:normal; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list {



  display:grid;



  gap:6px;



  margin-top:9px;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list > div {



  min-height:44px;



  border:1px solid #edf0f2;



  border-radius:11px;



  padding:7px 8px;



  display:grid;



  grid-template-columns:10px minmax(0,1fr);



  gap:7px;



  align-items:start;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list i { width:7px;height:7px;border-radius:50%;background:#98a2b3;margin-top:4px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list [data-level="warning"] i { background:#f79009; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list [data-level="error"] i { background:#d92d20; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list [data-level="success"] i { background:#12b76a; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list span { display:grid;gap:1px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list strong { font-size:9.5px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-quality-list small { font-size:8px;color:#98a2b3;line-height:1.35; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-shortcuts { display:grid;gap:5px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-shortcuts > div {



  display:grid;



  grid-template-columns:92px minmax(0,1fr);



  gap:10px;



  align-items:center;



  min-height:35px;



  border-bottom:1px solid #f0f2f4;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-shortcuts > div:last-child { border-bottom:0; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-shortcuts kbd {



  justify-self:start;



  border:1px solid #d0d5dd;



  border-bottom-width:2px;



  border-radius:7px;



  background:#f8fafc;



  color:#344054;



  padding:4px 7px;



  font:800 8px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-shortcuts span { font-size:9.5px;color:#475467; }







.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar {



  position:absolute;



  z-index:14;



  left:50%;



  top:14px;



  transform:translateX(-50%);



  min-height:38px;



  padding:5px 6px 5px 10px;



  display:flex;



  align-items:center;



  gap:10px;



  border:1px solid rgba(15,23,42,.09);



  border-radius:13px;



  background:rgba(255,255,255,.91);



  box-shadow:0 8px 24px rgba(15,23,42,.09);



  backdrop-filter:blur(12px);



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > span { display:grid;gap:0; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > span small { color:#98a2b3;font-size:6.5px;font-weight:950;letter-spacing:.08em; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > span strong { color:#344054;font-size:9px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > div { display:flex;gap:4px; }



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar button {



  min-height:28px;



  border:1px solid transparent;



  border-radius:8px;



  background:#f5f7f8;



  color:#667085;



  padding:0 8px;



  font-size:8px;



  font-weight:850;



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar button:hover,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar button.is-active,



.bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar button[aria-pressed="true"] {



  border-color:#bfe4d8;



  background:#eefaf6;



  color:#087a5b;



}







.bbd-pro-workspace-v0230-dev30.is-distraction-free .bbd-mega-actions > button:not([data-bbd-mega-action="focus"]):not([data-bbd-mega-action="quality"]) {



  opacity:.38;



}



.bbd-pro-workspace-v0230-dev30.is-distraction-free .bbd-mega-popover { display:none !important; }







/* More premium, quieter technical guides until user intentionally opens them. */



.bbd-pro-workspace-v0230-dev30[data-edit-surface="feather"] .bbd-canvas-shell {



  filter:none;



}



.bbd-pro-workspace-v0230-dev30 .bbd-stage-area {



  background:



    radial-gradient(circle at 54% 40%,rgba(255,255,255,.78),rgba(255,255,255,0) 38%),



    linear-gradient(180deg,#eef2f5 0%,#e7ecf1 100%);



}







/* Preview keeps product as the hero and the new scene controls lightweight. */



.bbd-pro-workspace-v0230-dev30 .bbd-product-preview__viewport.is-three-preview {



  background:



    radial-gradient(circle at 50% 43%,rgba(255,255,255,.74),rgba(255,255,255,0) 38%),



    linear-gradient(180deg,#e7ebef 0%,#dfe4e9 100%);



}



.bbd-pro-workspace-v0230-dev30 .bbd-product-preview__three-controls {



  bottom:16px !important;



}



.bbd-pro-workspace-v0230-dev30 .bbd-dev21-preview-meta {



  top:13px !important;



}







/* Final review: score gets room without making the modal taller. */



.bbd-pro-workspace-v0230-dev30 .bbd-dialog.is-save-review .bbd-dialog__detail-list {



  grid-template-columns:repeat(2,minmax(0,1fr));



}



.bbd-pro-workspace-v0230-dev30 .bbd-dialog.is-save-review .bbd-dialog__detail {



  min-height:58px;



}







@media (max-width:1180px) {



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button strong { display:none; }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button { padding:0 7px; }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-score small { display:inline !important; }



}







@media (max-width:760px) {



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button[data-bbd-mega-action="brand"],



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button[data-bbd-mega-action="focus"] { display:none; }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-popover {



    position:fixed;



    left:8px !important;



    right:8px !important;



    top:auto !important;



    bottom:8px;



    width:auto;



    max-height:64dvh;



    border-radius:18px;



  }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-action-grid { grid-template-columns:1fr; }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar {



    top:8px;



    width:calc(100% - 20px);



    justify-content:space-between;



  }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > span { display:none; }



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-scene-bar > div { width:100%;justify-content:center; }



  .bbd-pro-workspace-v0230-dev30 .bbd-dialog.is-save-review .bbd-dialog__detail-list { grid-template-columns:1fr; }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-actions > button,



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-switch,



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-switch > i,



  .bbd-pro-workspace-v0230-dev30 .bbd-mega-switch > i::after { transition:none !important; }



}















/* ============================================================



   BASKIBU DESIGNER 0.23.0-dev31 — TRUE 360 + MIRRORED REAR



   ============================================================ */



.bbd-pro-workspace-v0230-dev31 .bbd-three-preview-controls > div {



  gap: 5px;



  flex-wrap: wrap;



}



.bbd-pro-workspace-v0230-dev31 .bbd-three-preview-controls button[data-view="back"] {



  border-color: #c7d7e2;



  background: #f8fafc;



}



.bbd-pro-workspace-v0230-dev31 .bbd-three-preview-controls button[data-view="back"].is-active {



  color: #087f6f;



  border-color: #9fd7cc;



  background: #eefbf7;



  box-shadow: 0 0 0 2px rgba(18,183,138,.08);



}



.bbd-pro-workspace-v0230-dev31 .bbd-rear-face-badge {



  position: absolute;



  top: 18px;



  left: 50%;



  transform: translateX(-50%);



  z-index: 18;



  display: inline-flex;



  align-items: center;



  min-height: 26px;



  padding: 0 11px;



  border: 1px solid rgba(18,183,138,.24);



  border-radius: 999px;



  background: rgba(239,252,248,.94);



  box-shadow: 0 7px 20px rgba(15,23,42,.08);



  color: #067a68;



  font-size: 9px;



  font-weight: 900;



  letter-spacing: .06em;



  backdrop-filter: blur(10px);



  pointer-events: none;



}



.bbd-pro-workspace-v0230-dev31 .bbd-rear-face-badge[hidden] { display:none !important; }



.bbd-pro-workspace-v0230-dev31 [data-mega-auto-rotate].is-active::after {



  content: ' · dönüyor';



  font-size: 7px;



  opacity: .68;



}



@media (max-width: 920px) {



  .bbd-pro-workspace-v0230-dev31 .bbd-rear-face-badge { top: 58px; }



}







/* ============================================================



   BASKIBU DESIGNER 0.23.0-dev32 — MENU UI PRO / NAVIGATION SYSTEM



   ============================================================ */



.bbd-menu-ui-pro-v32 {



  --bbd-rail-width: 76px;



  --bbd-panel-width: 356px;



  --bbd-menu-ink: #182230;



  --bbd-menu-muted: #667085;



  --bbd-menu-line: #e6e9ee;



  --bbd-menu-soft: #f6f8fa;



  --bbd-menu-accent: #ff5a1f;



  --bbd-menu-green: #0f9f83;



}







/* Rail: icon-first, quieter labels, stronger active state. */



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail {



  width: var(--bbd-rail-width) !important;



  gap: 2px !important;



  padding: 9px 7px 10px !important;



  overflow: visible;



  background: linear-gradient(180deg, #141a23 0%, #10151d 100%) !important;



  border-right: 1px solid #2b3440 !important;



  box-shadow: 6px 0 22px rgba(15, 23, 42, .07), inset -1px 0 rgba(255,255,255,.025) !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool {



  width: 60px !important;



  min-height: 60px !important;



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 4px !important;



  margin: 0 auto !important;



  padding: 7px 4px 5px !important;



  border: 1px solid transparent !important;



  border-radius: 12px !important;



  background: transparent !important;



  color: #aeb8c6 !important;



  box-shadow: none !important;



  transform: none !important;



  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool::before {



  content: "";



  position: absolute;



  top: 6px;



  left: 50%;



  width: 34px;



  height: 34px;



  transform: translateX(-50%);



  border: 1px solid transparent;



  border-radius: 10px;



  background: rgba(255,255,255,.025);



  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool svg {



  position: relative;



  z-index: 1;



  width: 19px !important;



  height: 19px !important;



  margin-top: 1px;



  stroke-width: 1.75 !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool span {



  position: relative;



  z-index: 1;



  max-width: 58px !important;



  margin-top: 3px;



  overflow: hidden;



  color: inherit !important;



  font-size: 8.5px !important;



  font-weight: 670 !important;



  line-height: 1.08 !important;



  text-align: center;



  text-overflow: ellipsis;



  letter-spacing: .002em !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool:hover {



  border-color: rgba(255,255,255,.055) !important;



  background: rgba(255,255,255,.035) !important;



  color: #fff !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool:hover::before {



  border-color: rgba(255,255,255,.08);



  background: rgba(255,255,255,.055);



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool.is-active,



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool[data-menu-active="1"] {



  border-color: rgba(255, 108, 54, .17) !important;



  background: linear-gradient(180deg, rgba(255,103,47,.12), rgba(255,103,47,.055)) !important;



  color: #fff !important;



  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool.is-active::before,



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool[data-menu-active="1"]::before {



  border-color: rgba(255,118,67,.34);



  background: linear-gradient(145deg, rgba(255,113,55,.26), rgba(255,84,22,.12));



  box-shadow: 0 6px 16px rgba(255,87,31,.08), inset 0 1px rgba(255,255,255,.06);



}



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool.is-active svg,



.bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool[data-menu-active="1"] svg {



  color: #ff8a5c !important;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar-active-indicator {



  left: auto !important;



  right: -1px !important;



  width: 3px !important;



  border-radius: 999px 0 0 999px !important;



  background: #ff6a2c !important;



  box-shadow: -4px 0 12px rgba(255,90,31,.28) !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-rail-divider {



  width: 42px;



  height: 1px;



  flex: 0 0 1px;



  margin: 5px auto;



  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);



}







/* Useful rail tooltips without visual noise. */



.bbd-menu-ui-pro-v32 .bbd-sidebar .bbd-tool[data-bbd-menu-tooltip]::after,



.bbd-menu-ui-pro-v32 .bbd-menu-command-button[data-bbd-menu-tooltip]::after {



  content: attr(data-bbd-menu-tooltip);



  position: absolute;



  z-index: 120;



  left: calc(100% + 11px);



  top: 50%;



  min-width: max-content;



  max-width: 210px;



  padding: 7px 9px;



  transform: translate(4px, -50%);



  border: 1px solid rgba(255,255,255,.08);



  border-radius: 8px;



  background: #111827;



  color: #fff;



  box-shadow: 0 10px 30px rgba(15,23,42,.23);



  font-size: 10px;



  font-weight: 720;



  line-height: 1.2;



  white-space: nowrap;



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



  transition: opacity 100ms ease, transform 100ms ease, visibility 100ms ease;



}



.bbd-menu-ui-pro-v32 .bbd-sidebar .bbd-tool[data-bbd-menu-tooltip]:hover::after,



.bbd-menu-ui-pro-v32 .bbd-menu-command-button[data-bbd-menu-tooltip]:hover::after {



  opacity: 1;



  visibility: visible;



  transform: translate(0, -50%);



}







.bbd-menu-ui-pro-v32 .bbd-menu-command-button {



  position: relative;



  width: 60px;



  min-height: 50px;



  display: grid;



  grid-template-columns: 20px 1fr;



  grid-template-rows: auto auto;



  align-items: center;



  justify-items: center;



  gap: 1px 3px;



  margin: auto auto 0;



  padding: 7px 5px 5px;



  border: 1px solid rgba(255,255,255,.06);



  border-radius: 12px;



  background: rgba(255,255,255,.03);



  color: #aeb8c6;



  cursor: pointer;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-button:hover {



  border-color: rgba(255,255,255,.12);



  background: rgba(255,255,255,.065);



  color: #fff;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-button svg { grid-column: 1; grid-row: 1; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-button > span { grid-column: 2; grid-row: 1; font-size: 8.5px; font-weight: 720; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-button > kbd {



  grid-column: 1 / -1;



  grid-row: 2;



  padding: 2px 5px;



  border: 1px solid rgba(255,255,255,.08);



  border-radius: 5px;



  color: #7f8a9a;



  background: rgba(0,0,0,.15);



  font: 700 7px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;



}







/* Content panel: stronger information architecture, less WordPress-card feel. */



@media (min-width: 1025px) {



  .bbd-menu-ui-pro-v32 .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) var(--bbd-panel-width) minmax(0, 1fr) !important;



  }



  .bbd-menu-ui-pro-v32.is-panel-collapsed .bbd-workspace {



    grid-template-columns: var(--bbd-rail-width) 0 minmax(0, 1fr) !important;



  }



}



.bbd-menu-ui-pro-v32 .bbd-panel.bbd-menu-panel-pro {



  width: var(--bbd-panel-width) !important;



  padding: 0 13px 22px !important;



  border-right: 1px solid var(--bbd-menu-line) !important;



  background: #fbfcfd !important;



  box-shadow: 10px 0 32px rgba(15,23,42,.035) !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-section-pro {



  gap: 10px !important;



  padding-top: 0 !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-section-heading-pro {



  position: sticky !important;



  z-index: 18;



  top: 0;



  display: grid !important;



  grid-template-columns: minmax(0,1fr) auto;



  align-items: center;



  min-height: 72px !important;



  margin: 0 -13px 12px !important;



  padding: 14px 14px 11px !important;



  border: 0 !important;



  border-bottom: 1px solid rgba(229,233,239,.9) !important;



  background: rgba(251,252,253,.94) !important;



  box-shadow: 0 8px 16px rgba(15,23,42,.025) !important;



  backdrop-filter: blur(16px);



}



.bbd-menu-ui-pro-v32 .bbd-menu-section-heading-pro h2 {



  grid-column: 1;



  grid-row: 1;



  margin: 0 !important;



  color: var(--bbd-menu-ink) !important;



  font-size: 19px !important;



  font-weight: 820 !important;



  letter-spacing: -.035em !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-heading-meta {



  grid-column: 1 / -1;



  grid-row: 2;



  min-width: 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 8px;



  margin-top: 3px;



}



.bbd-menu-ui-pro-v32 .bbd-menu-heading-meta > span {



  min-width: 0;



  overflow: hidden;



  color: #7a8594;



  font-size: 9px;



  font-weight: 640;



  line-height: 1.2;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.bbd-menu-ui-pro-v32 .bbd-menu-heading-meta button {



  min-width: 48px;



  min-height: 24px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 4px;



  padding: 0 7px;



  border: 1px solid #e5e8ed;



  border-radius: 7px;



  background: #fff;



  color: #697586;



  cursor: pointer;



}



.bbd-menu-ui-pro-v32 .bbd-menu-heading-meta button:hover { border-color:#d6dbe2; color:#182230; background:#f8fafb; }



.bbd-menu-ui-pro-v32 .bbd-menu-heading-meta kbd { font: 720 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }



.bbd-menu-ui-pro-v32 .bbd-menu-count-badge {



  grid-column: 2;



  grid-row: 1;



  min-width: 24px;



  height: 24px;



  display: inline-grid;



  place-items: center;



  padding: 0 7px;



  border: 1px solid #e4e8ed;



  border-radius: 999px;



  background: #fff;



  color: #647084;



  font-size: 9px;



  font-weight: 850;



}



.bbd-menu-ui-pro-v32 .bbd-pro-panel-intro {



  margin: -4px 0 2px !important;



  padding: 0 2px 10px !important;



  border-bottom-color: #edf0f3 !important;



}







/* Product panel gets dashboard-like cards rather than loose strips. */



.bbd-menu-ui-pro-v32 .bbd-product-menu-pro .bbd-menu-product-card {



  position: relative;



  display: grid;



  gap: 3px;



  padding: 13px 13px 12px 47px !important;



  border: 1px solid #e4e8ed;



  border-radius: 13px;



  background: linear-gradient(145deg,#fff 0%,#f8fbfa 100%);



  box-shadow: 0 4px 14px rgba(15,23,42,.035);



}



.bbd-menu-ui-pro-v32 .bbd-product-menu-pro .bbd-menu-product-card::before {



  content: "";



  position: absolute;



  left: 12px;



  top: 12px;



  width: 25px;



  height: 25px;



  border: 1px solid #cfe9e2;



  border-radius: 8px;



  background: radial-gradient(circle at 50% 42%, #32b89d 0 3px, transparent 4px), linear-gradient(145deg,#effbf7,#e6f7f2);



}



.bbd-menu-ui-pro-v32 .bbd-product-menu-pro .bbd-product-identity strong { color:#182230 !important; font-size:14px !important; font-weight:820 !important; letter-spacing:-.02em; }



.bbd-menu-ui-pro-v32 .bbd-product-menu-pro .bbd-product-identity span { color:#667085 !important; font-size:10px !important; }



.bbd-menu-ui-pro-v32 .bbd-product-menu-pro .bbd-product-family-pill {



  width: max-content;



  max-width: 100%;



  margin-top: 6px;



  padding: 4px 7px !important;



  border: 1px solid #e2e8ef;



  border-radius: 999px !important;



  background: #f8fafc !important;



  color: #5f6b7d !important;



  font-size: 8.5px !important;



  font-style: normal !important;



  font-weight: 700 !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-compact-card {



  min-height: 38px;



  padding: 8px 10px !important;



  border: 1px solid #edf0f3 !important;



  border-radius: 10px !important;



  background: #fff !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-surface-tabs {



  display: flex !important;



  gap: 5px !important;



  padding: 3px !important;



  border: 1px solid #e2e7ec;



  border-radius: 10px;



  background: #f4f6f8;



}



.bbd-menu-ui-pro-v32 .bbd-menu-surface-tabs button {



  flex: 1 1 auto;



  min-height: 31px !important;



  border: 1px solid transparent !important;



  border-radius: 7px !important;



  background: transparent !important;



  color: #667085 !important;



  font-size: 9px !important;



  font-weight: 720 !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-surface-tabs button.is-active {



  border-color: #f0c2b0 !important;



  background: #fff !important;



  color: #d84b14 !important;



  box-shadow: 0 2px 7px rgba(15,23,42,.07) !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-action-grid {



  grid-template-columns: repeat(2,minmax(0,1fr)) !important;



  gap: 8px !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-action-grid button {



  min-height: 42px !important;



  border-radius: 10px !important;



  font-size: 10px !important;



  font-weight: 790 !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-status-card {



  min-height: 54px !important;



  align-content: center;



  border-radius: 11px !important;



  box-shadow: none !important;



}







/* Quick edit becomes a compact inspector-like accordion. */



.bbd-menu-ui-pro-v32 .bbd-menu-accordion {



  overflow: hidden;



  padding: 0 !important;



  border: 1px solid #e3e7ec !important;



  border-radius: 13px !important;



  background: #fff !important;



  box-shadow: 0 4px 14px rgba(15,23,42,.03) !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-product-personalizer__heading {



  min-height: 60px;



  grid-template-columns: 30px minmax(0,1fr) 30px !important;



  gap: 9px !important;



  padding: 11px 11px 10px;



  border-bottom: 1px solid #edf0f3;



  background: linear-gradient(180deg,#fff,#fbfcfd);



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion-toggle {



  width: 28px;



  height: 28px;



  display: grid;



  place-items: center;



  padding: 0;



  border: 1px solid #e4e8ed;



  border-radius: 8px;



  background: #fff;



  color: #667085;



  cursor: pointer;



  transition: transform 140ms ease, background 140ms ease;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion[data-collapsed="1"] .bbd-menu-accordion-toggle { transform: rotate(-90deg); }



.bbd-menu-ui-pro-v32 .bbd-menu-accordion[data-collapsed="1"] .bbd-personalizer-fields { display:none !important; }



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-personalizer-fields {



  display: grid;



  gap: 0 !important;



  padding: 4px 10px 9px;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card {



  position: relative;



  gap: 4px !important;



  padding: 8px 2px !important;



  border-bottom: 1px solid #f0f2f5;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card:last-child { border-bottom:0; }



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card > label {



  color: #7a8493 !important;



  font-size: 8.5px !important;



  font-weight: 760 !important;



  letter-spacing: .015em;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card input,



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card textarea {



  min-height: 37px !important;



  padding: 8px 10px !important;



  border-color: #dfe4ea !important;



  border-radius: 9px !important;



  background: #fbfcfd !important;



  box-shadow: none !important;



  font-size: 10.5px !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card:focus-within input,



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card:focus-within textarea {



  border-color: #ff9b72 !important;



  background: #fff !important;



  box-shadow: 0 0 0 3px rgba(255,90,31,.08) !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card button {



  min-height: 37px !important;



  border-color: #dfe4ea !important;



  background: #fff !important;



  opacity: .62;



}



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card:hover button,



.bbd-menu-ui-pro-v32 .bbd-menu-accordion .bbd-menu-field-card:focus-within button { opacity:1; }



.bbd-menu-ui-pro-v32 .bbd-menu-history-card {



  min-height: 58px;



  padding: 10px 11px !important;



  border-radius: 12px !important;



  background: #f8fafb !important;



  box-shadow: none !important;



}



.bbd-menu-ui-pro-v32 .bbd-menu-history-kicker {



  color: #98a2b3;



  font: 850 7px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;



  letter-spacing: .07em;



}







/* Generic libraries/search cards receive the same visual language. */



.bbd-menu-ui-pro-v32 .bbd-search-field input,



.bbd-menu-ui-pro-v32 #bbd-layer-search,



.bbd-menu-ui-pro-v32 #bbd-component-search,



.bbd-menu-ui-pro-v32 #bbd-font-search {



  min-height: 40px !important;



  padding-left: 12px !important;



  border-radius: 10px !important;



  background: #fff !important;



  box-shadow: 0 2px 8px rgba(15,23,42,.025) !important;



}



.bbd-menu-ui-pro-v32 .bbd-upload-tabs {



  position: sticky;



  z-index: 8;



  top: 72px;



  background: rgba(246,248,250,.95) !important;



  backdrop-filter: blur(12px);



}



.bbd-menu-ui-pro-v32 .bbd-upload-item,



.bbd-menu-ui-pro-v32 .bbd-layer-row,



.bbd-menu-ui-pro-v32 .bbd-component-card,



.bbd-menu-ui-pro-v32 .bbd-template-card {



  border-radius: 12px !important;



}







/* Command palette: fast navigation without growing the rail. */



.bbd-menu-ui-pro-v32 .bbd-menu-command-palette {



  position: fixed;



  z-index: 260;



  inset: 0;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-palette[hidden] { display:none !important; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-backdrop {



  position: absolute;



  inset: 0;



  background: rgba(15,23,42,.34);



  backdrop-filter: blur(3px);



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-dialog {



  position: absolute;



  top: 13vh;



  left: 50%;



  width: min(520px, calc(100vw - 32px));



  max-height: 66vh;



  overflow: hidden;



  transform: translateX(-50%);



  border: 1px solid rgba(255,255,255,.85);



  border-radius: 17px;



  background: rgba(255,255,255,.98);



  box-shadow: 0 28px 80px rgba(15,23,42,.26), 0 2px 8px rgba(15,23,42,.08);



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-search {



  min-height: 58px;



  display: grid;



  grid-template-columns: 22px minmax(0,1fr) auto;



  align-items: center;



  gap: 9px;



  padding: 9px 12px;



  border-bottom: 1px solid #e8ebef;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-search svg { color:#7d8795; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-search input {



  min-width: 0;



  min-height: 40px;



  border: 0;



  outline: 0;



  background: transparent;



  color: #182230;



  font: 650 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-search kbd,



.bbd-menu-ui-pro-v32 .bbd-menu-command-item kbd {



  padding: 4px 6px;



  border: 1px solid #e2e6eb;



  border-bottom-color: #cfd5dc;



  border-radius: 6px;



  background: #f8fafb;



  color: #7a8594;



  font: 750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-title {



  display:flex;



  align-items:center;



  justify-content:space-between;



  padding: 10px 13px 5px;



  color:#667085;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-title span { font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-title small { font-size:8px;color:#98a2b3; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-results {



  max-height: calc(66vh - 108px);



  display:grid;



  gap:3px;



  padding: 5px 8px 10px;



  overflow:auto;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-item {



  min-height: 54px;



  display: grid;



  grid-template-columns: 34px minmax(0,1fr) auto;



  align-items: center;



  gap: 9px;



  padding: 7px 9px;



  border: 1px solid transparent;



  border-radius: 10px;



  background: transparent;



  color: #182230;



  text-align: left;



  cursor: pointer;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-item:hover,



.bbd-menu-ui-pro-v32 .bbd-menu-command-item:focus-visible {



  border-color: #e6e9ed;



  outline: 0;



  background: #f7f9fa;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-item__icon {



  width: 30px;



  height: 30px;



  display:grid;



  place-items:center;



  border-radius:9px;



  background:linear-gradient(145deg,#fff2ec,#ffe8de);



  color:#d84a12;



  font-size:9px;



  font-weight:900;



}



.bbd-menu-ui-pro-v32 .bbd-menu-command-item > span:nth-child(2) { display:grid; gap:2px; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-item strong { font-size:11px;font-weight:800; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-item small { color:#7b8594;font-size:9px; }



.bbd-menu-ui-pro-v32 .bbd-menu-command-empty { padding:24px;text-align:center;color:#98a2b3;font-size:10px; }







/* Panel edge handle: looks intentionally attached to the panel. */



.bbd-menu-ui-pro-v32 .bbd-panel-edge-toggle {



  width: 30px !important;



  min-width: 30px !important;



  height: 44px !important;



  right: -30px !important;



  border: 1px solid #e1e6eb !important;



  border-left: 0 !important;



  border-radius: 0 10px 10px 0 !important;



  background: rgba(255,255,255,.94) !important;



  color: #667085 !important;



  box-shadow: 7px 4px 18px rgba(15,23,42,.08) !important;



  backdrop-filter: blur(12px);



}



.bbd-menu-ui-pro-v32 .bbd-panel-edge-toggle:hover { color:#d84a12 !important; background:#fff8f4 !important; }







@media (max-width: 1280px) and (min-width: 1025px) {



  .bbd-menu-ui-pro-v32 { --bbd-panel-width: 334px; --bbd-rail-width: 72px; }



  .bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool { width:56px !important; }



  .bbd-menu-ui-pro-v32 .bbd-sidebar .bbd-tool[data-bbd-menu-tooltip]::after,



  .bbd-menu-ui-pro-v32 .bbd-menu-command-button[data-bbd-menu-tooltip]::after { display:none; }



}







@media (max-width: 1024px) {



  .bbd-menu-ui-pro-v32 { --bbd-rail-width: 64px; --bbd-panel-width: min(356px, calc(100vw - 64px)); }



  .bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool { width:50px !important; min-height:54px !important; }



  .bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool span { display:none; }



  .bbd-menu-ui-pro-v32 .bbd-sidebar.bbd-premium-tool-rail .bbd-tool::before { top:9px; }



  .bbd-menu-ui-pro-v32 .bbd-menu-command-button { width:50px; grid-template-columns:1fr; }



  .bbd-menu-ui-pro-v32 .bbd-menu-command-button > span,



  .bbd-menu-ui-pro-v32 .bbd-menu-command-button > kbd { display:none; }



  .bbd-menu-ui-pro-v32 .bbd-menu-action-grid { grid-template-columns:1fr !important; }



}







@media (max-width: 760px) {



  .bbd-menu-ui-pro-v32 .bbd-menu-command-dialog { top:auto; bottom:10px; width:calc(100vw - 20px); max-height:72dvh; border-radius:18px; }



  .bbd-menu-ui-pro-v32 .bbd-menu-command-results { max-height:calc(72dvh - 108px); }



  .bbd-menu-ui-pro-v32 .bbd-menu-section-heading-pro { min-height:62px !important; }



  .bbd-menu-ui-pro-v32 .bbd-upload-tabs { top:62px; }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-menu-ui-pro-v32 .bbd-sidebar .bbd-tool,



  .bbd-menu-ui-pro-v32 .bbd-menu-accordion-toggle,



  .bbd-menu-ui-pro-v32 .bbd-sidebar .bbd-tool::after { transition:none !important; }



}











/* ==========================================================



   v0.23.0-dev40 — MEGA FINAL UX / PRODUCT STUDIO ARCHITECTURE



   ========================================================== */



.bbd-mega-final-v40 { --bbd-v40-glass: rgba(255,255,255,.90); --bbd-v40-line: rgba(148,163,184,.28); }







/* 1) Canvas must remain the visual hero. Quality feedback is a quiet chip. */



.bbd-mega-final-v40 .bbd-quality-summary[data-mega-final-quality="compact"],



.bbd-mega-final-v40 .bbd-quality-summary[data-compact="true"] {



  position: absolute !important;



  top: 14px !important;



  right: 16px !important;



  left: auto !important;



  width: auto !important;



  max-width: min(248px, calc(100% - 32px)) !important;



  z-index: 34 !important;



  padding: 0 !important;



  border: 0 !important;



  background: transparent !important;



  box-shadow: none !important;



  pointer-events: auto;



}



.bbd-mega-final-v40 .bbd-quality-chip {



  min-height: 38px !important;



  padding: 6px 9px !important;



  gap: 7px !important;



  border: 1px solid rgba(148,163,184,.28) !important;



  border-radius: 11px !important;



  background: rgba(255,255,255,.92) !important;



  box-shadow: 0 10px 28px rgba(15,23,42,.09) !important;



  backdrop-filter: blur(14px) saturate(1.15);



}



.bbd-mega-final-v40 .bbd-quality-chip strong { font-size: 9px !important; }



.bbd-mega-final-v40 .bbd-quality-chip small { font-size: 8px !important; }







/* 2) Context toolbar = icons first. Labels live in accessible tooltips. */



.bbd-mega-final-v40 .bbd-context-route-toolbar {



  min-height: 46px !important;



  gap: 4px !important;



  padding: 4px !important;



  border: 1px solid rgba(148,163,184,.28) !important;



  border-radius: 13px !important;



  background: rgba(255,255,255,.93) !important;



  box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;



  backdrop-filter: blur(16px) saturate(1.15);



}



.bbd-mega-final-v40 .bbd-context-route-toolbar > button {



  width: 38px !important;



  min-width: 38px !important;



  height: 38px !important;



  min-height: 38px !important;



  padding: 0 !important;



  display: grid !important;



  place-items: center !important;



  border-radius: 9px !important;



}



.bbd-mega-final-v40 .bbd-context-route-toolbar .bbd-context-label,



.bbd-mega-final-v40 .bbd-context-route-toolbar .bbd-context-label-short { display:none !important; }



.bbd-mega-final-v40 .bbd-context-route-toolbar svg { width:18px !important; height:18px !important; }



.bbd-mega-final-v40 .bbd-context-route-toolbar > button.is-active { background:#fff1eb !important; color:#d9460b !important; }







/* 3) HUD: a quiet instrument strip instead of rows of copy. */



.bbd-mega-final-v40 .bbd-dev21-hud-tools { gap:5px !important; }



.bbd-mega-final-v40 .bbd-dev21-hud-tools > button,



.bbd-mega-final-v40 .bbd-mega-actions > button {



  min-height: 34px !important;



  border-radius: 10px !important;



  box-shadow: 0 4px 12px rgba(15,23,42,.035) !important;



}



.bbd-mega-final-v40 .bbd-mega-actions > button strong { display:none !important; }



.bbd-mega-final-v40 .bbd-mega-actions > button:not(.bbd-mega-score) { width:36px !important; min-width:36px !important; padding:0 !important; justify-content:center !important; }



.bbd-mega-final-v40 .bbd-mega-actions .bbd-mega-icon { margin:0 !important; font-size:13px !important; }



.bbd-mega-final-v40 .bbd-dev21-preflight small { display:none !important; }



.bbd-mega-final-v40 .bbd-dev21-preflight { min-height:34px !important; padding:6px 10px !important; border-radius:10px !important; }



.bbd-mega-final-v40 .bbd-stage-meta .bbd-guide-legend { opacity:.42; transition:opacity .16s ease; }



.bbd-mega-final-v40 .bbd-stage-meta:hover .bbd-guide-legend { opacity:.82; }







/* 4) True integrated Product Studio: header, WebGL and actions are one object. */



.bbd-mega-final-v40 .bbd-product-preview {



  position: absolute !important;



  inset: 0 !important;



  padding: 12px !important;



  background: #eef2f5 !important;



  overflow: hidden !important;



}



.bbd-mega-final-v40 .bbd-product-preview__viewport {



  position: relative !important;



  width:100% !important;



  height:100% !important;



  min-height:0 !important;



  overflow:hidden !important;



  border:1px solid rgba(148,163,184,.25) !important;



  border-radius:18px !important;



  background:#e8edf2 !important;



  box-shadow: 0 18px 48px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;



}



.bbd-mega-final-v40 .bbd-product-preview__viewport.is-three-preview { min-height:0 !important; }



.bbd-mega-final-v40 .bbd-product-preview__header.bbd-preview-pro-chrome {



  position:absolute !important;



  z-index:20 !important;



  top:14px !important;



  left:14px !important;



  right:14px !important;



  min-height:52px !important;



  display:flex !important;



  align-items:center !important;



  justify-content:space-between !important;



  gap:12px !important;



  padding:7px 8px 7px 11px !important;



  border:1px solid rgba(148,163,184,.24) !important;



  border-radius:14px !important;



  background:rgba(255,255,255,.88) !important;



  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;



  backdrop-filter:blur(16px) saturate(1.15);



  pointer-events:auto;



}



.bbd-mega-final-v40 .bbd-preview-pro-identity { display:grid !important; grid-template-columns:auto auto !important; align-items:baseline !important; column-gap:9px !important; row-gap:1px !important; min-width:0; }



.bbd-mega-final-v40 .bbd-preview-pro-identity > span { grid-column:1/-1; font:850 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.085em !important; color:#7b8795 !important; text-transform:uppercase; }



.bbd-mega-final-v40 .bbd-preview-pro-identity h2 { margin:0 !important; font-size:14px !important; line-height:1.15 !important; letter-spacing:-.02em !important; color:#172033 !important; }



.bbd-mega-final-v40 .bbd-preview-pro-identity small { color:#7a8594; font-size:9px; font-weight:700; white-space:nowrap; }



.bbd-mega-final-v40 .bbd-preview-pro-return {



  min-height:36px !important;



  display:inline-flex !important;



  align-items:center !important;



  gap:7px !important;



  padding:7px 10px !important;



  border:1px solid #dfe4ea !important;



  border-radius:10px !important;



  background:#fff !important;



  color:#344054 !important;



  font-size:10px !important;



  font-weight:800 !important;



  cursor:pointer;



}



.bbd-mega-final-v40 .bbd-preview-pro-return:hover { border-color:#ff9b72 !important; color:#d84a12 !important; }



.bbd-mega-final-v40 .bbd-product-preview__scene { display:none !important; }







/* Scene controls become a small lens/lighting console under the top chrome. */



.bbd-mega-final-v40 .bbd-mega-scene-bar {



  top:78px !important;



  left:50% !important;



  right:auto !important;



  bottom:auto !important;



  transform:translateX(-50%) !important;



  min-height:40px !important;



  display:flex !important;



  align-items:center !important;



  gap:6px !important;



  padding:4px !important;



  border:1px solid rgba(148,163,184,.26) !important;



  border-radius:12px !important;



  background:rgba(255,255,255,.88) !important;



  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;



  backdrop-filter:blur(14px) saturate(1.15);



}



.bbd-mega-final-v40 .bbd-preview-scene-label { display:none !important; }



.bbd-mega-final-v40 .bbd-mega-scene-bar > div { display:flex !important; gap:3px !important; }



.bbd-mega-final-v40 .bbd-mega-scene-bar button {



  min-width:36px !important;



  height:32px !important;



  display:flex !important;



  align-items:center !important;



  justify-content:center !important;



  gap:5px !important;



  padding:0 8px !important;



  border:0 !important;



  border-radius:8px !important;



  background:transparent !important;



  color:#667085 !important;



  font-size:9px !important;



  font-weight:800 !important;



}



.bbd-mega-final-v40 .bbd-mega-scene-bar button svg { width:15px; height:15px; }



.bbd-mega-final-v40 .bbd-mega-scene-bar button.is-active { background:#ecfbf7 !important; color:#087a65 !important; box-shadow:inset 0 0 0 1px #b7e9dc; }







/* View controls = floating icon dock; no more detached caption bar. */



.bbd-mega-final-v40 .bbd-product-preview__three-controls {



  left:50% !important;



  right:auto !important;



  bottom:18px !important;



  width:auto !important;



  min-width:0 !important;



  transform:translateX(-50%) !important;



  padding:4px !important;



  gap:5px !important;



  border:1px solid rgba(148,163,184,.28) !important;



  border-radius:13px !important;



  background:rgba(255,255,255,.91) !important;



  box-shadow:0 14px 34px rgba(15,23,42,.12) !important;



  backdrop-filter:blur(16px) saturate(1.15);



}



.bbd-mega-final-v40 .bbd-preview-control-caption { display:none !important; }



.bbd-mega-final-v40 .bbd-preview-view-actions { display:flex !important; align-items:center !important; gap:3px !important; }



.bbd-mega-final-v40 .bbd-preview-control-separator { width:1px; height:22px; margin:0 2px; background:#e1e6eb; }



.bbd-mega-final-v40 .bbd-product-preview__three-controls button {



  width:38px !important;



  min-width:38px !important;



  height:36px !important;



  min-height:36px !important;



  display:grid !important;



  place-items:center !important;



  padding:0 !important;



  border:0 !important;



  border-radius:9px !important;



  background:transparent !important;



  color:#475467 !important;



}



.bbd-mega-final-v40 .bbd-product-preview__three-controls button svg { width:17px; height:17px; }



.bbd-mega-final-v40 .bbd-product-preview__three-controls button:hover { background:#f7f9fa !important; color:#d84a12 !important; }



.bbd-mega-final-v40 .bbd-product-preview__three-controls button.is-active { background:#fff1eb !important; color:#d84a12 !important; box-shadow:inset 0 0 0 1px #ffc3aa; }







.bbd-mega-final-v40 .bbd-preview-drag-hint {



  position:absolute;



  z-index:10;



  left:16px;



  bottom:18px;



  display:flex;



  align-items:center;



  gap:6px;



  padding:6px 8px;



  border-radius:9px;



  background:rgba(255,255,255,.64);



  color:#7b8795;



  font-size:9px;



  font-weight:750;



  backdrop-filter:blur(10px);



  pointer-events:none;



}



.bbd-mega-final-v40 .bbd-preview-drag-hint svg { width:14px;height:14px; }



.bbd-mega-final-v40 .bbd-preview-pro-status {



  position:absolute !important;



  z-index:10 !important;



  right:16px !important;



  bottom:18px !important;



  max-width:320px !important;



  margin:0 !important;



  padding:6px 9px !important;



  border-radius:9px !important;



  background:rgba(255,255,255,.64) !important;



  color:#7b8795 !important;



  font-size:9px !important;



  font-weight:700 !important;



  backdrop-filter:blur(10px);



}



.bbd-mega-final-v40 .bbd-dev21-preview-meta { top:80px !important; right:16px !important; z-index:12 !important; }



.bbd-mega-final-v40 .bbd-product-preview__viewport::before { display:none !important; }



.bbd-mega-final-v40 .bbd-rear-face-badge { top:124px !important; }







/* 5) Toasts are confirmations, not furniture. */



.bbd-mega-final-v40 .bbd-toast-region { max-width:330px !important; }



.bbd-mega-final-v40 .bbd-toast { padding:8px 10px !important; border-radius:10px !important; font-size:9.5px !important; box-shadow:0 10px 28px rgba(15,23,42,.10) !important; }







/* 6) Technical lines recede until the user explicitly asks for guides. */



.bbd-mega-final-v40 .bbd-canvas-shell:not(:hover) .bbd-guide-layer,



.bbd-mega-final-v40 .bbd-stage-area:not(:hover) .bbd-guide-legend { opacity:.46; }







@media (max-width: 960px) {



  .bbd-mega-final-v40 .bbd-product-preview { padding:8px !important; }



  .bbd-mega-final-v40 .bbd-product-preview__header.bbd-preview-pro-chrome { top:10px !important;left:10px !important;right:10px !important; }



  .bbd-mega-final-v40 .bbd-preview-pro-identity small { display:none; }



  .bbd-mega-final-v40 .bbd-mega-scene-bar { top:72px !important; }



  .bbd-mega-final-v40 .bbd-mega-scene-bar button span { display:none; }



  .bbd-mega-final-v40 .bbd-mega-scene-bar button { width:34px !important;min-width:34px !important;padding:0 !important; }



  .bbd-mega-final-v40 .bbd-preview-drag-hint span,



  .bbd-mega-final-v40 .bbd-preview-pro-status { display:none !important; }



}



@media (max-width:760px) {



  .bbd-mega-final-v40 .bbd-preview-pro-return span { display:none; }



  .bbd-mega-final-v40 .bbd-preview-pro-return { width:36px;padding:0 !important;justify-content:center; }



  .bbd-mega-final-v40 .bbd-product-preview__three-controls { bottom:10px !important; }



  .bbd-mega-final-v40 .bbd-dev21-preview-meta { display:none !important; }



}



@media (prefers-reduced-motion: reduce) {



  .bbd-mega-final-v40 .bbd-context-route-toolbar,



  .bbd-mega-final-v40 .bbd-product-preview__three-controls,



  .bbd-mega-final-v40 .bbd-mega-scene-bar { transition:none !important; }



}







.bbd-mega-final-v40 .bbd-dev21-preview-meta { display:none !important; }



.bbd-mega-final-v40 .bbd-preview-pro-live {



  display:inline-flex !important;align-items:center;gap:5px;padding:3px 6px;border-radius:999px;



  background:#ecfbf7;color:#087a65 !important;font-size:7.5px !important;font-weight:900 !important;letter-spacing:.05em;



}



.bbd-mega-final-v40 .bbd-preview-pro-live i { width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.11); }











/* ================================================================



   v0.23.0-dev41 — MEGA FINAL STABILITY PASS



   Restores Product Studio layout after dev40 integrated chrome move.



   ================================================================ */



.bbd-mega-final-v41.bbd-app.is-preview-mode .bbd-product-preview {



  display: block !important;



  position: absolute !important;



  inset: 0 !important;



  min-width: 0 !important;



  min-height: 0 !important;



  padding: 12px !important;



  overflow: hidden !important;



}



.bbd-mega-final-v41.bbd-app.is-preview-mode .bbd-product-preview__viewport {



  position: absolute !important;



  inset: 12px !important;



  width: auto !important;



  height: auto !important;



  min-width: 0 !important;



  min-height: 320px !important;



  margin: 0 !important;



}



.bbd-mega-final-v41.bbd-app.is-preview-mode .bbd-product-preview__viewport.is-three-preview {



  min-height: 320px !important;



}



.bbd-mega-final-v41 .bbd-product-preview__three-canvas,



.bbd-mega-final-v41 .bbd-product-preview__viewport > #bbd-product-preview-canvas {



  position: absolute !important;



  inset: 0 !important;



  width: 100% !important;



  height: 100% !important;



}



/* Avoid a duplicate background-panel title introduced by the legacy background



   module + menu architecture stacking in some layouts. */



.bbd-mega-final-v41 [data-panel-content="background"] > .bbd-pro-panel-intro[data-for="background"] {



  display: none !important;



}



/* The HUD must hug its actual controls, not read as a large empty capsule. */



.bbd-mega-final-v41 .bbd-mega-hud-row,



.bbd-mega-final-v41 .bbd-stage-meta {



  width: max-content !important;



  max-width: calc(100% - 32px) !important;



}



@media (max-width: 960px) {



  .bbd-mega-final-v41.bbd-app.is-preview-mode .bbd-product-preview { padding: 8px !important; }



  .bbd-mega-final-v41.bbd-app.is-preview-mode .bbd-product-preview__viewport { inset: 8px !important; }



}







/* ================================================================



   v0.23.0-dev42 — PRODUCT-AWARE ASSETS + PREVIEW INTEGRITY



   - Product Studio cloth/mast integrity



   - Header More menu always above workspace



   - 15 solid backgrounds / richer gradients / patterns



   - Premium SVG/text/template library polish



   ================================================================ */







/* Header must own the highest UI layer. A transformed stage/canvas must never



   paint above the global More menu. */



.bbd-pro-workspace-v0230-dev42 .bbd-topbar {



  position: relative !important;



  z-index: 2147483000 !important;



  overflow: visible !important;



  isolation: auto !important;



}



.bbd-pro-workspace-v0230-dev42 .bbd-topbar__right,



.bbd-pro-workspace-v0230-dev42 .bbd-topbar__actions,



.bbd-pro-workspace-v0230-dev42 .bbd-more-menu {



  overflow: visible !important;



  position: relative;



}



.bbd-pro-workspace-v0230-dev42 .bbd-more-menu { z-index: 2147483100 !important; }



.bbd-pro-workspace-v0230-dev42 .bbd-more-menu__content {



  z-index: 2147483200 !important;



  position: absolute !important;



  top: calc(100% + 8px) !important;



  right: 0 !important;



  min-width: 250px;



  max-height: min(70vh, 560px);



  overflow: auto !important;



  box-shadow: 0 20px 55px rgba(15,23,42,.20), 0 2px 8px rgba(15,23,42,.08) !important;



}







/* The legacy direct heading is redundant once Menu UI Pro owns the panel



   header. Keep the actual background module, remove only the duplicate title. */



.bbd-pro-workspace-v0230-dev42 [data-panel-content="background"] > .bbd-panel-heading,



.bbd-pro-workspace-v0230-dev42 [data-panel-content="background"] > h2 {



  display: none !important;



}







/* Background Studio ------------------------------------------------------ */



.bbd-pro-workspace-v0230-dev42 .bbd-background-modules {



  display: flex;



  flex-direction: column;



  gap: 12px;



  padding-bottom: 18px;



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-selection {



  display:grid !important;



  grid-template-columns:44px minmax(0,1fr) auto;



  align-items:center;



  gap:10px;



  padding:10px;



  border:1px solid #e2e8f0;



  border-radius:14px;



  background:#fff;



  box-shadow:0 1px 2px rgba(15,23,42,.03);



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-selection > .bbd-background-preview {



  width:44px;height:38px;border-radius:10px;border:1px solid rgba(15,23,42,.10);



  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-selection strong { display:block;font-size:12px;color:#0f172a; }



.bbd-pro-workspace-v0230-dev42 .bbd-background-selection small { display:block;margin-top:2px;font-size:10px;color:#64748b;font-variant-numeric:tabular-nums; }



.bbd-pro-workspace-v0230-dev42 .bbd-background-selection button {



  height:34px;padding:0 12px;border:1px solid #dbe3ed;border-radius:10px;background:#fff;color:#172033;font-size:11px;font-weight:800;



}







.bbd-pro-workspace-v0230-dev42 .bbd-background-mode-tabs {



  position:sticky;top:0;z-index:4;



  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;



  padding:4px;border:1px solid #e5eaf1;border-radius:13px;background:rgba(246,248,251,.94);backdrop-filter:blur(12px);



  overflow:visible !important;



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-mode-tabs button {



  min-width:0;height:34px;padding:0 7px;border:0;border-radius:9px;background:transparent;color:#687386;font-size:10.5px;font-weight:800;white-space:nowrap;



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-mode-tabs button.is-active {



  background:#fff;color:#0f172a;box-shadow:0 1px 4px rgba(15,23,42,.10), inset 0 0 0 1px #dde4ed;



}







.bbd-pro-workspace-v0230-dev42 .bbd-bg-preset-grid {



  display:grid !important;



  grid-template-columns:repeat(5,minmax(0,1fr));



  gap:8px;



}



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch {



  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;



  padding:5px 3px 6px;border:1px solid transparent;border-radius:11px;background:transparent;cursor:pointer;



}



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch span {



  width:100%;aspect-ratio:1.35;border-radius:9px;background:var(--bbd-bg-swatch);border:1px solid rgba(15,23,42,.10);



  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 1px 2px rgba(15,23,42,.06);



  transition:transform .16s ease,box-shadow .16s ease;



}



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch em {max-width:100%;overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:8.5px;font-weight:700;color:#64748b;white-space:nowrap;}



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch:hover span { transform:translateY(-2px) scale(1.035);box-shadow:0 7px 16px rgba(15,23,42,.12); }



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch[aria-pressed="true"],



.bbd-pro-workspace-v0230-dev42 .bbd-bg-swatch.is-active {background:#ecfdf8;border-color:#86dbc7;}







.bbd-pro-workspace-v0230-dev42 .bbd-background-card-grid {



  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card {



  position:relative;display:grid;grid-template-rows:70px auto auto;gap:3px;min-width:0;padding:7px;



  border:1px solid #dfe5ed;border-radius:13px;background:#fff;text-align:left;cursor:pointer;overflow:hidden;



  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;



}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card:hover {transform:translateY(-2px);border-color:#b9c5d5;box-shadow:0 10px 25px rgba(15,23,42,.09);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card[aria-pressed="true"],



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-active {border-color:#2bb89a;box-shadow:0 0 0 2px rgba(43,184,154,.12);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card .bbd-background-preview {display:block;width:100%;height:70px;border-radius:9px;border:1px solid rgba(15,23,42,.07);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card strong {font-size:11px;line-height:1.2;color:#0f172a;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card small {font-size:9px;line-height:1.25;color:#7b8798;}







/* Gradient previews */



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-warm .bbd-background-preview {background:linear-gradient(135deg,#fb7185 0%,#f59e0b 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-cool .bbd-background-preview {background:linear-gradient(135deg,#bfdbfe 0%,#2dd4bf 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-sunset .bbd-background-preview {background:linear-gradient(135deg,#7c3aed 0%,#fb7185 52%,#fbbf24 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-ocean .bbd-background-preview {background:linear-gradient(135deg,#0f4c81 0%,#0891b2 48%,#5eead4 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-mint .bbd-background-preview {background:linear-gradient(135deg,#ecfdf5 0%,#34d399 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-royal .bbd-background-preview {background:linear-gradient(135deg,#111827 0%,#4338ca 54%,#a78bfa 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-midnight .bbd-background-preview {background:linear-gradient(135deg,#020617 0%,#172554 55%,#0f766e 100%);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-blush .bbd-background-preview {background:linear-gradient(135deg,#fff1f2 0%,#f9a8d4 52%,#c4b5fd 100%);}



/* Pattern previews */



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-dots .bbd-background-preview {background-color:#fff;background-image:radial-gradient(#111827 1.4px,transparent 1.5px);background-size:14px 14px;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-microdots .bbd-background-preview {background-color:#f8fafc;background-image:radial-gradient(#64748b 1px,transparent 1px);background-size:8px 8px;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-grid .bbd-background-preview {background-color:#fff;background-image:linear-gradient(#dbe3ed 1px,transparent 1px),linear-gradient(90deg,#dbe3ed 1px,transparent 1px);background-size:16px 16px;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-diagonal .bbd-background-preview {background:repeating-linear-gradient(135deg,#fff 0 10px,#eef2f7 10px 18px,#ffede5 18px 21px);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-waves .bbd-background-preview {background:radial-gradient(80px 25px at 50% 0,#cffafe 49%,transparent 51%) 0 0/80px 22px,radial-gradient(80px 25px at 0 100%,#99f6e4 49%,transparent 51%) 0 0/80px 22px,#fff;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-lines .bbd-background-preview {background:repeating-linear-gradient(0deg,#f8fafc 0 7px,#cbd5e1 8px,#f8fafc 9px 15px);}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-checker .bbd-background-preview {background-color:#fff;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%,transparent 75%,#e2e8f0 75%),linear-gradient(45deg,#e2e8f0 25%,transparent 25%,transparent 75%,#e2e8f0 75%);background-position:0 0,12px 12px;background-size:24px 24px;}



.bbd-pro-workspace-v0230-dev42 .bbd-background-card.is-confetti .bbd-background-preview {background-color:#fff;background-image:radial-gradient(circle at 14% 22%,#fb7185 0 3px,transparent 3.5px),radial-gradient(circle at 66% 30%,#2dd4bf 0 3px,transparent 3.5px),radial-gradient(circle at 35% 78%,#f59e0b 0 3px,transparent 3.5px),radial-gradient(circle at 84% 72%,#7c3aed 0 3px,transparent 3.5px);background-size:44px 42px;}







/* Asset library: cards feel like designed objects instead of plain database rows. */



.bbd-pro-workspace-v0230-dev42 .bbd-clipart-card {



  min-height:106px !important;padding:8px !important;border-radius:14px !important;background:linear-gradient(155deg,#fff,#f8fafc) !important;



}



.bbd-pro-workspace-v0230-dev42 .bbd-clipart-card__preview {



  min-height:66px !important;border-radius:11px !important;background:radial-gradient(circle at 35% 25%,#fff 0,#f7f9fc 60%,#edf1f6 100%) !important;



  box-shadow:inset 0 0 0 1px #e5eaf1;



}



.bbd-pro-workspace-v0230-dev42 .bbd-clipart-card__preview svg {max-width:72% !important;max-height:58px !important;filter:drop-shadow(0 5px 5px rgba(15,23,42,.12));transition:transform .18s ease;}



.bbd-pro-workspace-v0230-dev42 .bbd-clipart-card:hover .bbd-clipart-card__preview svg {transform:translateY(-2px) rotate(-1deg) scale(1.04);}







.bbd-pro-workspace-v0230-dev42 .bbd-preset-chip {



  position:relative;min-height:118px !important;padding:10px !important;border-radius:14px !important;overflow:hidden;



  background:linear-gradient(145deg,#fff,#f8fafc) !important;



}



.bbd-pro-workspace-v0230-dev42 .bbd-preset-chip::before {



  content:"T";position:absolute;right:-6px;top:-18px;font-size:72px;font-weight:900;line-height:1;color:rgba(255,75,0,.055);pointer-events:none;



}



.bbd-pro-workspace-v0230-dev42 .bbd-preset-chip strong {position:relative;font-size:13px !important;line-height:1.08 !important;}



.bbd-pro-workspace-v0230-dev42 .bbd-preset-chip:hover {border-color:#ffc1aa !important;box-shadow:0 10px 25px rgba(15,23,42,.08) !important;transform:translateY(-2px);}







/* Yelken starter templates: tall-product preview is the hero, metadata secondary. */



.bbd-pro-workspace-v0230-dev42 .bbd-template-card {border-radius:14px !important;padding:8px !important;overflow:hidden;}



.bbd-pro-workspace-v0230-dev42 .bbd-template-card__preview {min-height:126px !important;border-radius:11px !important;background:radial-gradient(circle at 50% 20%,#fff 0,#f5f7fa 65%,#ebeff4 100%) !important;}



.bbd-pro-workspace-v0230-dev42 .bbd-template-card:hover {transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.10);}







/* Product Studio seam confidence: hide accidental canvas gaps around 3D viewport



   and give the product a cleaner centered stage. Actual mast/fabric alignment is



   performed in JS geometry. */



.bbd-pro-workspace-v0230-dev42 .bbd-product-preview__viewport {background:#eef1f4;}



.bbd-pro-workspace-v0230-dev42 .bbd-product-preview__three-canvas {display:block;}







@media (max-width:1180px) {



  .bbd-pro-workspace-v0230-dev42 .bbd-bg-preset-grid {grid-template-columns:repeat(4,minmax(0,1fr));}



  .bbd-pro-workspace-v0230-dev42 .bbd-background-mode-tabs button {font-size:0;}



  .bbd-pro-workspace-v0230-dev42 .bbd-background-mode-tabs button::first-letter {font-size:11px;}



}





/* BBD CSS: assets/css/editor-0230-dev43.css */
/* Baskibu Designer 0.23.0-dev.43 — Product Studio + CM Rulers + Typography Studio */







.bbd-pro-workspace-v0230-dev43 {



  --bbd-v43-panel: 352px;



  --bbd-v43-ink: #101828;



  --bbd-v43-muted: #667085;



  --bbd-v43-line: #e4e7ec;



  --bbd-v43-soft: #f7f9fb;



  --bbd-v43-green: #0a9f78;



}







/* Real Baskibu brand slot: prefer configured / WordPress custom logo. */



.bbd-pro-workspace-v0230-dev43 .bbd-brand-slot {



  min-width: 0;



  min-height: 34px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  padding: 4px 7px;



  border: 1px solid #e6e9ee;



  border-radius: 9px;



  background: #fff;



  color: #0f172a;



  font-size: 0;



  font-weight: 800;



  box-shadow: 0 1px 2px rgba(16,24,40,.04);



}



.bbd-pro-workspace-v0230-dev43 .bbd-brand-slot img {



  width: auto;



  max-width: 112px;



  height: 28px !important;



  max-height: 28px;



  object-fit: contain;



}



.bbd-pro-workspace-v0230-dev43 .bbd-brand-slot:not(:has(img)) {



  font-size: 12px;



}







/* ----- precision rulers + dimensions ----- */



.bbd-pro-workspace-v0230-dev43:not(.is-preview-mode) .bbd-ruler {



  display: block !important;



  opacity: 1 !important;



  pointer-events: auto;



  background: rgba(250,251,252,.96);



  border-color: #d9dee6;



  box-shadow: 0 1px 0 rgba(16,24,40,.03);



  color: #667085;



  font-size: 9px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler--horizontal {



  height: 22px;



  top: 48px;



  left: 52px;



  right: 14px;



  border: 1px solid #e5e9ef;



  border-radius: 7px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler--vertical {



  width: 22px;



  top: 78px;



  bottom: 48px;



  left: 14px;



  border: 1px solid #e5e9ef;



  border-radius: 7px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler__tick {



  padding-top: 3px;



  border-left-color: #bdc5d0;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler--vertical .bbd-ruler__tick {



  width: 48px;



  color: #667085;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-overlay {



  position: absolute;



  inset: 0;



  z-index: 18;



  pointer-events: none;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line {



  position: absolute;



  color: #475467;



  font-size: 10px;



  font-weight: 760;



  letter-spacing: .02em;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line::before,



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line::after {



  content: '';



  position: absolute;



  background: rgba(71,84,103,.42);



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width {



  left: var(--bbd-art-left);



  top: calc(var(--bbd-art-top) - 30px);



  width: var(--bbd-art-width);



  height: 18px;



  border-top: 1px solid rgba(71,84,103,.32);



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width::before,



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width::after {



  top: -4px;



  width: 1px;



  height: 8px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width::before { left: 0; }



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width::after { right: 0; }



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-width span {



  position: absolute;



  left: 50%;



  top: -10px;



  transform: translate(-50%,-50%);



  padding: 2px 7px;



  border: 1px solid #d8dee7;



  border-radius: 999px;



  background: rgba(255,255,255,.95);



  box-shadow: 0 2px 8px rgba(16,24,40,.06);



  white-space: nowrap;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height {



  left: calc(var(--bbd-art-left) + var(--bbd-art-width) + 22px);



  top: var(--bbd-art-top);



  width: 18px;



  height: var(--bbd-art-height);



  border-left: 1px solid rgba(71,84,103,.32);



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height::before,



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height::after {



  left: -4px;



  width: 8px;



  height: 1px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height::before { top: 0; }



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height::after { bottom: 0; }



.bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height span {



  position: absolute;



  left: 7px;



  top: 50%;



  transform: translateY(-50%) rotate(90deg);



  transform-origin: center;



  padding: 2px 7px;



  border: 1px solid #d8dee7;



  border-radius: 999px;



  background: rgba(255,255,255,.95);



  box-shadow: 0 2px 8px rgba(16,24,40,.06);



  white-space: nowrap;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler-unit-badge {



  position: absolute;



  left: 12px;



  top: 8px;



  display: inline-flex;



  align-items: center;



  gap: 4px;



  padding: 4px 7px;



  border: 1px solid #dfe4eb;



  border-radius: 7px;



  background: rgba(255,255,255,.94);



  color: #667085;



  font-size: 9px;



  font-weight: 800;



}



.bbd-pro-workspace-v0230-dev43 .bbd-ruler-unit-badge svg { width: 13px; height: 13px; }



.bbd-pro-workspace-v0230-dev43.is-preview-mode .bbd-dimension-overlay { display: none !important; }







/* ----- Typography Studio ----- */



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 {



  padding-bottom: 28px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 > h2 {



  margin-bottom: 3px;



  font-size: 20px;



  letter-spacing: -.025em;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-text-mode-tabs {



  margin: 8px 0 12px;



  padding: 3px;



  border: 1px solid #e5e9ef;



  border-radius: 10px;



  background: #f4f6f8;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-text-mode-tabs button {



  min-height: 32px;



  border-radius: 8px;



  font-size: 11px;



  font-weight: 750;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-composer {



  display: grid;



  gap: 7px;



  margin: 0 0 12px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-composer label {



  color: #344054;



  font-size: 10px;



  font-weight: 800;



  letter-spacing: .025em;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-composer textarea {



  width: 100%;



  min-height: 76px;



  resize: vertical;



  padding: 11px 12px;



  border: 1px solid #d6dce5;



  border-radius: 9px;



  background: #fff;



  box-shadow: inset 0 1px 2px rgba(16,24,40,.02);



  color: #101828;



  font: 600 13px/1.45 Inter, ui-sans-serif, sans-serif;



  outline: none;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-composer textarea:focus {



  border-color: rgba(255,75,0,.55);



  box-shadow: 0 0 0 3px rgba(255,75,0,.08);



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-composer button {



  min-height: 38px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 7px;



  border: 0;



  border-radius: 9px;



  background: var(--bbd-color-accent, #ff4b00);



  color: #fff;



  font-size: 11px;



  font-weight: 800;



  cursor: pointer;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-dev43-legacy-quick,



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-dev43-hide-categories,



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-dev43-legacy-presets {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-search-field {



  margin-bottom: 14px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-studio-v43 .bbd-search-field input {



  min-height: 38px;



  border-radius: 9px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-section {



  margin: 0 0 18px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-head {



  display: flex;



  align-items: end;



  justify-content: space-between;



  margin-bottom: 9px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-head strong {



  display: block;



  color: #101828;



  font-size: 12px;



  font-weight: 820;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-head small {



  display: block;



  margin-top: 2px;



  color: #98a2b3;



  font-size: 9px;



  font-weight: 600;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 8px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card {



  min-height: 122px;



  display: grid;



  grid-template-rows: 78px auto;



  align-items: stretch;



  padding: 7px;



  border: 1px solid #e3e8ef;



  border-radius: 10px;



  background: #fff;



  box-shadow: 0 1px 2px rgba(16,24,40,.025);



  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card:hover {



  transform: translateY(-1px);



  border-color: #c8d0db;



  box-shadow: 0 8px 20px rgba(16,24,40,.07);



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-preset-preview {



  height: 74px;



  min-height: 74px;



  padding: 6px;



  border: 0;



  border-radius: 8px;



  background: #fff;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-preset-preview i,



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-preset-preview em {



  display: none;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-preset-preview b {



  color: var(--bbd-preset-accent, #111827);



  font-family: var(--bbd-preset-font), Inter, sans-serif;



  font-size: 19px;



  font-style: normal;



  font-weight: 700;



  line-height: 1.02;



  letter-spacing: -.025em;



  text-align: center;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card > strong {



  margin: 3px 2px 0;



  color: #667085;



  font-size: 9px;



  font-weight: 720;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card > small {



  display: none;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-preset-favorite {



  top: 6px;



  right: 7px;



  color: #98a2b3;



  font-size: 13px;



  opacity: 0;



  transition: opacity .12s ease;



}



.bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card:hover .bbd-preset-favorite { opacity: 1; }







/* ----- unified Product Studio ----- */



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview {



  padding: 12px;



  background:



    radial-gradient(circle at 50% 8%, rgba(255,255,255,.86), transparent 34%),



    linear-gradient(180deg, #edf1f4 0%, #e4e9ed 100%);



}



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__viewport {



  border: 1px solid rgba(148,163,184,.28);



  border-radius: 14px;



  background: #e9edf0;



  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 14px 40px rgba(15,23,42,.08);



  overflow: hidden;



}



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__three-canvas {



  filter: saturate(1.015) contrast(1.015);



}



.bbd-pro-workspace-v0230-dev43 .bbd-mega-scene-bar,



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__three-controls {



  border: 1px solid rgba(208,213,221,.9);



  background: rgba(255,255,255,.92);



  box-shadow: 0 8px 28px rgba(16,24,40,.10);



  backdrop-filter: blur(14px);



}



.bbd-pro-workspace-v0230-dev43 .bbd-mega-scene-bar button,



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__three-controls button {



  border-radius: 8px;



}



.bbd-pro-workspace-v0230-dev43 .bbd-mega-scene-bar button.is-active,



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__three-controls button.is-active {



  background: #ecfdf8;



  color: #087a5f;



  box-shadow: inset 0 0 0 1px rgba(10,159,120,.20);



}



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__header {



  border: 1px solid #e1e6ed;



  border-radius: 12px;



  background: rgba(255,255,255,.94);



  box-shadow: 0 6px 20px rgba(16,24,40,.05);



}



.bbd-pro-workspace-v0230-dev43 .bbd-product-preview__footer {



  color: #667085;



}







/* Make the design surface feel like a precision studio rather than a blank page. */



.bbd-pro-workspace-v0230-dev43 .bbd-canvas-shell {



  background:



    radial-gradient(circle at 50% 38%, rgba(255,255,255,.84), transparent 42%),



    linear-gradient(180deg, #edf1f4 0%, #e7ebef 100%);



}



.bbd-pro-workspace-v0230-dev43 .canvas-container,



.bbd-pro-workspace-v0230-dev43 .bbd-canvas-container {



  filter: drop-shadow(0 14px 30px rgba(15,23,42,.13));



}







@media (max-width: 1180px) {



  .bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid { grid-template-columns: 1fr; }



  .bbd-pro-workspace-v0230-dev43 .bbd-dimension-line.is-height { left: calc(var(--bbd-art-left) + var(--bbd-art-width) + 14px); }



}







@media (max-width: 760px) {



  .bbd-pro-workspace-v0230-dev43 .bbd-dimension-overlay,



  .bbd-pro-workspace-v0230-dev43 .bbd-ruler { display: none !important; }



  .bbd-pro-workspace-v0230-dev43 .bbd-brand-slot img { max-width: 86px; height: 24px !important; }



  .bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-pro-workspace-v0230-dev43 .bbd-type-gallery-grid .bbd-visual-preset-card { transition: none; }



}





/* BBD CSS: assets/css/editor-0230-dev44.css */
/* Baskibu Designer 0.23.0-dev44 — Commerce-first product panel, calm rulers, premium typography */







/* Product panel: answer “what am I designing and what does it cost?” only. */



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-identity,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-compact-row,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-surface-list,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-flow-actions,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-preflight,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-setup-note,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-personalizer,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > .bbd-product-history,



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 > [data-bbd-quick-personalizer] {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 .bbd-menu-section-heading-pro {



  min-height: 62px !important;



  margin-bottom: 10px !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-product-panel-v44 .bbd-menu-heading-meta > span {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary {



  display: grid;



  gap: 14px;



  padding: 15px;



  border: 1px solid #e2e7ed;



  border-radius: 15px;



  background: #fff;



  box-shadow: 0 8px 26px rgba(15,23,42,.055);



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__head {



  display: grid;



  grid-template-columns: 34px minmax(0,1fr);



  gap: 10px;



  align-items: center;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__icon {



  width: 34px;



  height: 34px;



  display: grid;



  place-items: center;



  border: 1px solid #cde9e2;



  border-radius: 10px;



  background: #effaf7;



  color: #0c8a70;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__head strong {



  display: block;



  color: #101828;



  font-size: 14px;



  font-weight: 850;



  letter-spacing: -.025em;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__head span {



  display: block;



  margin-top: 2px;



  color: #667085;



  font-size: 10px;



  font-weight: 650;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__chips {



  display: flex;



  flex-wrap: wrap;



  gap: 6px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__chips span {



  padding: 5px 8px;



  border: 1px solid #e4e7ec;



  border-radius: 999px;



  background: #f8fafc;



  color: #475467;



  font-size: 9px;



  font-weight: 730;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__price {



  display: grid;



  grid-template-columns: minmax(0,1fr) auto;



  align-items: end;



  gap: 2px 10px;



  padding: 12px 0;



  border-top: 1px solid #edf0f3;



  border-bottom: 1px solid #edf0f3;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__price > span {



  grid-column: 1;



  color: #667085;



  font-size: 9px;



  font-weight: 700;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__price > strong {



  grid-column: 2;



  grid-row: 1 / span 2;



  align-self: center;



  max-width: 170px;



  color: #101828;



  font-size: 20px;



  font-weight: 900;



  letter-spacing: -.035em;



  text-align: right;



  line-height: 1.05;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__price > small {



  grid-column: 1;



  color: #98a2b3;



  font-size: 8.5px;



  font-weight: 620;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__actions {



  display: grid;



  grid-template-columns: 1fr;



  gap: 7px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__actions button {



  min-height: 41px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  padding: 0 12px;



  border-radius: 10px;



  font-size: 10px;



  font-weight: 820;



  cursor: pointer;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__actions .is-primary {



  border: 1px solid var(--bbd-color-accent,#ff4b00);



  background: var(--bbd-color-accent,#ff4b00);



  color: #fff;



  box-shadow: 0 6px 16px rgba(255,75,0,.16);



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__actions .is-secondary {



  border: 1px solid #dfe4ea;



  background: #fff;



  color: #344054;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__actions button:hover { transform: translateY(-1px); }



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__hint {



  margin: -3px 0 0;



  color: #98a2b3;



  font-size: 8.5px;



  font-weight: 600;



  line-height: 1.45;



}







/* Real ruler language: quiet ticks, no repeated “0cm20cm…” wall of text. */



.bbd-pro-workspace-v0230-dev44 .bbd-ruler,



.bbd-pro-workspace-v0230-dev44 .bbd-dimension-overlay {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-rulers {



  position: absolute;



  inset: 0;



  z-index: 17;



  pointer-events: none;



}



.bbd-pro-workspace-v0230-dev44.is-preview-mode .bbd-clean-rulers { display: none !important; }



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler-unit {



  position: absolute;



  left: calc(var(--bbd-ruler-left) - 25px);



  top: calc(var(--bbd-ruler-top) - 25px);



  width: 20px;



  height: 20px;



  display: grid;



  place-items: center;



  border: 1px solid #e1e6ec;



  border-radius: 6px;



  background: rgba(255,255,255,.94);



  color: #7a8594;



  font-size: 7px;



  font-weight: 850;



  text-transform: uppercase;



  box-shadow: 0 2px 7px rgba(15,23,42,.04);



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler {



  position: absolute;



  color: #657184;



  font-size: 8px;



  font-weight: 700;



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-horizontal {



  left: var(--bbd-ruler-left);



  top: calc(var(--bbd-ruler-top) - 24px);



  width: var(--bbd-ruler-width);



  height: 20px;



  border-bottom: 1px solid rgba(99,115,129,.22);



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-vertical {



  left: calc(var(--bbd-ruler-left) - 24px);



  top: var(--bbd-ruler-top);



  width: 20px;



  height: var(--bbd-ruler-height);



  border-right: 1px solid rgba(99,115,129,.22);



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler i {



  position: absolute;



  display: block;



  background: rgba(99,115,129,.34);



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-horizontal i {



  bottom: 0;



  width: 1px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-horizontal i.is-minor { height: 4px; }



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-horizontal i.is-major { height: 8px; }



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-horizontal i span {



  position: absolute;



  bottom: 9px;



  left: 0;



  transform: translateX(-50%);



  white-space: nowrap;



  color: #7a8594;



  font-style: normal;



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-vertical i {



  right: 0;



  height: 1px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-vertical i.is-minor { width: 4px; }



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-vertical i.is-major { width: 8px; }



.bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler.is-vertical i span {



  position: absolute;



  right: 9px;



  top: 0;



  transform: translateY(-50%);



  white-space: nowrap;



  color: #7a8594;



  font-style: normal;



}







/* Text studio: Printful-like calm hierarchy, actual typography previews, progressive disclosure. */



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-text-mode-tabs,



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-panel-subtitle,



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-text-memory,



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-dev43-legacy-quick,



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-dev43-hide-categories {



  display: none !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-composer {



  gap: 8px;



  margin-bottom: 14px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-composer label {



  color: #101828;



  font-size: 11px;



  font-weight: 820;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-composer textarea {



  min-height: 92px;



  border-radius: 11px;



  font-size: 14px;



  font-weight: 560;



  line-height: 1.45;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-composer button {



  min-height: 42px;



  border-radius: 10px;



  font-size: 11px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-search-field {



  margin: 0 0 18px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-search-field input {



  min-height: 40px;



  padding-left: 12px;



  border-color: #dfe4ea;



  background: #fff;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-gallery-section {



  margin-bottom: 22px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-gallery-head {



  margin-bottom: 10px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-gallery-head strong {



  font-size: 12px;



  font-weight: 850;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-gallery-head small {



  color: #98a2b3;



  font-size: 8.5px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-type-gallery-grid {



  grid-template-columns: repeat(2,minmax(0,1fr));



  gap: 9px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-visual-preset-card {



  min-height: 132px;



  grid-template-rows: 92px auto !important;



  padding: 8px !important;



  border-color: #e4e7ec !important;



  border-radius: 12px !important;



  box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-visual-preset-card:hover {



  border-color: #cfd6df !important;



  box-shadow: 0 10px 24px rgba(15,23,42,.075) !important;



  transform: translateY(-2px);



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-preset-preview {



  height: 90px !important;



  min-height: 90px !important;



  display: grid;



  place-items: center;



  padding: 8px !important;



  background: #fff !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-preset-preview b {



  max-width: 100%;



  color: var(--bbd-preset-accent,#111827);



  font-family: var(--bbd-preset-font), Inter, sans-serif;



  font-size: 20px !important;



  font-weight: 750;



  line-height: .98;



  text-align: center;



  text-wrap: balance;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .bbd-visual-preset-card > strong {



  margin: 5px 2px 1px !important;



  color: #667085 !important;



  font-size: 9px !important;



  font-weight: 700 !important;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-studio-v44 .is-v44-folded { display: none !important; }



.bbd-pro-workspace-v0230-dev44 .bbd-type-more-v44 {



  width: 100%;



  min-height: 34px;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 5px;



  margin-top: 9px;



  border: 0;



  background: transparent;



  color: #475467;



  font-size: 9px;



  font-weight: 760;



  cursor: pointer;



}



.bbd-pro-workspace-v0230-dev44 .bbd-type-more-v44 svg { transition: transform .15s ease; }



.bbd-pro-workspace-v0230-dev44 .bbd-type-more-v44.is-expanded svg { transform: rotate(90deg); }







/* Calm the top-level explanatory copy; contextual tools do the teaching. */



.bbd-pro-workspace-v0230-dev44 .bbd-menu-section-heading-pro .bbd-menu-heading-meta button {



  min-width: 34px;



  padding: 0 6px;



}



.bbd-pro-workspace-v0230-dev44 .bbd-menu-section-heading-pro .bbd-menu-heading-meta kbd { display: none; }







@media (max-width: 1180px) {



  .bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__price > strong { font-size: 17px; }



  .bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler-unit,



  .bbd-pro-workspace-v0230-dev44 .bbd-clean-ruler { opacity: .82; }



}



@media (max-width: 1024px) {



  .bbd-pro-workspace-v0230-dev44 .bbd-clean-rulers { display: none !important; }



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__surfaces {



  display: flex;



  gap: 5px;



  padding: 3px;



  border: 1px solid #e3e8ee;



  border-radius: 10px;



  background: #f5f7f9;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__surfaces[hidden] { display: none !important; }



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__surfaces button {



  flex: 1 1 0;



  min-height: 30px;



  border: 0;



  border-radius: 7px;



  background: transparent;



  color: #667085;



  font-size: 9px;



  font-weight: 750;



  cursor: pointer;



}



.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__surfaces button.is-active {



  background: #fff;



  color: #d84b14;



  box-shadow: 0 1px 5px rgba(15,23,42,.07);



}






/* 0.25.21 — compact product options entry lives beside the product title. */


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__head {


  grid-template-columns: 34px minmax(0,1fr) 34px;


}


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__identity {


  min-width: 0;


}


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__edit {


  width: 34px;


  height: 34px;


  display: inline-grid;


  place-items: center;


  padding: 0;


  border: 1px solid #dfe7e4;


  border-radius: 10px;


  background: #fff;


  color: #0b7a6a;


  cursor: pointer;


  transition: background .16s ease, border-color .16s ease, transform .16s ease;


}


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__edit svg {


  width: 15px;


  height: 15px;


}


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__edit:hover,


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__edit:focus-visible {


  background: #effaf7;


  border-color: #b7ded5;


  outline: none;


}


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__edit:active { transform: scale(.96); }


.bbd-pro-workspace-v0230-dev44 .bbd-commerce-summary__chips[hidden] { display: none !important; }




/* BBD CSS: assets/css/editor-0230-dev45.css */
/* Baskibu Designer 0.23.0-dev45 — app-like simplified rail + micro actions */







/* Primary navigation: five jobs + one overflow, not a toolbox wall. */



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 {



  width: 64px !important;



  padding: 10px 6px 8px !important;



  gap: 4px !important;



  background: #121923 !important;



  border-right: 1px solid rgba(255,255,255,.05) !important;



}



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool.bbd-app-tool-v45,



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool[data-panel="mobile-more"] {



  width: 52px !important;



  min-height: 54px !important;



  margin: 0 auto !important;



  padding: 7px 3px 5px !important;



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 4px !important;



  border: 1px solid transparent !important;



  border-radius: 12px !important;



  background: transparent !important;



  color: #a9b3c2 !important;



  box-shadow: none !important;



  transition: background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease !important;



}



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool svg { flex: 0 0 auto; }



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool span {



  display: block !important;



  max-width: 48px !important;



  overflow: hidden !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



  color: inherit !important;



  font-size: 8px !important;



  font-weight: 720 !important;



  letter-spacing: -.01em !important;



  line-height: 1.05 !important;



}



@media (hover:hover) and (pointer:fine) {



  .bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool.bbd-app-tool-v45:hover,



  .bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool[data-panel="mobile-more"]:hover {



    background: rgba(255,255,255,.055) !important;



    color: #fff !important;



    transform: translateY(-1px);



  }



}



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool.is-active {



  border-color: rgba(255,91,31,.34) !important;



  background: rgba(255,91,31,.14) !important;



  color: #ff7a45 !important;



  box-shadow: inset 3px 0 0 #ff5b1f !important;



}



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-menu-rail-divider,



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 [data-bbd-menu-command] { display:none !important; }







/* App overflow: advanced tools exist, but they do not live in the primary rail. */



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45 {



  position: absolute;



  z-index: 8500;



  width: 264px;



  padding: 8px;



  border: 1px solid #e4e9ef;



  border-radius: 16px;



  background: rgba(255,255,255,.98);



  box-shadow: 0 18px 48px rgba(15,23,42,.18);



  backdrop-filter: blur(14px);



}



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45[hidden] { display:none !important; }



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45__head {



  height: 36px;



  display:flex;



  align-items:center;



  justify-content:space-between;



  padding: 0 5px 5px 8px;



  color:#101828;



}



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45__head strong { font-size:12px;font-weight:850; }



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45__head button {



  width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:9px;background:#f5f7fa;color:#667085;cursor:pointer;



}



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45 > button:not([data-bbd-app-more-close]) {



  width:100%;min-height:54px;display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:9px;align-items:center;padding:8px 9px;border:0;border-radius:11px;background:transparent;color:#344054;text-align:left;cursor:pointer;



}



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45 > button:hover { background:#f6f8fa; }



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45 > button > span strong { display:block;font-size:11px;font-weight:800;color:#101828; }



.bbd-pro-workspace-v0230-dev45 .bbd-app-more-popover-v45 > button > span small { display:block;margin-top:2px;font-size:9px;color:#98a2b3; }







/* Micro shortcut: background color is an inline action, not a full navigation destination. */



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45 {



  position: relative;



  display: inline-flex;



  align-items: center;



  order: 8;



  margin-left: 3px;



  pointer-events: auto;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__trigger {



  min-height: 32px;



  display:inline-flex;



  align-items:center;



  gap:6px;



  padding: 0 10px 0 7px;



  border:1px solid #e1e7ed;



  border-radius:999px;



  background:rgba(255,255,255,.94);



  color:#475467;



  font-size:9px;



  font-weight:780;



  box-shadow:0 4px 14px rgba(15,23,42,.05);



  cursor:pointer;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__swatch {



  width:17px;height:17px;border-radius:50%;border:1px solid rgba(15,23,42,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__popover {



  position:absolute;



  left:0;



  top:calc(100% + 8px);



  z-index:8200;



  width:252px;



  padding:12px;



  border:1px solid #e2e7ed;



  border-radius:15px;



  background:rgba(255,255,255,.985);



  box-shadow:0 18px 44px rgba(15,23,42,.16);



  backdrop-filter:blur(14px);



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__popover[hidden] { display:none !important; }



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__palette {



  display:grid;



  grid-template-columns:repeat(5,1fr);



  gap:8px;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__color {



  width:34px;height:34px;margin:auto;border:1px solid rgba(15,23,42,.12);border-radius:10px;background:var(--bbd-micro-color);box-shadow:inset 0 0 0 2px rgba(255,255,255,.54);cursor:pointer;position:relative;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__color.is-active::after {



  content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.5);



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__color[style*="#FFFFFF"].is-active::after,



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__color[style*="#F8FAFC"].is-active::after,



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__color[style*="#FFF7ED"].is-active::after { color:#111827;text-shadow:none; }



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients {



  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid #edf0f3;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients button {



  min-height:38px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;color:#475467;font-size:9px;font-weight:760;cursor:pointer;



}



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients button[data-bbd-background-micro-more] { grid-column:1/-1; }



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients i { width:20px;height:14px;border-radius:5px;border:1px solid rgba(15,23,42,.08); }



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients i.is-warm { background:linear-gradient(135deg,#fff7ed,#fb7185); }



.bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__gradients i.is-cool { background:linear-gradient(135deg,#eff6ff,#14b8a6); }







/* Existing full background and graphics panels remain reachable only through More. */



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar .bbd-tool[data-panel="graphics"],



.bbd-pro-workspace-v0230-dev45 .bbd-sidebar .bbd-tool[data-panel="background"] { display:none !important; }







/* Calm panel chrome: panels should feel like sheets inside an app. */



.bbd-pro-workspace-v0230-dev45 .bbd-menu-section-heading-pro { min-height:56px !important; }



.bbd-pro-workspace-v0230-dev45 .bbd-menu-heading-meta > span { display:none !important; }



.bbd-pro-workspace-v0230-dev45 .bbd-menu-heading-meta [data-bbd-menu-open-command] { display:none !important; }







@media (max-width:1024px) {



  .bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__trigger > span:last-child { display:none; }



  .bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__trigger { width:34px;padding:0;justify-content:center; }



  .bbd-pro-workspace-v0230-dev45 .bbd-background-micro-v45__swatch { width:15px;height:15px; }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-pro-workspace-v0230-dev45 .bbd-sidebar.bbd-app-rail-v45 .bbd-tool { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev46.css */
/* Baskibu Designer 0.23.0-dev46 — Template Studio Pro



   Product-aware, premium editable template collection. */







.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-panel-heading {



  align-items:flex-start;



  padding-bottom:10px;



}



.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-panel-heading h2 {



  font-size:22px !important;



  letter-spacing:-.035em;



}



.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-panel-heading span {



  display:inline-flex;



  align-items:center;



  min-height:24px;



  padding:0 9px;



  border:1px solid #e7eaf0;



  border-radius:999px;



  background:#fff;



  color:#667085;



  font-size:9px;



  font-weight:800;



  letter-spacing:.02em;



}







.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-template-context {



  position:relative;



  overflow:hidden;



  padding:12px 13px !important;



  border:1px solid #e9edf3 !important;



  border-radius:14px !important;



  background:linear-gradient(135deg,#fff 0%,#fafbfc 58%,#f4f7fb 100%) !important;



  box-shadow:0 7px 20px rgba(15,23,42,.045);



}



.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-template-context::after {



  content:"";



  position:absolute;



  width:78px;



  height:78px;



  right:-24px;



  top:-32px;



  border-radius:50%;



  background:radial-gradient(circle,rgba(255,75,0,.13),rgba(255,75,0,0) 70%);



  pointer-events:none;



}



.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-template-context strong {



  font-size:12px !important;



  font-weight:850 !important;



  letter-spacing:-.01em;



}



.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-template-context span {



  max-width:230px;



  color:#667085 !important;



  font-size:10px !important;



  line-height:1.4 !important;



}







.bbd-template-studio-pro-v46 [data-panel-content="templates"] .bbd-search-field input {



  height:40px !important;



  border-radius:12px !important;



  border-color:#dfe5ed !important;



  background:#fff !important;



  font-size:12px !important;



  box-shadow:0 2px 7px rgba(15,23,42,.025);



}







.bbd-template-pro-filters {



  display:flex;



  gap:6px;



  margin:9px 0 12px;



  padding:1px 1px 5px;



  overflow-x:auto;



  scrollbar-width:none;



  overscroll-behavior-x:contain;



}



.bbd-template-pro-filters::-webkit-scrollbar { display:none; }



.bbd-template-pro-filter {



  flex:0 0 auto;



  min-height:30px;



  padding:0 10px;



  border:1px solid #e3e7ed;



  border-radius:999px;



  background:#fff;



  color:#667085;



  font-size:10px;



  font-weight:800;



  cursor:pointer;



  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;



}



.bbd-template-pro-filter:hover {



  border-color:#ffc8b4;



  color:#c83c0b;



  transform:translateY(-1px);



}



.bbd-template-pro-filter[aria-pressed="true"] {



  border-color:#ffb99f;



  background:#fff4ef;



  color:#d9430b;



  box-shadow:0 4px 12px rgba(255,75,0,.09);



}







.bbd-template-studio-pro-v46 .bbd-template-grid {



  grid-template-columns:repeat(2,minmax(0,1fr)) !important;



  gap:12px !important;



  padding:1px 1px 12px !important;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46 {



  position:relative;



  min-width:0;



  padding:7px 7px 10px !important;



  border:1px solid #e0e5ec !important;



  border-radius:16px !important;



  background:#fff !important;



  box-shadow:0 4px 12px rgba(15,23,42,.035);



  text-align:left;



  overflow:hidden;



  transform:translateZ(0);



  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease !important;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:hover,



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:focus-visible {



  transform:translateY(-3px) !important;



  border-color:color-mix(in srgb,var(--bbd-card-accent,#ff4b00) 42%,#dfe5ec) !important;



  box-shadow:0 16px 32px rgba(15,23,42,.11) !important;



  outline:none;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46.is-active,



.bbd-template-studio-pro-v46 .bbd-template-card--pro46[aria-pressed="true"] {



  border-color:var(--bbd-card-accent,#ff4b00) !important;



  box-shadow:0 0 0 2px color-mix(in srgb,var(--bbd-card-accent,#ff4b00) 15%,transparent),0 14px 28px rgba(15,23,42,.09) !important;



}







.bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview {



  position:relative;



  min-height:174px !important;



  height:174px !important;



  display:grid !important;



  place-items:center !important;



  border:1px solid #e7ebf0 !important;



  border-radius:12px !important;



  overflow:hidden !important;



  background:



    radial-gradient(circle at 50% 16%,rgba(255,255,255,.98),rgba(248,250,252,.96) 58%,rgba(235,240,246,.98) 100%) !important;



  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 13px rgba(15,23,42,.045);



  perspective:700px;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview::after {



  content:"";



  position:absolute;



  inset:0;



  z-index:2;



  pointer-events:none;



  opacity:.0;



  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.52) 43%,transparent 61%);



  transform:translateX(-110%);



  transition:opacity .18s ease,transform .46s cubic-bezier(.2,.7,.2,1);



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:hover .bbd-template-card__preview::after {



  opacity:.7;



  transform:translateX(112%);



}







.bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__svg--feather {



  position:relative;



  z-index:1;



  width:auto !important;



  max-width:82% !important;



  height:154px !important;



  max-height:154px !important;



  filter:drop-shadow(0 9px 9px rgba(15,23,42,.20));



  transform:translate3d(var(--bbd-px1,0),var(--bbd-py1,0),0) rotateX(var(--bbd-tilt-x,0deg)) rotateY(var(--bbd-tilt-y,0deg)) scale(.98) !important;



  transform-origin:center 52%;



  transition:filter .18s ease,transform .18s ease !important;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:hover .bbd-template-card__svg--feather {



  filter:drop-shadow(0 13px 12px rgba(15,23,42,.23));



  transform:translate3d(var(--bbd-px2,0),calc(var(--bbd-py2,0) - 2px),0) rotateX(var(--bbd-tilt-x,0deg)) rotateY(var(--bbd-tilt-y,0deg)) scale(1.025) !important;



}







.bbd-template-pro-kicker {



  position:absolute;



  z-index:5;



  left:8px;



  top:8px;



  min-height:19px;



  display:inline-flex;



  align-items:center;



  padding:0 6px;



  border:1px solid rgba(255,255,255,.75);



  border-radius:999px;



  background:rgba(15,23,42,.78);



  color:#fff;



  box-shadow:0 3px 9px rgba(15,23,42,.15);



  backdrop-filter:blur(8px);



  font-size:7px;



  font-weight:900;



  letter-spacing:.07em;



}







.bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview-action {



  z-index:6 !important;



  right:8px !important;



  bottom:8px !important;



  left:auto !important;



  min-height:28px !important;



  display:inline-flex !important;



  align-items:center;



  justify-content:center;



  padding:0 10px !important;



  border:1px solid rgba(255,255,255,.74) !important;



  border-radius:9px !important;



  background:rgba(15,23,42,.84) !important;



  color:#fff !important;



  font-size:9px !important;



  font-weight:850 !important;



  box-shadow:0 6px 16px rgba(15,23,42,.19) !important;



  backdrop-filter:blur(8px);



  transform:translateY(4px);



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:hover .bbd-template-card__preview-action,



.bbd-template-studio-pro-v46 .bbd-template-card--pro46:focus-visible .bbd-template-card__preview-action {



  transform:translateY(0);



}







.bbd-template-studio-pro-v46 .bbd-template-card--pro46 > strong {



  display:block;



  margin:9px 2px 2px !important;



  overflow:hidden;



  color:#111827 !important;



  font-size:12px !important;



  font-weight:850 !important;



  line-height:1.15 !important;



  letter-spacing:-.018em;



  text-overflow:ellipsis;



  white-space:nowrap;



}



.bbd-template-studio-pro-v46 .bbd-template-card--pro46 > small {



  display:block;



  min-height:27px;



  margin:0 2px !important;



  overflow:hidden;



  color:#7b8493 !important;



  font-size:8.8px !important;



  font-weight:650 !important;



  line-height:1.38 !important;



  display:-webkit-box;



  -webkit-line-clamp:2;



  -webkit-box-orient:vertical;



}



.bbd-template-studio-pro-v46 .bbd-template-card__product-badge { display:none !important; }



.bbd-template-studio-pro-v46 .bbd-template-card.is-filter-hidden { display:none !important; }







@media (max-width:1180px) {



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview { height:158px !important; min-height:158px !important; }



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__svg--feather { height:140px !important; max-height:140px !important; }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46,



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__svg--feather,



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview::after { transition:none !important; }



  .bbd-template-studio-pro-v46 .bbd-template-card--pro46 .bbd-template-card__preview::after { display:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev47.css */
/* Baskibu Designer 0.23.0-dev47 — readable app rail + visual copy studio */







/* Desktop rail: readable labels without turning the UI into a toolbar wall. */



.bbd-pro-workspace-v0230-dev47 {



  --bbd-rail-width: 78px !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-app-rail-v45.bbd-readable-rail-v47 {



  width:78px !important;



  max-width:78px !important;



  padding:10px 6px !important;



  gap:5px !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool.bbd-app-tool-v45,



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool[data-panel="mobile-more"] {



  width:66px !important;



  min-height:62px !important;



  padding:8px 4px 7px !important;



  gap:5px !important;



  border-radius:14px !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool svg {



  width:22px !important;



  height:22px !important;



  stroke-width:1.85 !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool span {



  display:block !important;



  max-width:62px !important;



  overflow:visible !important;



  color:inherit !important;



  font-size:11px !important;



  font-weight:760 !important;



  line-height:1.08 !important;



  letter-spacing:-.015em !important;



  text-align:center !important;



  text-overflow:clip !important;



  white-space:normal !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool.is-active {



  box-shadow:inset 3px 0 0 #ff5b1f,0 8px 18px rgba(0,0,0,.09) !important;



}







/* Text panel: one clean visual library instead of empty headings and legacy clutter. */



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-host-v47 .bbd-v47-legacy-hidden { display:none !important; }



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-host-v47 > .bbd-panel-heading h2,



.bbd-pro-workspace-v0230-dev47 [data-panel-content="text"] > .bbd-panel-heading h2 {



  font-size:22px !important;



  letter-spacing:-.035em !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-host-v47 .bbd-search-field {



  margin-bottom:14px !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-v47 {



  margin:0 -2px 20px;



  padding-bottom:16px;



}



.bbd-v47-section-head {



  min-height:34px;



  display:flex;



  align-items:center;



  justify-content:space-between;



  gap:12px;



  margin:2px 2px 9px;



}



.bbd-v47-section-head strong {



  display:block;



  color:#101828;



  font-size:13px;



  font-weight:850;



  letter-spacing:-.018em;



}



.bbd-v47-section-head small {



  display:block;



  margin-top:2px;



  color:#98a2b3;



  font-size:9px;



  font-weight:620;



  line-height:1.25;



}



.bbd-v47-section-head > button {



  width:30px;height:30px;display:grid;place-items:center;



  border:1px solid #e3e8ef;border-radius:9px;background:#fff;color:#475467;



  font-size:20px;line-height:1;cursor:pointer;



}



.bbd-v47-style-strip {



  display:grid;



  grid-auto-flow:column;



  grid-auto-columns:132px;



  gap:9px;



  overflow-x:auto;



  padding:2px 2px 11px;



  scrollbar-width:thin;



  scrollbar-color:#cbd5e1 transparent;



  overscroll-behavior-x:contain;



}



.bbd-style-card-v47,



.bbd-copy-card-v47 {



  position:relative;



  min-width:0;



  display:grid;



  align-content:stretch;



  padding:0;



  overflow:hidden;



  border:1px solid #e1e6ed;



  border-radius:13px;



  background:#fff;



  color:#101828;



  text-align:left;



  box-shadow:0 2px 7px rgba(15,23,42,.035);



  cursor:pointer;



  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;



}



.bbd-style-card-v47 { min-height:122px; grid-template-rows:86px auto; }



.bbd-copy-card-v47 { min-height:148px; grid-template-rows:110px auto; }



.bbd-style-card-v47:hover,



.bbd-copy-card-v47:hover,



.bbd-style-card-v47:focus-visible,



.bbd-copy-card-v47:focus-visible {



  transform:translateY(-2px);



  border-color:#ffb89e;



  box-shadow:0 12px 26px rgba(15,23,42,.095);



  outline:none;



}



.bbd-v47-preview {



  display:grid;



  place-items:center;



  min-width:0;



  padding:12px 8px;



  overflow:hidden;



  background:



    radial-gradient(circle at 50% 20%,rgba(255,255,255,.98),rgba(249,250,251,.98) 75%),



    #fff;



  color:var(--v47-color,#111827);



  font-family:var(--v47-font),sans-serif;



  font-size:20px;



  font-weight:800;



  line-height:.98;



  letter-spacing:-.035em;



  text-align:center;



  text-wrap:balance;



  transform:rotate(var(--v47-angle,0deg));



}



.bbd-copy-card-v47:nth-child(4n+2) .bbd-v47-preview { background:#fff8f4; }



.bbd-copy-card-v47:nth-child(4n+3) .bbd-v47-preview { background:#f7fbff; }



.bbd-copy-card-v47:nth-child(4n+4) .bbd-v47-preview { background:#f7fff9; }



.bbd-v47-card-meta {



  display:flex;



  align-items:center;



  justify-content:space-between;



  gap:6px;



  min-height:36px;



  padding:7px 9px;



  border-top:1px solid #eef1f4;



  background:#fff;



}



.bbd-v47-card-meta strong {



  min-width:0;



  overflow:hidden;



  color:#344054;



  font-size:9.5px;



  font-weight:780;



  text-overflow:ellipsis;



  white-space:nowrap;



}



.bbd-v47-card-meta small {



  flex:0 0 auto;



  color:#98a2b3;



  font-size:7.5px;



  font-weight:700;



}



.bbd-v47-copy-head { margin-top:18px; }



.bbd-v47-copy-categories {



  display:flex;



  gap:6px;



  overflow-x:auto;



  margin:0 2px 10px;



  padding:1px 0 5px;



  scrollbar-width:none;



}



.bbd-v47-copy-categories::-webkit-scrollbar { display:none; }



.bbd-v47-copy-categories button {



  flex:0 0 auto;



  min-height:29px;



  padding:0 10px;



  border:1px solid #e3e7ed;



  border-radius:999px;



  background:#fff;



  color:#667085;



  font-size:9px;



  font-weight:780;



  cursor:pointer;



}



.bbd-v47-copy-categories button[aria-pressed="true"] {



  border-color:#ffb89e;



  background:#fff3ee;



  color:#d9430b;



}



.bbd-v47-copy-grid {



  display:grid;



  grid-template-columns:repeat(2,minmax(0,1fr));



  gap:10px;



  padding:1px 2px 8px;



}



.bbd-v47-empty {



  grid-column:1/-1;



  min-height:96px;



  display:grid;



  place-items:center;



  padding:16px;



  border:1px dashed #d0d5dd;



  border-radius:12px;



  color:#98a2b3;



  font-size:10px;



  text-align:center;



}







/* Give the text composer breathing room, but keep it secondary to visual presets. */



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-host-v47 .bbd-type-composer textarea {



  min-height:78px !important;



}



.bbd-pro-workspace-v0230-dev47 .bbd-copy-studio-host-v47 .bbd-type-composer button {



  min-height:40px !important;



}







@media (max-width:1180px) {



  .bbd-pro-workspace-v0230-dev47 { --bbd-rail-width:74px !important; }



  .bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 { width:74px !important;max-width:74px !important; }



  .bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool.bbd-app-tool-v45,



  .bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool[data-panel="mobile-more"] { width:62px !important; }



  .bbd-pro-workspace-v0230-dev47 .bbd-sidebar.bbd-readable-rail-v47 .bbd-tool span { font-size:10px !important; }



}



@media (max-width:760px) {



  .bbd-v47-copy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-style-card-v47,.bbd-copy-card-v47 { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev48.css */
/* Baskibu Designer 0.23.0-dev48 — Geometry v2 + Typography Studio v2 */







/* Geometry guides: production lines stay crisp and subordinate to the artwork. */



.bbd-pro-workspace-v0230-dev48 .lower-canvas,



.bbd-pro-workspace-v0230-dev48 .upper-canvas { image-rendering:auto; }



.bbd-pro-workspace-v0230-dev48 .bbd-guide-key,



.bbd-pro-workspace-v0230-dev48 [data-bbd-guide-key] { backdrop-filter:blur(10px); }







/* Replace dev47's single-font cards with real multi-layer typography compositions. */



.bbd-pro-workspace-v0230-dev48 .bbd-copy-studio-v47,



.bbd-type48-host .bbd-copy-studio-v47[hidden] { display:none !important; }



.bbd-type48-studio { margin:2px 0 22px; padding:0 1px 14px; }



.bbd-type48-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 2px 10px; }



.bbd-type48-head strong { display:block; color:#101828; font-size:14px; font-weight:850; letter-spacing:-.025em; }



.bbd-type48-head small { display:block; margin-top:3px; color:#8a94a6; font-size:9.5px; font-weight:620; line-height:1.3; }



.bbd-type48-cats { display:flex; gap:6px; overflow-x:auto; padding:1px 2px 8px; margin-bottom:4px; scrollbar-width:none; }



.bbd-type48-cats::-webkit-scrollbar { display:none; }



.bbd-type48-cats button { flex:0 0 auto; min-height:30px; padding:0 11px; border:1px solid #e1e6ed; border-radius:999px; background:#fff; color:#667085; font-size:9.5px; font-weight:780; cursor:pointer; }



.bbd-type48-cats button[aria-pressed="true"] { border-color:#ffb89e; background:#fff3ee; color:#d9430b; box-shadow:0 3px 10px rgba(255,91,31,.08); }



.bbd-type48-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:1px 2px 10px; }



.bbd-type48-card { min-width:0; min-height:154px; display:grid; grid-template-rows:116px auto; overflow:hidden; padding:0; border:1px solid #e1e6ed; border-radius:14px; background:#fff; color:#101828; text-align:left; box-shadow:0 3px 10px rgba(15,23,42,.04); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }



.bbd-type48-card:hover,.bbd-type48-card:focus-visible { transform:translateY(-2px); border-color:#ffab8b; box-shadow:0 14px 28px rgba(15,23,42,.11); outline:none; }



.bbd-type48-art { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; padding:11px 7px; overflow:hidden; background:#fff; color:#111827; text-align:center; }



.bbd-type48-card:nth-child(6n+2) .bbd-type48-art { background:#fff8f4; }



.bbd-type48-card:nth-child(6n+3) .bbd-type48-art { background:#f8fbff; }



.bbd-type48-card:nth-child(6n+4) .bbd-type48-art { background:#f7fff9; }



.bbd-type48-card:nth-child(6n+5) .bbd-type48-art { background:#fbf9ff; }



.bbd-type48-art b,.bbd-type48-art strong { display:block; max-width:100%; font-family:Manrope,sans-serif; font-size:21px; font-weight:850; line-height:.9; letter-spacing:-.045em; }



.bbd-type48-art i { display:block; font-family:"Dancing Script",cursive; font-size:27px; font-weight:700; line-height:.9; color:#e11d48; transform:rotate(-3deg); }



.bbd-type48-art em { display:inline-block; padding:3px 7px; background:#ffe600; color:#111827; font-family:Manrope,sans-serif; font-size:13px; font-style:normal; font-weight:850; letter-spacing:.04em; transform:rotate(-2deg); }



.bbd-type48-art small,.bbd-type48-art span { display:block; max-width:100%; color:#667085; font-family:Manrope,sans-serif; font-size:8px; font-weight:750; line-height:1.15; letter-spacing:.08em; }



.bbd-type48-art .p48-kicker { display:inline-block; padding:3px 6px; border-radius:999px; background:#111827; color:#fff; font-size:7px; letter-spacing:.12em; }



.bbd-type48-art .p48-shadow { color:#ff5b1f; text-shadow:4px 4px 0 #ffd4c4; }



.bbd-type48-art .p48-outline { color:#fff; -webkit-text-stroke:1.2px #dc2626; text-shadow:none; }



.bbd-type48-art .p48-arrow { color:#2563eb; font-size:30px; line-height:.8; }



.bbd-type48-art .p48-arch { width:88px; height:25px; color:#0f766e; font-size:8px; letter-spacing:.2em; transform:rotate(-9deg); }



.bbd-type48-art .p48-badge { width:72px; height:72px; display:grid; place-items:center; border:2px solid #ff5b1f; border-radius:50%; color:#111827; font-size:8px; letter-spacing:.08em; line-height:1; }



.bbd-type48-art .p48-badge b { color:#ff5b1f; font-size:18px; }



.bbd-type48-meta { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 9px; border-top:1px solid #eef1f4; background:#fff; }



.bbd-type48-meta strong { min-width:0; overflow:hidden; color:#344054; font-size:9.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }



.bbd-type48-meta small { flex:0 0 auto; color:#98a2b3; font-size:7.5px; font-weight:700; }



.bbd-type48-empty { grid-column:1/-1; min-height:90px; display:grid; place-items:center; padding:14px; border:1px dashed #d0d5dd; border-radius:12px; color:#98a2b3; font-size:10px; text-align:center; }







/* Make the text composer feel like a quick input, not another competing library. */



.bbd-pro-workspace-v0230-dev48 .bbd-type48-host .bbd-type-composer { margin-bottom:10px !important; }



.bbd-pro-workspace-v0230-dev48 .bbd-type48-host .bbd-type-composer textarea { min-height:72px !important; }



.bbd-pro-workspace-v0230-dev48 .bbd-type48-host .bbd-search-field { margin-bottom:14px !important; }







@media (max-width:900px) {



  .bbd-type48-grid { grid-template-columns:1fr; }



  .bbd-type48-card { grid-template-rows:104px auto; min-height:142px; }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-type48-card { transition:none !important; }



}







/* Preview fidelity: each card mirrors the editable composition rather than a generic font tile. */



.bbd-type48-card[data-type48-id="type48-opening-shadow"] .bbd-type48-art b { font-family:"Bebas Neue",sans-serif; font-size:25px; }



.bbd-type48-card[data-type48-id="type48-sale-highlight"] .bbd-type48-art b { font-family:Anton,sans-serif; color:#ff4b00; font-size:32px; }



.bbd-type48-card[data-type48-id="type48-script-mix"] .bbd-type48-art b { font-family:Montserrat,sans-serif; font-size:18px; letter-spacing:.02em; }



.bbd-type48-card[data-type48-id="type48-arch-brand"] .bbd-type48-art b { font-family:Manrope,sans-serif; font-size:25px; letter-spacing:.07em; }



.bbd-type48-card[data-type48-id="type48-fair"] .bbd-type48-art b { font-family:"Exo 2",sans-serif; font-size:21px; letter-spacing:.05em; }



.bbd-type48-card[data-type48-id="type48-realestate"] .bbd-type48-art strong { font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.05em; }



.bbd-type48-card[data-type48-id="type48-direction"] .bbd-type48-art b { font-family:Manrope,sans-serif; font-size:26px; letter-spacing:.05em; }



.bbd-type48-card[data-type48-id="type48-menu"] .bbd-type48-art i { font-family:"Playfair Display",serif; color:#92400e; font-size:18px; transform:none; }



.bbd-type48-card[data-type48-id="type48-menu"] .bbd-type48-art b { font-family:"League Spartan",sans-serif; color:#166534; font-size:22px; letter-spacing:.04em; }



.bbd-type48-card[data-type48-id="type48-menu"] .bbd-type48-art span { width:auto; padding:3px 8px; border-radius:999px; background:#166534; color:#fff; }



.bbd-type48-card[data-type48-id="type48-appointment"] .bbd-type48-art b { font-family:Montserrat,sans-serif; font-size:18px; line-height:.88; }



.bbd-type48-card[data-type48-id="type48-premium"] .bbd-type48-art b { font-family:"Cormorant Garamond",serif; font-size:27px; font-weight:700; letter-spacing:.05em; }



.bbd-type48-card[data-type48-id="type48-retro-badge"] .bbd-type48-art { color:#ff5b1f; }



.bbd-type48-card[data-type48-id="type48-social"] .bbd-type48-art b { font-family:Montserrat,sans-serif; color:#7c3aed; font-size:20px; }



.bbd-type48-card[data-type48-id="type48-auto"] .bbd-type48-art b { font-family:Anton,sans-serif; font-size:29px; }



.bbd-type48-card[data-type48-id="type48-auto"] .bbd-type48-art i { font-family:"Exo 2",sans-serif; color:#2563eb; font-size:18px; transform:rotate(-5deg); }



.bbd-type48-card[data-type48-id="type48-minimal"] .bbd-type48-art b { align-self:flex-start; margin-left:17px; font-family:Manrope,sans-serif; font-size:18px; line-height:.86; }



.bbd-type48-card[data-type48-id="type48-minimal"] .bbd-type48-art b:nth-of-type(2) { color:#ff5b1f; }





/* BBD CSS: assets/css/editor-0230-dev49.css */
/* Baskibu Designer 0.23.0-dev49 — Product Preview Fit + Compact Typography */







/* -------------------------------------------------------------------------



   1) Product preview: reserve clean visual zones for chrome and controls.



   ------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__viewport {



  isolation:isolate;



}



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__three-canvas {



  z-index:1 !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__header[data-dev49-layer="header"],



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__header.bbd-preview-pro-chrome {



  z-index:60 !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-mega-scene-bar[data-dev49-layer="scene"] {



  z-index:50 !important;



  top:82px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__three-controls[data-dev49-layer="view"] {



  z-index:50 !important;



  bottom:18px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-preview-drag-hint,



.bbd-pro-workspace-v0230-dev49 .bbd-preview-pro-status { z-index:45 !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-rear-face-badge { z-index:48 !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__viewport.is-three-preview {



  background:



    radial-gradient(circle at 50% 28%,rgba(255,255,255,.58),transparent 36%),



    linear-gradient(180deg,#e9edf0 0%,#e2e7eb 100%) !important;



}







/* Give the floating UI its own quiet glass plane. It must never visually merge



   with the fabric even when the product passes behind it during rotation. */



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__header.bbd-preview-pro-chrome,



.bbd-pro-workspace-v0230-dev49 .bbd-mega-scene-bar,



.bbd-pro-workspace-v0230-dev49 .bbd-product-preview__three-controls {



  backdrop-filter:blur(18px) saturate(1.12) !important;



  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;



}







/* -------------------------------------------------------------------------



   2) Selection measurements: useful, but no longer furniture over artwork.



   Dock to the empty lower-left stage area and show only the useful dimension



   line by default. Detailed X/Y remains available via the native title/inspector.



   ------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev49 .bbd-stage-footer.bbd-dev49-selection-dock {



  left:16px !important;



  right:auto !important;



  bottom:12px !important;



  width:max-content !important;



  max-width:min(460px,calc(100% - 32px)) !important;



  justify-self:start !important;



  gap:5px !important;



  z-index:56 !important;



  pointer-events:none;



}



.bbd-pro-workspace-v0230-dev49 .bbd-stage-footer.bbd-dev49-selection-dock > * {



  pointer-events:auto;



}



.bbd-pro-workspace-v0230-dev49 .bbd-measurement-output {



  min-height:30px !important;



  padding:4px 9px !important;



  gap:5px !important;



  border:1px solid rgba(208,213,221,.86) !important;



  border-radius:10px !important;



  background:rgba(255,255,255,.88) !important;



  box-shadow:0 6px 18px rgba(15,23,42,.07) !important;



  backdrop-filter:blur(12px);



}



.bbd-pro-workspace-v0230-dev49 .bbd-measurement-output .bbd-measure-kind,



.bbd-pro-workspace-v0230-dev49 .bbd-measurement-output .bbd-measure-position {



  display:none !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-measurement-output strong {



  font-size:10px !important;



  font-weight:820 !important;



  color:#344054 !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-measure-crop {



  font-size:8px !important;



  padding:3px 6px !important;



  border-radius:999px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-measure-actions {



  min-height:30px !important;



  padding:3px !important;



  border:1px solid rgba(208,213,221,.82) !important;



  border-radius:10px !important;



  background:rgba(255,255,255,.86) !important;



  box-shadow:0 6px 18px rgba(15,23,42,.06) !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-measure-actions button {



  min-height:24px !important;



  padding:0 7px !important;



  font-size:8.5px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-stage-footer.bbd-dev49-selection-dock .bbd-status {



  display:none !important;



}







/* -------------------------------------------------------------------------



   3) Typography picker: more choices above the fold, Printful-style scan speed.



   ------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev49 .bbd-type49-compact-studio {



  margin-top:0 !important;



  padding-bottom:10px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type49-compact-studio .bbd-type48-head {



  margin:2px 1px 7px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type49-compact-studio .bbd-type48-head strong {



  font-size:12px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type49-compact-studio .bbd-type48-head small {



  display:none !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-cats {



  gap:4px !important;



  padding-bottom:6px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-cats button {



  min-height:26px !important;



  padding:0 8px !important;



  font-size:8.5px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-grid {



  grid-template-columns:repeat(3,minmax(0,1fr)) !important;



  gap:7px !important;



  padding:1px 1px 9px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card {



  min-height:104px !important;



  grid-template-rows:76px 28px !important;



  border-radius:10px !important;



  box-shadow:0 2px 7px rgba(15,23,42,.035) !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card:hover,



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card:focus-visible {



  transform:translateY(-1px) !important;



  box-shadow:0 9px 18px rgba(15,23,42,.09) !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art {



  padding:7px 4px !important;



  gap:1px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art b,



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art strong { font-size:15px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art i { font-size:19px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art em { font-size:9px !important; padding:2px 4px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art small,



.bbd-pro-workspace-v0230-dev49 .bbd-type48-art span { font-size:6.5px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-meta {



  min-height:28px !important;



  padding:5px 6px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-meta strong {



  font-size:7.8px !important;



  line-height:1.1 !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-meta small { display:none !important; }







/* Individual previews keep their character while fitting the compact tiles. */



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-sale-highlight"] .bbd-type48-art b { font-size:22px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-direction"] .bbd-type48-art b { font-size:18px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-opening-shadow"] .bbd-type48-art b { font-size:17px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-premium"] .bbd-type48-art b { font-size:18px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-auto"] .bbd-type48-art b { font-size:19px !important; }



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-retro-badge"] .bbd-type48-art .p48-badge {



  width:52px !important;height:52px !important;font-size:6px !important;



}



.bbd-pro-workspace-v0230-dev49 .bbd-type48-card[data-type48-id="type48-retro-badge"] .bbd-type48-art .p48-badge b { font-size:13px !important; }







@media (max-width:1180px) {



  .bbd-pro-workspace-v0230-dev49 .bbd-type48-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }



}



@media (max-width:760px) {



  .bbd-pro-workspace-v0230-dev49 .bbd-stage-footer.bbd-dev49-selection-dock { display:none !important; }



  .bbd-pro-workspace-v0230-dev49 .bbd-mega-scene-bar { top:70px !important; }



  .bbd-pro-workspace-v0230-dev49 .bbd-type48-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-pro-workspace-v0230-dev49 .bbd-type48-card { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev51.css */
/* Baskibu Designer 0.23.0-dev51 — App Library + Inline Product Options */







/* --------------------------------------------------------------------------



   Stable app shell: panel switching must feel instant, not like page reload.



   -------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev51 .bbd-panel {



  overflow-x:hidden !important;



  transition:none !important;



  overscroll-behavior:contain;



}



.bbd-pro-workspace-v0230-dev51 .bbd-panel-section {



  min-width:0 !important;



  max-width:100% !important;



  overflow-x:hidden !important;



}



.bbd-pro-workspace-v0230-dev51.bbd-v51-panel-switch .bbd-panel,



.bbd-pro-workspace-v0230-dev51.bbd-v51-panel-switch .bbd-panel-section:not([hidden]) {



  animation:none !important;



  transition:none !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-tool,



.bbd-pro-workspace-v0230-dev51 .bbd-sidebar { contain:layout style; }







/* --------------------------------------------------------------------------



   Typography: vertical library, no sideways crawl. Compact Printful-like grid.



   -------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel * { box-sizing:border-box; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-v51-fluid-control,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel textarea,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel input:not([type="checkbox"]):not([type="radio"]),



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel select,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-search-field,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type-composer,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-studio {



  width:100% !important;



  min-width:0 !important;



  max-width:100% !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel textarea { resize:vertical !important; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-cats {



  width:100% !important;



  display:flex !important;



  flex-wrap:wrap !important;



  overflow:visible !important;



  gap:5px !important;



  padding-bottom:8px !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-cats button {



  min-height:26px !important;



  padding:0 8px !important;



  font-size:8.5px !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-grid {



  width:100% !important;



  display:grid !important;



  grid-template-columns:repeat(3,minmax(0,1fr)) !important;



  gap:7px !important;



  overflow:visible !important;



  padding:0 0 12px !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-card {



  width:100% !important;



  min-width:0 !important;



  min-height:102px !important;



  grid-template-rows:76px 26px !important;



  border-radius:11px !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art {



  min-width:0 !important;



  padding:7px 4px !important;



  overflow:hidden !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art b,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art strong { font-size:12px !important; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art i { font-size:15px !important; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art em { font-size:7px !important; padding:2px 3px !important; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art small,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-art span { font-size:5.8px !important; }



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-meta {



  min-width:0 !important; min-height:26px !important; padding:4px 6px !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-meta strong {



  font-size:8px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;



}



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-v47-style-strip,



.bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-v47-copy-categories { max-width:100% !important; }







/* --------------------------------------------------------------------------



   Visual library: curated SVG assets inside Görseller.



   -------------------------------------------------------------------------- */



.bbd-v51-assets {



  margin:14px 0 4px;



  padding:13px 0 0;



  border-top:1px solid #e8edf2;



}



.bbd-v51-assets__head {



  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;



}



.bbd-v51-assets__head strong { display:block; color:#101828; font-size:14px; font-weight:850; letter-spacing:-.025em; }



.bbd-v51-assets__head small { display:block; margin-top:3px; color:#7f8a9d; font-size:9px; line-height:1.3; }



.bbd-v51-assets__head > span { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:#f2f4f7; color:#667085; font-size:8px; font-weight:800; }



.bbd-v51-assets__cats { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }



.bbd-v51-assets__cats button {



  min-height:28px; padding:0 9px; border:1px solid #e0e6ed; border-radius:999px; background:#fff; color:#667085; font-size:8.5px; font-weight:780; cursor:pointer;



}



.bbd-v51-assets__cats button[aria-pressed="true"] { border-color:#ffb293; background:#fff3ee; color:#d9450c; }



.bbd-v51-assets__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-bottom:16px; }



.bbd-v51-asset-card {



  min-width:0; height:106px; display:grid; grid-template-rows:78px 28px; overflow:hidden; padding:0; border:1px solid #e1e6ed; border-radius:12px; background:#fff; color:#344054; cursor:pointer; box-shadow:0 2px 7px rgba(15,23,42,.035); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;



}



.bbd-v51-asset-card:hover,.bbd-v51-asset-card:focus-visible { transform:translateY(-2px); border-color:#ffad8c; box-shadow:0 10px 22px rgba(15,23,42,.09); outline:none; }



.bbd-v51-asset-card.is-loading { opacity:.55; pointer-events:none; }



.bbd-v51-asset-card__art { display:grid; place-items:center; padding:8px; background:#fafbfc; overflow:hidden; }



.bbd-v51-asset-card__art svg { display:block; width:100%; height:100%; max-width:78px; max-height:64px; }



.bbd-v51-asset-card > span:last-child { display:flex; align-items:center; justify-content:center; min-width:0; padding:0 4px; border-top:1px solid #eef1f4; font-size:8px; font-weight:780; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }







/* --------------------------------------------------------------------------



   Product options stay inside the designer. No exit-to-product-page detour.



   -------------------------------------------------------------------------- */



.bbd-v51-inline-config {



  margin:10px 0 2px; padding:10px; border:1px solid #dfe6ed; border-radius:13px; background:#f8fafc;



}



.bbd-v51-inline-config[hidden] { display:none !important; }



.bbd-v51-inline-config__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }



.bbd-v51-inline-config__head strong { display:block; color:#101828; font-size:11px; font-weight:850; }



.bbd-v51-inline-config__head small { display:block; margin-top:2px; color:#7f8a9d; font-size:8px; }



.bbd-v51-inline-config__head button { width:28px; height:28px; border:0; border-radius:9px; background:#fff; color:#667085; font-size:18px; cursor:pointer; }



.bbd-v51-config-group + .bbd-v51-config-group { margin-top:10px; padding-top:9px; border-top:1px solid #e8edf2; }



.bbd-v51-config-group > strong { display:block; margin-bottom:6px; color:#475467; font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }



.bbd-v51-config-group > div { display:flex; flex-wrap:wrap; gap:6px; }



.bbd-v51-config-group button {



  min-height:32px; padding:0 9px; border:1px solid #dce3ea; border-radius:9px; background:#fff; color:#344054; font-size:9px; font-weight:760; cursor:pointer;



}



.bbd-v51-config-group button.is-selected { border-color:#63c7b7; background:#ecfdf7; color:#047857; box-shadow:inset 0 0 0 1px rgba(16,185,129,.08); }



.bbd-v51-config-group button:disabled { opacity:.42; cursor:not-allowed; }



.bbd-v51-config-empty { padding:10px; border-radius:9px; background:#fff; color:#667085; font-size:9px; line-height:1.4; }







/* --------------------------------------------------------------------------



   Template gallery: tidy, vertical, product-first. No sideways card drift.



   -------------------------------------------------------------------------- */



.bbd-v51-template-panel { overflow-x:hidden !important; }



.bbd-v51-template-panel .bbd-template-pro-filters { flex-wrap:wrap !important; overflow:visible !important; }



.bbd-v51-template-panel .bbd-v51-template-grid,



.bbd-v51-template-panel #bbd-template-grid {



  width:100% !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; overflow:visible !important;



}



.bbd-v51-template-panel .bbd-v51-template-card { min-width:0 !important; width:100% !important; margin:0 !important; }



.bbd-v51-template-panel .bbd-template-card__preview { aspect-ratio:3/4.45 !important; min-height:0 !important; }







@media (max-width:1180px) {



  .bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-grid,



  .bbd-v51-assets__grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }



}



@media (max-width:760px) {



  .bbd-pro-workspace-v0230-dev51 .bbd-v51-type-panel .bbd-type48-grid,



  .bbd-v51-assets__grid,



  .bbd-v51-template-panel .bbd-v51-template-grid,



  .bbd-v51-template-panel #bbd-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }



}



@media (prefers-reduced-motion:reduce) {



  .bbd-v51-asset-card { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev52.css */
/* Baskibu Designer 0.23.0-dev52 — Clean Preview + Pro Selection + Inline Product Labels */







/* --------------------------------------------------------------------------



   1) Selection UI: Baskimo-style quiet blue geometry instead of orange blocks.



   -------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev52 .bbd-context-route-toolbar {



  border-color:rgba(170,184,211,.72) !important;



  background:rgba(255,255,255,.94) !important;



  box-shadow:0 10px 28px rgba(24,38,70,.10) !important;



  backdrop-filter:blur(16px) saturate(1.08) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-context-route-toolbar button {



  color:#526079 !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-context-route-toolbar button:hover,



.bbd-pro-workspace-v0230-dev52 .bbd-context-route-toolbar button:focus-visible {



  background:#eef3ff !important;



  color:#4968d8 !important;



}







/* The old bottom selected-object HUD is technically useful but visually noisy.



   Keep its live status node for accessibility while removing all visible chrome. */



.bbd-pro-workspace-v0230-dev52 .bbd-stage-footer,



.bbd-pro-workspace-v0230-dev52 .bbd-stage-footer.bbd-dev49-selection-dock {



  width:1px !important;



  height:1px !important;



  min-width:0 !important;



  min-height:0 !important;



  max-width:1px !important;



  padding:0 !important;



  margin:0 !important;



  border:0 !important;



  background:transparent !important;



  box-shadow:none !important;



  overflow:visible !important;



  pointer-events:none !important;



}



.bbd-pro-workspace-v0230-dev52 #bbd-measurement-output,



.bbd-pro-workspace-v0230-dev52 #bbd-measure-actions { display:none !important; }



.bbd-pro-workspace-v0230-dev52 #bbd-status {



  position:absolute !important;



  width:1px !important;



  height:1px !important;



  padding:0 !important;



  margin:-1px !important;



  overflow:hidden !important;



  clip:rect(0 0 0 0) !important;



  clip-path:inset(50%) !important;



  white-space:nowrap !important;



  border:0 !important;



}







/* --------------------------------------------------------------------------



   2) Product Preview = three clean non-overlapping zones.



      Header / product viewport / controls dock never sit on top of the flag.



   -------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev52.bbd-app.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {



  display:grid !important;



  grid-template-rows:auto minmax(0,1fr) auto !important;



  gap:8px !important;



  position:absolute !important;



  inset:0 !important;



  padding:12px !important;



  overflow:hidden !important;



  background:#edf1f4 !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-product-preview__header.bbd-preview-pro-chrome {



  position:relative !important;



  inset:auto !important;



  top:auto !important;



  left:auto !important;



  right:auto !important;



  bottom:auto !important;



  z-index:5 !important;



  grid-row:1 !important;



  min-height:50px !important;



  width:100% !important;



  padding:7px 9px 7px 11px !important;



  margin:0 !important;



  border:1px solid rgba(170,182,197,.34) !important;



  border-radius:13px !important;



  background:rgba(255,255,255,.96) !important;



  box-shadow:0 6px 18px rgba(20,31,49,.06) !important;



  backdrop-filter:blur(14px) saturate(1.08) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-product-preview__viewport,



.bbd-pro-workspace-v0230-dev52.bbd-app.is-preview-mode .bbd-v52-preview-layout .bbd-product-preview__viewport {



  position:relative !important;



  inset:auto !important;



  grid-row:2 !important;



  width:100% !important;



  height:100% !important;



  min-width:0 !important;



  min-height:0 !important;



  margin:0 !important;



  border-radius:16px !important;



  overflow:hidden !important;



  background:



    radial-gradient(circle at 50% 30%,rgba(255,255,255,.62),transparent 34%),



    linear-gradient(180deg,#e8ecef 0%,#dfe5e9 100%) !important;



  box-shadow:inset 0 0 0 1px rgba(154,166,181,.22),0 14px 38px rgba(20,31,49,.06) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-product-preview__three-canvas,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout #bbd-product-preview-canvas {



  position:absolute !important;



  inset:0 !important;



  width:100% !important;



  height:100% !important;



  max-width:none !important;



  display:block !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock {



  grid-row:3 !important;



  min-width:0;



  min-height:46px;



  display:flex;



  align-items:center;



  justify-content:center;



  gap:8px;



  padding:4px;



  overflow-x:auto;



  scrollbar-width:none;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock::-webkit-scrollbar { display:none; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-mega-scene-bar,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-product-preview__three-controls {



  position:static !important;



  inset:auto !important;



  top:auto !important;



  left:auto !important;



  right:auto !important;



  bottom:auto !important;



  transform:none !important;



  z-index:auto !important;



  width:auto !important;



  min-width:0 !important;



  min-height:40px !important;



  margin:0 !important;



  padding:4px !important;



  border:1px solid rgba(170,182,197,.38) !important;



  border-radius:12px !important;



  background:rgba(255,255,255,.94) !important;



  box-shadow:0 5px 16px rgba(20,31,49,.07) !important;



  backdrop-filter:blur(14px) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-mega-scene-bar > span,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-preview-control-caption { display:none !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-mega-scene-bar > div,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-preview-view-actions { display:flex !important; align-items:center !important; gap:2px !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button {



  width:36px !important;



  min-width:36px !important;



  height:34px !important;



  min-height:34px !important;



  padding:0 !important;



  display:grid !important;



  place-items:center !important;



  border:0 !important;



  border-radius:8px !important;



  background:transparent !important;



  color:#5d697c !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button span { display:none !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button:hover,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button:focus-visible { background:#f1f4f8 !important; color:#3d5ec8 !important; outline:none !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button.is-active,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button[aria-pressed="true"] { background:#edf3ff !important; color:#3157c8 !important; box-shadow:inset 0 0 0 1px #cbd8ff !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-preview-drag-hint,



.bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-preview-pro-status { display:none !important; }







/* --------------------------------------------------------------------------



   3) Inline product configurator: human labels + calm compact application UI.



   -------------------------------------------------------------------------- */



.bbd-pro-workspace-v0230-dev52 .bbd-v51-inline-config {



  padding:12px !important;



  background:#fbfcfd !important;



  border-color:#dde5ec !important;



  box-shadow:0 8px 24px rgba(20,31,49,.035) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v51-config-group > strong {



  margin-bottom:7px !important;



  color:#667085 !important;



  font-size:9px !important;



  letter-spacing:.055em !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v51-config-group button {



  min-height:36px !important;



  padding:0 11px !important;



  border-radius:10px !important;



  font-size:11px !important;



  font-weight:780 !important;



  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v51-config-group button.is-selected {



  border-color:#42bfa9 !important;



  background:#ecfdf8 !important;



  color:#06765f !important;



  box-shadow:inset 0 0 0 1px rgba(16,185,129,.08),0 3px 9px rgba(16,185,129,.07) !important;



}



.bbd-pro-workspace-v0230-dev52 .bbd-v51-config-group button.is-pending { opacity:.58 !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-v52-base-group { margin-top:10px !important; padding-top:9px !important; border-top:1px solid #e8edf2 !important; }



.bbd-pro-workspace-v0230-dev52 .bbd-commerce-summary__chips span { text-transform:none !important; }







/* --------------------------------------------------------------------------



   4) Mobile: viewport truly owns the screen. No left-sliver preview.



   -------------------------------------------------------------------------- */



@media (max-width:760px) {



  .bbd-pro-workspace-v0230-dev52.bbd-app.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {



    padding:7px !important;



    gap:6px !important;



    grid-template-rows:auto minmax(0,1fr) auto !important;



  }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-product-preview__header.bbd-preview-pro-chrome {



    min-height:44px !important;



    padding:6px 7px !important;



  }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-preview-pro-identity > span,



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-preview-pro-live { display:none !important; }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-preview-pro-identity h2 { font-size:12px !important; }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-layout .bbd-product-preview__viewport {



    width:100% !important;



    min-width:100% !important;



    max-width:100% !important;



    min-height:260px !important;



    border-radius:13px !important;



  }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock {



    justify-content:flex-start !important;



    width:100% !important;



    min-height:42px !important;



    padding:2px 0 !important;



  }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-mega-scene-bar,



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock .bbd-product-preview__three-controls {



    flex:0 0 auto !important;



    min-height:38px !important;



  }



  .bbd-pro-workspace-v0230-dev52 .bbd-v52-preview-dock button {



    width:34px !important; min-width:34px !important; height:32px !important; min-height:32px !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-pro-workspace-v0230-dev52 .bbd-v51-config-group button { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev53.css */
/* Baskibu Designer 0.23.0-dev53 — stable inline product options + precision ruler final */







/* --------------------------------------------------------------------------



   1. ONE ruler system only. The old rotating cm text ruler is permanently gone.



   -------------------------------------------------------------------------- */



.bbd-app #bbd-ruler-h,



.bbd-app #bbd-ruler-v,



.bbd-app .bbd-dimension-overlay,



.bbd-app [data-bbd-dimension-overlay] {



  display:none !important;



  visibility:hidden !important;



  pointer-events:none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-rulers,



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-rulers {



  z-index:16 !important;



  opacity:.92;



  filter:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler-unit {



  left:calc(var(--bbd-ruler-left) - 27px) !important;



  top:calc(var(--bbd-ruler-top) - 27px) !important;



  width:22px !important;



  height:22px !important;



  border:1px solid rgba(148,163,184,.25) !important;



  border-radius:7px !important;



  background:rgba(255,255,255,.88) !important;



  color:#667085 !important;



  font-size:7.5px !important;



  font-weight:850 !important;



  letter-spacing:.02em !important;



  box-shadow:0 3px 12px rgba(15,23,42,.045) !important;



  backdrop-filter:blur(10px) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler {



  color:#667085 !important;



  font-size:8px !important;



  font-weight:720 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal {



  top:calc(var(--bbd-ruler-top) - 22px) !important;



  height:17px !important;



  border-bottom:1px solid rgba(100,116,139,.20) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical {



  left:calc(var(--bbd-ruler-left) - 22px) !important;



  width:17px !important;



  border-right:1px solid rgba(100,116,139,.20) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler i {



  background:rgba(100,116,139,.30) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i.is-minor { height:3px !important; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i.is-major { height:7px !important; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i.is-minor { width:3px !important; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i.is-major { width:7px !important; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-horizontal i span {



  bottom:8px !important;



  color:#667085 !important;



  font-size:7.5px !important;



  text-shadow:0 1px 0 rgba(255,255,255,.9);



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-ruler.is-vertical i span {



  right:8px !important;



  color:#667085 !important;



  font-size:7.5px !important;



  text-shadow:0 1px 0 rgba(255,255,255,.9);



}







/* Keep the canvas breathing room symmetrical; ruler is now attached to artboard, not page edge. */



.bbd-app.bbd-pro-workspace-v0230-dev53:not(.is-preview-mode) .bbd-canvas-shell {



  padding-inline:30px !important;



  box-sizing:border-box !important;



}







/* --------------------------------------------------------------------------



   2. Stable inline product configurator — no leaving the editor, no page collapse.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev53 [data-v51-inline-config] {



  display:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options {



  margin:10px 0 2px;



  padding:12px;



  border:1px solid #dfe6ed;



  border-radius:14px;



  background:linear-gradient(180deg,#ffffff 0%,#fafcfd 100%);



  box-shadow:0 9px 26px rgba(15,23,42,.045);



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options[hidden] { display:none !important; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head {



  display:flex;



  align-items:flex-start;



  justify-content:space-between;



  gap:10px;



  padding-bottom:10px;



  margin-bottom:10px;



  border-bottom:1px solid #edf1f5;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head strong {



  display:block;



  color:#172033;



  font-size:12px;



  font-weight:850;



  line-height:1.2;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__head small {



  display:block;



  margin-top:3px;



  color:#8a96a8;



  font-size:9px;



  font-weight:650;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__close {



  width:30px;



  min-width:30px;



  height:30px;



  padding:0;



  display:grid;



  place-items:center;



  border:0;



  border-radius:9px;



  background:#f4f6f8;



  color:#657184;



  font-size:17px;



  line-height:1;



  cursor:pointer;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__close:hover { background:#eef1f5; color:#111827; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__body {



  display:grid;



  gap:11px;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group + .bbd-v53-option-group {



  padding-top:10px;



  border-top:1px solid #edf1f5;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group > strong {



  display:block;



  margin:0 0 7px;



  color:#667085;



  font-size:8.5px;



  font-weight:900;



  line-height:1;



  letter-spacing:.065em;



  text-transform:uppercase;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group > div {



  display:flex;



  flex-wrap:wrap;



  gap:6px;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button {



  min-height:34px;



  padding:0 11px;



  border:1px solid #dce3ea;



  border-radius:10px;



  background:#fff;



  color:#435066;



  font-size:10.5px;



  font-weight:780;



  line-height:1;



  white-space:nowrap;



  cursor:pointer;



  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,transform .12s ease;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button:hover:not(:disabled) {



  border-color:#b8c5d2;



  transform:translateY(-1px);



  box-shadow:0 4px 10px rgba(15,23,42,.045);



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button.is-selected {



  border-color:#43bea8;



  background:#ecfcf7;



  color:#08745f;



  box-shadow:inset 0 0 0 1px rgba(16,185,129,.06);



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button.is-pending {



  opacity:.58;



  pointer-events:none;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button:disabled {



  opacity:.42;



  cursor:not-allowed;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty {



  display:grid;



  gap:4px;



  padding:10px;



  border-radius:10px;



  background:#f7f9fb;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty strong { color:#344054; font-size:10px; }



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-options__empty span { color:#8b96a7; font-size:9px; line-height:1.4; }







/* Commerce card should feel like one app surface, not nested boxes. */



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-commerce-summary {



  border-color:#dce4eb !important;



  box-shadow:0 10px 30px rgba(15,23,42,.04) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-commerce-summary__actions .is-secondary {



  position:relative;



  z-index:2;



}







/* --------------------------------------------------------------------------



   3. Compact top HUD. Precision controls stay useful without owning the canvas.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta.bbd-canvas-hud--top {



  top:10px !important;



  left:18px !important;



  right:auto !important;



  width:auto !important;



  max-width:min(460px,calc(100% - 36px)) !important;



  justify-content:flex-start !important;



  flex-wrap:wrap !important;



  gap:6px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta > *,



.bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta .bbd-hud-chip {



  max-width:none !important;



  min-height:30px !important;



  padding:5px 9px !important;



  border-color:rgba(148,163,184,.24) !important;



  background:rgba(255,255,255,.90) !important;



  box-shadow:0 5px 16px rgba(15,23,42,.04) !important;



  backdrop-filter:blur(12px) !important;



}







@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-clean-rulers,



  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-rulers {



    display:none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev53:not(.is-preview-mode) .bbd-canvas-shell {



    padding-inline:8px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-stage-meta.bbd-canvas-hud--top {



    left:8px !important;



    top:8px !important;



    max-width:calc(100% - 16px) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button {



    min-height:38px;



    padding-inline:12px;



    font-size:11px;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev53 .bbd-v53-option-group button { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev54.css */
/* Baskibu Designer 0.23.0-dev54 — preview-first viewport + true mobile centering + quiet selection */







/* --------------------------------------------------------------------------



   1) Product-first information hierarchy.



   The product is the hero; repeated technical HUD copy is not.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta.bbd-canvas-hud--top {



  pointer-events:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta #bbd-surface-label,



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta .bbd-guide-legend {



  display:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta #bbd-size-label {



  pointer-events:auto !important;



  min-height:26px !important;



  padding:4px 8px !important;



  border:1px solid rgba(148,163,184,.20) !important;



  border-radius:9px !important;



  background:rgba(255,255,255,.84) !important;



  color:#667085 !important;



  font-size:9px !important;



  font-weight:760 !important;



  box-shadow:0 4px 12px rgba(15,23,42,.035) !important;



  backdrop-filter:blur(10px) !important;



}







/* Quality guidance should read as information, not a permanent orange error. */



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner {



  top:14px !important;



  right:14px !important;



  left:auto !important;



  width:min(420px,calc(100% - 28px)) !important;



  max-width:420px !important;



  padding:8px 9px !important;



  transform:none !important;



  grid-template-columns:auto minmax(0,1fr) auto auto auto !important;



  gap:7px !important;



  border-color:#dbe3ea !important;



  border-radius:12px !important;



  background:rgba(255,255,255,.97) !important;



  color:#5d6979 !important;



  box-shadow:0 10px 28px rgba(15,23,42,.09) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__icon {



  width:28px !important;



  height:28px !important;



  background:#eef2f6 !important;



  color:#667085 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy strong {



  color:#344054 !important;



  font-size:10.5px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy span {



  color:#7b8798 !important;



  font-size:9px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner[data-level="error"] {



  border-color:#efc4c0 !important;



  background:rgba(255,248,247,.98) !important;



  color:#8f2d25 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner[data-level="error"] .bbd-quality-banner__icon {



  background:#fee4e2 !important;



  color:#b42318 !important;



}







/* --------------------------------------------------------------------------



   2) Exactly one ruler owner.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev54 #bbd-ruler-h,



.bbd-app.bbd-pro-workspace-v0230-dev54 #bbd-ruler-v,



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-dimension-overlay,



.bbd-app.bbd-pro-workspace-v0230-dev54 [data-bbd-dimension-overlay],



.bbd-app.bbd-pro-workspace-v0230-dev54 [data-bbd-clean-rulers]:not(.bbd-v54-ruler-owner) {



  display:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v54-ruler-owner {



  pointer-events:none !important;



}







/* --------------------------------------------------------------------------



   3) Preview is a distinct presentation state.



   No edit panels, rulers, guides or object chrome may cover the product.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-sidebar,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-panel,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-meta,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-quality-summary,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-context-route-toolbar,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-object-popover,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-context-more-menu,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-clean-rulers,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v53-rulers,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-warning-layer,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-snap-line,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-canvas-empty,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-footer {



  display:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-workspace {



  grid-template-columns:minmax(0,1fr) !important;



  grid-template-rows:minmax(0,1fr) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-area {



  grid-column:1 !important;



  grid-row:1 !important;



  width:100% !important;



  min-width:0 !important;



  min-height:0 !important;



  padding:0 !important;



  grid-template-rows:minmax(0,1fr) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {



  inset:0 !important;



  width:100% !important;



  height:100% !important;



  padding:10px !important;



  gap:7px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__viewport {



  width:100% !important;



  height:100% !important;



  min-width:0 !important;



  min-height:0 !important;



  margin:0 auto !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__three-canvas,



.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode #bbd-product-preview-canvas {



  width:100% !important;



  height:100% !important;



  margin:0 auto !important;



}







/* --------------------------------------------------------------------------



   4) Quiet object selection.



   Dev54 JS also replaces the legacy orange hover rectangle.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar {



  border-color:rgba(148,163,184,.42) !important;



  background:rgba(255,255,255,.95) !important;



  box-shadow:0 9px 24px rgba(15,23,42,.09) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar button.is-active {



  background:#f1f5f9 !important;



  color:#475569 !important;



  box-shadow:inset 0 0 0 1px #d7e0e8 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar .bbd-context-label {



  display:none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar .bbd-context-label-short {



  display:inline !important;



}







/* --------------------------------------------------------------------------



   5) True mobile workspace.



   The old 56px left rail permanently stole canvas width. On <=760 it becomes



   a bottom app bar so the artboard/preview can use the full viewport width.



   -------------------------------------------------------------------------- */



@media (max-width:760px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-workspace {



    grid-template-columns:minmax(0,1fr) !important;



    grid-template-rows:minmax(0,1fr) !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar {



    position:absolute !important;



    z-index:120 !important;



    left:0 !important;



    right:0 !important;



    bottom:0 !important;



    top:auto !important;



    width:100% !important;



    height:64px !important;



    min-height:64px !important;



    display:flex !important;



    flex-direction:row !important;



    align-items:center !important;



    gap:2px !important;



    padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;



    overflow-x:auto !important;



    overflow-y:hidden !important;



    border:0 !important;



    border-top:1px solid rgba(15,23,42,.10) !important;



    background:rgba(255,255,255,.97) !important;



    box-shadow:0 -8px 24px rgba(15,23,42,.08) !important;



    backdrop-filter:blur(16px) !important;



    scrollbar-width:none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar::-webkit-scrollbar {



    display:none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar-active-indicator {



    display:none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool {



    flex:1 0 55px !important;



    width:auto !important;



    min-width:55px !important;



    min-height:52px !important;



    height:52px !important;



    padding:4px 5px !important;



    gap:3px !important;



    border-radius:10px !important;



    background:transparent !important;



    color:#667085 !important;



    font-size:8px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool svg {



    width:19px !important;



    height:19px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool.is-active {



    background:#f2f5f8 !important;



    color:#344054 !important;



    box-shadow:inset 0 0 0 1px #dce3ea !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-area {



    grid-column:1 !important;



    grid-row:1 !important;



    width:100% !important;



    min-width:0 !important;



    padding-bottom:64px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-canvas-shell {



    width:100% !important;



    min-width:0 !important;



    padding:8px 8px 10px !important;



    overflow:hidden !important;



    justify-content:center !important;



    align-items:center !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-panel {



    z-index:115 !important;



    left:0 !important;



    right:0 !important;



    bottom:64px !important;



    width:100% !important;



    max-width:none !important;



    max-height:min(46vh,360px) !important;



    padding:10px 12px 12px !important;



    border-right:0 !important;



    border-top:1px solid #dfe5eb !important;



    border-radius:16px 16px 0 0 !important;



    background:#fff !important;



    box-shadow:0 -14px 34px rgba(15,23,42,.13) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta {



    display:none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-clean-rulers,



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-rulers {



    display:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner {



    top:auto !important;



    right:9px !important;



    bottom:74px !important;



    left:9px !important;



    width:auto !important;



    max-width:none !important;



    padding:7px 8px !important;



    grid-template-columns:auto minmax(0,1fr) auto !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy span,



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__toggle,



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__detail {



    display:none !important;



  }











  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-sidebar,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-panel {



    display:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-area {



    padding-bottom:0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {



    padding:6px !important;



    gap:5px !important;



    grid-template-rows:auto minmax(0,1fr) auto !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__header.bbd-preview-pro-chrome {



    min-height:42px !important;



    padding:5px 7px 5px 9px !important;



    border-radius:11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock {



    min-height:40px !important;



    padding:1px !important;



    gap:4px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock .bbd-mega-scene-bar,



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock .bbd-product-preview__three-controls {



    min-height:38px !important;



    padding:2px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock button {



    width:34px !important;



    min-width:34px !important;



    height:32px !important;



    min-height:32px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-quality-banner {



    display:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-options {



    max-height:32vh !important;



    overflow:auto !important;



    overscroll-behavior:contain !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-option-group > div {



    gap:5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-option-group button {



    min-height:36px !important;



    font-size:10.5px !important;



  }



}







/* Tablet drawer: stage remains full-size behind the drawer; preview gets all space. */



@media (min-width:761px) and (max-width:1024px) {



  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {



    padding:8px !important;



  }



}







/* Desktop: keep the clean ruler close to the artboard but do not over-pad canvas. */



@media (min-width:1025px) {



  .bbd-app.bbd-pro-workspace-v0230-dev54:not(.is-preview-mode) .bbd-canvas-shell {



    padding-inline:24px !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev54 *,



  .bbd-app.bbd-pro-workspace-v0230-dev54 *::before,



  .bbd-app.bbd-pro-workspace-v0230-dev54 *::after {



    scroll-behavior:auto !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev55.css */
/* Baskibu Designer 0.23.0-dev55 — calm header + collapsible utility drawer + reliable mobile app bar */







.bbd-app.bbd-pro-workspace-v0230-dev55 {



  --bbd-v55-drawer-width: 286px;



  --bbd-v55-mobile-nav-height: 68px;



}







/* --------------------------------------------------------------------------



   1) Header is navigation, not a dashboard.



   Persistent: brand / Design–Preview / Tools / More / Save.



   Secondary canvas controls live in the right utility drawer.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar {



  min-height: 62px !important;



  padding: 7px 14px !important;



  background: rgba(255,255,255,.985) !important;



  border-bottom: 1px solid #e7ebef !important;



  box-shadow: 0 1px 0 rgba(15,23,42,.025) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar__actions {



  min-width: 0 !important;



  gap: 10px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar__center {



  justify-self: center !important;



  min-width: 0 !important;



  padding: 0 !important;



  border: 0 !important;



  background: transparent !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar__center > :not(.bbd-workspace-mode-tabs) {



  display: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-workspace-mode-tabs {



  min-height: 40px !important;



  padding: 3px !important;



  border: 1px solid #dfe4ea !important;



  border-radius: 12px !important;



  background: #f4f6f8 !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-workspace-mode-tabs button {



  min-height: 34px !important;



  padding: 6px 14px !important;



  border-radius: 9px !important;



  font-size: 11px !important;



  font-weight: 800 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar__right {



  gap: 7px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-save-state {



  max-width: 118px !important;



  min-height: 34px !important;



  padding: 0 9px !important;



  border-radius: 9px !important;



  white-space: nowrap !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 #bbd-save-state-text {



  overflow: hidden !important;



  font-size: 9px !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle {



  min-height: 38px !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 6px !important;



  padding: 0 10px !important;



  border: 1px solid #dfe4ea !important;



  border-radius: 10px !important;



  background: #fff !important;



  color: #475467 !important;



  font-size: 10px !important;



  font-weight: 800 !important;



  box-shadow: 0 2px 5px rgba(15,23,42,.025) !important;



  cursor: pointer !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle:hover,



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle[aria-expanded="true"] {



  border-color: #cdd5df !important;



  background: #f8fafc !important;



  color: #1f2937 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle svg {



  width: 17px !important;



  height: 17px !important;



}







/* The old stage HUD is no longer a permanent second header. Its live controls



   are moved by dev55 JS into the utility drawer. */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-stage-meta {



  display: none !important;



}







/* --------------------------------------------------------------------------



   2) Right utility drawer: overlay, never steals canvas width.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer {



  position: absolute !important;



  z-index: 9100 !important;



  top: 72px !important;



  right: 12px !important;



  width: min(var(--bbd-v55-drawer-width), calc(100% - 24px)) !important;



  max-height: calc(100% - 88px) !important;



  display: flex !important;



  flex-direction: column !important;



  overflow: hidden !important;



  border: 1px solid #dfe5eb !important;



  border-radius: 16px !important;



  background: rgba(255,255,255,.985) !important;



  box-shadow: 0 22px 58px rgba(15,23,42,.18) !important;



  backdrop-filter: blur(18px) saturate(1.08) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer[hidden] {



  display: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-head {



  min-height: 52px !important;



  display: flex !important;



  align-items: center !important;



  justify-content: space-between !important;



  gap: 10px !important;



  padding: 9px 10px 9px 14px !important;



  border-bottom: 1px solid #edf0f3 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-head > span {



  min-width: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-head strong {



  display: block !important;



  color: #101828 !important;



  font-size: 12px !important;



  font-weight: 850 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-head small {



  display: block !important;



  margin-top: 2px !important;



  color: #98a2b3 !important;



  font-size: 8.5px !important;



  font-weight: 650 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-close {



  width: 34px !important;



  min-width: 34px !important;



  height: 34px !important;



  display: grid !important;



  place-items: center !important;



  border: 0 !important;



  border-radius: 9px !important;



  background: #f4f6f8 !important;



  color: #667085 !important;



  cursor: pointer !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-body {



  min-height: 0 !important;



  overflow: auto !important;



  padding: 10px !important;



  overscroll-behavior: contain !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-section {



  display: grid !important;



  gap: 7px !important;



  padding: 10px !important;



  border: 1px solid #edf0f3 !important;



  border-radius: 13px !important;



  background: #fafbfc !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-section + .bbd-v55-utility-section {



  margin-top: 8px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-label {



  color: #98a2b3 !important;



  font-size: 8px !important;



  font-weight: 850 !important;



  letter-spacing: .06em !important;



  text-transform: uppercase !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-history-row,



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-view-row,



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-size-row {



  display: flex !important;



  align-items: center !important;



  gap: 6px !important;



  min-width: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-history-row > button {



  flex: 1 1 0 !important;



  min-height: 38px !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  border: 1px solid #e0e5eb !important;



  border-radius: 10px !important;



  background: #fff !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-view-row .bbd-zoom-controls {



  width: 100% !important;



  min-height: 40px !important;



  display: grid !important;



  grid-template-columns: 38px minmax(48px,1fr) 38px 38px !important;



  gap: 4px !important;



  padding: 3px !important;



  border: 1px solid #e0e5eb !important;



  border-radius: 11px !important;



  background: #fff !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-view-row .bbd-zoom-controls > * {



  min-width: 0 !important;



  min-height: 34px !important;



  display: grid !important;



  place-items: center !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-size-row #bbd-size-label {



  width: 100% !important;



  min-height: 38px !important;



  display: flex !important;



  align-items: center !important;



  padding: 0 10px !important;



  border: 1px solid #e0e5eb !important;



  border-radius: 10px !important;



  background: #fff !important;



  color: #475467 !important;



  font-size: 10px !important;



  font-weight: 800 !important;



  box-shadow: none !important;



}







/* Reflow the legacy live HUD instruments inside a deliberate drawer. */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-dev21-hud-tools {



  width: 100% !important;



  display: grid !important;



  grid-template-columns: 1fr !important;



  gap: 6px !important;



  margin: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-dev21-hud-tools > button,



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-dev21-preflight {



  width: 100% !important;



  min-height: 38px !important;



  justify-content: flex-start !important;



  margin: 0 !important;



  padding: 0 10px !important;



  border-radius: 10px !important;



  background: #fff !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-dev21-preflight {



  cursor: pointer !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-dev21-preflight small {



  display: inline !important;



  margin-left: auto !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-mega-actions {



  width: 100% !important;



  display: grid !important;



  grid-template-columns: repeat(4,minmax(0,1fr)) !important;



  gap: 5px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-mega-actions > button {



  width: 100% !important;



  min-width: 0 !important;



  min-height: 38px !important;



  padding: 0 5px !important;



  border-radius: 10px !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-mega-actions > button strong {



  display: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-mega-score {



  min-width: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-background-micro-v45 {



  width: 100% !important;



  margin: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-background-micro-v45__trigger {



  width: 100% !important;



  min-height: 38px !important;



  justify-content: flex-start !important;



  padding: 0 10px !important;



  border-radius: 10px !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-background-micro-v45__trigger > span:last-child {



  display: inline !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-background-micro-v45__popover {



  left: auto !important;



  right: 0 !important;



  width: 246px !important;



}







/* The legacy one-click guide icon is redundant; the richer guide control moved



   into the drawer and remains the single visible guide entry point. */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer #bbd-toggle-guides {



  display: none !important;



}







/* --------------------------------------------------------------------------



   3) The product keeps visual priority. No permanent second toolbar row.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev55:not(.is-preview-mode) .bbd-stage-area {



  grid-template-rows: minmax(0,1fr) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55:not(.is-preview-mode) .bbd-canvas-shell {



  padding-top: 14px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-quality-banner:not([data-level="error"]):not([data-level="warning"]) {



  display: none !important;



}







/* --------------------------------------------------------------------------



   4) Mobile: deterministic six-item app bar. Old compact-navigation code can no



   longer re-hide Katmanlar/Tasarımlar after a resize.



   -------------------------------------------------------------------------- */



@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev55 {



    --bbd-v55-mobile-nav-height: 68px;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle,



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer {



    display: none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar {



    min-height: 58px !important;



    padding: 6px 8px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-topbar__actions {



    gap: 4px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-workspace-mode-tabs {



    min-height: 40px !important;



    max-width: 218px !important;



    padding: 2px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-workspace-mode-tabs button {



    min-height: 35px !important;



    padding: 5px 8px !important;



    font-size: 9.5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-save-state {



    display: none !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55.is-panel-collapsed .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55.is-inspector-collapsed .bbd-workspace {



    grid-template-columns: minmax(0,1fr) !important;



    grid-template-rows: minmax(0,1fr) !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar.bbd-app-rail-v45,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar {



    position: absolute !important;



    z-index: 9300 !important;



    top: auto !important;



    right: 0 !important;



    bottom: 0 !important;



    left: 0 !important;



    width: 100% !important;



    max-width: none !important;



    height: var(--bbd-v55-mobile-nav-height) !important;



    min-height: var(--bbd-v55-mobile-nav-height) !important;



    display: grid !important;



    grid-template-columns: repeat(6,minmax(0,1fr)) !important;



    grid-auto-flow: column !important;



    align-items: stretch !important;



    gap: 0 !important;



    padding: 4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)) !important;



    overflow: visible !important;



    border: 0 !important;



    border-top: 1px solid #dfe5eb !important;



    border-radius: 0 !important;



    background: rgba(255,255,255,.985) !important;



    box-shadow: 0 -10px 26px rgba(15,23,42,.10) !important;



    backdrop-filter: blur(18px) saturate(1.08) !important;



    contain: none !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-sidebar-active-indicator,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-menu-rail-divider,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar [data-bbd-menu-command] {



    display: none !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool.bbd-app-tool-v45,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-panel="mobile-more"],



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-bbd-v55-mobile-primary="1"] {



    position: relative !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: none !important;



    height: 58px !important;



    min-height: 58px !important;



    margin: 0 !important;



    padding: 5px 2px 4px !important;



    display: flex !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 3px !important;



    overflow: hidden !important;



    border: 0 !important;



    border-radius: 10px !important;



    background: transparent !important;



    color: #667085 !important;



    box-shadow: none !important;



    transform: none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-bbd-v55-mobile-primary="1"] svg,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-panel="mobile-more"] svg {



    width: 19px !important;



    height: 19px !important;



    flex: 0 0 19px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-bbd-v55-mobile-primary="1"] span,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool[data-panel="mobile-more"] span {



    display: block !important;



    width: 100% !important;



    max-width: none !important;



    overflow: hidden !important;



    color: inherit !important;



    font-size: 7.8px !important;



    font-weight: 760 !important;



    line-height: 1.05 !important;



    text-align: center !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool.is-active {



    border: 0 !important;



    background: #fff1eb !important;



    color: #e54b14 !important;



    box-shadow: none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-sidebar .bbd-tool.is-active::before {



    content: '' !important;



    position: absolute !important;



    top: 1px !important;



    left: 50% !important;



    width: 18px !important;



    height: 2px !important;



    border-radius: 999px !important;



    background: #ff5b1f !important;



    transform: translateX(-50%) !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-stage-area {



    width: 100% !important;



    min-width: 0 !important;



    padding-bottom: var(--bbd-v55-mobile-nav-height) !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-panel {



    bottom: var(--bbd-v55-mobile-nav-height) !important;



    max-height: min(52vh,430px) !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55.is-preview-mode .bbd-stage-area {



    padding-bottom: 0 !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev55.is-preview-mode .bbd-sidebar {



    display: none !important;



  }



}







@media (min-width:761px) and (max-width:1120px) {



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle span {



    display: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle {



    width: 38px !important;



    min-width: 38px !important;



    padding: 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-save-state {



    display: none !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-tools-toggle,



  .bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer {



    transition: none !important;



  }



}







/* Shell v0161 placed canvas in grid row 2 because row 1 used to be the HUD.



   With the HUD gone the canvas must own the first/only row; otherwise CSS grid



   creates an implicit empty row and recreates the very gap dev55 removes. */



.bbd-app.bbd-pro-workspace-v0230-dev55:not(.is-preview-mode) .bbd-canvas-shell {



  grid-column: 1 !important;



  grid-row: 1 !important;



}







/* Mega popovers opened from controls inside the drawer must sit above the



   drawer rather than behind it. */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-mega-popover {



  z-index: 9450 !important;



}







/* Background palette expands inside the drawer; no clipped flyout. */



.bbd-app.bbd-pro-workspace-v0230-dev55 .bbd-v55-utility-drawer .bbd-background-micro-v45__popover {



  position: relative !important;



  top: auto !important;



  right: auto !important;



  left: auto !important;



  width: 100% !important;



  margin-top: 7px !important;



  box-shadow: none !important;



}





/* BBD CSS: assets/css/editor-0230-dev56.css */
/* Baskibu Designer 0.23.0-dev56 — discoverable background + relaxed contextual toolbar */







/* --------------------------------------------------------------------------



   1) Background is a frequent design action. Keep it one click from canvas.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-quick-dock {



  position:absolute !important;



  z-index:226 !important;



  right:18px !important;



  bottom:18px !important;



  display:flex !important;



  align-items:center !important;



  gap:8px !important;



  pointer-events:none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-quick-dock > * {



  pointer-events:auto !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick {



  margin:0 !important;



  order:0 !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__trigger {



  min-height:40px !important;



  padding:0 13px 0 8px !important;



  gap:8px !important;



  border:1px solid rgba(148,163,184,.42) !important;



  border-radius:13px !important;



  background:rgba(255,255,255,.975) !important;



  color:#334155 !important;



  font-size:11px !important;



  font-weight:760 !important;



  box-shadow:0 10px 28px rgba(15,23,42,.11),0 2px 6px rgba(15,23,42,.04) !important;



  backdrop-filter:blur(14px) !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__swatch {



  width:20px !important;



  height:20px !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__trigger > span:last-child {



  display:inline !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__popover {



  left:auto !important;



  right:0 !important;



  top:auto !important;



  bottom:calc(100% + 9px) !important;



  width:268px !important;



  z-index:8400 !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 [data-bbd-v55-background][hidden] {



  display:none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56.is-preview-mode .bbd-v56-quick-dock {



  display:none !important;



}







/* --------------------------------------------------------------------------



   2) Selected-object toolbar: four calm, readable primary actions.



   Secondary controls are available from Daha.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar {



  min-height:48px !important;



  gap:5px !important;



  padding:5px !important;



  border-radius:15px !important;



  overflow:visible !important;



  max-width:calc(100% - 24px) !important;



  background:rgba(255,255,255,.975) !important;



  border:1px solid rgba(148,163,184,.38) !important;



  box-shadow:0 14px 36px rgba(15,23,42,.12),0 2px 7px rgba(15,23,42,.04) !important;



  backdrop-filter:blur(16px) saturate(1.08) !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar button {



  min-width:74px !important;



  min-height:38px !important;



  height:38px !important;



  padding:0 10px !important;



  gap:7px !important;



  display:inline-flex !important;



  align-items:center !important;



  justify-content:center !important;



  flex:0 0 auto !important;



  border-radius:10px !important;



  font-size:10.5px !important;



  font-weight:720 !important;



  line-height:1 !important;



  letter-spacing:0 !important;



  white-space:nowrap !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar .bbd-context-icon {



  width:16px !important;



  height:16px !important;



  flex:0 0 16px !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar .bbd-context-label {



  display:none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar .bbd-context-label-short {



  display:inline !important;



  overflow:visible !important;



  text-overflow:clip !important;



  max-width:none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar [data-bbd-context-action="more"] {



  min-width:56px !important;



  padding-inline:9px !important;



}







/* More menu is no longer a cramped utility list. */



.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-object-popover.bbd-context-more-menu {



  width:286px !important;



  max-width:calc(100vw - 28px) !important;



  padding:8px !important;



  border-radius:16px !important;



  box-shadow:0 20px 54px rgba(15,23,42,.16) !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-object-popover .bbd-command-menu__header {



  padding:8px 9px 10px !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-object-popover .bbd-command-menu__item {



  min-height:44px !important;



  padding:8px 10px !important;



  gap:10px !important;



  border-radius:10px !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-object-popover .bbd-command-menu__item strong {



  font-size:11px !important;



  line-height:1.25 !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-object-popover .bbd-command-menu__item small {



  margin-top:2px !important;



  font-size:9px !important;



  line-height:1.35 !important;



}







@media (max-width:760px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-quick-dock {



    right:10px !important;



    bottom:74px !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__trigger {



    min-height:38px !important;



    padding:0 10px 0 7px !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__trigger > span:last-child {



    display:inline !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar {



    gap:3px !important;



    padding:4px !important;



    max-width:calc(100% - 16px) !important;



    overflow-x:auto !important;



    scrollbar-width:none !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar::-webkit-scrollbar {



    display:none !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar button {



    min-width:66px !important;



    min-height:36px !important;



    height:36px !important;



    padding:0 8px !important;



    gap:5px !important;



    font-size:9.5px !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar [data-bbd-context-action="more"] {



    min-width:52px !important;



  }



}







@media (max-width:390px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar button {



    min-width:61px !important;



    padding-inline:7px !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-context-route-toolbar,



  .bbd-app.bbd-pro-workspace-v0230-dev56 .bbd-v56-background-quick .bbd-background-micro-v45__trigger {



    transition:none !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev57.css */
/* Baskibu Designer 0.23.0-dev57 — compact mobile sheet + stable bottom nav + clean first open */







.bbd-app.bbd-pro-workspace-v0230-dev57 {



  --bbd-v57-nav-height: 68px;



  --bbd-v57-sheet-gap: 8px;



}







/* The canvas should open clean. The old "Tasarıma başlayın" card competes with



   the actual product surface and makes first open feel like another modal. */



.bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-canvas-empty {



  display: none !important;



}







/* --------------------------------------------------------------------------



   Compact navigation is driven by the editor's own layout state instead of a



   second CSS-only breakpoint. This prevents the 760px transition from leaving



   the rail half desktop / half mobile while the browser is being resized.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-workspace,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-workspace,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-panel-collapsed .bbd-workspace,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-panel-collapsed .bbd-workspace {



  grid-template-columns: minmax(0,1fr) !important;



  grid-template-rows: minmax(0,1fr) !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-premium-tool-rail,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-app-rail-v45,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-premium-tool-rail,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-app-rail-v45 {



  position: absolute !important;



  z-index: 9400 !important;



  inset: auto 0 0 0 !important;



  width: 100% !important;



  max-width: none !important;



  height: var(--bbd-v57-nav-height) !important;



  min-height: var(--bbd-v57-nav-height) !important;



  display: grid !important;



  grid-template-columns: repeat(6,minmax(0,1fr)) !important;



  grid-template-rows: 1fr !important;



  grid-auto-flow: column !important;



  align-items: stretch !important;



  justify-items: stretch !important;



  gap: 0 !important;



  margin: 0 !important;



  padding: 4px max(5px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)) !important;



  overflow: visible !important;



  border: 0 !important;



  border-top: 1px solid #dfe5eb !important;



  border-radius: 0 !important;



  background: rgba(255,255,255,.985) !important;



  box-shadow: 0 -10px 26px rgba(15,23,42,.10) !important;



  backdrop-filter: blur(18px) saturate(1.08) !important;



  contain: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar-active-indicator,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-menu-rail-divider,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar [data-bbd-menu-command],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar-active-indicator,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-menu-rail-divider,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar [data-bbd-menu-command] {



  display: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="0"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="0"] {



  display: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] {



  position: relative !important;



  width: 100% !important;



  min-width: 0 !important;



  max-width: none !important;



  height: 58px !important;



  min-height: 58px !important;



  display: flex !important;



  flex: 0 1 auto !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 3px !important;



  margin: 0 !important;



  padding: 5px 1px 4px !important;



  overflow: hidden !important;



  border: 0 !important;



  border-radius: 10px !important;



  background: transparent !important;



  color: #667085 !important;



  box-shadow: none !important;



  transform: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"]::before,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"]::before {



  display: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] svg,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] svg {



  position: static !important;



  width: 19px !important;



  height: 19px !important;



  flex: 0 0 19px !important;



  margin: 0 !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span {



  position: static !important;



  width: 100% !important;



  max-width: 100% !important;



  display: block !important;



  margin: 0 !important;



  overflow: hidden !important;



  color: inherit !important;



  font-size: clamp(7px,2.25vw,8.2px) !important;



  font-weight: 760 !important;



  line-height: 1.05 !important;



  text-align: center !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active {



  background: #fff1eb !important;



  color: #e54b14 !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active::after,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active::after {



  content: '' !important;



  position: absolute !important;



  top: 1px !important;



  left: 50% !important;



  width: 18px !important;



  height: 2px !important;



  border-radius: 999px !important;



  background: #ff5b1f !important;



  transform: translateX(-50%) !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-stage-area,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-stage-area {



  grid-column: 1 !important;



  grid-row: 1 !important;



  width: 100% !important;



  min-width: 0 !important;



  padding-bottom: var(--bbd-v57-nav-height) !important;



}







/* --------------------------------------------------------------------------



   Phone: panel is a compact bottom sheet, not a second full-screen page.



   Canvas stays visible above it and the active panel scrolls internally.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {



  position: absolute !important;



  z-index: 9350 !important;



  top: auto !important;



  right: var(--bbd-v57-sheet-gap) !important;



  bottom: calc(var(--bbd-v57-nav-height) + var(--bbd-v57-sheet-gap)) !important;



  left: var(--bbd-v57-sheet-gap) !important;



  width: auto !important;



  min-width: 0 !important;



  height: min(40dvh,330px) !important;



  min-height: min(220px,40dvh) !important;



  max-height: min(44dvh,360px) !important;



  display: flex !important;



  flex-direction: column !important;



  padding: 0 !important;



  overflow: hidden !important;



  border: 1px solid #dfe5eb !important;



  border-radius: 18px !important;



  background: rgba(255,255,255,.995) !important;



  box-shadow: 0 -16px 42px rgba(15,23,42,.16) !important;



  opacity: 1 !important;



  transform: none !important;



  pointer-events: auto !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel[hidden] {



  display: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-bar {



  position: relative !important;



  top: auto !important;



  z-index: 5 !important;



  min-height: 48px !important;



  display: grid !important;



  flex: 0 0 48px !important;



  grid-template-columns: 34px minmax(0,1fr) 34px !important;



  align-items: center !important;



  gap: 6px !important;



  padding: 10px 10px 6px !important;



  border-bottom: 1px solid #edf0f3 !important;



  background: #fff !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-grip {



  top: 5px !important;



  width: 36px !important;



  height: 3px !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-back {



  visibility: hidden !important;



  pointer-events: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-title {



  overflow: hidden !important;



  color: #182230 !important;



  font-size: 12px !important;



  font-weight: 820 !important;



  text-align: center !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-close {



  grid-column: 3 !important;



  width: 32px !important;



  min-width: 32px !important;



  height: 32px !important;



  min-height: 32px !important;



  padding: 0 !important;



  border: 0 !important;



  border-radius: 9px !important;



  background: #f3f5f7 !important;



  color: #667085 !important;



  font-size: 20px !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section:not([hidden]) {



  min-height: 0 !important;



  display: flex !important;



  flex: 1 1 auto !important;



  flex-direction: column !important;



  gap: 10px !important;



  padding: 10px 12px 14px !important;



  overflow-x: hidden !important;



  overflow-y: auto !important;



  overscroll-behavior: contain !important;



  -webkit-overflow-scrolling: touch !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section[hidden] {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-edge-toggle {



  display: none !important;



}







/* Make the text panel immediately useful in the small sheet. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] > h2 {



  margin: 0 !important;



  font-size: 16px !important;



  line-height: 1.2 !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-text-mode-tabs,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-search-field,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-quick-add-row {



  margin-bottom: 0 !important;



}







/* --------------------------------------------------------------------------



   Tablet / narrow desktop: keep the same reliable full-width bottom nav, but



   use a floating side panel so the selected object remains visible.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {



  position: absolute !important;



  z-index: 9350 !important;



  top: 74px !important;



  right: auto !important;



  bottom: calc(var(--bbd-v57-nav-height) + 10px) !important;



  left: 10px !important;



  width: min(360px,calc(100% - 20px)) !important;



  min-width: 0 !important;



  height: auto !important;



  max-height: none !important;



  display: flex !important;



  flex-direction: column !important;



  padding: 0 !important;



  overflow: hidden !important;



  border: 1px solid #dfe5eb !important;



  border-radius: 16px !important;



  background: rgba(255,255,255,.99) !important;



  box-shadow: 0 18px 48px rgba(15,23,42,.16) !important;



  opacity: 1 !important;



  transform: none !important;



  pointer-events: auto !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel[hidden] {



  display: none !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-bar {



  min-height: 46px !important;



  display: grid !important;



  flex: 0 0 46px !important;



  grid-template-columns: 34px minmax(0,1fr) 34px !important;



  align-items: center !important;



  gap: 6px !important;



  padding: 7px 8px !important;



  border-bottom: 1px solid #edf0f3 !important;



  background: #fff !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-back {



  visibility: hidden !important;



  pointer-events: none !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-title {



  overflow: hidden !important;



  font-size: 12px !important;



  font-weight: 820 !important;



  text-align: center !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-close {



  width: 32px !important;



  min-width: 32px !important;



  height: 32px !important;



  min-height: 32px !important;



  padding: 0 !important;



  border: 0 !important;



  border-radius: 9px !important;



  background: #f3f5f7 !important;



  color: #667085 !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section:not([hidden]) {



  min-height: 0 !important;



  display: flex !important;



  flex: 1 1 auto !important;



  flex-direction: column !important;



  gap: 10px !important;



  padding: 12px 13px 16px !important;



  overflow-x: hidden !important;



  overflow-y: auto !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section[hidden],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-edge-toggle {



  display: none !important;



}







/* Preview should use the full compact viewport. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-sidebar,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-panel,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-sidebar,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-panel {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-stage-area,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-stage-area {



  padding-bottom: 0 !important;



}







@media (max-width:430px) {



  .bbd-app.bbd-pro-workspace-v0230-dev57 { --bbd-v57-nav-height: 64px; }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] {



    height: 54px !important;



    min-height: 54px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span {



    font-size: 7px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {



    height: min(38dvh,300px) !important;



    min-height: min(210px,38dvh) !important;



    max-height: min(42dvh,320px) !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool {



    transition: none !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev58.css */
/* Baskibu Designer 0.23.0-dev58 — mobile object toolbar containment + reliable sheets + visible Zemin palette */







.bbd-app.bbd-pro-workspace-v0230-dev58 {



  --bbd-v58-nav-height: 68px;



  --bbd-v58-sheet-gap: 8px;



}







/* Zemin is a primary design action now. A multicolour icon makes it discoverable



   without adding another floating explanatory card. */



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon {



  position: relative;



  width: 20px;



  height: 20px;



  flex: 0 0 20px;



  display: inline-block;



  border: 1px solid rgba(15,23,42,.14);



  border-radius: 50% 50% 46% 50%;



  background: conic-gradient(#ff5b1f 0 24%,#f9c846 24% 43%,#30b978 43% 62%,#3b82f6 62% 81%,#8b5cf6 81% 100%);



  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35),0 1px 2px rgba(15,23,42,.09);



}



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon::after {



  content: '';



  position: absolute;



  right: 2px;



  bottom: 2px;



  width: 5px;



  height: 5px;



  border: 2px solid #fff;



  border-radius: 50%;



  background: #fff;



}



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background.is-active .bbd-v58-palette-icon {



  box-shadow: 0 0 0 3px rgba(255,91,31,.12),inset 0 0 0 1px rgba(255,255,255,.4);



}







/* --------------------------------------------------------------------------



   Selected object toolbar on compact screens.



   Older mobile CSS supplied left/right/bottom but inherited a large height in



   some viewport combinations. Explicit block sizing makes that impossible.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar {



  position: absolute !important;



  z-index: 9460 !important;



  top: auto !important;



  right: 8px !important;



  bottom: calc(var(--bbd-v58-nav-height) + 8px) !important;



  left: 8px !important;



  width: auto !important;



  min-width: 0 !important;



  max-width: none !important;



  height: 46px !important;



  min-height: 46px !important;



  max-height: 46px !important;



  display: grid !important;



  grid-template-columns: repeat(4,minmax(0,1fr)) !important;



  align-items: center !important;



  justify-content: stretch !important;



  gap: 2px !important;



  margin: 0 !important;



  padding: 3px !important;



  overflow: hidden !important;



  border: 1px solid rgba(148,163,184,.38) !important;



  border-radius: 13px !important;



  background: rgba(255,255,255,.985) !important;



  box-shadow: 0 8px 24px rgba(15,23,42,.14) !important;



  transform: none !important;



  contain: layout paint !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar[hidden],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar[hidden],



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58.is-v58-main-sheet-open .bbd-context-route-toolbar,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58.is-v58-main-sheet-open .bbd-context-route-toolbar {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar button,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar button {



  width: 100% !important;



  min-width: 0 !important;



  max-width: none !important;



  height: 38px !important;



  min-height: 38px !important;



  max-height: 38px !important;



  padding: 0 5px !important;



  gap: 4px !important;



  overflow: hidden !important;



  border-radius: 9px !important;



  font-size: 9px !important;



  line-height: 1 !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-icon,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-icon {



  width: 14px !important;



  height: 14px !important;



  flex: 0 0 14px !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-label-short,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-label-short {



  min-width: 0 !important;



  max-width: 100% !important;



  display: inline !important;



  overflow: hidden !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}







/* --------------------------------------------------------------------------



   Mobile/tablet bottom navigation. Seven stable equal cells; Zemin sits right



   beside Katmanlar and no item can collapse into the left edge on resize.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar[data-bbd-v58-compact-nav="1"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar[data-bbd-v58-compact-nav="1"] {



  position: absolute !important;



  z-index: 9600 !important;



  inset: auto 0 0 0 !important;



  width: 100% !important;



  max-width: none !important;



  height: var(--bbd-v58-nav-height) !important;



  min-height: var(--bbd-v58-nav-height) !important;



  display: grid !important;



  grid-template-columns: repeat(6,minmax(0,1fr)) !important;



  grid-template-rows: 1fr !important;



  grid-auto-flow: column !important;



  align-items: stretch !important;



  gap: 0 !important;



  padding: 4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)) !important;



  overflow: visible !important;



  border: 0 !important;



  border-top: 1px solid #dfe5eb !important;



  border-radius: 0 !important;



  background: rgba(255,255,255,.99) !important;



  box-shadow: 0 -9px 24px rgba(15,23,42,.09) !important;



  contain: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="0"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="0"] {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] {



  position: relative !important;



  width: 100% !important;



  min-width: 0 !important;



  max-width: none !important;



  height: 58px !important;



  min-height: 58px !important;



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 3px !important;



  margin: 0 !important;



  padding: 5px 1px 4px !important;



  overflow: hidden !important;



  border: 0 !important;



  border-radius: 10px !important;



  background: transparent !important;



  color: #667085 !important;



  box-shadow: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > svg,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > svg {



  width: 18px !important;



  height: 18px !important;



  flex: 0 0 18px !important;



  margin: 0 !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon),



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon) {



  width: 100% !important;



  min-width: 0 !important;



  max-width: 100% !important;



  display: block !important;



  overflow: hidden !important;



  font-size: clamp(6.6px,1.95vw,8px) !important;



  font-weight: 760 !important;



  line-height: 1.05 !important;



  text-align: center !important;



  text-overflow: ellipsis !important;



  white-space: nowrap !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"].is-active,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"].is-active {



  background: #fff1eb !important;



  color: #e54b14 !important;



}







/* --------------------------------------------------------------------------



   Main compact sheet. It is deliberately short: enough room to choose/add an



   item while keeping the yelken/artboard visible. Every visible section owns



   its scrolling, so a long template/font list cannot grow over the canvas.



   -------------------------------------------------------------------------- */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {



  position: absolute !important;



  z-index: 9550 !important;



  top: auto !important;



  right: var(--bbd-v58-sheet-gap) !important;



  bottom: calc(var(--bbd-v58-nav-height) + var(--bbd-v58-sheet-gap)) !important;



  left: var(--bbd-v58-sheet-gap) !important;



  width: auto !important;



  min-width: 0 !important;



  max-width: none !important;



  height: min(32dvh,270px) !important;



  min-height: min(185px,32dvh) !important;



  max-height: min(32dvh,270px) !important;



  display: flex !important;



  flex-direction: column !important;



  margin: 0 !important;



  padding: 0 !important;



  overflow: hidden !important;



  border: 1px solid #dde3e9 !important;



  border-radius: 16px !important;



  background: rgba(255,255,255,.995) !important;



  box-shadow: 0 -12px 34px rgba(15,23,42,.14) !important;



  opacity: 1 !important;



  transform: none !important;



  pointer-events: auto !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel[hidden] {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-mobile-sheet-bar {



  position: relative !important;



  z-index: 3 !important;



  min-height: 40px !important;



  height: 40px !important;



  flex: 0 0 40px !important;



  display: grid !important;



  grid-template-columns: 30px minmax(0,1fr) 30px !important;



  align-items: center !important;



  gap: 5px !important;



  padding: 5px 7px !important;



  border-bottom: 1px solid #edf0f3 !important;



  background: #fff !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 #bbd-mobile-sheet-title {



  font-size: 11px !important;



  font-weight: 820 !important;



  text-align: center !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 #bbd-mobile-sheet-close {



  width: 28px !important;



  min-width: 28px !important;



  height: 28px !important;



  min-height: 28px !important;



  padding: 0 !important;



  border-radius: 8px !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section:not([hidden]) {



  min-height: 0 !important;



  display: flex !important;



  flex: 1 1 auto !important;



  flex-direction: column !important;



  gap: 8px !important;



  padding: 9px 10px 12px !important;



  overflow-x: hidden !important;



  overflow-y: auto !important;



  overscroll-behavior: contain !important;



  -webkit-overflow-scrolling: touch !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section[hidden] {



  display: none !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-edge-toggle {



  display: none !important;



}







/* Zemin sheet: immediate swatch-like color input, no hunting. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 [data-panel-content="background"] > h2 {



  margin: 0 !important;



  font-size: 15px !important;



}



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 [data-panel-content="background"] #bbd-background-color {



  width: 100% !important;



  min-height: 42px !important;



  height: 42px !important;



  padding: 3px !important;



  border-radius: 10px !important;



}







/* Tablet/drawer keeps a narrow side sheet, not a nearly full viewport slab. */



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {



  position: absolute !important;



  z-index: 9550 !important;



  top: 70px !important;



  right: auto !important;



  bottom: calc(var(--bbd-v58-nav-height) + 9px) !important;



  left: 9px !important;



  width: min(330px,calc(100% - 18px)) !important;



  min-width: 0 !important;



  height: auto !important;



  max-height: none !important;



  overflow: hidden !important;



  border: 1px solid #dde3e9 !important;



  border-radius: 15px !important;



  background: rgba(255,255,255,.995) !important;



  box-shadow: 0 16px 42px rgba(15,23,42,.15) !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel[hidden] {



  display: none !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section:not([hidden]) {



  min-height: 0 !important;



  display: flex !important;



  flex: 1 1 auto !important;



  flex-direction: column !important;



  gap: 9px !important;



  padding: 11px 12px 14px !important;



  overflow-y: auto !important;



}



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section[hidden],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-edge-toggle {



  display: none !important;



}







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-stage-area,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-stage-area {



  padding-bottom: var(--bbd-v58-nav-height) !important;



}







@media (max-width:430px) {



  .bbd-app.bbd-pro-workspace-v0230-dev58 { --bbd-v58-nav-height: 64px; }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] {



    height: 54px !important;



    min-height: 54px !important;



    padding-inline: 0 !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon) {



    font-size: 6.5px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon {



    width: 18px !important;



    height: 18px !important;



    flex-basis: 18px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {



    height: min(30dvh,245px) !important;



    min-height: min(175px,30dvh) !important;



    max-height: min(30dvh,245px) !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar,



  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool {



    transition: none !important;



  }



}







/* Compact quick dock is redundant now that Zemin is a first-class nav item. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v56-quick-dock,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v56-quick-dock {



  display: none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-palette {



  display: grid;



  grid-template-columns: repeat(6,minmax(0,1fr));



  gap: 7px;



  margin: 1px 0 3px;



}



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch {



  position: relative;



  aspect-ratio: 1;



  min-width: 0;



  min-height: 30px;



  padding: 0;



  overflow: hidden;



  border: 1px solid rgba(148,163,184,.5);



  border-radius: 9px;



  background: var(--bbd-v58-swatch);



  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);



  cursor: pointer;



}



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch.is-active {



  border-color: #ff5b1f;



  box-shadow: 0 0 0 2px rgba(255,91,31,.18),inset 0 0 0 1px rgba(255,255,255,.3);



}



.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch.is-active::after {



  content: '✓';



  position: absolute;



  inset: 50% auto auto 50%;



  width: 17px;



  height: 17px;



  display: grid;



  place-items: center;



  border-radius: 50%;



  background: rgba(15,23,42,.82);



  color: #fff;



  font-size: 10px;



  font-weight: 900;



  transform: translate(-50%,-50%);



}



@media (max-width:430px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-palette {



    grid-template-columns: repeat(6,minmax(0,1fr));



    gap: 5px;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch {



    min-height: 27px;



    border-radius: 8px;



  }



}





/* BBD CSS: assets/css/editor-0230-dev59.css */
/* Baskibu Designer 0.23.0-dev59 — deterministic mobile sheets + artist palette icon */







.bbd-app.bbd-pro-workspace-v0230-dev59 {



  --bbd-v59-nav-height: 68px;



  --bbd-v59-sheet-gap: 8px;



}







/* Classical painter's palette: unmistakable from the old colour-wheel icon. */



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-artist-palette {



  width: 24px !important;



  height: 21px !important;



  flex: 0 0 24px !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  margin: 0 !important;



  padding: 0 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-artist-palette svg {



  width: 24px !important;



  height: 21px !important;



  display: block !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-palette-body {



  fill: #fffaf5;



  stroke: #344054;



  stroke-width: 1.65;



  stroke-linejoin: round;



}



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-thumb-hole {



  fill: #ffffff;



  stroke: #667085;



  stroke-width: 1.15;



}



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-tool--v59-background.is-active .bbd-v59-palette-body {



  fill: #fff1eb;



  stroke: #e54b14;



}







/* Old dev57/dev58 JS may reorder nodes asynchronously. CSS order is the final



   authority, so compact navigation can no longer jump around after load. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar[data-bbd-v59-nav="1"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar[data-bbd-v59-nav="1"] {



  display: grid !important;



  grid-template-columns: repeat(6,minmax(0,1fr)) !important;



  grid-auto-flow: initial !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="quick-designs"] { order: 1 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="product"] { order: 2 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="text"] { order: 3 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="image"] { order: 4 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="layers"] { order: 5 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="background"] { order: 6 !important; }



.bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-panel="mobile-more"] { order: 7 !important; }







.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-bbd-v59-primary="0"],



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-sidebar .bbd-tool[data-bbd-v59-primary="0"] {



  display: none !important;



}







/* v59 sheet-open class intentionally beats the older [hidden] !important rules.



   JS also removes hidden; this CSS is a second safety net against late lifecycle



   callbacks from dev55/dev57/dev58. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59:not(.is-preview-mode).is-v59-sheet-open .bbd-panel,



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59:not(.is-preview-mode).is-v59-sheet-open .bbd-panel[hidden] {



  position: absolute !important;



  z-index: 9750 !important;



  top: auto !important;



  right: var(--bbd-v59-sheet-gap) !important;



  bottom: calc(var(--bbd-v59-nav-height) + var(--bbd-v59-sheet-gap)) !important;



  left: var(--bbd-v59-sheet-gap) !important;



  width: auto !important;



  min-width: 0 !important;



  max-width: none !important;



  height: min(31dvh,275px) !important;



  min-height: min(190px,31dvh) !important;



  max-height: min(31dvh,275px) !important;



  display: flex !important;



  flex-direction: column !important;



  visibility: visible !important;



  opacity: 1 !important;



  transform: none !important;



  pointer-events: auto !important;



  margin: 0 !important;



  padding: 0 !important;



  overflow: hidden !important;



  border: 1px solid #dfe5eb !important;



  border-radius: 17px !important;



  background: rgba(255,255,255,.995) !important;



  box-shadow: 0 -14px 36px rgba(15,23,42,.16) !important;



}







.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59:not(.is-preview-mode).is-v59-sheet-open .bbd-panel,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59:not(.is-preview-mode).is-v59-sheet-open .bbd-panel[hidden] {



  position: absolute !important;



  z-index: 9750 !important;



  top: 70px !important;



  right: auto !important;



  bottom: calc(var(--bbd-v59-nav-height) + 9px) !important;



  left: 9px !important;



  width: min(340px,calc(100% - 18px)) !important;



  min-width: 0 !important;



  max-width: 340px !important;



  height: auto !important;



  max-height: none !important;



  display: flex !important;



  flex-direction: column !important;



  visibility: visible !important;



  opacity: 1 !important;



  transform: none !important;



  pointer-events: auto !important;



  overflow: hidden !important;



  border: 1px solid #dfe5eb !important;



  border-radius: 16px !important;



  background: rgba(255,255,255,.995) !important;



  box-shadow: 0 16px 42px rgba(15,23,42,.16) !important;



}







/* Keep the selected-object mini toolbar out of the way while a main sheet is open. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59.is-v59-sheet-open .bbd-context-route-toolbar,



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59.is-v59-sheet-open .bbd-context-route-toolbar {



  display: none !important;



}







/* Sheet content owns its scroll; the canvas remains visible above it. */



.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev59.is-v59-sheet-open .bbd-panel > .bbd-panel-section:not([hidden]),



.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev59.is-v59-sheet-open .bbd-panel > .bbd-panel-section:not([hidden]) {



  min-height: 0 !important;



  flex: 1 1 auto !important;



  display: flex !important;



  flex-direction: column !important;



  overflow-x: hidden !important;



  overflow-y: auto !important;



  overscroll-behavior: contain !important;



  -webkit-overflow-scrolling: touch !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev59.is-v59-sheet-open .bbd-panel > .bbd-panel-section[hidden] {



  display: none !important;



}







/* Give the painter palette a slightly larger visual footprint on phones without



   increasing the nav bar height. */



@media (max-width:430px) {



  .bbd-app.bbd-pro-workspace-v0230-dev59 { --bbd-v59-nav-height: 64px; }



  .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-artist-palette,



  .bbd-app.bbd-pro-workspace-v0230-dev59 .bbd-v59-artist-palette svg {



    width: 23px !important;



    height: 20px !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev60.css */
/* Baskibu Designer 0.23.0-dev60 — mobile foreground portal sheet */







.bbd-app.bbd-pro-workspace-v0230-dev60 {



  --bbd-v60-nav-height: 68px;



  --bbd-v60-gap: 8px;



}







/* The mobile panel is moved here at runtime. Because the host is a direct child



   of .bbd-app, canvas/grid stacking contexts can no longer paint over it. */



.bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host {



  position: absolute !important;



  z-index: 2147483400 !important;



  inset: 0 !important;



  display: block !important;



  overflow: visible !important;



  pointer-events: none !important;



  contain: none !important;



  isolation: isolate !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host:not(.is-open) > #bbd-panel {



  display: none !important;



}







/* Phone: compact bottom sheet. ID specificity deliberately outranks every older



   cumulative .bbd-panel mobile rule. */



@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 { --bbd-v60-nav-height: 64px; }







  .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] {



    position: absolute !important;



    z-index: 2 !important;



    top: auto !important;



    right: var(--bbd-v60-gap) !important;



    bottom: calc(var(--bbd-v60-nav-height) + var(--bbd-v60-gap)) !important;



    left: var(--bbd-v60-gap) !important;



    width: auto !important;



    min-width: 0 !important;



    max-width: none !important;



    height: min(31dvh, 268px) !important;



    min-height: min(190px, 31dvh) !important;



    max-height: min(31dvh, 268px) !important;



    display: flex !important;



    flex-direction: column !important;



    visibility: visible !important;



    opacity: 1 !important;



    transform: translate3d(0,0,0) !important;



    pointer-events: auto !important;



    margin: 0 !important;



    padding: 0 !important;



    overflow: hidden !important;



    border: 1px solid #d9e0e7 !important;



    border-radius: 17px !important;



    background: #fff !important;



    box-shadow: 0 -16px 42px rgba(15,23,42,.18) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar {



    position: relative !important;



    top: auto !important;



    z-index: 4 !important;



    min-height: 42px !important;



    height: 42px !important;



    flex: 0 0 42px !important;



    display: grid !important;



    grid-template-columns: 30px minmax(0,1fr) 30px !important;



    align-items: center !important;



    gap: 6px !important;



    padding: 6px 8px !important;



    border-bottom: 1px solid #edf0f3 !important;



    background: #fff !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {



    min-height: 0 !important;



    flex: 1 1 auto !important;



    display: flex !important;



    flex-direction: column !important;



    gap: 8px !important;



    padding: 9px 10px 13px !important;



    overflow-x: hidden !important;



    overflow-y: auto !important;



    overscroll-behavior: contain !important;



    -webkit-overflow-scrolling: touch !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section[hidden],



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-edge-toggle {



    display: none !important;



  }







  /* No object toolbar competes with the sheet on a phone. */



  .bbd-app.bbd-pro-workspace-v0230-dev60.is-v60-sheet-open .bbd-context-route-toolbar,



  .bbd-app.bbd-pro-workspace-v0230-dev60.is-v60-sheet-open .bbd-object-toolbar {



    display: none !important;



  }



}







/* Narrow desktop/tablet: foreground side drawer using the same portal host. */



@media (min-width:761px) and (max-width:1024px) {



  .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] {



    position: absolute !important;



    z-index: 2 !important;



    top: 74px !important;



    right: auto !important;



    bottom: calc(var(--bbd-v60-nav-height) + 10px) !important;



    left: 10px !important;



    width: min(344px, calc(100% - 20px)) !important;



    min-width: 0 !important;



    max-width: 344px !important;



    height: auto !important;



    min-height: 0 !important;



    max-height: none !important;



    display: flex !important;



    flex-direction: column !important;



    visibility: visible !important;



    opacity: 1 !important;



    transform: translate3d(0,0,0) !important;



    pointer-events: auto !important;



    margin: 0 !important;



    padding: 0 !important;



    overflow: hidden !important;



    border: 1px solid #d9e0e7 !important;



    border-radius: 16px !important;



    background: #fff !important;



    box-shadow: 0 18px 48px rgba(15,23,42,.18) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {



    min-height: 0 !important;



    flex: 1 1 auto !important;



    display: flex !important;



    flex-direction: column !important;



    padding: 12px 13px 16px !important;



    overflow-y: auto !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section[hidden],



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-edge-toggle {



    display: none !important;



  }



}







/* More recognizable classical painter palette. */



.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-v60-artist-palette {



  width: 25px !important;



  height: 22px !important;



  flex: 0 0 25px !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  margin: 0 !important;



  padding: 0 !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-v60-artist-palette svg {



  width: 25px !important;



  height: 22px !important;



  display: block !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-v60-palette-body {



  fill: #fff8ef !important;



  stroke: #344054 !important;



  stroke-width: 1.7 !important;



  stroke-linejoin: round !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-v60-thumb-hole {



  fill: #fff !important;



  stroke: #667085 !important;



  stroke-width: 1.2 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-tool[data-panel="background"].is-active .bbd-v60-palette-body {



  fill: #fff0e8 !important;



  stroke: #e54b14 !important;



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host > #bbd-panel {



    transition: none !important;



  }



}











/* --------------------------------------------------------------------------



   dev63 SAFE ROLLBACK LAYOUT PATCH



   Based on the last known-good dev60 runtime. No new lifecycle JS is added.



   Only mobile sheet geometry/content flow is widened here.



   -------------------------------------------------------------------------- */



@media (max-width:760px) {



  .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: min(46dvh, 410px) !important;



    min-height: 282px !important;



    max-height: min(46dvh, 410px) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar {



    min-height: 44px !important;



    height: 44px !important;



    flex-basis: 44px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    padding: 11px 12px 16px !important;



    margin: 0 !important;



    overflow-x: hidden !important;



    overflow-y: auto !important;



    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 {



    min-width: 0 !important;



    max-width: 100% !important;



    box-sizing: border-box !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs {



    display: grid !important;



    grid-template-columns: repeat(3,minmax(0,1fr)) !important;



    gap: 4px !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    overflow: hidden !important;



  }







  .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: 3px !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    overflow: hidden !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs button,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-mode-tabs button {



    min-width: 0 !important;



    width: 100% !important;



    padding-inline: 4px !important;



    font-size: 10px !important;



    white-space: nowrap !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



  }







  .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: 10px !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-dropzone,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-card-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-background-selection {



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    box-sizing: border-box !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: 8px !important;



  }







  /* Keep the classical painter palette visible even when old palette helpers



     add their own nodes later. dev60 owns the SVG; this only protects its box. */



  .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] .bbd-v60-artist-palette {



    display: inline-flex !important;



    visibility: visible !important;



    opacity: 1 !important;



  }



}







@media (max-width: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: min(48dvh, 360px) !important;



    min-height: 270px !important;



    max-height: min(48dvh, 360px) !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev64.css */
/* 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;



  }



}





/* BBD CSS: assets/css/editor-0230-dev65.css */
/* Baskibu Designer 0.23.0-dev65 — mobile content-first sheet system



   Safe presentation layer only: no new JS, observers, DOM moves or runtime loops. */







/* --------------------------------------------------------------------------



   Mobile drawer geometry: content-first, roomier, calmer.



   -------------------------------------------------------------------------- */



@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 {



    --bbd-v65-sheet-height: min(52dvh, 462px);



    --bbd-v65-edge: 8px;



  }







  .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] {



    right: var(--bbd-v65-edge) !important;



    left: var(--bbd-v65-edge) !important;



    bottom: calc(var(--bbd-v60-nav-height) + 7px) !important;



    height: var(--bbd-v65-sheet-height) !important;



    min-height: 350px !important;



    max-height: 462px !important;



    border: 1px solid #e1e6eb !important;



    border-radius: 18px 18px 14px 14px !important;



    background: #fff !important;



    box-shadow: 0 -10px 30px rgba(15,23,42,.14) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar {



    min-height: 38px !important;



    height: 38px !important;



    flex: 0 0 38px !important;



    grid-template-columns: 28px minmax(0,1fr) 28px !important;



    gap: 4px !important;



    padding: 4px 7px !important;



    border-bottom-color: #eef1f4 !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-mobile-sheet-title {



    font-size: 11px !important;



    font-weight: 850 !important;



    line-height: 1 !important;



    letter-spacing: -.05px !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;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {



    gap: 7px !important;



    padding: 8px 10px 12px !important;



    overflow-x: hidden !important;



    overflow-y: auto !important;



    scrollbar-width: thin !important;



    scrollbar-color: #aeb7c2 transparent !important;



    scroll-padding-top: 8px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden])::-webkit-scrollbar {



    width: 5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden])::-webkit-scrollbar-track {



    background: transparent !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden])::-webkit-scrollbar-thumb {



    border-radius: 999px !important;



    background: #aeb7c2 !important;



  }







  /* One title is enough: the sheet bar names the active tool. */



  .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-panel-section:not([hidden]) > .bbd-pro-panel-intro,



  .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-background-modules > .bbd-pro-panel-intro,



  .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;



  }







  /* Compact common controls. */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-search-field {



    display: block !important;



    margin: 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-search-field input {



    width: 100% !important;



    height: 35px !important;



    min-height: 35px !important;



    padding: 0 11px !important;



    border-radius: 10px !important;



    font-size: 11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel select,



  .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 textarea {



    min-height: 35px !important;



    font-size: 11px !important;



  }







  /* ------------------------------------------------------------------------



     HIZLI TASARIMLAR: previews first. Context card is desktop-only; categories



     become one swipeable chip row, then cards start immediately.



     ------------------------------------------------------------------------ */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] {



    gap: 6px !important;



    padding-top: 8px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] > .bbd-template-context {



    display: none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] > .bbd-search-field {



    order: 1 !important;



    flex: 0 0 auto !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] > .bbd-template-pro-filters {



    order: 2 !important;



    width: 100% !important;



    min-height: 31px !important;



    display: flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    margin: 0 !important;



    padding: 0 0 2px !important;



    overflow-x: auto !important;



    overflow-y: hidden !important;



    scrollbar-width: none !important;



    -webkit-overflow-scrolling: touch !important;



    scroll-snap-type: x proximity !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] > .bbd-template-pro-filters::-webkit-scrollbar {



    display: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-pro-filter {



    flex: 0 0 auto !important;



    min-height: 29px !important;



    height: 29px !important;



    padding: 0 9px !important;



    border-radius: 999px !important;



    font-size: 9.5px !important;



    scroll-snap-align: start !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="templates"] > .bbd-template-grid {



    order: 3 !important;



    display: grid !important;



    grid-template-columns: repeat(2,minmax(0,1fr)) !important;



    gap: 8px !important;



    width: 100% !important;



    margin: 1px 0 0 !important;



    padding: 0 1px 10px !important;



    overflow: visible !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 {



    min-width: 0 !important;



    min-height: 0 !important;



    padding: 5px 5px 7px !important;



    border-radius: 12px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__preview,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 .bbd-template-card__preview {



    height: 118px !important;



    min-height: 118px !important;



    border-radius: 9px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__svg,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__svg--feather,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 .bbd-template-card__svg--feather {



    height: 104px !important;



    max-height: 104px !important;



    max-width: 84% !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card > strong,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 > strong {



    margin: 5px 2px 0 !important;



    font-size: 10.5px !important;



    line-height: 1.12 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card > small,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 > small {



    display: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-pro-kicker {



    left: 6px !important;



    top: 6px !important;



    min-height: 17px !important;



    padding: 0 5px !important;



    font-size: 6.5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__preview-action {



    right: 6px !important;



    bottom: 6px !important;



    min-height: 25px !important;



    padding: 0 8px !important;



    font-size: 8px !important;



  }







  /* ------------------------------------------------------------------------



     GÖRSELLER: one swipeable mode row; upload action becomes the hero.



     ------------------------------------------------------------------------ */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="image"] {



    gap: 7px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs {



    display: flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    width: 100% !important;



    margin: 0 !important;



    padding: 0 0 2px !important;



    overflow-x: auto !important;



    overflow-y: hidden !important;



    scrollbar-width: none !important;



    -webkit-overflow-scrolling: touch !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs::-webkit-scrollbar { display: none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs button {



    flex: 0 0 auto !important;



    width: auto !important;



    min-width: 0 !important;



    min-height: 31px !important;



    height: 31px !important;



    padding: 0 10px !important;



    border-radius: 999px !important;



    font-size: 9.5px !important;



    white-space: nowrap !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,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-premium-upload-card {



    display: grid !important;



    grid-template-columns: 34px minmax(0,1fr) auto !important;



    grid-template-rows: auto auto !important;



    align-items: center !important;



    gap: 2px 8px !important;



    min-height: 78px !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-premium-upload-card > svg {



    grid-column: 1 !important;



    grid-row: 1 / span 2 !important;



    width: 28px !important;



    height: 28px !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-premium-upload-card > strong {



    grid-column: 2 !important;



    grid-row: 1 !important;



    margin: 0 !important;



    font-size: 11px !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-premium-upload-card > span:not(.bbd-upload-format-badges) {



    grid-column: 2 !important;



    grid-row: 2 !important;



    margin: 0 !important;



    font-size: 8.8px !important;



    line-height: 1.25 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > em,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-premium-upload-card > em {



    grid-column: 3 !important;



    grid-row: 1 / span 2 !important;



    min-height: 34px !important;



    display: inline-flex !important;



    align-items: center !important;



    justify-content: center !important;



    margin: 0 !important;



    padding: 0 10px !important;



    border-radius: 9px !important;



    font-size: 9.5px !important;



    white-space: nowrap !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-format-badges,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="image"] > .bbd-help {



    display: none !important;



  }







  /* ------------------------------------------------------------------------



     ÜRÜN: collapse helper chrome, keep current product + primary actions.



     ------------------------------------------------------------------------ */



  .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 {



    min-height: 0 !important;



    margin: 0 !important;



    padding: 9px 10px !important;



    border-radius: 11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-product-identity strong { font-size: 11px !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 { font-size: 9px !important; }



  .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 9px !important;



    border-radius: 10px !important;



    font-size: 9.5px !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: 36px !important;



    padding: 6px 8px !important;



    border-radius: 10px !important;



    font-size: 9.5px !important;



  }







  /* ------------------------------------------------------------------------



     METİN: tabs + quick actions in one compact top region.



     ------------------------------------------------------------------------ */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-text-mode-tabs,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-component-categories {



    display: flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    margin: 0 !important;



    padding: 0 0 2px !important;



    overflow-x: auto !important;



    scrollbar-width: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-text-mode-tabs::-webkit-scrollbar,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-component-categories::-webkit-scrollbar { display:none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-text-mode-tabs button,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-component-categories button {



    flex: 0 0 auto !important;



    min-height: 30px !important;



    padding: 0 9px !important;



    border-radius: 999px !important;



    font-size: 9.5px !important;



    white-space: nowrap !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-quick-add-row {



    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-quick-add-row .bbd-action-card {



    min-height: 36px !important;



    padding: 7px 8px !important;



    font-size: 9.5px !important;



    border-radius: 10px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-preset-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-component-grid {



    display: grid !important;



    grid-template-columns: repeat(2,minmax(0,1fr)) !important;



    gap: 6px !important;



  }







  /* ------------------------------------------------------------------------



     GRAFİKLER + KATMANLAR: compact filter/control grids.



     ------------------------------------------------------------------------ */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-graphic-filters {



    display: grid !important;



    grid-template-columns: repeat(2,minmax(0,1fr)) !important;



    gap: 5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-graphic-filters select:last-child {



    grid-column: 1 / -1 !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(4,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;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-inline-actions button,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-command-grid button,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-action-card {



    min-height: 34px !important;



    padding: 5px 7px !important;



    border-radius: 9px !important;



    font-size: 9px !important;



  }



  .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;



  }







  /* ------------------------------------------------------------------------



     ZEMİN quick access: remove the dev64 orange text bubble. Keep the proven



     background route, but render it as one restrained icon-only canvas chip.



     ------------------------------------------------------------------------ */



  .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;



  }







  .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: 12px !important;



    bottom: calc(100% + 18px) !important;



    left: auto !important;



    top: auto !important;



    width: 44px !important;



    min-width: 44px !important;



    max-width: 44px !important;



    height: 44px !important;



    min-height: 44px !important;



    max-height: 44px !important;



    display: grid !important;



    place-items: center !important;



    margin: 0 !important;



    padding: 0 !important;



    border: 1px solid rgba(203,213,225,.96) !important;



    border-radius: 14px !important;



    background: rgba(255,255,255,.96) !important;



    color: #344054 !important;



    box-shadow: 0 7px 20px rgba(15,23,42,.12) !important;



    backdrop-filter: blur(8px) !important;



    -webkit-backdrop-filter: blur(8px) !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



    overflow: hidden !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"] > * {



    display: none !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 {



    content: "" !important;



    display: block !important;



    width: 27px !important;



    height: 24px !important;



    margin: 0 !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;



  }







  .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,.45) !important;



    background: #fff9f6 !important;



    box-shadow: 0 7px 20px rgba(15,23,42,.10), 0 0 0 2px rgba(255,75,0,.08) !important;



  }







  .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;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 {



    --bbd-v65-sheet-height: min(54dvh, 440px);



  }



  .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: 335px !important;



    max-height: 440px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__preview,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 .bbd-template-card__preview {



    height: 104px !important;



    min-height: 104px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__svg,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card__svg--feather,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-template-card--pro46 .bbd-template-card__svg--feather {



    height: 92px !important;



    max-height: 92px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-premium-upload-card {



    grid-template-columns: 30px minmax(0,1fr) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > em,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-premium-upload-card > em {



    grid-column: 1 / -1 !important;



    grid-row: 3 !important;



    width: 100% !important;



    margin-top: 4px !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev66.css */
/* Baskibu Designer 0.23.0-dev66 — mobile sheet stabilization + simplified navigation



   Scope: compact layouts only. Keeps the proven dev60 portal runtime intact. */







@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 {



    --bbd-v66-sheet-edge: 8px;



    --bbd-v66-sheet-height: min(54dvh, 480px);



  }







  /* ----------------------------------------------------------------------



     1) Drawer must never grow sideways after inline product options open.



     ---------------------------------------------------------------------- */



  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host {



    left: 0 !important;



    right: 0 !important;



    width: 100% !important;



    max-width: 100% !important;



    overflow: hidden !important;



  }







  .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] {



    left: var(--bbd-v66-sheet-edge) !important;



    right: var(--bbd-v66-sheet-edge) !important;



    width: calc(100% - (var(--bbd-v66-sheet-edge) * 2)) !important;



    min-width: 0 !important;



    max-width: calc(100% - (var(--bbd-v66-sheet-edge) * 2)) !important;



    height: var(--bbd-v66-sheet-height) !important;



    min-height: 350px !important;



    max-height: 480px !important;



    overflow: hidden !important;



    contain: layout paint !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]) {



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    padding: 9px 10px 14px !important;



    overflow-x: hidden !important;



    overflow-y: auto !important;



    overscroll-behavior-x: 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]) *,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-commerce-summary,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-inline-config,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-v51-config-body],



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-config-group,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-config-group > div {



    box-sizing: border-box !important;



    min-width: 0 !important;



    max-width: 100% !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-commerce-summary,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-inline-config,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-v51-config-body],



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-config-group {



    width: 100% !important;



    overflow: hidden !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-commerce-summary {



    gap: 9px !important;



    padding: 11px !important;



    border-radius: 13px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-commerce-summary__price {



    padding: 9px 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-commerce-summary__actions button {



    min-height: 38px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-inline-config {



    margin: 7px 0 0 !important;



    padding: 9px !important;



    border-radius: 11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-config-group > div {



    display: grid !important;



    grid-template-columns: repeat(2,minmax(0,1fr)) !important;



    gap: 6px !important;



    width: 100% !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-config-group button {



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    min-height: 34px !important;



    padding: 5px 7px !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



    font-size: 9px !important;



  }







  /* ----------------------------------------------------------------------



     2) Exactly six bottom destinations. More is removed; Zemin returns as a



        normal sixth tool instead of a floating canvas bubble.



     ---------------------------------------------------------------------- */



  .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: hidden !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="mobile-more"],



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="mobile-more"] {



    display: none !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: relative !important;



    inset: auto !important;



    z-index: auto !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: none !important;



    height: auto !important;



    min-height: 0 !important;



    max-height: none !important;



    display: flex !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 3px !important;



    margin: 0 !important;



    padding: 4px 2px !important;



    border: 0 !important;



    border-radius: 10px !important;



    background: transparent !important;



    box-shadow: none !important;



    backdrop-filter: none !important;



    -webkit-backdrop-filter: none !important;



    overflow: hidden !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 {



    content: none !important;



    display: none !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v59-artist-palette,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v59-artist-palette,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v60-artist-palette,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v60-artist-palette {



    display: inline-flex !important;



    width: 20px !important;



    height: 18px !important;



    flex: 0 0 18px !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v59-artist-palette svg,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v59-artist-palette svg,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v60-artist-palette svg,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-sidebar .bbd-tool[data-panel="background"] > .bbd-v60-artist-palette svg {



    width: 20px !important;



    height: 18px !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;



    max-width: 100% !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



    font-size: 8px !important;



    line-height: 1 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60.is-v60-sheet-open .bbd-sidebar .bbd-tool[data-panel="background"] {



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }







  /* ----------------------------------------------------------------------



     3) Görseller: compact intake on top, visual assets immediately below.



     ---------------------------------------------------------------------- */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="image"] {



    gap: 7px !important;



    padding-top: 8px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="image"] > h2,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="image"] > .bbd-help {



    display: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs {



    order: 1 !important;



    display: flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    width: 100% !important;



    margin: 0 !important;



    padding: 0 0 2px !important;



    overflow-x: auto !important;



    overflow-y: hidden !important;



    scrollbar-width: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs::-webkit-scrollbar { display:none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-tabs button {



    flex: 0 0 auto !important;



    width: auto !important;



    min-width: 0 !important;



    min-height: 30px !important;



    height: 30px !important;



    padding: 0 9px !important;



    border-radius: 999px !important;



    font-size: 9px !important;



    white-space: nowrap !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 {



    order: 2 !important;



    width: 100% !important;



    min-height: 62px !important;



    display: grid !important;



    grid-template-columns: 30px minmax(0,1fr) auto !important;



    grid-template-rows: auto auto !important;



    align-items: center !important;



    gap: 1px 8px !important;



    margin: 0 !important;



    padding: 8px 9px !important;



    border: 1px dashed #d7dee7 !important;



    border-radius: 12px !important;



    background: #fbfcfd !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 2 !important;



    width: 25px !important;



    height: 25px !important;



    margin: 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > strong {



    grid-column: 2 !important;



    grid-row: 1 !important;



    margin: 0 !important;



    font-size: 10.5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > span:not(.bbd-upload-format-badges) {



    grid-column: 2 !important;



    grid-row: 2 !important;



    margin: 0 !important;



    font-size: 8px !important;



    line-height: 1.25 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > em {



    grid-column: 3 !important;



    grid-row: 1 / span 2 !important;



    min-height: 32px !important;



    display: inline-flex !important;



    align-items: center !important;



    justify-content: center !important;



    margin: 0 !important;



    padding: 0 8px !important;



    border-radius: 9px !important;



    font-size: 8.5px !important;



    white-space: nowrap !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-format-badges { display:none !important; }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets {



    order: 3 !important;



    width: 100% !important;



    margin: 2px 0 0 !important;



    padding: 8px 0 0 !important;



    border-top: 1px solid #edf1f4 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__head {



    align-items: center !important;



    margin: 0 0 7px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__head strong {



    font-size: 11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__head small { display:none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__head > span {



    padding: 3px 6px !important;



    font-size: 7px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__cats {



    display: flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    width: 100% !important;



    margin: 0 0 8px !important;



    padding: 0 0 2px !important;



    overflow-x: auto !important;



    overflow-y: hidden !important;



    scrollbar-width: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__cats::-webkit-scrollbar { display:none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__cats button {



    flex: 0 0 auto !important;



    min-height: 27px !important;



    padding: 0 8px !important;



    font-size: 8px !important;



    white-space: nowrap !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__grid {



    display: grid !important;



    grid-template-columns: repeat(3,minmax(0,1fr)) !important;



    gap: 7px !important;



    width: 100% !important;



    padding-bottom: 10px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-asset-card {



    width: 100% !important;



    min-width: 0 !important;



    height: 92px !important;



    grid-template-rows: 66px 26px !important;



    border-radius: 11px !important;



    box-shadow: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-asset-card__art {



    padding: 7px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-asset-card__art svg {



    max-width: 62px !important;



    max-height: 52px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-asset-card > span:last-child {



    font-size: 7.5px !important;



  }







  /* ----------------------------------------------------------------------



     4) Katmanlar: one clean list, then only genuinely useful mobile controls.



     ---------------------------------------------------------------------- */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] {



    gap: 7px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > h2 { display:none !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] .bbd-search-field input {



    height: 34px !important;



    min-height: 34px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-list {



    width: 100% !important;



    max-height: 132px !important;



    margin: 0 !important;



    padding: 4px !important;



    overflow-y: auto !important;



    overflow-x: hidden !important;



    border: 1px solid #e4e9ef !important;



    border-radius: 12px !important;



    background: #f8fafc !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-row {



    grid-template-columns: minmax(0,1fr) 30px 30px 30px 30px !important;



    min-height: 42px !important;



    gap: 2px !important;



    margin: 0 0 4px !important;



    padding: 4px !important;



    border: 1px solid transparent !important;



    border-radius: 9px !important;



    background: #fff !important;



    box-shadow: none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-row:last-child { margin-bottom:0 !important; }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-row.is-selected {



    border-color: #ffb79b !important;



    background: #fff8f5 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-main {



    min-width: 0 !important;



    min-height: 32px !important;



    padding: 0 5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-name {



    min-width: 0 !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



    font-size: 9px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-eye,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-lock,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-copy,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-trash {



    width: 30px !important;



    min-width: 30px !important;



    height: 30px !important;



    min-height: 30px !important;



    padding: 0 !important;



    border-radius: 8px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-layer-solo { display:none !important; }







  /* Row has duplicate/delete already: don't repeat those large actions below. */



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > #bbd-duplicate,



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > #bbd-delete {



    display:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > .bbd-inline-actions {



    display: grid !important;



    grid-template-columns: repeat(2,minmax(0,1fr)) !important;



    gap: 5px !important;



    margin: 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > .bbd-inline-actions button {



    min-height: 32px !important;



    padding: 4px 6px !important;



    border-radius: 9px !important;



    font-size: 8.5px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > .bbd-field {



    margin: 1px 0 0 !important;



    padding: 8px !important;



    border: 1px solid #e6eaf0 !important;



    border-radius: 11px !important;



    background: #fbfcfd !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] > .bbd-field > span {



    display:block !important;



    margin: 0 0 6px !important;



    font-size: 8.5px !important;



    font-weight: 800 !important;



    color: #667085 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] .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 [data-panel-content="layers"] .bbd-command-grid button {



    min-height: 34px !important;



    padding: 3px 4px !important;



    border-radius: 8px !important;



    font-size: 8px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] [data-bbd-align="distribute-x"],



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] [data-bbd-align="distribute-y"] {



    display:none !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel [data-panel-content="layers"] [data-bbd-align="artboard-center"] {



    grid-column: 1 / -1 !important;



  }







  /* ----------------------------------------------------------------------



     5) Selected-object toolbar: restore a compact text/object toolbar after



        the main sheet closes; never allow it to become a full-screen layer.



     ---------------------------------------------------------------------- */



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev60 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar {



    left: 8px !important;



    right: 8px !important;



    bottom: calc(var(--bbd-v60-nav-height,64px) + 8px) !important;



    width: auto !important;



    height: 46px !important;



    min-height: 46px !important;



    max-height: 46px !important;



    grid-template-columns: repeat(4,minmax(0,1fr)) !important;



    overflow: hidden !important;



    border-radius: 13px !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev60 {



    --bbd-v66-sheet-height: min(55dvh, 455px);



  }



  .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: 330px !important;



    max-height: 455px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-v51-assets__grid {



    grid-template-columns: repeat(2,minmax(0,1fr)) !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 {



    grid-template-columns: 28px minmax(0,1fr) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev60 #bbd-panel .bbd-upload-card > em {



    grid-column: 1 / -1 !important;



    grid-row: 3 !important;



    width: 100% !important;



    margin-top: 5px !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev67.css */
/* Baskibu Designer 0.23.0-dev.67 — typography direct-edit mobile repair */







@media (max-width: 1024px) {



  /* Text selection is an editing state, not a group-management state. */



  .bbd-pro-workspace-v0230-dev67 .bbd-context-route-toolbar[data-toolbar-kind="text"] {



    display:grid !important;



    grid-template-columns:repeat(4,minmax(0,1fr)) !important;



    width:min(420px,calc(100% - 18px)) !important;



    max-width:calc(100% - 18px) !important;



    min-width:0 !important;



    gap:3px !important;



    padding:4px !important;



    overflow:hidden !important;



  }







  .bbd-pro-workspace-v0230-dev67 .bbd-context-route-toolbar[data-toolbar-kind="text"] [data-bbd-context-action] {



    min-width:0 !important;



    width:100% !important;



    min-height:38px !important;



    padding:6px 4px !important;



    gap:4px !important;



    justify-content:center !important;



    white-space:nowrap !important;



  }







  .bbd-pro-workspace-v0230-dev67 .bbd-context-route-toolbar[data-toolbar-kind="text"] .bbd-context-label,



  .bbd-pro-workspace-v0230-dev67 .bbd-context-route-toolbar[data-toolbar-kind="text"] .bbd-context-label-short {



    max-width:100% !important;



    overflow:hidden !important;



    text-overflow:ellipsis !important;



  }







  /* Object text controls opened from the floating toolbar reuse the known-good



     dev60 portal, but with a compact editor-first layout. */



  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open .bbd-editor-panel {



    width:100% !important;



    max-width:100% !important;



    min-width:0 !important;



  }







  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open [data-panel-content="context"] {



    width:100% !important;



    max-width:100% !important;



    min-width:0 !important;



    overflow-x:hidden !important;



  }







  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open [data-panel-content="context"] textarea,



  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open [data-panel-content="context"] input,



  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open [data-panel-content="context"] select {



    max-width:100% !important;



    box-sizing:border-box !important;



  }







  #bbd-v60-mobile-sheet-host.bbd-dev67-context-open [data-panel-content="context"] textarea {



    min-height:84px !important;



    resize:none !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev68.css */
/* Baskibu Designer 0.23.0-dev.68 — stable six-destination navigation



   Fixes desktop rail flicker and the mobile phantom seventh column. */







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"] {



  opacity: 1 !important;



  visibility: visible !important;



  pointer-events: auto !important;



  transform: none !important;



  transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="0"],



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="mobile-more"],



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="graphics"] {



  display: none !important;



}







/* Color system: color lives mainly in the SVG tile; labels stay easy to read. */



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="quick-designs"] { --bbd-v68-accent:#8b5cf6; --bbd-v68-soft:#f3efff; }



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="product"]       { --bbd-v68-accent:#0f9f8f; --bbd-v68-soft:#e9faf6; }



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="text"]          { --bbd-v68-accent:#f97316; --bbd-v68-soft:#fff3e8; }



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="image"]         { --bbd-v68-accent:#3182f6; --bbd-v68-soft:#edf5ff; }



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="layers"]        { --bbd-v68-accent:#6366f1; --bbd-v68-soft:#eef0ff; }



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar .bbd-tool[data-panel="background"]    { --bbd-v68-accent:#d946ef; --bbd-v68-soft:#fff0fc; }







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-svg {



  display: block !important;



  width: 29px !important;



  height: 29px !important;



  min-width: 29px !important;



  min-height: 29px !important;



  padding: 5px !important;



  box-sizing: border-box !important;



  border-radius: 9px !important;



  background: var(--bbd-v68-soft, #f2f4f7) !important;



  color: var(--bbd-v68-accent, #475467) !important;



  flex: 0 0 29px !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-palette-svg {



  padding: 3px !important;



  background: #fff7ed !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"]::before,



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"]::after,



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v58-palette-icon,



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v59-artist-palette,



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v60-artist-palette {



  display: none !important;



  content: none !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-palette-svg,



.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-nav-label {



  display: block !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-label {



  opacity: 1 !important;



  visibility: visible !important;



}







/* Desktop rail: never hide/reinsert primary buttons while a panel changes. */



@media (min-width:1025px) {



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav {



    overflow: hidden !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"] {



    display: flex !important;



    order: var(--bbd-v68-order) !important;



    color: #d7deea !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"] .bbd-v68-nav-label {



    color: #d7deea !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active {



    background: rgba(255,255,255,.08) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active .bbd-v68-nav-svg {



    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bbd-v68-accent) 28%, transparent) !important;



  }



}







/* Compact navigation: six real columns, no indicator/ghost cell and no floating background button. */



@media (max-width:1024px) {



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav {



    display: grid !important;



    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;



    grid-template-rows: 1fr !important;



    grid-auto-flow: row !important;



    grid-auto-columns: unset !important;



    grid-auto-rows: unset !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    overflow: hidden !important;



    align-items: stretch !important;



  }







  /* The old animated indicator is a grid child. On some widths it was the



     phantom seventh column. Mobile now uses each button's own active state. */



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav > .bbd-sidebar-active-indicator {



    display: none !important;



    position: absolute !important;



    width: 0 !important;



    height: 0 !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"],



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"],



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"] {



    position: relative !important;



    inset: auto !important;



    z-index: 1 !important;



    order: var(--bbd-v68-order) !important;



    display: flex !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 3px !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: none !important;



    height: 100% !important;



    min-height: 58px !important;



    max-height: none !important;



    margin: 0 !important;



    padding: 5px 1px 4px !important;



    border: 0 !important;



    border-radius: 11px !important;



    background: transparent !important;



    box-shadow: none !important;



    overflow: hidden !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



    color: #667085 !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active {



    background: var(--bbd-v68-soft, #f8fafc) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active::after {



    content: "" !important;



    display: block !important;



    position: absolute !important;



    top: 0 !important;



    left: 50% !important;



    width: 24px !important;



    height: 2px !important;



    border-radius: 0 0 999px 999px !important;



    background: var(--bbd-v68-accent, #ff5b1f) !important;



    transform: translateX(-50%) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-svg {



    width: 27px !important;



    height: 27px !important;



    min-width: 27px !important;



    min-height: 27px !important;



    flex-basis: 27px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-label {



    display: block !important;



    width: 100% !important;



    max-width: 100% !important;



    margin: 0 !important;



    padding: 0 1px !important;



    color: #667085 !important;



    font-size: 8px !important;



    font-weight: 760 !important;



    line-height: 1.05 !important;



    letter-spacing: -.08px !important;



    text-align: center !important;



    white-space: nowrap !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active .bbd-v68-nav-label {



    color: #344054 !important;



  }







  /* Old dev64/dev65 rules turned Zemin into an absolute canvas chip. Reset all



     of that here so the sixth destination is a normal grid cell. */



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"],



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"],



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] {



    position: relative !important;



    right: auto !important;



    bottom: auto !important;



    left: auto !important;



    top: auto !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: none !important;



    height: 100% !important;



    min-height: 58px !important;



    max-height: none !important;



    border: 0 !important;



    border-radius: 11px !important;



    backdrop-filter: none !important;



    -webkit-backdrop-filter: none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev68.is-v60-sheet-open .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] {



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-svg {



    width: 25px !important;



    height: 25px !important;



    min-width: 25px !important;



    min-height: 25px !important;



    padding: 4.5px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-v68-nav-label {



    font-size: 7.5px !important;



  }



}







/* Specificity shield against dev64/dev65 floating-palette rules. */



@media (max-width:760px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-palette-svg,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-palette-svg {



    display: block !important;



    width: 27px !important;



    height: 27px !important;



    min-width: 27px !important;



    min-height: 27px !important;



    padding: 3px !important;



    opacity: 1 !important;



    visibility: visible !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-nav-label,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"] > .bbd-v68-nav-label {



    display: block !important;



    opacity: 1 !important;



    visibility: visible !important;



  }



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"]::before,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev68 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-panel="background"]::before {



    content: none !important;



    display: none !important;



    background-image: none !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev69.css */
/* Baskibu Designer 0.23.0-dev69 — mobile six-nav owner + roomy auto-close sheets + corporate green/black skin */







.bbd-app.bbd-pro-workspace-v0230-dev69,



.bbd-app.bbd-creative-workspace.bbd-pro-workspace-v0230-dev69 {



  --bbd-accent: #0b7a6a !important;



  --bbd-accent-hover: #075f54 !important;



  --bbd-accent-dark: #075f54 !important;



  --bbd-accent-soft: #e9f7f4 !important;



  --bbd-color-accent: #0b7a6a !important;



  --bbd-color-accent-dark: #075f54 !important;



  --bbd-color-accent-soft: #e9f7f4 !important;



  --bbd-border-interactive: rgba(11,122,106,.40) !important;



  --bbd-focus-ring: 0 0 0 3px rgba(11,122,106,.18) !important;



  --bbd-selection-color: #0b7a6a !important;



  --bbd-menu-accent: #0b7a6a !important;



  --bbd-v5-orange: #0b7a6a !important;



  --bbd-v5-orange-hover: #075f54 !important;



  --bbd-v5-orange-soft: #e9f7f4 !important;



  --bbd-sidebar-background: #0d1519 !important;



  --bbd-color-tool-rail: #0d1519 !important;



}







/* Corporate primary actions: green primary, black secondary. */



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-primary-button,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-primary-button.bbd-premium-save,



.bbd-app.bbd-pro-workspace-v0230-dev69 #bbd-save,



.bbd-app.bbd-pro-workspace-v0230-dev69 [data-bbd-primary-action] {



  border-color: #0b7a6a !important;



  background: linear-gradient(180deg,#108b79 0%,#0b7a6a 100%) !important;



  color: #fff !important;



  box-shadow: 0 8px 18px rgba(11,122,106,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-primary-button:hover:not(:disabled),



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-primary-button.bbd-premium-save:hover:not(:disabled),



.bbd-app.bbd-pro-workspace-v0230-dev69 #bbd-save:hover:not(:disabled) {



  border-color: #075f54 !important;



  background: linear-gradient(180deg,#0d806f 0%,#075f54 100%) !important;



  box-shadow: 0 10px 22px rgba(11,122,106,.23), inset 0 1px 0 rgba(255,255,255,.20) !important;



}







.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-segmented button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-mode-switch button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev69 [role="tab"].is-active,



.bbd-app.bbd-pro-workspace-v0230-dev69 [aria-selected="true"].bbd-chip,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-inline-actions button.is-active {



  border-color: rgba(11,122,106,.48) !important;



  background: #e9f7f4 !important;



  color: #075f54 !important;



}







/* Never render the legacy moving rail indicator. Active state belongs to the button itself. */



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar-active-indicator {



  display: none !important;



  width: 0 !important;



  height: 0 !important;



  opacity: 0 !important;



  pointer-events: none !important;



}







/* One calm nav language: dark ink at rest, Baskibu green when active. */



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] {



  --bbd-v68-accent: #0b7a6a !important;



  --bbd-v68-soft: #e9f7f4 !important;



  color: #475467 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v68-nav-svg,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v69-nav-svg {



  display: block !important;



  width: 24px !important;



  height: 24px !important;



  min-width: 24px !important;



  min-height: 24px !important;



  padding: 0 !important;



  border-radius: 0 !important;



  background: transparent !important;



  color: #344054 !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool.is-active .bbd-v68-nav-svg,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool.is-active .bbd-v69-nav-svg {



  color: #0b7a6a !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v68-palette-svg,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v69-palette-svg {



  width: 27px !important;



  height: 24px !important;



  min-width: 27px !important;



  min-height: 24px !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v68-nav-label,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v69-nav-label {



  color: #475467 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool.is-active .bbd-v68-nav-label,



.bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool.is-active .bbd-v69-nav-label {



  color: #075f54 !important;



  font-weight: 850 !important;



}







/* Desktop rail: black shell + green active accent, no orange. */



@media (min-width:1025px) {



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav {



    background: #0d1519 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] {



    display: flex !important;



    color: #d5dde1 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] .bbd-v69-nav-svg,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] .bbd-v68-nav-svg {



    color: #d5dde1 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] .bbd-v69-nav-label,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] .bbd-v68-nav-label {



    color: #d5dde1 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active {



    background: rgba(11,122,106,.20) !important;



    box-shadow: inset 3px 0 0 #18a68f !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active .bbd-v69-nav-svg,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active .bbd-v68-nav-svg,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active .bbd-v69-nav-label,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active .bbd-v68-nav-label {



    color: #7ce3d2 !important;



  }



}







/* Mobile/tablet: FLEX, not grid. Six items physically own 1/6 each; legacy children cannot create a ghost seventh cell. */



@media (max-width:1024px) {



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav,



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav {



    display: flex !important;



    flex-direction: row !important;



    flex-wrap: nowrap !important;



    align-items: stretch !important;



    justify-content: stretch !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    gap: 0 !important;



    overflow: hidden !important;



    background: #fff !important;



    border-top: 1px solid #e4e9e7 !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav > *:not(.bbd-tool[data-bbd-v69-primary="1"]) {



    display: none !important;



    flex: 0 0 0 !important;



    width: 0 !important;



    min-width: 0 !important;



    max-width: 0 !important;



    padding: 0 !important;



    margin: 0 !important;



    border: 0 !important;



  }







  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"],



  .bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"],



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] {



    position: relative !important;



    inset: auto !important;



    display: flex !important;



    flex: 1 1 0 !important;



    flex-basis: 0 !important;



    width: 16.666666% !important;



    min-width: 0 !important;



    max-width: 16.666666% !important;



    height: 62px !important;



    min-height: 62px !important;



    margin: 0 !important;



    padding: 6px 1px 5px !important;



    border: 0 !important;



    border-radius: 0 !important;



    background: transparent !important;



    box-shadow: none !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 4px !important;



    overflow: hidden !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active {



    background: #e9f7f4 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"].is-active::after {



    content: "" !important;



    position: absolute !important;



    display: block !important;



    left: 50% !important;



    top: 0 !important;



    width: 28px !important;



    height: 3px !important;



    border-radius: 0 0 999px 999px !important;



    background: #0b7a6a !important;



    transform: translateX(-50%) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v69-nav-label,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v68-nav-label {



    display: block !important;



    width: 100% !important;



    margin: 0 !important;



    padding: 0 1px !important;



    font-size: 8.2px !important;



    font-weight: 760 !important;



    line-height: 1.05 !important;



    text-align: center !important;



    white-space: nowrap !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



  }







  /* Slightly roomier sheet. It auto-closes after a committed item/color selection. */



  .bbd-app.bbd-pro-workspace-v0230-dev69 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev69 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    height: min(60dvh, 520px) !important;



    min-height: 390px !important;



    max-height: min(60dvh, 520px) !important;



    border-color: #dce5e2 !important;



    box-shadow: 0 18px 44px rgba(13,21,25,.18) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 #bbd-mobile-sheet-bar {



    border-bottom-color: #e6ecea !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 #bbd-mobile-sheet-close {



    color: #344054 !important;



    background: #f4f7f6 !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev69 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev69 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    height: min(61dvh, 490px) !important;



    min-height: 365px !important;



    max-height: min(61dvh, 490px) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-tool[data-bbd-v69-primary="1"] {



    height: 60px !important;



    min-height: 60px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v69-nav-label,



  .bbd-app.bbd-pro-workspace-v0230-dev69 .bbd-sidebar.bbd-v69-six-nav .bbd-v68-nav-label {



    font-size: 7.6px !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev70.css */
/* Baskibu Designer 0.23.0-dev70 — stable resize owner, six real nav items, white/green corporate navigation */







.bbd-app.bbd-pro-workspace-v0230-dev70 {



  --bbd-accent: #0b7a6a !important;



  --bbd-accent-hover: #075f54 !important;



  --bbd-accent-dark: #075f54 !important;



  --bbd-accent-soft: #e9f7f4 !important;



  --bbd-color-accent: #0b7a6a !important;



  --bbd-color-accent-dark: #075f54 !important;



  --bbd-color-accent-soft: #e9f7f4 !important;



}







/* The portal can never become an invisible click blocker. */



.bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host:not(.is-open) {



  pointer-events: none !important;



}



.bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host {



  display: none !important;



  pointer-events: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host:not(.is-open) > #bbd-panel,



.bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host:not(.is-open) > #bbd-panel[hidden] {



  display: none !important;



  pointer-events: none !important;



}







/* Exactly six actual rail children. Anything legacy parked by JS cannot affect width. */



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav {



  visibility: visible !important;



  opacity: 1 !important;



  pointer-events: auto !important;



  background: #fff !important;



  border-color: #e4e9e7 !important;



  box-shadow: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav > .bbd-sidebar-active-indicator,



.bbd-app.bbd-pro-workspace-v0230-dev70 #bbd-v70-nav-parking {



  display: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



  color: #344054 !important;



  background: #fff !important;



  border: 0 !important;



  box-shadow: none !important;



  opacity: 1 !important;



  visibility: visible !important;



  pointer-events: auto !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]::before,



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]::after {



  display: none !important;



  content: none !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {



  display: block !important;



  flex: 0 0 auto !important;



  width: 23px !important;



  height: 23px !important;



  min-width: 23px !important;



  min-height: 23px !important;



  margin: 0 !important;



  padding: 0 !important;



  color: currentColor !important;



  background: transparent !important;



  overflow: visible !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-palette-svg {



  width: 27px !important;



  height: 24px !important;



  min-width: 27px !important;



  min-height: 24px !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



  display: block !important;



  margin: 0 !important;



  color: inherit !important;



  font-weight: 760 !important;



  text-align: center !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:hover {



  background: #f4f8f7 !important;



  color: #075f54 !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active {



  background: #0b7a6a !important;



  color: #fff !important;



  border-color: #0b7a6a !important;



  box-shadow: 0 7px 18px rgba(11,122,106,.18) !important;



}



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active .bbd-v70-nav-svg,



.bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active .bbd-v70-nav-label {



  color: #fff !important;



}







/* Desktop: white rail, quiet inactive buttons, solid corporate-green selected button. */



@media (min-width:1025px) {



  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav {



    display: flex !important;



    flex-direction: column !important;



    align-items: stretch !important;



    width: 78px !important;



    min-width: 78px !important;



    max-width: 78px !important;



    border-right: 1px solid #e4e9e7 !important;



    border-top: 0 !important;



  }



  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    display: flex !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    width: calc(100% - 12px) !important;



    min-width: 0 !important;



    max-width: none !important;



    min-height: 58px !important;



    margin: 5px 6px !important;



    padding: 7px 3px !important;



    border-radius: 12px !important;



    gap: 4px !important;



  }



  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



    font-size: 10px !important;



    line-height: 1.05 !important;



    white-space: nowrap !important;



  }



}







/* Mobile/tablet: literal six-way flex. No grid, no seventh slot, no moving circle. */



@media (max-width:1024px) {



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav {



    display: flex !important;



    flex-direction: row !important;



    flex-wrap: nowrap !important;



    align-items: stretch !important;



    justify-content: stretch !important;



    width: 100% !important;



    min-width: 0 !important;



    max-width: 100% !important;



    gap: 0 !important;



    overflow: hidden !important;



    border-top: 1px solid #e4e9e7 !important;



    border-right: 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    position: relative !important;



    inset: auto !important;



    display: flex !important;



    flex: 1 1 0 !important;



    flex-basis: 0 !important;



    width: calc(100% / 6) !important;



    min-width: 0 !important;



    max-width: calc(100% / 6) !important;



    height: 62px !important;



    min-height: 62px !important;



    margin: 0 !important;



    padding: 6px 2px 5px !important;



    border-radius: 0 !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 4px !important;



    overflow: hidden !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active {



    border-radius: 12px 12px 0 0 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



    width: 100% !important;



    padding: 0 1px !important;



    font-size: 8.4px !important;



    line-height: 1.05 !important;



    white-space: nowrap !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



  }







  /* Slightly taller because committed selections now close the sheet automatically. */



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    height: min(64dvh, 560px) !important;



    min-height: 425px !important;



    max-height: min(64dvh, 560px) !important;



    background: #fff !important;



    border-color: #dce5e2 !important;



    box-shadow: 0 18px 46px rgba(13,21,25,.17) !important;



    pointer-events: auto !important;



  }







  /* White secondary surfaces; selected sub-tabs use soft green instead of orange. */



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open .bbd-segmented,



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open .bbd-tab-list,



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open [role="tablist"] {



    background: #f7f9f8 !important;



    border-color: #e5ebe9 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open [role="tab"],



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open .bbd-segmented button {



    background: #fff !important;



    color: #475467 !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open [role="tab"].is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open [role="tab"][aria-selected="true"],



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open .bbd-segmented button.is-active {



    background: #e9f7f4 !important;



    color: #075f54 !important;



    border-color: rgba(11,122,106,.35) !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev70 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    height: min(65dvh, 530px) !important;



    min-height: 405px !important;



    max-height: min(65dvh, 530px) !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    height: 60px !important;



    min-height: 60px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



    font-size: 7.8px !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev71.css */
/* Baskibu Designer 0.23.0-dev71 — Mobile Bottom Dock Final



   Floating six-item dock, Baskibu green active state, no legacy moving indicator. */







.bbd-app.bbd-pro-workspace-v0230-dev71 {



  --bbd-v71-green: #0b7a6a;



  --bbd-v71-green-dark: #075f54;



  --bbd-v71-green-soft: #eaf7f3;



  --bbd-v71-ink: #26323a;



  --bbd-v71-muted: #66737a;



  --bbd-v71-line: #e3e9e7;



  --bbd-v71-dock-height: 72px;



  --bbd-v71-dock-gap: 10px;



}







/* Kill every historical moving/orange rail marker. It must never take layout space. */



.bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar-active-indicator,



.bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar > .bbd-sidebar-active-indicator,



.bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav > .bbd-sidebar-active-indicator {



  display: none !important;



  visibility: hidden !important;



  opacity: 0 !important;



  width: 0 !important;



  height: 0 !important;



  min-width: 0 !important;



  min-height: 0 !important;



  margin: 0 !important;



  padding: 0 !important;



  pointer-events: none !important;



  transform: none !important;



}







/* Old pseudo indicators/colored dots are not part of the final dock language. */



.bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]::before,



.bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]::after {



  content: none !important;



  display: none !important;



}







@media (max-width:760px) {



  /* Reserve the dock footprint for the foreground sheet. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 {



    --bbd-v60-nav-height: calc(var(--bbd-v71-dock-height) + 10px) !important;



  }







  /* Reserve enough real layout height so canvas and dock never overlap. */



  .bbd-app.bbd-pro-workspace-v0230-dev71.bbd-shell-v0161 .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev71.bbd-shell-v0161 .bbd-workspace {



    grid-template-rows: minmax(0, 1fr) calc(var(--bbd-v71-dock-height) + 16px) !important;



  }







  /* Floating app-like dock. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav {



    position: absolute !important;



    z-index: 2147483500 !important;



    top: auto !important;



    right: 10px !important;



    bottom: max(8px, env(safe-area-inset-bottom)) !important;



    left: 10px !important;



    width: auto !important;



    min-width: 0 !important;



    max-width: none !important;



    height: var(--bbd-v71-dock-height) !important;



    min-height: var(--bbd-v71-dock-height) !important;



    max-height: var(--bbd-v71-dock-height) !important;



    display: flex !important;



    flex-direction: row !important;



    flex-wrap: nowrap !important;



    align-items: stretch !important;



    justify-content: stretch !important;



    gap: 2px !important;



    padding: 5px !important;



    margin: 0 !important;



    overflow: hidden !important;



    background: rgba(255,255,255,.985) !important;



    border: 1px solid var(--bbd-v71-line) !important;



    border-radius: 18px !important;



    box-shadow:



      0 14px 34px rgba(15,23,42,.13),



      0 3px 10px rgba(15,23,42,.055) !important;



    isolation: isolate !important;



    transform: translateZ(0) !important;



    -webkit-backdrop-filter: none !important;



    backdrop-filter: none !important;



  }







  /* Literal 6 equal buttons. No seventh cell, no width math from old grid rules. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    position: relative !important;



    inset: auto !important;



    display: flex !important;



    flex: 1 1 0 !important;



    flex-basis: 0 !important;



    width: 0 !important;



    min-width: 0 !important;



    max-width: none !important;



    height: 100% !important;



    min-height: 0 !important;



    max-height: none !important;



    margin: 0 !important;



    padding: 6px 1px 5px !important;



    flex-direction: column !important;



    align-items: center !important;



    justify-content: center !important;



    gap: 4px !important;



    overflow: hidden !important;



    background: transparent !important;



    color: var(--bbd-v71-muted) !important;



    border: 1px solid transparent !important;



    border-radius: 13px !important;



    box-shadow: none !important;



    transform: none !important;



    transition:



      background-color .14s ease,



      color .14s ease,



      border-color .14s ease,



      transform .11s ease !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:active {



    transform: scale(.965) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:hover,



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:focus-visible {



    background: #f4f8f7 !important;



    color: var(--bbd-v71-green-dark) !important;



  }







  /* Active is a calm soft-green tile, not a loud solid block. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active {



    background: var(--bbd-v71-green-soft) !important;



    color: var(--bbd-v71-green) !important;



    border-color: rgba(11,122,106,.16) !important;



    border-radius: 13px !important;



    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78) !important;



  }







  /* One icon system: real inline SVGs from dev70, same visual weight. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {



    display: block !important;



    flex: 0 0 auto !important;



    width: 21px !important;



    height: 21px !important;



    min-width: 21px !important;



    min-height: 21px !important;



    margin: 0 !important;



    padding: 0 !important;



    color: currentColor !important;



    stroke: currentColor !important;



    overflow: visible !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-palette-svg {



    width: 23px !important;



    height: 21px !important;



    min-width: 23px !important;



    min-height: 21px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



    display: block !important;



    width: 100% !important;



    min-width: 0 !important;



    margin: 0 !important;



    padding: 0 1px !important;



    color: inherit !important;



    font-size: 9.1px !important;



    font-weight: 730 !important;



    line-height: 1.05 !important;



    letter-spacing: -.05px !important;



    text-align: center !important;



    white-space: nowrap !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



  }







  /* Panel stops cleanly above the floating dock. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev71 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    right: 10px !important;



    left: 10px !important;



    bottom: calc(var(--bbd-v71-dock-height) + 18px + env(safe-area-inset-bottom)) !important;



    border-radius: 18px !important;



    box-shadow: 0 18px 48px rgba(15,23,42,.17) !important;



  }







  /* Make sure hidden/parked nodes can never create phantom nav width. */



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav > *:not(.bbd-tool[data-bbd-v70-primary="1"]) {



    display: none !important;



    position: absolute !important;



    width: 0 !important;



    height: 0 !important;



    min-width: 0 !important;



    min-height: 0 !important;



    margin: 0 !important;



    padding: 0 !important;



    pointer-events: none !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev71 {



    --bbd-v71-dock-height: 68px;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav {



    right: 7px !important;



    left: 7px !important;



    padding: 4px !important;



    gap: 1px !important;



    border-radius: 16px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    padding-inline: 0 !important;



    gap: 3px !important;



    border-radius: 11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {



    width: 20px !important;



    height: 20px !important;



    min-width: 20px !important;



    min-height: 20px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {



    font-size: 8.25px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev71 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev71 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    right: 7px !important;



    left: 7px !important;



    bottom: calc(var(--bbd-v71-dock-height) + 15px + env(safe-area-inset-bottom)) !important;



  }



}







@media (prefers-reduced-motion: reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev71 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {



    transition: none !important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev72.css */
/* Baskibu Designer 0.23.0-dev72 — Mobile dock owner



   A dedicated six-button dock that does not reuse the legacy sidebar buttons. */







.bbd-app.bbd-pro-workspace-v0230-dev72 {



  --bbd-v72-green:#0b7a6a;



  --bbd-v72-green-dark:#075f54;



  --bbd-v72-green-soft:#eaf7f3;



  --bbd-v72-ink:#26323a;



  --bbd-v72-muted:#667085;



  --bbd-v72-line:#dfe7e4;



  --bbd-v72-dock-height:70px;



}







/* Desktop/tablet keep using the canonical sidebar. */



.bbd-app.bbd-pro-workspace-v0230-dev72 > .bbd-v72-mobile-dock {



  display:none;



}







@media (max-width:760px) {



  .bbd-app.bbd-pro-workspace-v0230-dev72 {



    --bbd-v60-nav-height:calc(var(--bbd-v72-dock-height) + 14px) !important;



    position:relative !important;



  }







  /* The old rail is intentionally removed from the mobile layout. This avoids



     every historical grid/flex/active-indicator rule fighting the final dock. */



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-sidebar,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-sidebar {



    display:none !important;



    visibility:hidden !important;



    opacity:0 !important;



    pointer-events:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72.bbd-shell-v0161 .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev72.bbd-shell-v0161 .bbd-workspace {



    grid-template-rows:minmax(0,1fr) calc(var(--bbd-v72-dock-height) + 18px) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 > .bbd-v72-mobile-dock {



    position:absolute !important;



    z-index:2147483550 !important;



    left:8px !important;



    right:8px !important;



    bottom:max(8px,env(safe-area-inset-bottom)) !important;



    height:var(--bbd-v72-dock-height) !important;



    min-height:var(--bbd-v72-dock-height) !important;



    display:grid !important;



    grid-template-columns:repeat(6,minmax(0,1fr)) !important;



    grid-template-rows:1fr !important;



    gap:3px !important;



    align-items:stretch !important;



    padding:5px !important;



    margin:0 !important;



    box-sizing:border-box !important;



    overflow:hidden !important;



    background:#fff !important;



    border:1px solid var(--bbd-v72-line) !important;



    border-radius:18px !important;



    box-shadow:0 14px 34px rgba(15,23,42,.12),0 3px 10px rgba(15,23,42,.05) !important;



    isolation:isolate !important;



    pointer-events:auto !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item {



    appearance:none !important;



    -webkit-appearance:none !important;



    position:relative !important;



    display:flex !important;



    flex-direction:column !important;



    align-items:center !important;



    justify-content:center !important;



    gap:4px !important;



    width:100% !important;



    min-width:0 !important;



    height:100% !important;



    min-height:0 !important;



    margin:0 !important;



    padding:5px 1px 4px !important;



    box-sizing:border-box !important;



    overflow:hidden !important;



    border:1px solid transparent !important;



    border-radius:13px !important;



    background:transparent !important;



    color:var(--bbd-v72-muted) !important;



    box-shadow:none !important;



    cursor:pointer !important;



    touch-action:manipulation !important;



    -webkit-tap-highlight-color:transparent !important;



    transition:background-color .14s ease,color .14s ease,border-color .14s ease,transform .10s ease !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item:hover,



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item:focus-visible {



    background:#f4f8f7 !important;



    color:var(--bbd-v72-green-dark) !important;



    outline:none !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item:active {



    transform:scale(.965) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item[aria-current="page"] {



    background:var(--bbd-v72-green) !important;



    color:#fff !important;



    border-color:var(--bbd-v72-green) !important;



    box-shadow:0 6px 14px rgba(11,122,106,.18) !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-svg {



    display:block !important;



    flex:0 0 auto !important;



    width:20px !important;



    height:20px !important;



    min-width:20px !important;



    min-height:20px !important;



    margin:0 !important;



    padding:0 !important;



    overflow:visible !important;



    color:currentColor !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-svg:not(.bbd-v72-palette-svg) {



    fill:none !important;



    stroke:currentColor !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-palette-svg {



    width:23px !important;



    height:20px !important;



    min-width:23px !important;



    min-height:20px !important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-label {



    display:block !important;



    width:100% !important;



    min-width:0 !important;



    margin:0 !important;



    padding:0 1px !important;



    color:inherit !important;



    font-size:8.9px !important;



    font-weight:760 !important;



    line-height:1.05 !important;



    letter-spacing:-.05px !important;



    text-align:center !important;



    white-space:nowrap !important;



    overflow:hidden !important;



    text-overflow:ellipsis !important;



  }







  /* Keep foreground sheets above the canvas but stop them above the owned dock. */



  .bbd-app.bbd-pro-workspace-v0230-dev72 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev72 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    left:8px !important;



    right:8px !important;



    bottom:calc(var(--bbd-v72-dock-height) + 19px + env(safe-area-inset-bottom)) !important;



    border-radius:18px !important;



  }



}







@media (max-width:390px) {



  .bbd-app.bbd-pro-workspace-v0230-dev72 {



    --bbd-v72-dock-height:67px;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev72 > .bbd-v72-mobile-dock {



    left:6px !important;



    right:6px !important;



    gap:1px !important;



    padding:4px !important;



    border-radius:16px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item {



    gap:3px !important;



    border-radius:11px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-svg {



    width:19px !important;



    height:19px !important;



    min-width:19px !important;



    min-height:19px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-label {



    font-size:8.15px !important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev72 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev72 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden] {



    left:6px !important;



    right:6px !important;



    bottom:calc(var(--bbd-v72-dock-height) + 16px + env(safe-area-inset-bottom)) !important;



  }



}







@media (prefers-reduced-motion:reduce) {



  .bbd-app.bbd-pro-workspace-v0230-dev72 .bbd-v72-dock-item { transition:none !important; }



}





/* BBD CSS: assets/css/editor-0230-dev74.css */
/* Baskibu Designer 0.23.0-dev74



 * Product Engine set/price bridge + corporate navigation/dialog cleanup.



 */







.bbd-pro-workspace-v0230-dev74{



  --bbd-v74-green:#0b7a6a;



  --bbd-v74-green-dark:#08695c;



  --bbd-v74-green-soft:#eaf7f3;



  --bbd-v74-ink:#101828;



  --bbd-v74-line:#d9e3e0;



}







/* Product options: one authoritative Product Engine decision surface. */



.bbd-pro-workspace-v0230-dev74 .bbd-v53-option-group.bbd-v74-option-group{



  border-top:1px solid #e7eceb;



}



.bbd-pro-workspace-v0230-dev74 .bbd-v53-option-group.bbd-v74-option-group:first-child{



  border-top:0;



}



.bbd-pro-workspace-v0230-dev74 .bbd-v53-option-group.bbd-v74-option-group > strong{



  color:#5b6770!important;



  letter-spacing:.055em!important;



}



.bbd-pro-workspace-v0230-dev74 .bbd-v53-option-group.bbd-v74-option-group button.is-selected{



  border-color:var(--bbd-v74-green)!important;



  background:var(--bbd-v74-green-soft)!important;



  color:var(--bbd-v74-green-dark)!important;



  box-shadow:inset 0 0 0 1px rgba(11,122,106,.08)!important;



}







/* Desktop rail: no orange icon sitting inside a green selected tile. */



@media (min-width:1025px){



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool]{



    color:#344054!important;



  }



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active{



    background:var(--bbd-v74-green)!important;



    background-image:none!important;



    color:#fff!important;



    border-color:var(--bbd-v74-green)!important;



    box-shadow:0 8px 18px rgba(11,122,106,.18)!important;



  }



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]),



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]){



    color:#fff!important;



    stroke:#fff!important;



  }



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]) path,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]) rect,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]) circle,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]) line,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active svg:not([class*="palette"]) polyline,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]) path,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]) rect,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]) circle,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]) line,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active svg:not([class*="palette"]) polyline{



    stroke:#fff!important;



  }



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active .bbd-tool__label,



  .bbd-pro-workspace-v0230-dev74 .bbd-sidebar [data-tool].is-active .bbd-tool__label{



    color:#fff!important;



  }



}







/* Confirmation dialogs: solid Baskibu green, no orange/green gradient. */



.bbd-pro-workspace-v0230-dev74 .bbd-dialog__button.is-primary:not(.is-danger),



.bbd-pro-workspace-v0230-dev74 .bbd-confirm-dialog .bbd-dialog__button.is-primary:not(.is-danger){



  background-color:var(--bbd-v74-green)!important;



  background-image:none!important;



  border:1px solid var(--bbd-v74-green)!important;



  color:#fff!important;



  -webkit-text-fill-color:#fff!important;



  box-shadow:0 7px 18px rgba(11,122,106,.20)!important;



}



.bbd-pro-workspace-v0230-dev74 .bbd-dialog__button.is-primary:not(.is-danger):hover,



.bbd-pro-workspace-v0230-dev74 .bbd-confirm-dialog .bbd-dialog__button.is-primary:not(.is-danger):hover{



  background-color:var(--bbd-v74-green-dark)!important;



  background-image:none!important;



  border-color:var(--bbd-v74-green-dark)!important;



}



.bbd-pro-workspace-v0230-dev74 .bbd-dialog__button:not(.is-primary){



  background:#fff!important;



  background-image:none!important;



  color:var(--bbd-v74-ink)!important;



  border-color:#d7dfdd!important;



}







/* High-specificity cleanup for the inherited v68 icon-tile palette. */



@media (min-width:1025px){



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active .bbd-v68-nav-svg:not(.bbd-v68-palette-svg),



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active .bbd-v69-nav-svg:not(.bbd-v69-palette-svg),



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active .bbd-v70-nav-svg:not(.bbd-v70-palette-svg){



    background:transparent!important;



    background-image:none!important;



    color:#fff!important;



    stroke:#fff!important;



    box-shadow:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active .bbd-v68-nav-svg:not(.bbd-v68-palette-svg) *,



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active .bbd-v69-nav-svg:not(.bbd-v69-palette-svg) *,



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar .bbd-tool.is-active .bbd-v70-nav-svg:not(.bbd-v70-palette-svg) *{



    stroke:#fff!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev74 .bbd-sidebar.bbd-v68-six-nav .bbd-tool[data-bbd-v68-primary="1"].is-active::after{



    background:#fff!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev75.css */
/* Baskibu Designer 0.23.0-dev75



 * Mobile product-option focus mode + authoritative Product Engine price state.



 */







.bbd-pro-workspace-v0230-dev75{



  --bbd-v75-green:#0b7a6a;



  --bbd-v75-green-dark:#08695c;



  --bbd-v75-green-soft:#eaf7f3;



  --bbd-v75-line:#dce7e3;



  --bbd-v75-ink:#101828;



}







/* Never flash a stale number while Product Engine is resolving the new choice. */



.bbd-pro-workspace-v0230-dev75 .bbd-commerce-summary.bbd-v75-price-pending .bbd-commerce-summary__price{



  position:relative!important;



}



.bbd-pro-workspace-v0230-dev75 .bbd-commerce-summary.bbd-v75-price-pending [data-bbd-commerce-price]{



  color:transparent!important;



  -webkit-text-fill-color:transparent!important;



  text-shadow:none!important;



  min-width:116px!important;



  user-select:none!important;



}



.bbd-pro-workspace-v0230-dev75 .bbd-commerce-summary.bbd-v75-price-pending .bbd-commerce-summary__price::after{



  content:'Hesaplanıyor…';



  position:absolute;



  right:0;



  top:50%;



  transform:translateY(-50%);



  color:var(--bbd-v75-green-dark);



  font-size:12px;



  font-weight:850;



  letter-spacing:-.01em;



  white-space:nowrap;



}







/* Product options should be a real decision surface, not a tiny viewport. */



@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev75 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev75 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(70dvh,610px)!important;



    min-height:470px!important;



    max-height:min(70dvh,610px)!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel [data-panel-content="product"]{



    padding:9px 10px 12px!important;



  }







  /* When editing product choices, compress repeated summary chrome and give



     the actual choices most of the sheet. */



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus{



    display:grid!important;



    grid-template-columns:minmax(0,1fr) auto!important;



    gap:7px 10px!important;



    padding:10px!important;



    border-radius:14px!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__head,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__head{



    grid-column:1!important;



    min-width:0!important;



    gap:8px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__icon,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__icon{



    width:31px!important;



    height:31px!important;



    border-radius:9px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__head strong,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__head strong{



    font-size:12px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__head span,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__head span{



    font-size:8.8px!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__chips,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__chips{



    grid-column:1!important;



    gap:4px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__chips span,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__chips span{



    padding:4px 7px!important;



    font-size:8px!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__price,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__price{



    grid-column:2!important;



    grid-row:1 / span 2!important;



    min-width:126px!important;



    align-self:center!important;



    padding:0 0 0 10px!important;



    border:0!important;



    border-left:1px solid #e8eeec!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__price > strong,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__price > strong{



    font-size:16px!important;



  }







  /* The preview action duplicates the canvas while options are open. Remove it



     temporarily and keep only a compact close-options action. */



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__actions,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__actions{



    grid-column:1 / -1!important;



    display:block!important;



    margin:0!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__actions .is-primary,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__actions .is-primary{



    display:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__actions .is-secondary,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__actions .is-secondary{



    min-height:34px!important;



    width:100%!important;



    padding:6px 10px!important;



    border-color:#d9e4e1!important;



    background:#f8fbfa!important;



    color:#344054!important;



    font-size:9.5px!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-commerce-summary__hint,



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-commerce-summary__hint{



    display:none!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options,



  .bbd-app.bbd-pro-workspace-v0230-dev75.bbd-v75-product-options-open #bbd-panel .bbd-v53-options{



    grid-column:1 / -1!important;



    width:100%!important;



    max-width:100%!important;



    height:auto!important;



    min-height:245px!important;



    max-height:min(39dvh,340px)!important;



    margin:1px 0 0!important;



    padding:10px!important;



    overflow-y:auto!important;



    overflow-x:hidden!important;



    overscroll-behavior:contain!important;



    border-color:var(--bbd-v75-line)!important;



    border-radius:13px!important;



    background:#fff!important;



    box-shadow:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options__head{



    position:sticky!important;



    top:-10px!important;



    z-index:3!important;



    align-items:center!important;



    margin:0 -2px 8px!important;



    padding:8px 2px 9px!important;



    background:rgba(255,255,255,.97)!important;



    backdrop-filter:blur(7px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options__head strong{



    font-size:10.5px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options__head small{



    margin-top:2px!important;



    font-size:8.2px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options__body{



    display:grid!important;



    gap:13px!important;



    padding-bottom:3px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group{



    padding-top:0!important;



    border-top:0!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group + .bbd-v53-option-group.bbd-v74-option-group{



    padding-top:11px!important;



    border-top:1px solid #e8eeec!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group > strong{



    margin-bottom:8px!important;



    color:#475467!important;



    font-size:9px!important;



    letter-spacing:.055em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group > div{



    display:grid!important;



    grid-template-columns:repeat(3,minmax(0,1fr))!important;



    gap:7px!important;



    width:100%!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group button{



    width:100%!important;



    min-width:0!important;



    min-height:38px!important;



    height:auto!important;



    padding:7px 5px!important;



    border-radius:10px!important;



    font-size:9.2px!important;



    line-height:1.15!important;



    white-space:normal!important;



    text-align:center!important;



    overflow-wrap:anywhere!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group[data-bbd-v74-group="set_type"] > div{



    grid-template-columns:repeat(2,minmax(0,1fr))!important;



  }



}







@media (max-width:390px){



  .bbd-app.bbd-pro-workspace-v0230-dev75 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev75 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(72dvh,580px)!important;



    min-height:455px!important;



    max-height:min(72dvh,580px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-options{



    min-height:235px!important;



    max-height:min(41dvh,325px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev75 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group > div{



    grid-template-columns:repeat(2,minmax(0,1fr))!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev76.css */
/* Baskibu Designer 0.23.0-dev76



 * Compact breakpoint unification + stable Product Engine option surface.



 */







.bbd-app.bbd-pro-workspace-v0230-dev76{



  --bbd-v76-green:#0b7a6a;



  --bbd-v76-green-dark:#075f54;



  --bbd-v76-line:#dfe7e4;



  --bbd-v76-dock-height:70px;



}







/* Product option drawer: one visual owner, no hide/show animation while the



   authoritative Product Engine commits a selection. */



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v53-options,



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v53-options *{



  animation:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v53-options{



  transition:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev76.bbd-v75-product-options-open .bbd-v53-options,



.bbd-app.bbd-pro-workspace-v0230-dev76.bbd-v75-product-options-open .bbd-v53-options[hidden],



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options,



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options[hidden]{



  display:block!important;



  visibility:visible!important;



  opacity:1!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v53-options button.is-pending{



  opacity:.72!important;



  cursor:progress!important;



}







/* The previous 761–1024 layout mixed a side drawer with a bottom navigation.



   dev76 uses one compact model all the way through 1024px: bottom sheet + dock. */



@media (max-width:1024px){



  .bbd-app.bbd-pro-workspace-v0230-dev76{



    --bbd-v60-nav-height:calc(var(--bbd-v76-dock-height) + 14px)!important;



    position:relative!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-sidebar,



  .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-sidebar.bbd-v70-six-nav,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-sidebar,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-sidebar.bbd-v70-six-nav{



    display:none!important;



    visibility:hidden!important;



    opacity:0!important;



    pointer-events:none!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76.bbd-shell-v0161 .bbd-workspace,



  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev76.bbd-shell-v0161 .bbd-workspace{



    grid-template-columns:minmax(0,1fr)!important;



    grid-template-rows:minmax(0,1fr) calc(var(--bbd-v76-dock-height) + 18px)!important;



    min-width:0!important;



  }







  /* Dedicated six-button dock is the only compact navigation. */



  .bbd-app.bbd-pro-workspace-v0230-dev76 > .bbd-v72-mobile-dock{



    position:absolute!important;



    z-index:2147483550!important;



    left:8px!important;



    right:8px!important;



    bottom:max(8px,env(safe-area-inset-bottom))!important;



    height:var(--bbd-v76-dock-height)!important;



    min-height:var(--bbd-v76-dock-height)!important;



    display:grid!important;



    grid-template-columns:repeat(6,minmax(0,1fr))!important;



    grid-template-rows:1fr!important;



    gap:3px!important;



    align-items:stretch!important;



    padding:5px!important;



    margin:0!important;



    box-sizing:border-box!important;



    overflow:hidden!important;



    background:#fff!important;



    border:1px solid var(--bbd-v76-line)!important;



    border-radius:18px!important;



    box-shadow:0 14px 34px rgba(15,23,42,.12),0 3px 10px rgba(15,23,42,.05)!important;



    isolation:isolate!important;



    pointer-events:auto!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev76 > .bbd-v72-mobile-dock[hidden]{



    display:grid!important;



  }







  /* Override the old tablet side-drawer geometry. */



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    position:absolute!important;



    z-index:2!important;



    top:auto!important;



    left:8px!important;



    right:8px!important;



    bottom:calc(var(--bbd-v76-dock-height) + 19px + env(safe-area-inset-bottom))!important;



    width:auto!important;



    min-width:0!important;



    max-width:none!important;



    height:min(64dvh,590px)!important;



    min-height:min(430px,64dvh)!important;



    max-height:min(64dvh,590px)!important;



    display:flex!important;



    flex-direction:column!important;



    visibility:visible!important;



    opacity:1!important;



    transform:translate3d(0,0,0)!important;



    pointer-events:auto!important;



    margin:0!important;



    padding:0!important;



    overflow:hidden!important;



    border:1px solid #d9e2df!important;



    border-radius:18px!important;



    background:#fff!important;



    box-shadow:0 -14px 42px rgba(15,23,42,.16)!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar{



    min-height:44px!important;



    height:44px!important;



    flex:0 0 44px!important;



    display:grid!important;



    grid-template-columns:30px minmax(0,1fr) 30px!important;



    align-items:center!important;



    padding:6px 8px!important;



    background:#fff!important;



    border-bottom:1px solid #edf0f3!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    width:100%!important;



    min-width:0!important;



    max-width:100%!important;



    min-height:0!important;



    flex:1 1 auto!important;



    padding:10px 12px 15px!important;



    margin:0!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior:contain!important;



    box-sizing:border-box!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section[hidden],



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-edge-toggle{



    display:none!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76.is-v60-sheet-open .bbd-context-route-toolbar,



  .bbd-app.bbd-pro-workspace-v0230-dev76.is-v60-sheet-open .bbd-object-toolbar{



    display:none!important;



  }







  /* Options get the stable middle of the sheet rather than a nested tiny box. */



  .bbd-app.bbd-pro-workspace-v0230-dev76.bbd-v75-product-options-open #bbd-panel .bbd-v53-options,



  .bbd-app.bbd-pro-workspace-v0230-dev76 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options{



    min-height:280px!important;



    max-height:min(43dvh,390px)!important;



    flex:1 1 auto!important;



  }



}







@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(72dvh,620px)!important;



    min-height:min(465px,72dvh)!important;



    max-height:min(72dvh,620px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev76.bbd-v75-product-options-open #bbd-panel .bbd-v53-options,



  .bbd-app.bbd-pro-workspace-v0230-dev76 #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options{



    min-height:270px!important;



    max-height:min(45dvh,400px)!important;



  }



}







@media (max-width:390px){



  .bbd-app.bbd-pro-workspace-v0230-dev76{--bbd-v76-dock-height:67px;}



  .bbd-app.bbd-pro-workspace-v0230-dev76 > .bbd-v72-mobile-dock{



    left:6px!important;



    right:6px!important;



    gap:1px!important;



    padding:4px!important;



    border-radius:16px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev76 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    left:6px!important;



    right:6px!important;



    bottom:calc(var(--bbd-v76-dock-height) + 16px + env(safe-area-inset-bottom))!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev77.css */
/* Baskibu Designer 0.23.0-dev77



 * Stable Product Engine option surface. No blank/rebuild flash between states.



 */







.bbd-app.bbd-pro-workspace-v0230-dev77{



  --bbd-v77-green:#0b7a6a;



  --bbd-v77-green-soft:#eaf7f3;



  --bbd-v77-line:#dce7e3;



}







/* Panel switching is a visibility change, not an animation. */



.bbd-app.bbd-pro-workspace-v0230-dev77 #bbd-panel,



.bbd-app.bbd-pro-workspace-v0230-dev77 #bbd-panel .bbd-panel-section,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-commerce-summary,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-options,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-options__body,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group button{



  animation:none!important;



  transition:none!important;



}







/* Keep the options box geometrically stable while Product Engine commits. */



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-options__body{



  min-height:152px!important;



  contain:layout style!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group{



  min-width:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group > div{



  min-height:38px!important;



}







/* No fade-to-58% pending state. The selected surface remains readable while



   the authoritative quote is calculated. */



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group button.is-pending,



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-options button.is-pending{



  opacity:1!important;



  color:#08745f!important;



  border-color:var(--bbd-v77-green)!important;



  background:var(--bbd-v77-green-soft)!important;



  box-shadow:inset 0 0 0 1px rgba(11,122,106,.08)!important;



  cursor:progress!important;



}







.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group button.is-selected{



  opacity:1!important;



  border-color:var(--bbd-v77-green)!important;



  background:var(--bbd-v77-green-soft)!important;



  color:#08745f!important;



  transform:none!important;



}







/* Price state must not resize the summary while switching from a number to



   "Hesaplanıyor…" and back. */



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-commerce-summary__price{



  min-height:42px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-commerce-summary__price [data-bbd-commerce-price]{



  min-height:20px!important;



  line-height:20px!important;



}







/* The old v51 switch class may still be toggled by inherited code; neutralize



   any visual side effects completely. */



.bbd-app.bbd-pro-workspace-v0230-dev77.bbd-v51-panel-switch #bbd-panel,



.bbd-app.bbd-pro-workspace-v0230-dev77.bbd-v51-panel-switch #bbd-panel .bbd-panel-section:not([hidden]){



  opacity:1!important;



  transform:none!important;



  filter:none!important;



  animation:none!important;



  transition:none!important;



}







@media (max-width:1024px){



  .bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-options__body{



    min-height:210px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev77 .bbd-v53-option-group button{



    will-change:auto!important;



    backface-visibility:visible!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev78.css */
/* Baskibu Designer 0.23.0-dev78



 * One authoritative Product Engine option click + first-paint stable drawer.



 */



.bbd-app.bbd-pro-workspace-v0230-dev78{



  --bbd-v78-green:#0b7a6a;



  --bbd-v78-green-soft:#eaf7f3;



}







.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-options,



.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-options__body,



.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-option-group,



.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-option-group button{



  animation:none!important;



  transition:none!important;



}







/* A pending local tap keeps full contrast until Product Engine confirms it. */



.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-option-group button.is-pending{



  opacity:1!important;



  border-color:var(--bbd-v78-green)!important;



  background:var(--bbd-v78-green-soft)!important;



  color:#08745f!important;



  box-shadow:inset 0 0 0 1px rgba(11,122,106,.08)!important;



}







/* Never use skeleton/fade styling on the canonical option body. */



.bbd-app.bbd-pro-workspace-v0230-dev78 .bbd-v53-options__body[data-bbd-v74-structure]{



  opacity:1!important;



  visibility:visible!important;



  filter:none!important;



}





/* BBD CSS: assets/css/editor-0230-dev79.css */
/* Baskibu Designer 0.23.0-dev79



 * Mobile UI Readability System — iOS-inspired hierarchy, Baskibu identity.



 * Presentation only: no editor state, canvas or Product Engine behavior changes.



 */







.bbd-app.bbd-pro-workspace-v0230-dev79{



  --bbd-v79-green:#0b7a6a;



  --bbd-v79-green-dark:#075f54;



  --bbd-v79-green-soft:#eaf7f3;



  --bbd-v79-green-softer:#f3faf8;



  --bbd-v79-ink:#101828;



  --bbd-v79-copy:#344054;



  --bbd-v79-muted:#667085;



  --bbd-v79-faint:#98a2b3;



  --bbd-v79-line:#dce4e8;



  --bbd-v79-line-soft:#edf1f3;



  --bbd-v79-grouped:#f2f4f7;



  --bbd-v79-surface:#ffffff;



  --bbd-v79-danger:#d92d20;



  --bbd-v79-shadow:0 18px 48px rgba(15,23,42,.16),0 4px 14px rgba(15,23,42,.06);



  --bbd-accent:var(--bbd-v79-green)!important;



  --bbd-accent-dark:var(--bbd-v79-green-dark)!important;



  --bbd-accent-soft:var(--bbd-v79-green-soft)!important;



  --bbd-color-accent:var(--bbd-v79-green)!important;



  --bbd-color-accent-hover:var(--bbd-v79-green-dark)!important;



  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;



  -webkit-font-smoothing:antialiased;



  text-rendering:optimizeLegibility;



}







/* Keep the whole editor on one Baskibu accent language. */



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-primary-button,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-save,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-pro-action-button.is-primary,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__actions .is-primary{



  background:var(--bbd-v79-green)!important;



  border-color:var(--bbd-v79-green)!important;



  color:#fff!important;



  background-image:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-primary-button:hover,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-save:hover,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-pro-action-button.is-primary:hover,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__actions .is-primary:hover{



  background:var(--bbd-v79-green-dark)!important;



  border-color:var(--bbd-v79-green-dark)!important;



}







/* Remove inherited orange emphasis from the most-used selection surfaces. */



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button:hover,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-segmented button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-tab-list button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-scroll-tabs button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-background-mode-tabs button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-category-chip-row button.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-chip.is-active,



.bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-preset-chip.is-active{



  border-color:var(--bbd-v79-green)!important;



  background:var(--bbd-v79-green-soft)!important;



  color:var(--bbd-v79-green-dark)!important;



  box-shadow:0 0 0 1px rgba(11,122,106,.08)!important;



}







@media (max-width:1024px){



  .bbd-app.bbd-pro-workspace-v0230-dev79{



    --bbd-v76-dock-height:78px!important;



    --bbd-v72-dock-height:78px!important;



    --bbd-v60-nav-height:96px!important;



  }







  /* Stable compact sheet: more working room, calmer iOS-like chrome. */



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel[hidden]{



    left:10px!important;



    right:10px!important;



    bottom:calc(88px + env(safe-area-inset-bottom))!important;



    height:min(76dvh,700px)!important;



    min-height:min(500px,76dvh)!important;



    max-height:min(76dvh,700px)!important;



    border:1px solid rgba(208,217,222,.92)!important;



    border-radius:24px!important;



    background:rgba(255,255,255,.985)!important;



    box-shadow:var(--bbd-v79-shadow)!important;



    backdrop-filter:saturate(120%) blur(16px)!important;



    -webkit-backdrop-filter:saturate(120%) blur(16px)!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel>.bbd-mobile-sheet-bar{



    min-height:56px!important;



    height:56px!important;



    flex:0 0 56px!important;



    grid-template-columns:40px minmax(0,1fr) 40px!important;



    padding:8px 10px!important;



    border-bottom:1px solid var(--bbd-v79-line-soft)!important;



    background:rgba(255,255,255,.98)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mobile-sheet-grip{



    width:38px!important;



    height:5px!important;



    border-radius:999px!important;



    background:#cbd5dc!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mobile-sheet-title{



    color:var(--bbd-v79-ink)!important;



    font-size:17px!important;



    line-height:1.2!important;



    font-weight:750!important;



    letter-spacing:-.025em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mobile-sheet-bar button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__close{



    width:38px!important;



    min-width:38px!important;



    height:38px!important;



    min-height:38px!important;



    border:0!important;



    border-radius:12px!important;



    background:#f2f4f7!important;



    color:#5b6878!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel>.bbd-panel-section:not([hidden]){



    gap:14px!important;



    padding:16px 16px 22px!important;



    scrollbar-gutter:stable!important;



  }







  /* Navigation dock: real readable labels and consistent 44px+ touch zones. */



  .bbd-app.bbd-pro-workspace-v0230-dev79>.bbd-v72-mobile-dock{



    left:10px!important;



    right:10px!important;



    bottom:max(8px,env(safe-area-inset-bottom))!important;



    height:78px!important;



    min-height:78px!important;



    gap:3px!important;



    padding:6px!important;



    border:1px solid rgba(216,225,229,.96)!important;



    border-radius:22px!important;



    background:rgba(255,255,255,.98)!important;



    box-shadow:0 16px 40px rgba(15,23,42,.13),0 3px 10px rgba(15,23,42,.04)!important;



    backdrop-filter:blur(18px) saturate(130%)!important;



    -webkit-backdrop-filter:blur(18px) saturate(130%)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item{



    min-height:62px!important;



    gap:5px!important;



    padding:7px 2px 6px!important;



    border-radius:16px!important;



    font-family:inherit!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item[aria-current="page"]{



    background:var(--bbd-v79-green)!important;



    border-color:var(--bbd-v79-green)!important;



    color:#fff!important;



    box-shadow:0 7px 18px rgba(11,122,106,.19)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-svg{



    width:23px!important;



    height:23px!important;



    min-width:23px!important;



    min-height:23px!important;



    stroke-width:1.8!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-palette-svg{



    width:25px!important;



    height:23px!important;



    min-width:25px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-label{



    font-size:11px!important;



    font-weight:650!important;



    line-height:1.08!important;



    letter-spacing:-.015em!important;



    overflow:visible!important;



    text-overflow:clip!important;



  }







  /* Top bar: compact but no micro-copy. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-topbar{



    min-height:62px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mode-switch button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-topbar__surface button{



    min-height:40px!important;



    padding:0 13px!important;



    font-size:12px!important;



    font-weight:700!important;



    letter-spacing:-.01em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-save{



    min-height:44px!important;



    padding-inline:15px!important;



    border-radius:13px!important;



    font-size:13px!important;



    font-weight:750!important;



  }







  /* Global panel typography hierarchy. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-panel-heading h2,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-panel-heading h3,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-product-personalizer__heading,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type-gallery-head h3,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-heading strong{



    color:var(--bbd-v79-ink)!important;



    font-size:18px!important;



    line-height:1.2!important;



    font-weight:750!important;



    letter-spacing:-.025em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-panel-subtitle,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-panel-intro,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-pro-panel-intro,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-help,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-help{



    color:var(--bbd-v79-muted)!important;



    font-size:14px!important;



    line-height:1.45!important;



    font-weight:450!important;



  }







  /* Grouped info notes — iOS Settings-like information surface. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-note,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-product-preflight,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-ai-result,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-menu-status-card{



    padding:14px 15px!important;



    border:0!important;



    border-radius:14px!important;



    background:#f2f4f7!important;



    box-shadow:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-note strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-product-preflight strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-ai-result strong{



    color:var(--bbd-v79-ink)!important;



    font-size:16px!important;



    line-height:1.22!important;



    font-weight:720!important;



    letter-spacing:-.018em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-note span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-product-preflight span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-ai-result span{



    margin-top:3px!important;



    color:var(--bbd-v79-muted)!important;



    font-size:14px!important;



    line-height:1.4!important;



    font-weight:450!important;



  }







  /* Crop / placement: the exact screen that exposed the readability problem. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid{



    grid-template-columns:1fr!important;



    gap:10px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button{



    min-height:78px!important;



    grid-template-columns:30px minmax(0,1fr)!important;



    align-items:center!important;



    gap:12px!important;



    padding:13px 14px!important;



    border:1px solid #d9e0e5!important;



    border-radius:16px!important;



    background:#fff!important;



    color:#536171!important;



    box-shadow:0 1px 2px rgba(15,23,42,.02)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button svg{



    width:24px!important;



    height:24px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button span{



    gap:3px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button strong{



    color:var(--bbd-v79-ink)!important;



    font-size:16px!important;



    line-height:1.2!important;



    font-weight:700!important;



    letter-spacing:-.018em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button small{



    color:var(--bbd-v79-muted)!important;



    font-size:13.5px!important;



    line-height:1.35!important;



    font-weight:500!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-image-placement-grid>button.is-active{



    border-color:var(--bbd-v79-green)!important;



    background:var(--bbd-v79-green-soft)!important;



    color:var(--bbd-v79-green)!important;



    box-shadow:0 0 0 1px rgba(11,122,106,.09)!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-action-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-text-action-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-pro-action-button{



    min-height:48px!important;



    border-radius:14px!important;



    font-size:14px!important;



    font-weight:650!important;



    line-height:1.2!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-action-card--icon{



    gap:10px!important;



    padding:11px 14px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-action-card--icon svg{



    width:22px!important;



    height:22px!important;



  }







  /* Inputs, search, select and segmented controls. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-search-field,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-field input:not([type="range"]):not([type="color"]),



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-field select,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-field textarea,



  .bbd-app.bbd-pro-workspace-v0230-dev79 input[type="search"]{



    min-height:44px!important;



    border:1px solid #d7dfe5!important;



    border-radius:12px!important;



    background:#fff!important;



    color:var(--bbd-v79-ink)!important;



    font-size:14px!important;



    line-height:1.25!important;



    font-family:inherit!important;



    box-shadow:0 1px 2px rgba(15,23,42,.02)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-field label,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-color-popover__title,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-menu-heading-meta{



    color:var(--bbd-v79-copy)!important;



    font-size:13px!important;



    line-height:1.3!important;



    font-weight:650!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-segmented,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-tab-list,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-scroll-tabs,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-background-mode-tabs,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mobile-sheet-tabs{



    min-height:44px!important;



    gap:5px!important;



    padding:4px!important;



    border:1px solid #e0e6ea!important;



    border-radius:13px!important;



    background:#f4f6f8!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-segmented button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-tab-list button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-scroll-tabs button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-background-mode-tabs button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mobile-sheet-tabs button{



    min-height:36px!important;



    padding:7px 10px!important;



    border-radius:10px!important;



    font-size:12.5px!important;



    font-weight:620!important;



    line-height:1.15!important;



    white-space:nowrap!important;



  }







  /* Chips: readable without consuming the whole panel. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-chip,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-preset-chip,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-graphic-category-chip,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-category-chip-row button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-surface-chip-row button{



    min-height:34px!important;



    padding:7px 11px!important;



    border-radius:999px!important;



    font-size:12px!important;



    font-weight:620!important;



    line-height:1.1!important;



  }







  /* Template / graphic / font cards. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-template-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-graphic-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-component-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-grid{



    gap:10px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-template-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-clipart-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-component-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-font-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-card{



    border-color:#dfe6ea!important;



    border-radius:16px!important;



    background:#fff!important;



    box-shadow:0 1px 2px rgba(15,23,42,.025)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-template-card strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-clipart-card strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-component-card strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-font-card strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-card strong{



    color:var(--bbd-v79-ink)!important;



    font-size:13.5px!important;



    line-height:1.25!important;



    font-weight:680!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-template-card small,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-clipart-card small,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-component-card small,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-font-card small,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-card small,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-meta{



    color:var(--bbd-v79-muted)!important;



    font-size:11.5px!important;



    line-height:1.35!important;



  }







  /* Upload area: keep labels and actions readable. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-card,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-dropzone,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-upload-card{



    min-height:96px!important;



    padding:14px!important;



    border-radius:16px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-card strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-dropzone strong,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-upload-card strong{



    font-size:14px!important;



    line-height:1.25!important;



    font-weight:700!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-card span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-upload-dropzone span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-premium-upload-card span{



    font-size:12px!important;



    line-height:1.4!important;



  }







  /* Layers become a calm Settings-style list instead of nested boxes. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-list{



    gap:7px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-row{



    min-height:58px!important;



    padding:8px 9px!important;



    border:1px solid #e0e6ea!important;



    border-radius:13px!important;



    background:#fff!important;



    box-shadow:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-name,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-text{



    color:var(--bbd-v79-ink)!important;



    font-size:13.5px!important;



    line-height:1.2!important;



    font-weight:650!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-meta,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-kind{



    color:var(--bbd-v79-muted)!important;



    font-size:11px!important;



    line-height:1.25!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-layer-row button{



    min-width:34px!important;



    min-height:34px!important;



    border-radius:10px!important;



  }







  /* Product editor and Product Engine option surface: no micro typography. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary{



    border-color:#dce5e8!important;



    border-radius:17px!important;



    background:#fff!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__head strong{



    color:var(--bbd-v79-ink)!important;



    font-size:14px!important;



    line-height:1.2!important;



    font-weight:720!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__head span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__hint{



    color:var(--bbd-v79-muted)!important;



    font-size:11.5px!important;



    line-height:1.35!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__chips span{



    min-height:28px!important;



    padding:6px 9px!important;



    border-radius:999px!important;



    font-size:11px!important;



    font-weight:620!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__price>span,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__price small{



    font-size:11px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__price>strong{



    color:var(--bbd-v79-ink)!important;



    font-size:19px!important;



    font-weight:780!important;



    letter-spacing:-.03em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-commerce-summary__actions button{



    min-height:44px!important;



    border-radius:12px!important;



    font-size:13px!important;



    font-weight:680!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev79 #bbd-panel .bbd-v53-options{



    border-color:#dce5e8!important;



    border-radius:16px!important;



    padding:12px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 #bbd-panel .bbd-v53-options__head strong{



    color:var(--bbd-v79-ink)!important;



    font-size:14px!important;



    line-height:1.2!important;



    font-weight:720!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 #bbd-panel .bbd-v53-options__head small{



    color:var(--bbd-v79-muted)!important;



    font-size:11px!important;



    line-height:1.3!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group>strong{



    color:#475467!important;



    font-size:11.5px!important;



    line-height:1.2!important;



    font-weight:720!important;



    letter-spacing:.045em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 #bbd-panel .bbd-v53-option-group.bbd-v74-option-group button{



    min-height:44px!important;



    padding:9px 7px!important;



    border-radius:12px!important;



    font-size:11.5px!important;



    line-height:1.18!important;



    font-weight:650!important;



  }







  /* Background swatches and palette labels. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-bg-preset-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-mega-palette-grid{



    gap:10px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-bg-swatch{



    min-height:74px!important;



    border-radius:13px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-background-selection,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-background-color-field{



    border-radius:14px!important;



  }







  /* Dialogs / confirms follow the same readable hierarchy. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__panel,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-confirm-dialog{



    border-radius:22px!important;



    border-color:#dce4e8!important;



    box-shadow:0 24px 70px rgba(15,23,42,.22)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__content h2,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__content h3,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-confirm-dialog h2,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-confirm-dialog h3{



    color:var(--bbd-v79-ink)!important;



    font-size:20px!important;



    line-height:1.2!important;



    font-weight:760!important;



    letter-spacing:-.03em!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__content p,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__note,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-confirm-dialog p{



    color:var(--bbd-v79-muted)!important;



    font-size:14px!important;



    line-height:1.45!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-dialog__actions button,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-confirm-dialog button{



    min-height:46px!important;



    border-radius:12px!important;



    font-size:14px!important;



    font-weight:680!important;



  }







  /* Toasts should be readable but not noisy. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-toast{



    min-height:40px!important;



    padding:10px 13px!important;



    border-radius:12px!important;



    font-size:12.5px!important;



    line-height:1.3!important;



    font-weight:600!important;



  }



}







@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel[hidden]{



    left:8px!important;



    right:8px!important;



    bottom:calc(88px + env(safe-area-inset-bottom))!important;



    height:min(79dvh,720px)!important;



    min-height:min(520px,79dvh)!important;



    max-height:min(79dvh,720px)!important;



  }







  /* Phone templates: keep two columns, but let card titles breathe. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-template-grid,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-type48-grid{



    grid-template-columns:repeat(2,minmax(0,1fr))!important;



  }







  /* Main contextual sheets use the same typography even if rendered by the



     legacy context host rather than the main mobile panel. */



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-panel-body{



    gap:12px!important;



    padding:14px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-heading,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-context-route-toolbar{



    font-family:inherit!important;



  }



}







@media (max-width:390px){



  .bbd-app.bbd-pro-workspace-v0230-dev79{



    --bbd-v76-dock-height:76px!important;



    --bbd-v72-dock-height:76px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79>.bbd-v72-mobile-dock{



    left:6px!important;



    right:6px!important;



    height:76px!important;



    min-height:76px!important;



    padding:5px 4px!important;



    border-radius:20px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item{



    min-height:64px!important;



    gap:4px!important;



    border-radius:15px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-label{



    font-size:10.4px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-svg{



    width:22px!important;



    height:22px!important;



    min-width:22px!important;



    min-height:22px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel[hidden]{



    left:6px!important;



    right:6px!important;



    bottom:calc(85px + env(safe-area-inset-bottom))!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev79>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel>.bbd-panel-section:not([hidden]){



    padding:14px 13px 20px!important;



  }



}







@media (prefers-reduced-motion:reduce){



  .bbd-app.bbd-pro-workspace-v0230-dev79 *,



  .bbd-app.bbd-pro-workspace-v0230-dev79 *::before,



  .bbd-app.bbd-pro-workspace-v0230-dev79 *::after{



    scroll-behavior:auto!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev80.css */
/* Baskibu Designer 0.23.0-dev80



 * Final mobile polish: authoritative price surface, simple uploader, stable



 * product options and iOS-inspired Baskibu visual hierarchy.



 */



.bbd-app.bbd-pro-workspace-v0230-dev80{



  --bbd-v80-green:#0b7a6a;



  --bbd-v80-green-dark:#075f54;



  --bbd-v80-green-soft:#eaf7f3;



  --bbd-v80-ink:#101828;



  --bbd-v80-copy:#344054;



  --bbd-v80-muted:#667085;



  --bbd-v80-line:#dce4e8;



  --bbd-v80-soft:#f5f7f8;



}







/* Final price owner: never show a stale old number as if it belongs to the new choice. */



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-commerce-summary.bbd-v80-price-pending [data-bbd-commerce-price]{



  color:#667085!important;



  font-size:14px!important;



  font-weight:700!important;



  letter-spacing:-.01em!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-commerce-summary.bbd-v80-price-pending [data-bbd-commerce-price]::before{



  content:'';



  display:inline-block;



  width:13px;height:13px;



  margin-right:7px;



  vertical-align:-2px;



  border:2px solid #cbd5dc;



  border-top-color:var(--bbd-v80-green);



  border-radius:50%;



  animation:bbd-v80-spin .7s linear infinite;



}



@keyframes bbd-v80-spin{to{transform:rotate(360deg)}}







/* Stable canonical Product Engine options. */



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group>div{



  display:grid!important;



  grid-template-columns:repeat(3,minmax(0,1fr))!important;



  gap:8px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group[data-bbd-v80-group="set_type"]>div,



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group[data-bbd-v80-group="material"]>div,



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group[data-bbd-v80-group="fabric"]>div{



  grid-template-columns:repeat(2,minmax(0,1fr))!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group button.is-selected{



  border-color:var(--bbd-v80-green)!important;



  background:var(--bbd-v80-green-soft)!important;



  color:var(--bbd-v80-green-dark)!important;



  box-shadow:inset 0 0 0 1px rgba(11,122,106,.05)!important;



}







/* Upload is an upload tool again: one primary action, no overlapping tab ribbon. */



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel>.bbd-upload-tabs,



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel>.bbd-ai-intake,



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel>.bbd-upload-library{



  display:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader{



  position:relative!important;



  z-index:1!important;



  display:grid!important;



  grid-template-columns:42px minmax(0,1fr) auto!important;



  grid-template-rows:auto!important;



  align-items:center!important;



  gap:12px!important;



  width:100%!important;



  min-height:78px!important;



  height:auto!important;



  padding:12px 13px!important;



  margin:0!important;



  border:1px solid #d8e2e5!important;



  border-radius:16px!important;



  background:#fff!important;



  box-shadow:none!important;



  cursor:pointer!important;



  overflow:hidden!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-icon{



  width:42px!important;height:42px!important;



  display:grid!important;place-items:center!important;



  border-radius:13px!important;



  background:var(--bbd-v80-green-soft)!important;



  color:var(--bbd-v80-green)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-icon svg{width:22px!important;height:22px!important;display:block!important}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-copy{



  min-width:0!important;



  display:flex!important;



  flex-direction:column!important;



  align-items:flex-start!important;



  gap:3px!important;



  text-align:left!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-copy strong{



  color:var(--bbd-v80-ink)!important;



  font-size:15px!important;



  line-height:1.2!important;



  font-weight:750!important;



  letter-spacing:-.02em!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-copy small{



  color:var(--bbd-v80-muted)!important;



  font-size:12px!important;



  line-height:1.35!important;



  font-weight:500!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader>em{



  min-height:40px!important;



  display:inline-flex!important;



  align-items:center!important;



  justify-content:center!important;



  padding:0 14px!important;



  border-radius:11px!important;



  background:var(--bbd-v80-green)!important;



  color:#fff!important;



  font-size:12.5px!important;



  line-height:1!important;



  font-weight:750!important;



  font-style:normal!important;



  white-space:nowrap!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader:hover>em{background:var(--bbd-v80-green-dark)!important}







/* Separate the asset library from upload so the panel reads in clear blocks. */



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-v51-assets{



  margin-top:4px!important;



  padding-top:16px!important;



  border-top:1px solid #edf1f3!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-v51-assets__head{



  margin-bottom:10px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-v51-assets__head strong{



  font-size:17px!important;



  line-height:1.2!important;



  color:var(--bbd-v80-ink)!important;



  font-weight:760!important;



  letter-spacing:-.025em!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-v51-assets__head small{



  font-size:12.5px!important;



  color:var(--bbd-v80-muted)!important;



}







@media (max-width:1024px){



  /* A little more actual working room without covering the bottom dock. */



  .bbd-app.bbd-pro-workspace-v0230-dev80>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev80>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel[hidden]{



    height:min(82dvh,760px)!important;



    max-height:min(82dvh,760px)!important;



    min-height:min(540px,82dvh)!important;



  }







  /* Sheet header always owns its row; content starts below it. */



  .bbd-app.bbd-pro-workspace-v0230-dev80>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel>.bbd-mobile-sheet-bar{



    position:relative!important;



    z-index:30!important;



    background:#fff!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80>#bbd-v60-mobile-sheet-host.is-open>#bbd-panel>.bbd-panel-section:not([hidden]){



    position:relative!important;



    z-index:1!important;



    padding-top:14px!important;



    overflow-x:hidden!important;



  }







  /* The sheet title already says Görsel yükle; avoid a duplicate title inside. */



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel > h2{



    display:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel{



    gap:14px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader{



    grid-template-columns:40px minmax(0,1fr) auto!important;



    min-height:76px!important;



    padding:11px 12px!important;



    gap:10px!important;



  }







  /* Asset filters stay below the upload control and never float over it. */



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-scroll-tabs,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-category-chip-row,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-image-panel .bbd-v51-assets__filters{



    position:static!important;



    top:auto!important;



    z-index:auto!important;



  }







  /* Mobile option editor: readable, stable and never nested into a tiny window. */



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v53-options{



    max-height:none!important;



    min-height:0!important;



    overflow:visible!important;



    padding:12px!important;



    background:#fff!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v53-options__body{



    max-height:none!important;



    overflow:visible!important;



    scrollbar-gutter:auto!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v80-option-group{



    padding:10px 0!important;



    border-top:1px solid #edf1f3!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v80-option-group:first-child{border-top:0!important;padding-top:2px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v80-option-group>strong{



    margin-bottom:8px!important;



    font-size:12px!important;



    color:#475467!important;



    letter-spacing:.05em!important;



    text-transform:uppercase!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 #bbd-panel .bbd-v80-option-group button{



    min-height:46px!important;



    font-size:12px!important;



    font-weight:680!important;



  }







  /* Final micro polish across mobile panels. */



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-search-field input,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-field input,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-field select,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-field textarea{



    min-height:44px!important;



    border-radius:12px!important;



    font-size:14px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-panel-section button,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-panel-section [role="button"]{



    -webkit-tap-highlight-color:transparent!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-dialog__panel,



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-confirm-dialog{



    border-radius:24px!important;



  }



}







@media (max-width:480px){



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-option-group>div{



    grid-template-columns:repeat(2,minmax(0,1fr))!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader{



    grid-template-columns:38px minmax(0,1fr) auto!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-copy strong{font-size:14.5px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-upload-copy small{font-size:11.5px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-v80-uploader>em{padding-inline:11px!important;font-size:12px!important}



}







@media (prefers-reduced-motion:reduce){



  .bbd-app.bbd-pro-workspace-v0230-dev80 .bbd-commerce-summary.bbd-v80-price-pending [data-bbd-commerce-price]::before{animation:none!important}



}





/* BBD CSS: assets/css/editor-0230-dev83.css */
/* Baskibu Designer 0.23.0-dev83


   Mobile quote owner + pro upload surface */





.bbd-app.bbd-pro-workspace-v0230-dev83{


  --bbd-v81-green:#0f8f79;


  --bbd-v81-green-dark:#0b7967;


  --bbd-v81-border:#d9e4e1;


  --bbd-v81-muted:#64748b;


  --bbd-v81-bg:#f6faf9;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-commerce-summary.bbd-v81-price-pending [data-bbd-commerce-price]{


  opacity:1!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 [data-bbd-v53-options-body].bbd-v81-options-host{


  padding:0!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-options-shell{


  display:flex!important;


  flex-direction:column!important;


  gap:16px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group{


  border-top:1px solid var(--bbd-v81-border)!important;


  padding-top:16px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group:first-child{


  border-top:0!important;


  padding-top:2px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group__head{


  margin-bottom:10px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group__head strong{


  font-size:13px!important;


  font-weight:800!important;


  letter-spacing:.11em!important;


  text-transform:uppercase!important;


  color:#475569!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group__grid{


  display:grid!important;


  grid-template-columns:repeat(2,minmax(0,1fr))!important;


  gap:12px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option{


  min-height:56px!important;


  padding:14px 14px!important;


  border-radius:18px!important;


  border:1.5px solid #d2dbda!important;


  background:#fff!important;


  color:#334155!important;


  font-size:16px!important;


  font-weight:700!important;


  line-height:1.2!important;


  box-shadow:0 1px 2px rgba(15,23,42,.03)!important;


  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option.is-selected,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option[aria-pressed="true"]{


  border-color:var(--bbd-v81-green)!important;


  background:#edf9f6!important;


  color:var(--bbd-v81-green-dark)!important;


  box-shadow:0 0 0 3px rgba(15,143,121,.12)!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option:disabled{


  opacity:.48!important;


  box-shadow:none!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel .bbd-upload-tabs,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel .bbd-ai-intake,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel .bbd-upload-library,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel #bbd-upload-help{


  display:none!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel{


  gap:14px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-image-panel > h2{


  margin-bottom:8px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card{


  position:relative!important;


  display:flex!important;


  flex-direction:column!important;


  align-items:center!important;


  justify-content:center!important;


  gap:14px!important;


  width:100%!important;


  min-height:214px!important;


  padding:28px 18px 82px!important;


  border:2px dashed #dbe5e3!important;


  border-radius:28px!important;


  background:linear-gradient(180deg,#fbfefd 0%,#f4fbf9 100%)!important;


  text-align:center!important;


  overflow:hidden!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__icon{


  display:grid!important;


  place-items:center!important;


  width:64px!important;


  height:64px!important;


  border-radius:20px!important;


  background:#eaf7f3!important;


  color:var(--bbd-v81-green)!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__icon svg{


  width:30px!important;


  height:30px!important;


  display:block!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__copy{


  max-width:360px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__copy strong{


  display:block!important;


  margin-bottom:8px!important;


  color:#0f172a!important;


  font-size:28px!important;


  line-height:1.05!important;


  font-weight:800!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__copy p{


  margin:0!important;


  color:var(--bbd-v81-muted)!important;


  font-size:15px!important;


  line-height:1.55!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-card__action{


  position:absolute!important;


  left:20px!important;


  right:20px!important;


  bottom:18px!important;


  display:inline-flex!important;


  align-items:center!important;


  justify-content:center!important;


  min-height:54px!important;


  border-radius:18px!important;


  background:var(--bbd-v81-green)!important;


  color:#fff!important;


  font-size:16px!important;


  font-weight:800!important;


  letter-spacing:.01em!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-upload-list{


  margin-top:16px!important;


}





.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-commerce-summary__hint{


  color:#64748b!important;


}





@media (max-width: 768px){


  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-group__grid{


    grid-template-columns:repeat(2,minmax(0,1fr))!important;


    gap:10px!important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-option{


    min-height:54px!important;


    padding:12px 10px!important;


    border-radius:17px!important;


    font-size:15px!important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-upload-card{


    min-height:190px!important;


    padding:24px 16px 76px!important;


    border-radius:24px!important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-upload-card__copy strong{


    font-size:22px!important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-upload-card__copy p{


    font-size:13.5px!important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev83 #bbd-panel .bbd-v81-upload-card__action{


    min-height:50px!important;


    border-radius:16px!important;


    font-size:15px!important;


  }


}








/* dev82: keep compact option sheet physically stable during selection */


.bbd-app.bbd-pro-workspace-v0230-dev83 [data-bbd-v53-options-body].bbd-v81-options-host{


  overflow-anchor:none!important;


  contain:layout style!important;


}


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-options-shell,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group,


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-group__grid{


  overflow-anchor:none!important;


}


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option{


  touch-action:manipulation!important;


  -webkit-tap-highlight-color:transparent!important;


}








/* dev83: native option clicks must never move the visible option viewport */


.bbd-app.bbd-pro-workspace-v0230-dev83 [data-bbd-v53-options-body].bbd-v81-options-host{


  scroll-behavior:auto!important;


  scroll-snap-type:none!important;


  overscroll-behavior:contain!important;


}


.bbd-app.bbd-pro-workspace-v0230-dev83 .bbd-v81-option:focus{


  outline:none!important;


}




/* BBD CSS: assets/css/editor-0230-dev90.css */
/* Baskibu Designer 0.23.0-dev90



   Mobile iOS-inspired UX system: sheet, dock, toast and media hierarchy. */







.bbd-app.bbd-pro-workspace-v0230-dev90{



  --bbd-v90-green:#0b7a6a;



  --bbd-v90-green-2:#12927d;



  --bbd-v90-green-soft:#eaf7f3;



  --bbd-v90-navy:#101828;



  --bbd-v90-slate:#667085;



  --bbd-v90-border:#dbe5e2;



  --bbd-v90-surface:#ffffff;



  --bbd-v90-amber:#d97706;



  --bbd-v90-amber-soft:#fff7e8;



  --bbd-v90-red:#c83737;



  --bbd-v90-red-soft:#fff0f0;



}







/* --------------------------------------------------------------------------



   Rich feedback toasts — always above sheets/dock, never behind navigation.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev90 > .bbd-v90-toast-region{



  position:absolute!important;



  z-index:2147483646!important;



  top:76px!important;



  left:50%!important;



  width:min(430px,calc(100% - 24px))!important;



  transform:translateX(-50%)!important;



  display:flex!important;



  flex-direction:column!important;



  gap:8px!important;



  pointer-events:none!important;



}







.bbd-v90-toast{



  --toast-accent:var(--bbd-v90-navy);



  --toast-soft:#f3f5f7;



  display:grid!important;



  grid-template-columns:42px minmax(0,1fr) 32px!important;



  align-items:center!important;



  gap:10px!important;



  width:100%!important;



  min-height:64px!important;



  padding:9px 9px 9px 10px!important;



  border:1px solid color-mix(in srgb,var(--toast-accent) 18%,#e5e7eb)!important;



  border-radius:20px!important;



  background:rgba(255,255,255,.97)!important;



  box-shadow:0 16px 42px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.06)!important;



  backdrop-filter:blur(16px) saturate(1.15)!important;



  -webkit-backdrop-filter:blur(16px) saturate(1.15)!important;



  pointer-events:auto!important;



  animation:bbd-v90-toast-in .22s cubic-bezier(.2,.78,.24,1) both!important;



}



.bbd-v90-toast.is-success{--toast-accent:var(--bbd-v90-green);--toast-soft:var(--bbd-v90-green-soft)}



.bbd-v90-toast.is-info{--toast-accent:#344054;--toast-soft:#f2f4f7}



.bbd-v90-toast.is-warning{--toast-accent:var(--bbd-v90-amber);--toast-soft:var(--bbd-v90-amber-soft)}



.bbd-v90-toast.is-error{--toast-accent:var(--bbd-v90-red);--toast-soft:var(--bbd-v90-red-soft)}



.bbd-v90-toast.is-progress{--toast-accent:#155eef;--toast-soft:#eff4ff}



.bbd-v90-toast.is-leaving{opacity:0!important;transform:translateY(-8px) scale(.985)!important;transition:.18s ease!important}



.bbd-v90-toast__icon{



  display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:14px!important;



  background:var(--toast-soft)!important;color:var(--toast-accent)!important;



}



.bbd-v90-toast__icon svg{width:21px!important;height:21px!important}



.bbd-v90-toast__copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}



.bbd-v90-toast__copy strong{font-size:14px!important;line-height:1.18!important;font-weight:800!important;color:#101828!important;letter-spacing:-.01em!important}



.bbd-v90-toast__copy small{font-size:12px!important;line-height:1.35!important;font-weight:560!important;color:#667085!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}



.bbd-v90-toast__close{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border:0!important;border-radius:11px!important;background:#f2f4f7!important;color:#667085!important;font-size:21px!important;line-height:1!important;padding:0!important}







@keyframes bbd-v90-toast-in{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}







/* --------------------------------------------------------------------------



   Media panel: clearly separate the user's upload from ready-made assets.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-panel{



  gap:14px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-stack{



  display:flex!important;



  flex-direction:column!important;



  gap:14px!important;



  width:100%!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section{



  display:flex!important;



  flex-direction:column!important;



  overflow:hidden!important;



  border:1px solid #e0e8e6!important;



  border-radius:22px!important;



  background:#fff!important;



  box-shadow:0 3px 10px rgba(15,23,42,.035)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head{



  display:grid!important;



  grid-template-columns:42px minmax(0,1fr) auto!important;



  align-items:center!important;



  gap:11px!important;



  padding:13px 14px!important;



  border-bottom:1px solid #edf2f1!important;



  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__icon{



  display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:14px!important;



  background:var(--bbd-v90-green-soft)!important;color:var(--bbd-v90-green)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__icon svg{



  width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head>span:nth-child(2){display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head strong{font-size:15px!important;line-height:1.18!important;font-weight:800!important;color:#101828!important;letter-spacing:-.015em!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head small{font-size:11.5px!important;line-height:1.35!important;font-weight:560!important;color:#667085!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head em{



  font-style:normal!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.06em!important;



  padding:6px 8px!important;border-radius:999px!important;background:#f2f4f7!important;color:#667085!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section--upload .bbd-v90-media-section__head em{background:var(--bbd-v90-green-soft)!important;color:var(--bbd-v90-green)!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__body{padding:12px!important;min-width:0!important}







/* dev80 uploader becomes a compact app-grade action card, not a second heading. */



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section--upload .bbd-v80-uploader,



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section--upload #bbd-upload-dropzone{



  display:grid!important;



  grid-template-columns:48px minmax(0,1fr) auto!important;



  align-items:center!important;



  gap:12px!important;



  width:100%!important;



  min-height:76px!important;



  margin:0!important;



  padding:11px!important;



  border:1.5px dashed #bfd9d3!important;



  border-radius:18px!important;



  background:#f7fcfa!important;



  box-shadow:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-icon{



  display:grid!important;place-items:center!important;width:48px!important;height:48px!important;border-radius:15px!important;background:#e6f6f1!important;color:var(--bbd-v90-green)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-icon svg{width:24px!important;height:24px!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-copy strong{font-size:14px!important;font-weight:800!important;color:#101828!important;line-height:1.2!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-copy small{font-size:11.5px!important;color:#667085!important;line-height:1.3!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-uploader>em{



  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:0 14px!important;



  border-radius:14px!important;background:var(--bbd-v90-green)!important;color:#fff!important;font-size:12px!important;font-weight:800!important;font-style:normal!important;white-space:nowrap!important;



}







/* Remove the nested library heading; dev90 owns the hierarchy. */



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library{



  margin:0!important;padding:0!important;border:0!important;background:transparent!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library>.bbd-v51-assets__head{display:none!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-assets__cats{



  margin:0 0 11px!important;padding:0 0 4px!important;display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-assets__cats::-webkit-scrollbar{display:none!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-assets__cats button{



  flex:0 0 auto!important;min-height:34px!important;padding:0 11px!important;border-radius:999px!important;border:1px solid #dfe7e5!important;background:#fff!important;color:#667085!important;font-size:11px!important;font-weight:700!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-assets__cats button[aria-pressed="true"]{



  border-color:#9dcfc3!important;background:#eaf7f3!important;color:var(--bbd-v90-green)!important;box-shadow:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-assets__grid{gap:8px!important}



.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-assets-library .bbd-v51-asset-card{



  border-radius:16px!important;border:1px solid #e0e6e5!important;background:#fff!important;box-shadow:0 2px 6px rgba(15,23,42,.025)!important;overflow:hidden!important;



}







/* --------------------------------------------------------------------------



   Mobile sheet: opaque, shorter, draggable-looking, canvas remains visible.



   No transparency on content: readability wins. Direct visual choices auto-close.



   -------------------------------------------------------------------------- */



@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    left:8px!important;



    right:8px!important;



    bottom:calc(78px + env(safe-area-inset-bottom))!important;



    height:min(64dvh,590px)!important;



    min-height:min(360px,64dvh)!important;



    max-height:min(64dvh,590px)!important;



    border:1px solid rgba(215,225,223,.96)!important;



    border-radius:26px!important;



    background:#fff!important;



    box-shadow:0 -18px 50px rgba(15,23,42,.16),0 4px 16px rgba(15,23,42,.06)!important;



    overflow:hidden!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar{



    height:52px!important;min-height:52px!important;flex-basis:52px!important;



    grid-template-columns:36px minmax(0,1fr) 36px!important;



    padding:9px 10px 6px!important;



    border-bottom:1px solid #edf1f0!important;



    background:rgba(255,255,255,.98)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-mobile-sheet-grip{



    top:7px!important;width:36px!important;height:4px!important;border-radius:999px!important;background:#cbd5dc!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 #bbd-mobile-sheet-title{



    font-size:14px!important;font-weight:800!important;letter-spacing:-.01em!important;color:#101828!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 #bbd-mobile-sheet-close{



    width:34px!important;height:34px!important;border-radius:12px!important;background:#f2f4f7!important;color:#667085!important;font-size:21px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    padding:13px 14px 18px!important;



    gap:12px!important;



    overscroll-behavior-y:contain!important;



    scrollbar-gutter:stable!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head{



    grid-template-columns:38px minmax(0,1fr) auto!important;padding:11px 12px!important;gap:9px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__icon{width:38px!important;height:38px!important;border-radius:13px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head strong{font-size:14px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__head small{font-size:10.8px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section__body{padding:10px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section--upload .bbd-v80-uploader,



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v90-media-section--upload #bbd-upload-dropzone{



    grid-template-columns:42px minmax(0,1fr)!important;



    min-height:84px!important;padding:10px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-upload-icon{width:42px!important;height:42px!important;border-radius:13px!important}



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v80-uploader>em{



    grid-column:1/-1!important;width:100%!important;min-height:44px!important;margin-top:2px!important;



  }







  /* iOS-like dock: frosted container, active pill, larger readable labels. */



  .bbd-app.bbd-pro-workspace-v0230-dev90 > .bbd-v72-mobile-dock{



    left:8px!important;right:8px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;



    height:70px!important;min-height:70px!important;padding:5px!important;gap:2px!important;



    border:1px solid rgba(214,223,221,.88)!important;border-radius:23px!important;



    background:rgba(255,255,255,.94)!important;



    box-shadow:0 12px 34px rgba(15,23,42,.13),0 2px 8px rgba(15,23,42,.05)!important;



    backdrop-filter:blur(18px) saturate(1.18)!important;-webkit-backdrop-filter:blur(18px) saturate(1.18)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item{



    min-width:0!important;height:60px!important;gap:3px!important;border-radius:18px!important;color:#667085!important;background:transparent!important;transition:background .16s ease,color .16s ease,transform .16s ease!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item[aria-current="page"]{



    color:#fff!important;background:linear-gradient(180deg,#10947e 0%,#0b7a6a 100%)!important;box-shadow:0 7px 16px rgba(11,122,106,.22)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-svg{



    width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-label{



    font-size:9.6px!important;font-weight:760!important;line-height:1.05!important;letter-spacing:0!important;



  }



}







@media (max-width:390px){



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev90 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    left:6px!important;right:6px!important;height:min(65dvh,570px)!important;max-height:min(65dvh,570px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-label{font-size:9px!important}



  .bbd-v90-toast__copy small{font-size:11.5px!important}



}







@media (min-width:761px){



  .bbd-app.bbd-pro-workspace-v0230-dev90 > .bbd-v90-toast-region{



    top:auto!important;left:auto!important;right:20px!important;bottom:20px!important;width:min(390px,calc(100% - 40px))!important;transform:none!important;



  }



}







@media (prefers-reduced-motion:reduce){



  .bbd-v90-toast,.bbd-v90-toast.is-leaving,.bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item{animation:none!important;transition:none!important}



}





/* BBD CSS: assets/css/editor-0230-dev91.css */
/* Baskibu Designer 0.23.0-dev91



   Mobile stability + layer/media polish. Loaded after dev90. */







.bbd-app.bbd-pro-workspace-v0230-dev91{



  --bbd-v91-green:#0b7a6a;



  --bbd-v91-green-soft:#edf8f5;



  --bbd-v91-ink:#101828;



  --bbd-v91-muted:#667085;



  --bbd-v91-line:#dde6e4;



  --bbd-v91-surface:#fff;



}







/* Product options: no opacity/pending theatrics while state/price settles. */



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v81-option{



  opacity:1!important;



  transform:none!important;



  animation:none!important;



  transition:border-color .12s ease,background-color .12s ease,color .12s ease,box-shadow .12s ease!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 [data-bbd-v53-options],



.bbd-app.bbd-pro-workspace-v0230-dev91 [data-bbd-v53-options-body],



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v81-options-shell{



  overflow-anchor:none!important;



}







/* --------------------------------------------------------------------------



   Upload: one clear action card. Remove duplicate heading + giant CTA feeling.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-upload-section{



  border:0!important;



  background:transparent!important;



  box-shadow:none!important;



  overflow:visible!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-upload-section>.bbd-v90-media-section__head{



  display:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-upload-section>.bbd-v90-media-section__body{



  padding:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone.bbd-v91-upload-card,



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone.bbd-v81-upload-card{



  position:relative!important;



  display:grid!important;



  grid-template-columns:50px minmax(0,1fr) auto!important;



  grid-template-rows:auto!important;



  align-items:center!important;



  justify-items:stretch!important;



  gap:12px!important;



  width:100%!important;



  min-height:92px!important;



  height:auto!important;



  padding:14px!important;



  margin:0!important;



  border:1px solid #d9e5e2!important;



  border-radius:20px!important;



  background:linear-gradient(180deg,#fff 0%,#f8fcfb 100%)!important;



  box-shadow:0 5px 16px rgba(15,23,42,.045)!important;



  text-align:left!important;



  overflow:hidden!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__icon{



  width:50px!important;



  height:50px!important;



  min-width:50px!important;



  border-radius:16px!important;



  background:#e8f7f3!important;



  color:var(--bbd-v91-green)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__icon svg{



  width:24px!important;height:24px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__copy{



  min-width:0!important;



  max-width:none!important;



  text-align:left!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__copy strong{



  margin:0 0 4px!important;



  font-size:17px!important;



  line-height:1.15!important;



  font-weight:800!important;



  letter-spacing:-.02em!important;



  color:var(--bbd-v91-ink)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__copy p{



  margin:0!important;



  font-size:12.5px!important;



  line-height:1.4!important;



  font-weight:550!important;



  color:var(--bbd-v91-muted)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-upload-dropzone .bbd-v81-upload-card__action{



  position:static!important;



  left:auto!important;right:auto!important;bottom:auto!important;



  min-width:104px!important;



  min-height:44px!important;



  height:44px!important;



  padding:0 16px!important;



  border-radius:14px!important;



  background:var(--bbd-v91-green)!important;



  color:#fff!important;



  font-size:13.5px!important;



  line-height:1!important;



  font-weight:800!important;



  white-space:nowrap!important;



  box-shadow:0 5px 12px rgba(11,122,106,.16)!important;



}







/* Ready-made content remains visually distinct from upload. */



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v90-media-section--assets{



  margin-top:2px!important;



  border-color:#e1e8e7!important;



  background:#fff!important;



  box-shadow:0 4px 14px rgba(15,23,42,.035)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v90-media-section--assets>.bbd-v90-media-section__head{



  padding-block:12px!important;



}







/* --------------------------------------------------------------------------



   Layers: give the actual layer row breathing room, then make commands compact.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel .bbd-search-field{



  margin:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel #bbd-layer-search{



  min-height:44px!important;



  height:44px!important;



  border-radius:14px!important;



  padding-inline:13px!important;



  font-size:14px!important;



  background:#fff!important;



  border:1px solid #d9e2e5!important;



  box-shadow:0 1px 2px rgba(15,23,42,.025)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list{



  display:flex!important;



  flex-direction:column!important;



  gap:8px!important;



  min-height:112px!important;



  max-height:176px!important;



  padding:3px 2px!important;



  margin:0!important;



  overflow-y:auto!important;



  overflow-x:hidden!important;



  scrollbar-width:thin!important;



  scrollbar-color:#b7c3c8 transparent!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-row{



  display:grid!important;



  grid-template-columns:repeat(5,minmax(0,1fr))!important;



  grid-template-rows:46px 36px!important;



  gap:6px!important;



  flex:0 0 auto!important;



  min-height:96px!important;



  padding:7px!important;



  border:1px solid #e0e7e6!important;



  border-radius:16px!important;



  background:#fff!important;



  box-shadow:0 2px 7px rgba(15,23,42,.03)!important;



  overflow:hidden!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-row.is-selected{



  border-color:#8bcbbb!important;



  background:#f1faf7!important;



  box-shadow:0 0 0 2px rgba(11,122,106,.08)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-main{



  grid-column:1/-1!important;



  grid-row:1!important;



  display:flex!important;



  align-items:center!important;



  justify-content:flex-start!important;



  min-width:0!important;



  min-height:46px!important;



  padding:5px 9px!important;



  border-radius:12px!important;



  background:transparent!important;



  gap:9px!important;



  text-align:left!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-kind{



  flex:0 0 30px!important;



  display:grid!important;place-items:center!important;



  width:30px!important;height:30px!important;border-radius:10px!important;



  background:#f0f5f4!important;color:#475467!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-name{



  min-width:0!important;



  overflow:hidden!important;



  text-overflow:ellipsis!important;



  white-space:nowrap!important;



  color:#1d2939!important;



  font-size:13.5px!important;



  font-weight:750!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-eye,



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-solo,



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-lock,



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-copy,



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-trash{



  grid-row:2!important;



  width:100%!important;



  min-width:0!important;



  height:36px!important;



  min-height:36px!important;



  padding:0!important;



  display:grid!important;place-items:center!important;



  border:1px solid #e2e8e7!important;



  border-radius:10px!important;



  background:#fff!important;



  color:#667085!important;



  opacity:1!important;



  visibility:visible!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-eye{grid-column:1!important}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-solo{grid-column:2!important}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-lock{grid-column:3!important}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-copy{grid-column:4!important}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list .bbd-layer-trash{grid-column:5!important;color:#b42318!important;background:#fff8f7!important;border-color:#fee4e2!important}







.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel>.bbd-inline-actions{



  display:grid!important;



  grid-template-columns:repeat(2,minmax(0,1fr))!important;



  gap:8px!important;



  margin:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel>.bbd-inline-actions>button,



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel>#bbd-duplicate{



  min-height:42px!important;



  height:42px!important;



  padding:0 10px!important;



  border-radius:12px!important;



  font-size:12.5px!important;



  font-weight:700!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel>#bbd-duplicate{



  width:100%!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel .bbd-field{



  margin-top:2px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel .bbd-command-grid{



  gap:7px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel .bbd-command-grid button{



  min-height:46px!important;



  border-radius:12px!important;



  font-size:11.5px!important;



}







@media (max-width:760px){



  /* Upload becomes a compact 2-row iOS card, never a full-width giant CTA. */



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone.bbd-v91-upload-card,



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone.bbd-v81-upload-card{



    grid-template-columns:46px minmax(0,1fr)!important;



    grid-template-rows:auto 44px!important;



    gap:10px 11px!important;



    min-height:132px!important;



    padding:13px!important;



    border-radius:18px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone .bbd-v81-upload-card__icon{



    width:46px!important;height:46px!important;min-width:46px!important;border-radius:14px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone .bbd-v81-upload-card__copy strong{



    font-size:16px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone .bbd-v81-upload-card__copy p{



    font-size:12px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev91 #bbd-panel #bbd-upload-dropzone .bbd-v81-upload-card__action{



    grid-column:1/-1!important;



    grid-row:2!important;



    width:100%!important;



    min-width:0!important;



    height:44px!important;



    min-height:44px!important;



    border-radius:13px!important;



    font-size:13px!important;



  }







  /* More room for Layers without making the whole sheet taller. */



  .bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layers-panel{



    gap:10px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev91 .bbd-v91-layer-list{



    min-height:108px!important;



    max-height:166px!important;



  }







  /* Option surface remains visually fixed while Product Engine settles. */



  .bbd-app.bbd-pro-workspace-v0230-dev91 [data-bbd-v53-options-body]{



    min-height:260px!important;



    contain:layout style!important;



  }



}





/* BBD CSS: assets/css/editor-0230-dev92.css */
/* Baskibu Designer 0.23.0-dev92



   Single interaction owner + front-layer pro tools + fixed selection inspector */







.bbd-app.bbd-pro-workspace-v0230-dev92{



  --bbd-v92-green:#0b7a6a;



  --bbd-v92-green-2:#0f8f79;



  --bbd-v92-green-soft:#edf8f5;



  --bbd-v92-ink:#101828;



  --bbd-v92-muted:#667085;



  --bbd-v92-line:#dce6e4;



  --bbd-v92-surface:#ffffff;



  --bbd-v92-shadow:0 18px 44px rgba(15,23,42,.16);



}







/* --------------------------------------------------------------------------



   Product options: freeze geometry while Product Engine state settles.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev92 [data-bbd-v53-options],



.bbd-app.bbd-pro-workspace-v0230-dev92 [data-bbd-v53-options-body],



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v81-options-shell,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v81-group,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v81-option{



  overflow-anchor:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92.bbd-v92-option-transaction [data-bbd-v53-options],



.bbd-app.bbd-pro-workspace-v0230-dev92.bbd-v92-option-transaction [data-bbd-v53-options-body],



.bbd-app.bbd-pro-workspace-v0230-dev92.bbd-v92-option-transaction .bbd-v81-options-shell{



  scroll-behavior:auto!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v81-option{



  opacity:1!important;



  transform:none!important;



  animation:none!important;



  transition:border-color .12s ease,background-color .12s ease,color .12s ease,box-shadow .12s ease!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92.bbd-v92-option-transaction .bbd-v81-option{



  transition:none!important;



}







/* --------------------------------------------------------------------------



   Pro tools popovers: always render above the utility drawer/stage.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev92 > .bbd-mega-popover.bbd-v92-front-popover{



  position:fixed!important;



  z-index:9300!important;



  width:min(360px,calc(100vw - 28px))!important;



  max-height:min(660px,calc(100dvh - 100px))!important;



  overflow:auto!important;



  border:1px solid rgba(215,225,223,.98)!important;



  border-radius:20px!important;



  background:rgba(255,255,255,.995)!important;



  box-shadow:0 24px 64px rgba(15,23,42,.22),0 4px 16px rgba(15,23,42,.08)!important;



  backdrop-filter:blur(20px) saturate(1.08)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 > .bbd-mega-popover.bbd-v92-front-popover .bbd-mega-popover__header{



  position:sticky!important;



  top:0!important;



  z-index:2!important;



  background:rgba(255,255,255,.97)!important;



  backdrop-filter:blur(16px)!important;



}







/* --------------------------------------------------------------------------



   Selected-object inspector: replaces floating left/right distance pills.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-distance-overlay{



  display:none!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 > .bbd-v92-selection-hud{



  position:fixed!important;



  z-index:9200!important;



  display:grid!important;



  grid-template-columns:minmax(150px,1.1fr) minmax(330px,2fr) auto!important;



  align-items:center!important;



  gap:10px!important;



  width:min(760px,calc(100vw - 48px))!important;



  min-height:64px!important;



  padding:9px 10px!important;



  border:1px solid rgba(215,225,223,.98)!important;



  border-radius:18px!important;



  background:rgba(255,255,255,.97)!important;



  box-shadow:0 18px 44px rgba(15,23,42,.16),0 3px 10px rgba(15,23,42,.06)!important;



  backdrop-filter:blur(18px) saturate(1.08)!important;



  color:var(--bbd-v92-ink)!important;



  transform:translateX(-50%)!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 > .bbd-v92-selection-hud[hidden]{display:none!important}



.bbd-v92-selection-hud__identity{



  display:flex!important;



  align-items:center!important;



  gap:9px!important;



  min-width:0!important;



  padding:4px 7px!important;



}



.bbd-v92-selection-hud__identity>span:last-child{



  min-width:0!important;



  display:flex!important;



  flex-direction:column!important;



  gap:1px!important;



}



.bbd-v92-selection-hud__identity small,



.bbd-v92-selection-hud__metrics small{



  display:block!important;



  color:#7a8798!important;



  font-size:10px!important;



  font-weight:750!important;



  line-height:1.15!important;



  text-transform:uppercase!important;



  letter-spacing:.06em!important;



}



.bbd-v92-selection-hud__identity strong{



  display:block!important;



  max-width:180px!important;



  overflow:hidden!important;



  text-overflow:ellipsis!important;



  white-space:nowrap!important;



  font-size:13.5px!important;



  line-height:1.2!important;



  font-weight:800!important;



}



.bbd-v92-selection-hud__swatch{



  flex:0 0 34px!important;



  width:34px!important;



  height:34px!important;



  border-radius:11px!important;



  border:3px solid #fff!important;



  box-shadow:0 0 0 1px #d7e1df,0 3px 8px rgba(15,23,42,.10)!important;



}



.bbd-v92-selection-hud__metrics{



  display:grid!important;



  grid-template-columns:1.15fr 1fr 1fr!important;



  gap:6px!important;



}



.bbd-v92-selection-hud__metrics>span{



  min-width:0!important;



  min-height:44px!important;



  padding:7px 9px!important;



  border:1px solid #e5ecea!important;



  border-radius:12px!important;



  background:#f8fbfa!important;



}



.bbd-v92-selection-hud__metrics strong{



  display:block!important;



  margin-top:3px!important;



  color:#344054!important;



  font-size:12px!important;



  font-weight:800!important;



  white-space:nowrap!important;



}



.bbd-v92-selection-hud__actions{



  display:flex!important;



  align-items:center!important;



  gap:6px!important;



}



.bbd-v92-selection-hud__actions button{



  min-height:44px!important;



  padding:0 14px!important;



  border:1px solid #dbe5e3!important;



  border-radius:13px!important;



  background:#fff!important;



  color:#344054!important;



  font-size:12px!important;



  font-weight:800!important;



}



.bbd-v92-selection-hud__actions button:first-child{



  border-color:#b6dcd3!important;



  background:var(--bbd-v92-green-soft)!important;



  color:var(--bbd-v92-green)!important;



}







/* --------------------------------------------------------------------------



   Layers: clear hierarchy instead of one compressed block.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel{



  gap:12px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layer-search{



  margin:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel #bbd-layer-list{



  max-height:210px!important;



  min-height:86px!important;



  padding:2px!important;



  margin:0!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-row{



  min-height:82px!important;



  grid-template-rows:42px 32px!important;



  padding:6px!important;



  gap:5px!important;



  border-radius:15px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-main{



  min-height:42px!important;



  height:42px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-eye,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-solo,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-lock,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-copy,



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel .bbd-layer-trash{



  height:32px!important;



  min-height:32px!important;



  border-radius:9px!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layer-order-card{



  display:flex!important;



  flex-direction:column!important;



  gap:9px!important;



  padding:11px!important;



  border:1px solid #e0e8e6!important;



  border-radius:16px!important;



  background:#f9fbfb!important;



}



.bbd-v92-card-title{



  display:flex!important;



  flex-direction:column!important;



  gap:2px!important;



}



.bbd-v92-card-title strong{



  color:#1d2939!important;



  font-size:12.5px!important;



  font-weight:800!important;



}



.bbd-v92-card-title small{



  color:#7a8798!important;



  font-size:10.5px!important;



  font-weight:550!important;



}



.bbd-v92-layer-order-actions{



  display:grid!important;



  grid-template-columns:repeat(5,minmax(0,1fr))!important;



  gap:6px!important;



}



.bbd-v92-layer-order-actions button{



  width:100%!important;



  min-width:0!important;



  min-height:38px!important;



  height:38px!important;



  padding:0 7px!important;



  border:1px solid #dfe7e5!important;



  border-radius:11px!important;



  background:#fff!important;



  color:#344054!important;



  font-size:10.5px!important;



  line-height:1.1!important;



  font-weight:750!important;



  box-shadow:none!important;



}



.bbd-v92-layer-order-actions #bbd-duplicate{



  color:var(--bbd-v92-green)!important;



  border-color:#b9ddd5!important;



  background:#eef8f5!important;



}



.bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel>.bbd-field{



  padding:10px!important;



  border:1px solid #e2e9e7!important;



  border-radius:16px!important;



  background:#fff!important;



}







/* Context-specific mobile sheet heights: enough room where tools need it while



   Product keeps more canvas visible. */



@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev92[data-bbd-v92-panel="layers"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev92[data-bbd-v92-panel="layers"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(72dvh,650px)!important;



    max-height:min(72dvh,650px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev92[data-bbd-v92-panel="image"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-pro-workspace-v0230-dev92[data-bbd-v92-panel="image"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(68dvh,620px)!important;



    max-height:min(68dvh,620px)!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-selection-hud{



    display:none!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layers-panel #bbd-layer-list{



    max-height:176px!important;



    min-height:84px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev92 .bbd-v92-layer-order-card{



    padding:10px!important;



  }



  .bbd-v92-layer-order-actions{



    grid-template-columns:repeat(2,minmax(0,1fr))!important;



    gap:7px!important;



  }



  .bbd-v92-layer-order-actions #bbd-duplicate{



    grid-column:1/-1!important;



  }



  .bbd-v92-layer-order-actions button{



    min-height:42px!important;



    height:42px!important;



    font-size:11.5px!important;



  }



  .bbd-app.bbd-pro-workspace-v0230-dev92 > .bbd-mega-popover.bbd-v92-front-popover{



    z-index:2147483647!important;



    width:calc(100vw - 24px)!important;



    max-width:none!important;



    left:12px!important;



    right:12px!important;



  }



}





/* BBD CSS: assets/css/editor-0232.css */
/* Baskibu Designer 0.23.2 — public customer entry + compact mobile object surface */







/* --------------------------------------------------------------------------



   Public Product Builder entry



   -------------------------------------------------------------------------- */



.bbd-entry.bbd-entry--public-builder{



  width:100%!important;



  margin:12px 0 14px!important;



  padding:0!important;



  position:relative!important;



  clip:auto!important;



  height:auto!important;



  overflow:visible!important;



  white-space:normal!important;



  border:0!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-open-editor{



  width:100%!important;



  min-height:76px!important;



  display:grid!important;



  grid-template-columns:48px minmax(0,1fr) 30px!important;



  align-items:center!important;



  gap:14px!important;



  padding:14px 16px!important;



  border:1px solid #b9ddd5!important;



  border-radius:18px!important;



  background:linear-gradient(180deg,#f6fcfa 0%,#eef9f6 100%)!important;



  color:#102a25!important;



  text-align:left!important;



  box-shadow:0 8px 24px rgba(15,143,121,.08)!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-button-icon{



  width:48px!important;



  height:48px!important;



  display:grid!important;



  place-items:center!important;



  border-radius:14px!important;



  background:#0f8f79!important;



  color:#fff!important;



  box-shadow:0 7px 18px rgba(15,143,121,.2)!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-entry-action-copy{



  display:flex!important;



  flex-direction:column!important;



  gap:4px!important;



  min-width:0!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-entry-action-copy strong{



  color:#101828!important;



  font-size:16px!important;



  line-height:1.2!important;



  font-weight:850!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-entry-action-copy small{



  color:#667085!important;



  font-size:12px!important;



  line-height:1.35!important;



  font-weight:550!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-entry-action-arrow{



  width:30px!important;



  height:30px!important;



  display:grid!important;



  place-items:center!important;



  border:1px solid #d6e8e3!important;



  border-radius:999px!important;



  background:#fff!important;



  color:#0f8f79!important;



  font-size:18px!important;



  font-weight:800!important;



}



.bbd-entry.bbd-entry--public-builder .bbd-entry-status{



  width:100%!important;



  margin:0!important;



}







/* Old 0.23.1 bridge must never hide the real WooCommerce entry. */



html.bbd-public-entry-ready #bbd-entry.bbd-entry--public-builder{



  position:relative!important;



  width:100%!important;



  height:auto!important;



  padding:0!important;



  margin:12px 0 14px!important;



  overflow:visible!important;



  clip:auto!important;



  white-space:normal!important;



}







/* --------------------------------------------------------------------------



   Mobile selected-object UX: one dock, not stacked overlays.



   -------------------------------------------------------------------------- */



@media (max-width:760px){



  .bbd-app.bbd-release-0232 .bbd-0232-mobile-legacy-overlay,



  .bbd-app.bbd-release-0232 .bbd-object-toolbar,



  .bbd-app.bbd-release-0232 .bbd-stage-meta{



    display:none!important;



  }







  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock{



    position:fixed!important;



    z-index:9600!important;



    top:auto!important;



    left:10px!important;



    right:10px!important;



    bottom:calc(80px + env(safe-area-inset-bottom))!important;



    width:auto!important;



    max-width:none!important;



    min-height:56px!important;



    display:flex!important;



    align-items:center!important;



    justify-content:stretch!important;



    gap:4px!important;



    padding:5px!important;



    overflow-x:auto!important;



    overflow-y:hidden!important;



    border:1px solid rgba(211,224,220,.98)!important;



    border-radius:18px!important;



    background:rgba(255,255,255,.97)!important;



    box-shadow:0 16px 42px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.06)!important;



    backdrop-filter:blur(18px) saturate(1.08)!important;



    transform:none!important;



    animation:none!important;



    scrollbar-width:none!important;



  }



  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock::-webkit-scrollbar{display:none!important}



  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock[hidden]{display:none!important}



  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock button{



    flex:1 1 0!important;



    min-width:76px!important;



    min-height:46px!important;



    padding:0 9px!important;



    border:0!important;



    border-radius:13px!important;



    background:transparent!important;



    color:#475467!important;



    font-size:11.5px!important;



    font-weight:800!important;



  }



  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock button.is-active,



  .bbd-app.bbd-release-0232 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock button:active{



    background:#edf8f5!important;



    color:#0f8f79!important;



  }







  /* The compact quality recommendation used to add a second white row under



     the object toolbar. Keep those details in the review/quality route instead. */



  .bbd-app.bbd-release-0232 .bbd-0232-mobile-quality-chip,



  .bbd-app.bbd-release-0232 .bbd-quality-summary[data-compact="true"],



  .bbd-app.bbd-release-0232 .bbd-quality-summary[data-mega-final-quality="compact"]{



    display:none!important;



  }







  /* Product/options sheet starts as a true half-sheet so the customer can see



     the result on the product while changing size/set. */



  .bbd-app.bbd-release-0232[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0232[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(58dvh,520px)!important;



    max-height:min(58dvh,520px)!important;



    min-height:min(390px,58dvh)!important;



  }







  .bbd-entry.bbd-entry--public-builder .bbd-open-editor{



    min-height:72px!important;



    grid-template-columns:44px minmax(0,1fr) 28px!important;



    gap:11px!important;



    padding:13px 14px!important;



    border-radius:16px!important;



  }



  .bbd-entry.bbd-entry--public-builder .bbd-button-icon{



    width:44px!important;



    height:44px!important;



    border-radius:13px!important;



  }



  .bbd-entry.bbd-entry--public-builder .bbd-entry-action-copy strong{font-size:15px!important}



  .bbd-entry.bbd-entry--public-builder .bbd-entry-action-copy small{font-size:11.5px!important}



}





/* BBD CSS: assets/css/editor-0233.css */
/* Baskibu Designer 0.23.3 — Minimal App Header + Save Trust */



.bbd-app .bbd-topbar__left{



  min-width:0!important;



  gap:10px!important;



}



.bbd-app .bbd-topbar__left .bbd-brand-title-block{



  display:none!important;



}



.bbd-app .bbd-topbar__left .bbd-brand-slot{



  margin-right:0!important;



}



@media (min-width:1025px){



  .bbd-app .bbd-topbar{



    grid-template-columns:auto minmax(0,1fr)!important;



  }



  .bbd-app .bbd-topbar__actions{



    min-width:0!important;



  }



}



/* Saving is a progress state, not success. */



.bbd-app .bbd-save-state[data-state="saving"],



.bbd-app .bbd-save-state[data-state="retrying"]{



  color:#35506a!important;



  background:#f4f7fa!important;



  border-color:#dce5ec!important;



}



.bbd-app .bbd-save-state[data-state="retrying"] .bbd-save-dot{



  background:#d99a22!important;



}



.bbd-app .bbd-save-state[data-state="error"]{



  color:#9b2c2c!important;



  background:#fff5f5!important;



  border-color:#fed7d7!important;



}





/* BBD CSS: assets/css/editor-0234.css */
/* Baskibu Designer 0.23.4 — Final Review Layer Ownership



   The final save/review dialog must be the only interactive foreground surface. */







.bbd-app.is-final-review-open .bbd-dialog.is-save-review{



  z-index:2147483000!important;



  background:rgba(15,23,42,.48)!important;



  backdrop-filter:blur(4px) saturate(.94)!important;



  -webkit-backdrop-filter:blur(4px) saturate(.94)!important;



}







.bbd-app.is-final-review-open .bbd-dialog.is-save-review .bbd-dialog__panel{



  position:relative!important;



  z-index:2!important;



  isolation:isolate!important;



}







/* Selection/context chrome belongs to the editor, not to the final review. */



.bbd-app.is-final-review-open > .bbd-v92-selection-hud,



.bbd-app.is-final-review-open .bbd-object-toolbar,



.bbd-app.is-final-review-open .bbd-context-route-toolbar,



.bbd-app.is-final-review-open .bbd-context-toolbar,



.bbd-app.is-final-review-open .bbd-distance-overlay,



.bbd-app.is-final-review-open > .bbd-mega-popover,



.bbd-app.is-final-review-open > .bbd-v72-mobile-dock,



.bbd-app.is-final-review-open > .bbd-v71-bottom-dock,



.bbd-app.is-final-review-open .bbd-v58-mobile-object-toolbar{



  visibility:hidden!important;



  opacity:0!important;



  pointer-events:none!important;



}







/* Do not let editor toasts or recovery prompts sit above the approval dialog. */



.bbd-app.is-final-review-open .bbd-toast-region,



.bbd-app.is-final-review-open .bbd-recovery{



  z-index:1200!important;



  pointer-events:none!important;



}







/* Keep review CTA reachable even on short laptop/compact heights. */



.bbd-app.is-final-review-open .bbd-dialog.is-save-review .bbd-dialog__panel{



  max-height:min(92dvh,820px)!important;



  overflow:auto!important;



  overscroll-behavior:contain!important;



}







@media (max-width:760px){



  .bbd-app.is-final-review-open .bbd-dialog.is-save-review{



    align-items:end!important;



  }



  .bbd-app.is-final-review-open .bbd-dialog.is-save-review .bbd-dialog__panel{



    max-height:92dvh!important;



  }



}





/* BBD CSS: assets/css/editor-0235.css */
/* Baskibu Designer 0.23.5 — single native studio route + saved-state clarity */







/* The Designer native entry owns the design route. Configurator proxies are retired. */



#bux140 .bux620-design-routes > #bbd-entry.bbd-entry--public-builder,



#bux140 [data-bux620-design-routes] > #bbd-entry.bbd-entry--public-builder{



  width:100%!important;



  margin:0!important;



  padding:0!important;



}







/* Before a design exists, the native CTA is the only primary design action. */



#bbd-entry.bbd-entry--public-builder:not(.has-saved-design) #bbd-entry-status{



  display:none!important;



}







/* After save, stop asking the customer to "start" again. The compact success



   row becomes the single design surface; its Düzenle action reopens Designer. */



#bbd-entry.bbd-entry--public-builder.has-saved-design #bbd-open-editor{



  display:none!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design #bbd-entry-status{



  display:grid!important;



  grid-template-columns:38px minmax(0,1fr) auto!important;



  align-items:center!important;



  gap:10px!important;



  min-height:64px!important;



  margin:0!important;



  padding:10px 12px!important;



  border:1px solid #9ed9cc!important;



  border-radius:14px!important;



  background:#effaf7!important;



  color:#0b6f5e!important;



  box-shadow:none!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__icon{



  width:36px!important;



  height:36px!important;



  display:grid!important;



  place-items:center!important;



  border-radius:999px!important;



  background:#14a987!important;



  color:#fff!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__copy{



  min-width:0!important;



  display:flex!important;



  flex-direction:column!important;



  gap:2px!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__copy strong{



  margin:0!important;



  color:#087662!important;



  font-size:14px!important;



  line-height:1.2!important;



  font-weight:850!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__copy small{



  color:#667085!important;



  font-size:11px!important;



  line-height:1.3!important;



  font-weight:550!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-edit{



  min-height:40px!important;



  padding:0 12px!important;



  border:0!important;



  border-radius:10px!important;



  background:transparent!important;



  color:#087662!important;



  font-size:12px!important;



  font-weight:850!important;



  text-decoration:underline!important;



  text-underline-offset:3px!important;



  cursor:pointer!important;



}



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-edit:hover,



#bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-edit:focus-visible{



  background:#ddf4ee!important;



  outline:none!important;



}







@media(max-width:760px){



  #bbd-entry.bbd-entry--public-builder.has-saved-design #bbd-entry-status{



    grid-template-columns:34px minmax(0,1fr) auto!important;



    gap:8px!important;



    min-height:60px!important;



    padding:9px 10px!important;



  }



  #bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__icon{



    width:32px!important;



    height:32px!important;



  }



  #bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__copy strong{font-size:13px!important}



  #bbd-entry.bbd-entry--public-builder.has-saved-design .bbd-entry-status__copy small{font-size:10.5px!important}



}





/* BBD CSS: assets/css/editor-0236.css */
/* Baskibu Designer 0.23.6



 * Responsive compact navigation + adaptive Product options sheet.



 * Final visual owner for <=1024px. No canvas, pricing or save logic changes.



 */







/* --------------------------------------------------------------------------



   TABLET: one floating app dock, not six bordered cards



   -------------------------------------------------------------------------- */



@media (min-width:761px) and (max-width:1024px){



  .bbd-app.bbd-pro-workspace-v0230-dev76 > .bbd-v72-mobile-dock,



  .bbd-app.bbd-pro-workspace-v0230-dev79 > .bbd-v72-mobile-dock,



  .bbd-app.bbd-pro-workspace-v0230-dev90 > .bbd-v72-mobile-dock{



    left:50%!important;



    right:auto!important;



    bottom:calc(8px + env(safe-area-inset-bottom))!important;



    width:min(700px,calc(100% - 28px))!important;



    max-width:700px!important;



    height:68px!important;



    min-height:68px!important;



    padding:5px!important;



    gap:3px!important;



    transform:translateX(-50%)!important;



    border:1px solid rgba(211,222,219,.92)!important;



    border-radius:22px!important;



    background:rgba(255,255,255,.96)!important;



    box-shadow:0 16px 38px rgba(15,23,42,.13),0 2px 8px rgba(15,23,42,.05)!important;



    backdrop-filter:blur(18px) saturate(1.15)!important;



    -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;



    overflow:hidden!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v72-dock-item,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item,



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item{



    min-width:0!important;



    width:100%!important;



    height:58px!important;



    min-height:58px!important;



    margin:0!important;



    padding:5px 3px!important;



    gap:3px!important;



    border:0!important;



    outline:0!important;



    border-radius:16px!important;



    background:transparent!important;



    background-image:none!important;



    color:#667085!important;



    box-shadow:none!important;



  }







  .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev76 .bbd-v72-dock-item[aria-current="page"],



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev79 .bbd-v72-dock-item[aria-current="page"],



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item.is-active,



  .bbd-app.bbd-pro-workspace-v0230-dev90 .bbd-v72-dock-item[aria-current="page"]{



    border:0!important;



    background:#0b7a6a!important;



    background-image:none!important;



    color:#fff!important;



    box-shadow:0 7px 17px rgba(11,122,106,.20)!important;



  }







  .bbd-app .bbd-v72-mobile-dock .bbd-v72-dock-svg{



    width:20px!important;



    height:20px!important;



    min-width:20px!important;



    min-height:20px!important;



  }



  .bbd-app .bbd-v72-mobile-dock .bbd-v72-dock-label{



    font-size:9.5px!important;



    line-height:1.05!important;



    font-weight:750!important;



    letter-spacing:0!important;



    white-space:nowrap!important;



  }



}







/* --------------------------------------------------------------------------



   PHONE: stable six-route dock



   -------------------------------------------------------------------------- */



@media (max-width:760px){



  .bbd-app.bbd-pro-workspace-v0230-dev76 > .bbd-v72-mobile-dock,



  .bbd-app.bbd-pro-workspace-v0230-dev79 > .bbd-v72-mobile-dock,



  .bbd-app.bbd-pro-workspace-v0230-dev90 > .bbd-v72-mobile-dock{



    left:8px!important;



    right:8px!important;



    bottom:calc(6px + env(safe-area-inset-bottom))!important;



    height:70px!important;



    min-height:70px!important;



    padding:5px!important;



    gap:2px!important;



    border:1px solid rgba(211,222,219,.92)!important;



    border-radius:22px!important;



    background:rgba(255,255,255,.96)!important;



    box-shadow:0 14px 34px rgba(15,23,42,.13),0 2px 8px rgba(15,23,42,.05)!important;



    backdrop-filter:blur(18px) saturate(1.15)!important;



    -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;



  }



  .bbd-app .bbd-v72-mobile-dock .bbd-v72-dock-item{



    min-width:0!important;



    width:100%!important;



    height:60px!important;



    min-height:60px!important;



    margin:0!important;



    padding:5px 2px!important;



    gap:3px!important;



    border:0!important;



    outline:0!important;



    border-radius:17px!important;



    background:transparent!important;



    background-image:none!important;



    color:#667085!important;



    box-shadow:none!important;



  }



  .bbd-app .bbd-v72-mobile-dock .bbd-v72-dock-item.is-active,



  .bbd-app .bbd-v72-mobile-dock .bbd-v72-dock-item[aria-current="page"]{



    border:0!important;



    background:#0b7a6a!important;



    background-image:none!important;



    color:#fff!important;



    box-shadow:0 7px 17px rgba(11,122,106,.20)!important;



  }



}







/* --------------------------------------------------------------------------



   PRODUCT OPTIONS: compact by default, expands only while options are open.



   This preserves canvas visibility without crushing the actual choices.



   -------------------------------------------------------------------------- */



@media (max-width:760px){



  .bbd-app.bbd-release-0232[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0232[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(62dvh,570px)!important;



    max-height:min(62dvh,570px)!important;



    min-height:min(410px,62dvh)!important;



  }







  .bbd-app.bbd-release-0232.bbd-v75-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0232.bbd-v75-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(78dvh,710px)!important;



    max-height:min(78dvh,710px)!important;



    min-height:min(520px,78dvh)!important;



  }







  /* While editing options, remove duplicated summary actions. The sheet X is



     the clear way back, leaving the height to the actual choices. */



  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] #bbd-panel .bbd-commerce-summary__actions,



  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] #bbd-panel .bbd-commerce-summary__hint{



    display:none!important;



  }







  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] #bbd-panel .bbd-commerce-summary{



    min-height:0!important;



    margin-bottom:8px!important;



  }







  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] #bbd-panel .bbd-v53-options,



  .bbd-app[data-bbd-v92-panel="product"] #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options{



    display:block!important;



    visibility:visible!important;



    opacity:1!important;



    width:100%!important;



    min-height:330px!important;



    max-height:none!important;



    height:auto!important;



    margin-top:8px!important;



    overflow:visible!important;



  }







  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] #bbd-panel .bbd-v53-options__body,



  .bbd-app[data-bbd-v92-panel="product"] #bbd-panel .bbd-commerce-summary.bbd-v75-options-focus .bbd-v53-options__body{



    display:grid!important;



    min-height:280px!important;



    max-height:none!important;



    height:auto!important;



    overflow:visible!important;



    padding-bottom:18px!important;



  }







  /* The panel section remains the one scroll owner (dev85 contract). */



  .bbd-app.bbd-v75-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    min-height:0!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior-y:contain!important;



    -webkit-overflow-scrolling:touch!important;



    padding-bottom:22px!important;



  }



}







@media (max-width:390px) and (max-height:760px){



  .bbd-app.bbd-release-0232.bbd-v75-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0232.bbd-v75-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(80dvh,620px)!important;



    max-height:min(80dvh,620px)!important;



    min-height:min(490px,80dvh)!important;



  }



}





/* BBD CSS: assets/css/editor-0237.css */
/* Baskibu Designer 0.23.7



 * Mobile Product options stability final.



 * Restores the options-open state owner removed with legacy dev75/dev76 JS,



 * expands the Product sheet correctly, and prevents transient hidden-state blink.



 */







@media (max-width:760px){



  /* Product options are a dedicated editing state. Keep enough canvas context



     above the sheet, but give the choices a real scrolling viewport. */



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(76dvh,700px)!important;



    max-height:min(76dvh,700px)!important;



    min-height:0!important;



    overflow:hidden!important;



  }







  /* The sheet content is the sole vertical scroller. This avoids a clipped



     lower half and removes the nested-scroll fight from older mobile layers. */



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    flex:1 1 auto!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior-y:contain!important;



    -webkit-overflow-scrolling:touch!important;



    scroll-behavior:auto!important;



    overflow-anchor:none!important;



    padding-bottom:28px!important;



  }







  /* While editing options the preview/change-actions above and below the option



     card duplicate the same route and steal almost 100 px of useful height. */



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-commerce-summary__actions,



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-commerce-summary__hint{



    display:none!important;



  }



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-commerce-summary{



    min-height:0!important;



    margin-bottom:8px!important;



  }







  /* The Product Engine may toggle hidden for a few frames while committing a



     choice. In the open editing state, never unmount the visible options UI. */



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel [data-bbd-v53-options],



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel [data-bbd-v53-options][hidden],



  .bbd-app.bbd-release-0237.bbd-0237-option-transaction #bbd-panel [data-bbd-v53-options],



  .bbd-app.bbd-release-0237.bbd-0237-option-transaction #bbd-panel [data-bbd-v53-options][hidden]{



    display:block!important;



    visibility:visible!important;



    opacity:1!important;



    width:100%!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow:visible!important;



    overflow-x:visible!important;



    overflow-y:visible!important;



    animation:none!important;



    transition:none!important;



    contain:none!important;



    content-visibility:visible!important;



  }







  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel [data-bbd-v53-options-body],



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-v81-options-shell,



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-v81-group,



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-v81-group__grid{



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow:visible!important;



    overflow-anchor:none!important;



    animation:none!important;



  }







  /* Selection state may change, geometry may not. The user should see a calm



     selected pill instead of buttons blinking out during quote/config sync. */



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open #bbd-panel .bbd-v81-option,



  .bbd-app.bbd-release-0237.bbd-0237-option-transaction #bbd-panel .bbd-v81-option{



    display:flex!important;



    visibility:visible!important;



    opacity:1!important;



    transform:none!important;



    animation:none!important;



    transition:border-color .12s ease,background-color .12s ease,color .12s ease,box-shadow .12s ease!important;



    backface-visibility:hidden!important;



  }



  .bbd-app.bbd-release-0237.bbd-0237-option-transaction #bbd-panel .bbd-v81-option{



    transition:none!important;



  }



}







@media (max-width:390px) and (max-height:760px){



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0237.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(74dvh,555px)!important;



    max-height:min(74dvh,555px)!important;



  }



}





/* BBD CSS: assets/css/editor-0238.css */
/* Baskibu Designer 0.23.8



 * Mobile Product options scroll + live size preview.



 * The option body owns its own vertical scroll area and the legacy product



 * action row no longer covers lower choices while option editing is active.



 */







@media (max-width:760px){



  /* Keep the product sheet stable. The actual option list below becomes the



     vertical scroll owner, so Set içeriği / following groups are always reachable. */



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(78dvh,710px)!important;



    max-height:min(78dvh,710px)!important;



    min-height:0!important;



    overflow:hidden!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    display:flex!important;



    flex-direction:column!important;



    flex:1 1 auto!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow:hidden!important;



    overscroll-behavior:none!important;



    padding-bottom:12px!important;



  }







  /* These are the old Product panel actions visible at the bottom of the user's



     screenshot. While choices are open they duplicate other actions and physically



     cover the last option rows, so they leave the layout until the drawer closes. */



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-product-flow-actions,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-product-preflight,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-commerce-summary__actions,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-commerce-summary__hint{



    display:none!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-commerce-summary{



    display:flex!important;



    flex-direction:column!important;



    flex:1 1 auto!important;



    min-height:0!important;



    max-height:100%!important;



    overflow:hidden!important;



    margin-bottom:0!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options],



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options][hidden]{



    display:flex!important;



    flex-direction:column!important;



    flex:1 1 auto!important;



    width:100%!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow:hidden!important;



    visibility:visible!important;



    opacity:1!important;



    margin-top:8px!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-v53-options__head{



    flex:0 0 auto!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options-body],



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options-body].bbd-v81-options-host{



    display:block!important;



    flex:1 1 auto!important;



    width:100%!important;



    height:100%!important;



    min-height:0!important;



    max-height:none!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior-y:contain!important;



    -webkit-overflow-scrolling:touch!important;



    touch-action:pan-y!important;



    scroll-behavior:auto!important;



    scroll-snap-type:none!important;



    overflow-anchor:none!important;



    contain:none!important;



    padding:2px 2px 30px!important;



  }







  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-v81-options-shell,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-v81-group,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-v81-group__grid{



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow:visible!important;



    contain:none!important;



  }







  /* A little breathing room after the final group means its selected outline is



     not hidden behind the sheet/dock edge. */



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open #bbd-panel .bbd-v81-group:last-child{



    padding-bottom:18px!important;



  }



}







@media (max-width:390px) and (max-height:760px){



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:min(80dvh,610px)!important;



    max-height:min(80dvh,610px)!important;



  }



}





/* BBD CSS: assets/css/editor-0239.css */
/* Baskibu Designer 0.23.9 — Unified Adaptive Inspector



 * Phone + narrow tablet: one iOS-style bottom inspector with a stable geometry for every primary tool.



 * Wide tablet: the same inspector becomes a right-side sheet.



 * Desktop: the inspector lives on the right side of the workspace.



 */







.bbd-app.bbd-release-0239{



  --bbd-0239-sheet-height:min(72dvh,680px);



  --bbd-0239-sheet-expanded-height:min(91dvh,820px);



  --bbd-0239-sheet-radius:20px;



  --bbd-0239-sheet-gap:8px;



  --bbd-0239-dock-height:64px;



}







/* ----------------------------- PHONE ----------------------------------- */



@media (max-width:899px), (min-width:900px) and (max-width:1100px) and (orientation:portrait){



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden],



  .bbd-app.bbd-release-0239.bbd-0237-product-options-open > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239.bbd-0238-product-options-open > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel{



    position:absolute!important;



    top:auto!important;



    right:var(--bbd-0239-sheet-gap)!important;



    bottom:calc(var(--bbd-0239-dock-height) + var(--bbd-0239-sheet-gap))!important;



    left:var(--bbd-0239-sheet-gap)!important;



    width:auto!important;



    min-width:0!important;



    max-width:none!important;



    height:var(--bbd-0239-active-sheet-height,var(--bbd-0239-sheet-height))!important;



    min-height:320px!important;



    max-height:calc(100dvh - 92px)!important;



    display:flex!important;



    flex-direction:column!important;



    margin:0!important;



    padding:0!important;



    overflow:hidden!important;



    border:1px solid rgba(148,163,184,.34)!important;



    border-radius:var(--bbd-0239-sheet-radius)!important;



    background:rgba(255,255,255,.985)!important;



    box-shadow:0 -18px 50px rgba(15,23,42,.16),0 3px 10px rgba(15,23,42,.05)!important;



    transform:translate3d(0,0,0)!important;



    transition:height 240ms cubic-bezier(.22,.8,.22,1),transform 220ms cubic-bezier(.22,.8,.22,1),opacity 180ms ease!important;



    visibility:visible!important;



    opacity:1!important;



    pointer-events:auto!important;



  }







  .bbd-app.bbd-release-0239.bbd-0239-sheet-expanded > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239.bbd-0239-sheet-expanded > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:var(--bbd-0239-active-sheet-height,var(--bbd-0239-sheet-expanded-height))!important;



  }







  /* One shared header. It never changes size between Product/Text/Layers/etc. */



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar{



    position:relative!important;



    top:auto!important;



    z-index:20!important;



    display:grid!important;



    grid-template-columns:34px minmax(0,1fr) 34px!important;



    align-items:center!important;



    gap:6px!important;



    width:100%!important;



    height:48px!important;



    min-height:48px!important;



    flex:0 0 48px!important;



    margin:0!important;



    padding:8px 9px 6px!important;



    border:0!important;



    border-bottom:1px solid rgba(226,232,240,.9)!important;



    background:rgba(255,255,255,.96)!important;



    backdrop-filter:blur(18px) saturate(1.16)!important;



    -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;



  }







  .bbd-app.bbd-release-0239 #bbd-mobile-sheet-title{



    align-self:center!important;



    overflow:hidden!important;



    font-size:13px!important;



    font-weight:800!important;



    line-height:1.15!important;



    letter-spacing:-.01em!important;



    text-align:center!important;



    text-overflow:ellipsis!important;



    white-space:nowrap!important;



  }







  .bbd-app.bbd-release-0239 #bbd-mobile-sheet-back{



    visibility:hidden!important;



    pointer-events:none!important;



  }







  .bbd-app.bbd-release-0239 #bbd-mobile-sheet-close{



    width:30px!important;



    min-width:30px!important;



    height:30px!important;



    min-height:30px!important;



    justify-self:end!important;



    border:0!important;



    border-radius:10px!important;



    background:#f1f5f9!important;



    color:#64748b!important;



    font-size:22px!important;



    line-height:1!important;



  }







  /* Real iOS-style grabber. JS turns it into a two-snap drag handle. */



  .bbd-app.bbd-release-0239 .bbd-mobile-sheet-grip{



    position:absolute!important;



    top:4px!important;



    left:50%!important;



    z-index:30!important;



    width:38px!important;



    height:4px!important;



    margin:0!important;



    border-radius:999px!important;



    background:#cbd5e1!important;



    transform:translateX(-50%)!important;



    cursor:ns-resize!important;



    touch-action:none!important;



    pointer-events:auto!important;



  }



  .bbd-app.bbd-release-0239 .bbd-mobile-sheet-grip::after{



    content:"";



    position:absolute;



    inset:-9px -14px;



  }







  /* The shell has one scroll owner: its visible panel section. Individual rich



     editors can still own a nested scroller when they explicitly need it. */



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    display:flex!important;



    flex:1 1 auto!important;



    flex-direction:column!important;



    width:100%!important;



    min-width:0!important;



    min-height:0!important;



    max-width:100%!important;



    height:auto!important;



    max-height:none!important;



    gap:10px!important;



    margin:0!important;



    padding:10px 11px calc(22px + env(safe-area-inset-bottom))!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior-y:contain!important;



    -webkit-overflow-scrolling:touch!important;



    touch-action:pan-y!important;



    scrollbar-gutter:stable!important;



    box-sizing:border-box!important;



  }







  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section[hidden],



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-edge-toggle{



    display:none!important;



  }







  /* Product option focus keeps the option list itself as the scroll owner, but



     it no longer changes the outer sheet height. */



  .bbd-app.bbd-release-0239.bbd-0238-product-options-open #bbd-panel > .bbd-panel-section:not([hidden]){



    overflow:hidden!important;



  }



  .bbd-app.bbd-release-0239.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options]{



    flex:1 1 auto!important;



    min-height:0!important;



    max-height:none!important;



  }



  .bbd-app.bbd-release-0239.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options-body]{



    flex:1 1 auto!important;



    min-height:0!important;



    max-height:none!important;



    overflow-y:auto!important;



    padding-bottom:34px!important;



  }







  /* Stable shell means menu changes feel like one inspector changing content,



     not six unrelated drawers opening at different heights. */



  .bbd-app.bbd-release-0239 #bbd-panel .bbd-panel-section.bbd-0239-section-enter:not([hidden]){



    animation:bbd0239SectionIn 190ms cubic-bezier(.22,.8,.22,1) both!important;



  }







  /* Keep the custom six-item dock visually attached to the sheet system. */



  .bbd-app.bbd-release-0239 > .bbd-v72-mobile-dock{



    height:64px!important;



    min-height:64px!important;



    padding-top:4px!important;



    padding-bottom:calc(4px + env(safe-area-inset-bottom))!important;



  }



}







@media (max-width:390px) and (max-height:760px){



  .bbd-app.bbd-release-0239{



    --bbd-0239-sheet-height:min(70dvh,535px);



    --bbd-0239-sheet-expanded-height:min(89dvh,660px);



  }



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    min-height:290px!important;



  }



}







/* ----------------------------- TABLET ---------------------------------- */



@media (min-width:900px) and (max-width:1100px) and (orientation:landscape){



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    position:absolute!important;



    z-index:4!important;



    top:72px!important;



    right:12px!important;



    bottom:78px!important;



    left:auto!important;



    width:min(380px,44vw)!important;



    min-width:330px!important;



    max-width:400px!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



    display:flex!important;



    flex-direction:column!important;



    margin:0!important;



    padding:0!important;



    overflow:hidden!important;



    border:1px solid rgba(148,163,184,.34)!important;



    border-radius:18px!important;



    background:rgba(255,255,255,.99)!important;



    box-shadow:-18px 18px 48px rgba(15,23,42,.16)!important;



    transform:translate3d(0,0,0)!important;



    visibility:visible!important;



    opacity:1!important;



    pointer-events:auto!important;



  }



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-mobile-sheet-bar{



    display:grid!important;



    grid-template-columns:34px minmax(0,1fr) 34px!important;



    align-items:center!important;



    height:48px!important;



    min-height:48px!important;



    flex:0 0 48px!important;



    padding:8px 10px!important;



    border-bottom:1px solid #e7ecf1!important;



    background:#fff!important;



  }



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel > .bbd-panel-section:not([hidden]){



    display:flex!important;



    flex:1 1 auto!important;



    flex-direction:column!important;



    min-height:0!important;



    padding:12px 13px 18px!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    -webkit-overflow-scrolling:touch!important;



  }



  .bbd-app.bbd-release-0239 #bbd-mobile-sheet-back,



  .bbd-app.bbd-release-0239 .bbd-mobile-sheet-grip{display:none!important}



}







/* Landscape tablet / small notebook: keep the canonical left tool rail, remove



   the now-empty legacy panel column, and let the right inspector float without



   wasting canvas width. */



@media (min-width:1025px) and (max-width:1100px){



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-workspace,



  .bbd-app.bbd-release-0239.bbd-shell-v0161.is-panel-collapsed .bbd-workspace,



  .bbd-app.bbd-release-0239.bbd-shell-v0161.is-inspector-collapsed .bbd-workspace{



    grid-template-columns:var(--bbd-rail-width) minmax(0,1fr)!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-stage-area{



    grid-column:2!important;



  }



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    bottom:12px!important;



  }



}







/* ----------------------------- DESKTOP --------------------------------- */



@media (min-width:1101px){



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-workspace,



  .bbd-app.bbd-release-0239.bbd-shell-v0161:not(.is-panel-collapsed).is-inspector-collapsed .bbd-workspace{



    grid-template-columns:var(--bbd-rail-width) minmax(0,1fr) var(--bbd-panel-width)!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161.is-panel-collapsed .bbd-workspace,



  .bbd-app.bbd-release-0239.bbd-shell-v0161.is-panel-collapsed.is-inspector-collapsed .bbd-workspace{



    grid-template-columns:var(--bbd-rail-width) minmax(0,1fr) 0!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-stage-area{



    grid-column:2!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-panel{



    grid-column:3!important;



    width:var(--bbd-panel-width)!important;



    border-right:0!important;



    border-left:1px solid var(--bbd-border-subtle)!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-panel-edge-toggle{



    right:auto!important;



    left:-40px!important;



    border-right:0!important;



    border-left:1px solid var(--bbd-border-subtle)!important;



    border-radius:8px 0 0 8px!important;



    box-shadow:-8px 4px 18px rgba(15,23,42,.1)!important;



  }



  .bbd-app.bbd-release-0239.bbd-shell-v0161 .bbd-panel-edge-toggle > span:first-child{



    transform:rotate(180deg)!important;



  }



}







@keyframes bbd0239SectionIn{



  from{opacity:.72;transform:translate3d(10px,0,0)}



  to{opacity:1;transform:translate3d(0,0,0)}



}







@media (prefers-reduced-motion:reduce){



  .bbd-app.bbd-release-0239 > #bbd-v60-mobile-sheet-host > #bbd-panel,



  .bbd-app.bbd-release-0239 #bbd-panel .bbd-panel-section{transition:none!important;animation:none!important}



}





/* BBD CSS: assets/css/editor-02310.css */
/* Baskibu Designer 0.23.10 — Inspector consistency + option transaction calm



 * Final correction over 0.23.9:



 * - all compact bottom inspectors share the exact same outer geometry



 * - portrait/narrow tablets use the bottom inspector; only wide landscape tablets use right inspector



 * - Product option transactions never change outer sheet height



 * - transient disabled state may not visually blink the option buttons



 */







.bbd-app.bbd-release-02310{



  --bbd-02310-sheet-height:min(72dvh,680px);



  --bbd-02310-sheet-expanded-height:min(91dvh,820px);



}







/* Phones + narrow tablets + portrait tablets: one canonical sheet height. */



@media (max-width:899px), (min-width:900px) and (max-width:1100px) and (orientation:portrait){



  .bbd-app.bbd-release-02310 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden],



  .bbd-app.bbd-release-02310.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310.bbd-0237-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden],



  .bbd-app.bbd-release-02310.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden],



  .bbd-app.bbd-release-02310.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310.bbd-release-0238.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    top:auto!important;



    right:8px!important;



    bottom:calc(var(--bbd-0239-dock-height,64px) + 8px)!important;



    left:8px!important;



    width:auto!important;



    height:var(--bbd-0239-active-sheet-height,var(--bbd-02310-sheet-height))!important;



    min-height:0!important;



    max-height:calc(100dvh - 92px)!important;



    overflow:hidden!important;



  }







  .bbd-app.bbd-release-02310.bbd-0239-sheet-expanded > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310.bbd-0239-sheet-expanded > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden],



  .bbd-app.bbd-release-02310.bbd-0239-sheet-expanded.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310.bbd-0239-sheet-expanded.bbd-0238-product-options-open[data-bbd-v92-panel="product"] > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    height:var(--bbd-0239-active-sheet-height,var(--bbd-02310-sheet-expanded-height))!important;



    max-height:calc(100dvh - 92px)!important;



  }







  /* Product mode uses the same sheet; only the inner option body scrolls. */



  .bbd-app.bbd-release-02310.bbd-0238-product-options-open #bbd-panel > .bbd-panel-section:not([hidden]){



    min-height:0!important;



    height:auto!important;



    max-height:none!important;



    overflow:hidden!important;



  }



  .bbd-app.bbd-release-02310.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options]{



    display:flex!important;



    flex:1 1 auto!important;



    flex-direction:column!important;



    min-height:0!important;



    max-height:none!important;



    overflow:hidden!important;



  }



  .bbd-app.bbd-release-02310.bbd-0238-product-options-open #bbd-panel [data-bbd-v53-options-body]{



    flex:1 1 auto!important;



    min-height:0!important;



    height:auto!important;



    max-height:none!important;



    overflow-x:hidden!important;



    overflow-y:auto!important;



    overscroll-behavior-y:contain!important;



    -webkit-overflow-scrolling:touch!important;



    padding-bottom:36px!important;



  }



}







/* Wide landscape tablets retain the iPad-style side inspector. Its top/bottom



   anchors are fixed, therefore every tool has exactly the same panel height. */



@media (min-width:900px) and (max-width:1100px) and (orientation:landscape){



  .bbd-app.bbd-release-02310 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel,



  .bbd-app.bbd-release-02310 > #bbd-v60-mobile-sheet-host.is-open > #bbd-panel[hidden]{



    top:72px!important;



    right:12px!important;



    bottom:12px!important;



    left:auto!important;



    width:min(380px,42vw)!important;



    height:auto!important;



    min-height:0!important;



    max-height:none!important;



  }



}







/* The Product Engine briefly disables controls while dependent values settle.



   That is processing state, not a reason for the visible proxy pills to flash.



   Keep their opacity/geometry calm during the dev92 transaction. */



.bbd-app.bbd-release-02310.bbd-v92-option-transaction .bbd-v81-option,



.bbd-app.bbd-release-02310.bbd-v92-option-transaction .bbd-v81-option:disabled,



.bbd-app.bbd-release-02310.bbd-0237-option-transaction .bbd-v81-option,



.bbd-app.bbd-release-02310.bbd-0237-option-transaction .bbd-v81-option:disabled{



  opacity:1!important;



  visibility:visible!important;



  transform:none!important;



  animation:none!important;



  transition:none!important;



}







/* Reserve the current option grid geometry while a choice commits. */



.bbd-app.bbd-release-02310.bbd-v92-option-transaction .bbd-v81-options-shell,



.bbd-app.bbd-release-02310.bbd-v92-option-transaction .bbd-v81-group,



.bbd-app.bbd-release-02310.bbd-v92-option-transaction .bbd-v81-group__grid{



  opacity:1!important;



  visibility:visible!important;



  animation:none!important;



  transition:none!important;



  overflow-anchor:none!important;



}





/* BBD CSS: assets/css/editor-02311.css */
/* Baskibu Designer 0.23.11 — Same-side desktop tool panel



 * Desktop correction over 0.23.9/0.23.10:



 * - the primary tool rail and its content panel live together on the LEFT



 * - the canvas follows immediately to the right



 * - mobile/tablet inspector behavior from 0.23.10 is intentionally preserved



 *



 * Rationale: a tool selected on the left should not make the user's eyes travel



 * across the entire canvas to find its content on the opposite edge.



 */







.bbd-app.bbd-release-02311{



  --bbd-02311-desktop-panel-width:clamp(336px,23vw,380px);



}







@media (min-width:1101px){



  /* Canonical desktop flow: [tool rail] [tool content] [canvas]. */



  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-workspace,



  .bbd-app.bbd-release-02311.bbd-shell-v0161:not(.is-panel-collapsed).is-inspector-collapsed .bbd-workspace{



    grid-template-columns:var(--bbd-rail-width) var(--bbd-02311-desktop-panel-width) minmax(0,1fr)!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161.is-panel-collapsed .bbd-workspace,



  .bbd-app.bbd-release-02311.bbd-shell-v0161.is-panel-collapsed.is-inspector-collapsed .bbd-workspace{



    grid-template-columns:var(--bbd-rail-width) 0 minmax(0,1fr)!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-sidebar{



    grid-column:1!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-panel{



    grid-column:2!important;



    grid-row:1!important;



    width:var(--bbd-02311-desktop-panel-width)!important;



    min-width:0!important;



    max-width:none!important;



    height:100%!important;



    border-left:0!important;



    border-right:1px solid var(--bbd-border-subtle)!important;



    background:#fff!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161.is-panel-collapsed .bbd-panel{



    width:0!important;



    min-width:0!important;



    overflow:hidden!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-stage-area{



    grid-column:3!important;



    grid-row:1!important;



    min-width:0!important;



  }







  /* The collapse handle belongs to the outside edge of the LEFT panel. */



  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-panel-edge-toggle{



    right:-40px!important;



    left:auto!important;



    border-right:1px solid var(--bbd-border-subtle)!important;



    border-left:0!important;



    border-radius:0 8px 8px 0!important;



    box-shadow:8px 4px 18px rgba(15,23,42,.10)!important;



  }







  .bbd-app.bbd-release-02311.bbd-shell-v0161 .bbd-panel-edge-toggle > span:first-child{



    transform:none!important;



  }







  /* Keep the content visually attached to the selected tool instead of reading



     like an independent right-side inspector. */



  .bbd-app.bbd-release-02311 .bbd-panel-section:not([hidden]){



    scrollbar-gutter:stable!important;



  }



}





/* BBD CSS: assets/css/editor-02312.css */
/* Baskibu Designer 0.23.12 — Clean Layers + Tight Text Bounds



 * Layers becomes a dense object navigator, not a settings wall.



 * Textbox visual bounds are corrected in JS so object alignment follows the



 * visible text instead of an oversized legacy textbox width.



 */







.bbd-app.bbd-release-02312 .bbd-v2312-icon{



  display:block!important;



  width:18px!important;



  height:18px!important;



  pointer-events:none!important;



}







/* --------------------------------------------------------------------------



   Layers: object list first, secondary commands second.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-release-02312 .bbd-v2312-layers-clean{



  gap:10px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layers-clean>.bbd-pro-panel-intro[data-for="layers"]{



  display:none!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-search{



  margin:0!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-search input{



  min-height:42px!important;



  height:42px!important;



  padding:0 13px!important;



  border-radius:12px!important;



  font-size:12.5px!important;



}







.bbd-app.bbd-release-02312 .bbd-v2312-layer-list,



.bbd-app.bbd-release-02312 .bbd-v92-layers-panel #bbd-layer-list.bbd-v2312-layer-list,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list{



  display:flex!important;



  flex-direction:column!important;



  gap:6px!important;



  min-height:150px!important;



  max-height:min(43vh,430px)!important;



  padding:2px!important;



  margin:0!important;



  overflow-y:auto!important;



  overflow-x:hidden!important;



  scrollbar-gutter:stable!important;



}







.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-row,



.bbd-app.bbd-release-02312 .bbd-v92-layers-panel .bbd-v2312-layer-list .bbd-layer-row{



  display:grid!important;



  grid-template-columns:minmax(0,1fr) repeat(5,30px)!important;



  grid-template-rows:48px!important;



  align-items:center!important;



  gap:3px!important;



  min-height:48px!important;



  height:48px!important;



  padding:4px 5px!important;



  border:1px solid #e3e9e8!important;



  border-radius:12px!important;



  background:#fff!important;



  box-shadow:none!important;



  overflow:hidden!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row:hover{



  border-color:#cfdad7!important;



  background:#fbfdfc!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected{



  border-color:#7fc8b7!important;



  background:#f0faf7!important;



  box-shadow:0 0 0 2px rgba(11,122,106,.07)!important;



}







.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-main,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-main,



.bbd-app.bbd-release-02312 .bbd-v92-layers-panel .bbd-v2312-layer-list .bbd-layer-main{



  grid-column:1!important;



  grid-row:1!important;



  display:flex!important;



  align-items:center!important;



  min-width:0!important;



  min-height:40px!important;



  height:40px!important;



  padding:3px 5px!important;



  gap:7px!important;



  border:0!important;



  background:transparent!important;



  text-align:left!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-drag-handle{



  flex:0 0 9px!important;



  width:9px!important;



  opacity:.26!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row:hover .bbd-layer-drag-handle,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected .bbd-layer-drag-handle{



  opacity:.62!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-thumb{



  flex:0 0 32px!important;



  width:32px!important;



  height:32px!important;



  border-radius:9px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-text{



  min-width:0!important;



  display:block!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-name{



  display:block!important;



  min-width:0!important;



  overflow:hidden!important;



  text-overflow:ellipsis!important;



  white-space:nowrap!important;



  color:#263445!important;



  font-size:12.5px!important;



  line-height:1.2!important;



  font-weight:760!important;



}



/* Quality already has a dedicated workspace indicator; repeating it on every



   layer is visual noise. Group/template metadata remains available through the



   object itself, but is intentionally not repeated in the navigator. */



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-meta,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-quality{



  display:none!important;



}







.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-eye,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-solo,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-lock,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-copy,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-trash,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-eye,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-solo,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-lock,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-copy,



.bbd-app.bbd-release-02312 .bbd-v91-layer-list.bbd-v2312-layer-list .bbd-layer-trash{



  grid-row:1!important;



  width:30px!important;



  min-width:30px!important;



  height:30px!important;



  min-height:30px!important;



  padding:0!important;



  place-items:center!important;



  border:0!important;



  border-radius:8px!important;



  background:transparent!important;



  color:#667085!important;



  opacity:0!important;



  visibility:hidden!important;



  transition:opacity .12s ease,background-color .12s ease,color .12s ease!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-eye{grid-column:2!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-solo{grid-column:3!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-lock{grid-column:4!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-copy{grid-column:5!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-trash{grid-column:6!important;color:#b42318!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row:hover>button:not(.bbd-layer-main),



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row:focus-within>button:not(.bbd-layer-main),



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected>button:not(.bbd-layer-main){



  opacity:1!important;



  visibility:visible!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row>button:not(.bbd-layer-main):hover{



  background:#eef4f2!important;



  color:#263445!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-trash:hover{



  background:#fff0ee!important;



  color:#b42318!important;



}







/* Order is one compact four-button toolbar. */



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order{



  display:grid!important;



  grid-template-columns:auto minmax(0,1fr)!important;



  align-items:center!important;



  gap:10px!important;



  padding:8px 9px!important;



  border:1px solid #e3e9e8!important;



  border-radius:13px!important;



  background:#fafcfb!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order .bbd-v92-card-title{



  min-width:36px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order .bbd-v92-card-title strong{



  font-size:11.5px!important;



  font-weight:800!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order .bbd-v92-layer-order-actions{



  display:grid!important;



  grid-template-columns:repeat(4,1fr)!important;



  gap:5px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order .bbd-v92-layer-order-actions button{



  min-height:34px!important;



  height:34px!important;



  padding:0!important;



  display:grid!important;



  place-items:center!important;



  border:1px solid #e0e8e6!important;



  border-radius:9px!important;



  background:#fff!important;



  color:#526071!important;



}







/* Alignment keeps only the six frequent commands visible. */



.bbd-app.bbd-release-02312 .bbd-v2312-align-card{



  display:grid!important;



  grid-template-columns:44px minmax(0,1fr)!important;



  align-items:center!important;



  gap:9px!important;



  margin:0!important;



  padding:8px 9px!important;



  border:1px solid #e3e9e8!important;



  border-radius:13px!important;



  background:#fff!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-align-card>span{



  color:#344054!important;



  font-size:11.5px!important;



  font-weight:800!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-align-grid{



  display:grid!important;



  grid-template-columns:repeat(6,1fr)!important;



  gap:4px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-align-grid>[data-bbd-align]{



  display:none!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-align-grid>.bbd-v2312-align-primary{



  display:grid!important;



  place-items:center!important;



  min-width:0!important;



  min-height:34px!important;



  height:34px!important;



  padding:0!important;



  border:1px solid #e1e8e6!important;



  border-radius:9px!important;



  background:#fff!important;



  color:#526071!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-align-grid>.bbd-v2312-align-primary:hover,



.bbd-app.bbd-release-02312 .bbd-v2312-layer-order button:hover{



  border-color:#b9d8d1!important;



  background:#f0f8f6!important;



  color:#0b7a6a!important;



}







/* Rare layer operations live behind one calm disclosure. */



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more{



  margin:0!important;



  border:1px solid #e3e9e8!important;



  border-radius:13px!important;



  background:#fff!important;



  overflow:hidden!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more>summary{



  min-height:40px!important;



  padding:0 11px!important;



  display:flex!important;



  align-items:center!important;



  justify-content:space-between!important;



  cursor:pointer!important;



  list-style:none!important;



  color:#526071!important;



  user-select:none!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more>summary::-webkit-details-marker{display:none!important}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more>summary>span:first-child{



  display:flex!important;



  align-items:center!important;



  gap:8px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more>summary strong{



  font-size:11.5px!important;



  font-weight:760!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-chevron{



  transition:transform .15s ease!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more[open] .bbd-v2312-chevron{



  transform:rotate(180deg)!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-layer-more__body{



  display:grid!important;



  gap:7px!important;



  padding:0 9px 9px!important;



  border-top:1px solid #edf1f0!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-advanced-grid{



  display:grid!important;



  grid-template-columns:repeat(4,1fr)!important;



  gap:5px!important;



  padding-top:8px!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-advanced-grid button,



.bbd-app.bbd-release-02312 .bbd-v2312-group-row button,



.bbd-app.bbd-release-02312 .bbd-v2312-delete-action{



  display:grid!important;



  place-items:center!important;



  min-width:0!important;



  min-height:36px!important;



  height:36px!important;



  padding:0!important;



  border:1px solid #e1e8e6!important;



  border-radius:9px!important;



  background:#fff!important;



  color:#526071!important;



  box-shadow:none!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-group-row{



  display:grid!important;



  grid-template-columns:1fr 1fr!important;



  gap:5px!important;



  margin:0!important;



}



.bbd-app.bbd-release-02312 .bbd-v2312-delete-action{



  width:100%!important;



  color:#b42318!important;



  border-color:#fee4e2!important;



  background:#fff8f7!important;



}







/* Compact layouts keep row actions available on the selected layer because



   hover does not exist on touch screens. */



@media (max-width:1100px){



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list{



    max-height:min(35dvh,300px)!important;



    min-height:120px!important;



  }



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row{



    grid-template-columns:minmax(0,1fr) repeat(3,32px)!important;



  }



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-eye{grid-column:2!important}



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-lock{grid-column:3!important}



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-trash{grid-column:4!important}



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-solo,



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-copy{display:none!important}



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected>.bbd-layer-eye,



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected>.bbd-layer-lock,



  .bbd-app.bbd-release-02312 .bbd-v2312-layer-list .bbd-layer-row.is-selected>.bbd-layer-trash{



    opacity:1!important;



    visibility:visible!important;



  }



  .bbd-app.bbd-release-02312 .bbd-v2312-align-grid{



    grid-template-columns:repeat(3,1fr)!important;



  }



}





/* BBD CSS: assets/css/editor-02313.css */
/* Baskibu Designer 0.23.13 — Clean Preview + Zero-Flash Options



 * - Preview mode is a true presentation surface: no dead tool rail/panel gutter.



 * - Product Studio uses a brighter warm-neutral editorial background.



 * - Product option transactions are visually frozen in place while native



 *   Configurator/Fabric state settles, so no white blink or button flash leaks.



 */







/* --------------------------------------------------------------------------



   Preview: one uninterrupted presentation canvas.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-release-02313.is-preview-mode .bbd-workspace,



.bbd-app.bbd-release-02313.bbd-shell-v0161.is-preview-mode .bbd-workspace,



.bbd-app.bbd-release-02313.bbd-shell-v0161.is-preview-mode.is-panel-collapsed .bbd-workspace,



.bbd-app.bbd-release-02313.bbd-shell-v0161.is-preview-mode.is-inspector-collapsed .bbd-workspace,



.bbd-app.bbd-release-02313.bbd-shell-v0161.is-preview-mode.is-panel-collapsed.is-inspector-collapsed .bbd-workspace{



  grid-template-columns:minmax(0,1fr)!important;



  width:100%!important;



  min-width:0!important;



}







.bbd-app.bbd-release-02313.is-preview-mode .bbd-sidebar,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-panel,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-inspector,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-panel-edge-toggle,



.bbd-app.bbd-release-02313.is-preview-mode #bbd-v60-mobile-sheet-host,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-v72-mobile-dock{



  display:none!important;



  width:0!important;



  min-width:0!important;



  max-width:0!important;



  opacity:0!important;



  pointer-events:none!important;



}







.bbd-app.bbd-release-02313.is-preview-mode .bbd-stage-area,



.bbd-app.bbd-release-02313.bbd-shell-v0161.is-preview-mode .bbd-stage-area{



  grid-column:1/-1!important;



  grid-row:1!important;



  width:100%!important;



  max-width:none!important;



  min-width:0!important;



  margin:0!important;



  background:#f4f6f5!important;



}







.bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview{



  inset:0!important;



  width:100%!important;



  max-width:none!important;



  margin:0!important;



  padding:10px!important;



  background:linear-gradient(180deg,#f8faf9 0%,#f3f5f4 100%)!important;



}







.bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview__viewport,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview__viewport.is-three-preview{



  inset:10px!important;



  border:1px solid rgba(98,111,107,.13)!important;



  border-radius:18px!important;



  background:#f3f2ee!important;



  box-shadow:0 12px 36px rgba(28,39,36,.055),inset 0 1px 0 rgba(255,255,255,.78)!important;



}







/* Preview chrome remains crisp over the lighter studio. */



.bbd-app.bbd-release-02313.is-preview-mode .bbd-preview-pro-chrome,



.bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview__three-controls{



  border-color:rgba(130,143,139,.24)!important;



  background:rgba(255,255,255,.90)!important;



  box-shadow:0 10px 28px rgba(28,39,36,.08)!important;



  backdrop-filter:blur(14px) saturate(1.05)!important;



  -webkit-backdrop-filter:blur(14px) saturate(1.05)!important;



}







/* --------------------------------------------------------------------------



   Options: transaction state must never visually blink.



   -------------------------------------------------------------------------- */



.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-panel-content="product"],



.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-bbd-v53-options],



.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-bbd-v53-options-body],



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-options-shell,



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-group,



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-group__grid,



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-option{



  animation:none!important;



  transition:none!important;



}







.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-bbd-v53-options],



.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-bbd-v53-options][hidden]{



  visibility:visible!important;



  opacity:1!important;



}







.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-option,



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-option:disabled{



  visibility:visible!important;



  opacity:1!important;



  transform:none!important;



  filter:none!important;



}







/* A short-lived visual snapshot sits above the live option DOM while Woo/



   Configurator dependent state settles. It is non-interactive and mirrors the



   user's newly selected pill immediately. */



.bbd-app.bbd-release-02313 .bbd-v2313-option-freeze{



  position:fixed!important;



  z-index:2147482500!important;



  margin:0!important;



  overflow:hidden!important;



  pointer-events:none!important;



  user-select:none!important;



  background:#fff!important;



  opacity:1!important;



  visibility:visible!important;



  animation:none!important;



  transition:none!important;



  contain:layout paint style!important;



}



.bbd-app.bbd-release-02313 .bbd-v2313-option-freeze .bbd-v81-option,



.bbd-app.bbd-release-02313 .bbd-v2313-option-freeze .bbd-v81-group,



.bbd-app.bbd-release-02313 .bbd-v2313-option-freeze .bbd-v81-group__grid{



  animation:none!important;



  transition:none!important;



}







@media (max-width:1100px){



  .bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview{padding:7px!important}



  .bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview__viewport,



  .bbd-app.bbd-release-02313.is-preview-mode .bbd-product-preview__viewport.is-three-preview{



    inset:7px!important;



    border-radius:15px!important;



  }



}





/* BBD CSS: assets/css/editor-02314.css */
/* Baskibu Designer 0.23.14



   Natural typography hit bounds + no-interception drag lifecycle */







.bbd-app.bbd-release-02314 .bbd-stage-area,



.bbd-app.bbd-release-02314 .bbd-canvas-shell,



.bbd-app.bbd-release-02314 canvas.upper-canvas,



.bbd-app.bbd-release-02314 canvas.lower-canvas{



  overscroll-behavior:contain!important;



  -webkit-user-select:none!important;



  user-select:none!important;



}



.bbd-app.bbd-release-02314 canvas.upper-canvas,



.bbd-app.bbd-release-02314 canvas.lower-canvas{



  touch-action:none!important;



}







/* The bottom inspector is informational. Its large glass surface must never



   steal a drag from Fabric; only the two explicit buttons are interactive. */



.bbd-app.bbd-release-02314 > .bbd-v92-selection-hud{



  pointer-events:none!important;



}



.bbd-app.bbd-release-02314 > .bbd-v92-selection-hud .bbd-v92-selection-hud__actions button{



  pointer-events:auto!important;



}







/* While Fabric owns a transform, no floating DOM chrome is allowed under the



   pointer. This prevents a text drag from ending on the HUD/toolbar and leaving



   the canvas in a stuck transform state. */



.bbd-app.bbd-release-02314.bbd-v2314-transforming > .bbd-v92-selection-hud,



.bbd-app.bbd-release-02314.bbd-v2314-transforming .bbd-context-route-toolbar{



  opacity:0!important;



  visibility:hidden!important;



  pointer-events:none!important;



  transition:none!important;



}







/* Natural-bound preset text should feel like a word/line, not a hidden box. */



.bbd-app.bbd-release-02314 .bbd-context-route-toolbar{



  will-change:top,left,opacity!important;



}







@media (prefers-reduced-motion:reduce){



  .bbd-app.bbd-release-02314 .bbd-context-route-toolbar,



  .bbd-app.bbd-release-02314 > .bbd-v92-selection-hud{



    transition:none!important;



  }



}





/* BBD CSS: assets/css/editor-02315.css */
/* Baskibu Designer 0.23.15 — Composition integrity + unlocked option freeze */







/* Option freeze is purely visual. Never let it participate in scrolling or hit testing. */



.bbd-app.bbd-release-02313 .bbd-v2313-option-freeze{



  pointer-events:none!important;



  touch-action:auto!important;



  overscroll-behavior:auto!important;



}







/* The real option body remains the scroll owner while the short visual freeze exists. */



.bbd-app.bbd-release-02313.bbd-v2313-option-hold [data-bbd-v53-options-body],



.bbd-app.bbd-release-02313.bbd-v2313-option-hold .bbd-v81-options-scroll{



  overflow-y:auto!important;



  overscroll-behavior:contain!important;



  touch-action:pan-y!important;



  -webkit-overflow-scrolling:touch!important;



}







/* Do not globally turn the stage shell into a touch trap. Fabric owns only its canvas. */



.bbd-app.bbd-release-02314 .bbd-canvas-shell{



  touch-action:auto!important;



}





/* BBD CSS: assets/css/editor-02316.css */
/* Baskibu Designer 0.23.16 — stable compositions + native option reconciliation */







/* Legacy freeze clones are no longer part of the option transaction. Keep a



   hard safety rule for BFCache/hot-reload leftovers so they can never eat taps. */



.bbd-app.bbd-release-02316 .bbd-v2313-option-freeze,



.bbd-app.bbd-release-02316 .bbd-v2313-option-freeze *{



  pointer-events:none!important;



  touch-action:none!important;



}



.bbd-app.bbd-release-02316 .bbd-v2313-option-freeze{display:none!important}







/* Product proxy controls remain interactive while the hidden configurator is



   recalculating. Genuine hard-disabled states can still be expressed by the



   button's disabled attribute on non-Yelken products. */



.bbd-app.bbd-release-02316 .bbd-v81-option:not(:disabled){



  pointer-events:auto!important;



  touch-action:manipulation!important;



}







/* Newly inserted typography presets are one coherent movable unit. */



.bbd-app.bbd-release-02316 .upper-canvas{touch-action:none}





/* BBD CSS: assets/css/editor-02321.css */
/* Baskibu Designer 0.23.21 — stable typography + desktop right contextual inspector */





/* Desktop object information no longer sits on top of the artwork. */


@media (min-width:1180px){


  .bbd-app.bbd-release-02321 > .bbd-v92-selection-hud{


    display:none!important;


  }





  .bbd-app.bbd-release-02321 > .bbd-v2321-context-dock{


    position:fixed!important;


    z-index:9180!important;


    display:flex!important;


    flex-direction:column!important;


    gap:12px!important;


    padding:14px!important;


    overflow:auto!important;


    border:1px solid rgba(210,221,219,.98)!important;


    border-radius:20px!important;


    background:rgba(255,255,255,.975)!important;


    box-shadow:0 20px 56px rgba(15,23,42,.14),0 4px 14px rgba(15,23,42,.05)!important;


    backdrop-filter:blur(20px) saturate(1.08)!important;


    color:#1d2939!important;


    overscroll-behavior:contain!important;


  }


  .bbd-app.bbd-release-02321 > .bbd-v2321-context-dock[hidden]{display:none!important}





  .bbd-v2321-context-dock__head{


    display:flex!important;


    align-items:flex-start!important;


    justify-content:space-between!important;


    gap:10px!important;


    padding:1px 1px 10px!important;


    border-bottom:1px solid #e8eeed!important;


  }


  .bbd-v2321-context-dock__head>div{


    min-width:0!important;


    display:flex!important;


    flex-direction:column!important;


    gap:3px!important;


  }


  .bbd-v2321-context-dock__head small,


  .bbd-v2321-context-dock__identity small,


  .bbd-v2321-context-dock__metrics small{


    color:#8a96a6!important;


    font-size:9.5px!important;


    font-weight:800!important;


    line-height:1.1!important;


    letter-spacing:.075em!important;


    text-transform:uppercase!important;


  }


  .bbd-v2321-context-dock__head strong{


    max-width:205px!important;


    overflow:hidden!important;


    text-overflow:ellipsis!important;


    white-space:nowrap!important;


    color:#172033!important;


    font-size:17px!important;


    line-height:1.22!important;


    font-weight:850!important;


  }


  .bbd-v2321-context-dock__kind{


    flex:0 0 auto!important;


    min-height:26px!important;


    display:inline-flex!important;


    align-items:center!important;


    padding:0 9px!important;


    border:1px solid #cfe6df!important;


    border-radius:999px!important;


    background:#eff9f6!important;


    color:#0b7a6a!important;


    font-size:10px!important;


    font-weight:800!important;


  }





  .bbd-v2321-context-dock__identity{


    display:flex!important;


    align-items:center!important;


    gap:10px!important;


    min-width:0!important;


    padding:10px!important;


    border:1px solid #e5ecea!important;


    border-radius:15px!important;


    background:#fafcfc!important;


  }


  .bbd-v2321-context-dock__identity>div{


    min-width:0!important;


    display:flex!important;


    flex-direction:column!important;


    gap:3px!important;


  }


  .bbd-v2321-context-dock__identity strong{


    max-width:205px!important;


    overflow:hidden!important;


    text-overflow:ellipsis!important;


    white-space:nowrap!important;


    font-size:12.5px!important;


    font-weight:800!important;


  }


  .bbd-v2321-context-dock__swatch{


    flex:0 0 34px!important;


    width:34px!important;


    height:34px!important;


    border:3px solid #fff!important;


    border-radius:11px!important;


    box-shadow:0 0 0 1px #d8e2e0,0 3px 8px rgba(15,23,42,.08)!important;


  }





  .bbd-v2321-context-dock__metrics{


    display:grid!important;


    grid-template-columns:repeat(2,minmax(0,1fr))!important;


    gap:7px!important;


  }


  .bbd-v2321-context-dock__metrics>div{


    min-width:0!important;


    padding:9px 10px!important;


    border:1px solid #e4ebe9!important;


    border-radius:13px!important;


    background:#f8fbfa!important;


  }


  .bbd-v2321-context-dock__metrics>div.is-wide{grid-column:1/-1!important}


  .bbd-v2321-context-dock__metrics strong{


    display:block!important;


    margin-top:4px!important;


    color:#344054!important;


    font-size:11.5px!important;


    line-height:1.2!important;


    font-weight:800!important;


    white-space:nowrap!important;


  }





  .bbd-v2321-context-dock__section{


    display:flex!important;


    flex-direction:column!important;


    gap:8px!important;


  }


  .bbd-v2321-context-dock__section-title{


    padding:0 2px!important;


    color:#667085!important;


    font-size:10.5px!important;


    font-weight:800!important;


  }





  /* Reuse the actual contextual toolbar — and therefore all existing click


     handlers — but render it as a normal two-column inspector section. */


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar,


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar:not([hidden]){


    position:static!important;


    inset:auto!important;


    left:auto!important;


    right:auto!important;


    top:auto!important;


    bottom:auto!important;


    transform:none!important;


    width:100%!important;


    max-width:none!important;


    min-width:0!important;


    display:grid!important;


    grid-template-columns:repeat(2,minmax(0,1fr))!important;


    gap:7px!important;


    padding:0!important;


    margin:0!important;


    overflow:visible!important;


    border:0!important;


    border-radius:0!important;


    background:transparent!important;


    box-shadow:none!important;


    backdrop-filter:none!important;


  }


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar[hidden]{display:none!important}


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar>button{


    width:100%!important;


    min-width:0!important;


    min-height:42px!important;


    height:42px!important;


    display:flex!important;


    align-items:center!important;


    justify-content:flex-start!important;


    gap:8px!important;


    padding:0 11px!important;


    border:1px solid #dfe7e5!important;


    border-radius:12px!important;


    background:#fff!important;


    color:#344054!important;


    box-shadow:none!important;


    font-size:11.5px!important;


    font-weight:800!important;


  }


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar>button:hover{


    border-color:#b8dcd4!important;


    background:#f1faf7!important;


    color:#0b7a6a!important;


  }


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar .bbd-context-label,


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar .bbd-context-label-short{


    display:inline!important;


    overflow:hidden!important;


    text-overflow:ellipsis!important;


    white-space:nowrap!important;


  }


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar .bbd-context-label-short{


    display:none!important;


  }


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar svg,


  .bbd-v2321-context-dock .bbd-context-route-toolbar.bbd-v2321-docked-toolbar .bbd-context-icon{


    flex:0 0 17px!important;


    width:17px!important;


    height:17px!important;


  }





  .bbd-v2321-context-dock__hint{


    padding:10px 11px!important;


    border-radius:13px!important;


    background:#f6f8fa!important;


    color:#667085!important;


    font-size:10.5px!important;


    line-height:1.45!important;


    font-weight:600!important;


  }


}





/* Tablet/mobile keep the existing compact contextual behavior. The right dock


   never competes with a narrow canvas. */


@media (max-width:1179px){


  .bbd-app.bbd-release-02321 > .bbd-v2321-context-dock{display:none!important}


}




/* BBD CSS: assets/css/editor-02323.css */
/* Baskibu Designer 0.23.23 — Full Design Preservation + Premium Preview Scenes V2 */





.bbd-app.bbd-release-02323.is-preview-mode .bbd-stage-area{


  background:#eef1ef!important;


}





.bbd-app.bbd-release-02323.is-preview-mode .bbd-product-preview{


  background:linear-gradient(180deg,#f8faf9 0%,#eef2f0 100%)!important;


}





.bbd-app.bbd-release-02323.is-preview-mode .bbd-product-preview__viewport,


.bbd-app.bbd-release-02323.is-preview-mode .bbd-product-preview__viewport.is-three-preview{


  position:relative!important;


  isolation:isolate!important;


  overflow:hidden!important;


  border:1px solid rgba(72,82,77,.12)!important;


  border-radius:20px!important;


  box-shadow:0 24px 70px rgba(31,42,37,.10), inset 0 1px 0 rgba(255,255,255,.85)!important;


}





/* Scene fallbacks are intentionally very different even before WebGL paints. */


.bbd-app.bbd-release-02323 .bbd-product-preview__viewport.bbd-v2323-scene-studio{


  background:


    radial-gradient(circle at 52% 28%,rgba(255,255,255,.96) 0,rgba(255,255,255,.20) 38%,transparent 63%),


    linear-gradient(180deg,#fbf6ef 0%,#eee4d8 64%,#d9cbbc 100%)!important;


}


.bbd-app.bbd-release-02323 .bbd-product-preview__viewport.bbd-v2323-scene-showroom{


  background:


    repeating-linear-gradient(90deg,rgba(93,113,126,.055) 0 1px,transparent 1px 22%),


    radial-gradient(circle at 52% 25%,rgba(255,255,255,.94) 0,rgba(255,255,255,.20) 40%,transparent 66%),


    linear-gradient(180deg,#f3f7f9 0%,#e2eaf0 60%,#cbd6dc 100%)!important;


}


.bbd-app.bbd-release-02323 .bbd-product-preview__viewport.bbd-v2323-scene-clean{


  background:radial-gradient(circle at 52% 32%,#fff 0,#fff 36%,#fafbf9 70%,#eef0ed 100%)!important;


}





/* Hide the older light-mode bar. One scene owner avoids contradictory controls. */


.bbd-app.bbd-release-02323 .bbd-mega-scene-bar{display:none!important}





.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker{


  position:absolute;


  z-index:24;


  left:18px;


  top:18px;


  display:flex;


  align-items:center;


  gap:9px;


  max-width:calc(100% - 36px);


  padding:6px 7px 6px 11px;


  border:1px solid rgba(117,126,121,.20);


  border-radius:14px;


  background:rgba(255,255,255,.91);


  box-shadow:0 10px 30px rgba(26,36,31,.11);


  -webkit-backdrop-filter:blur(18px) saturate(1.08);


  backdrop-filter:blur(18px) saturate(1.08);


  pointer-events:auto;


}


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker__label{


  color:#68736e;


  font-size:10px;


  line-height:1;


  font-weight:850;


  letter-spacing:.08em;


  text-transform:uppercase;


  white-space:nowrap;


}


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker__buttons{display:flex;align-items:center;gap:3px;min-width:0}


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker button{


  min-height:31px;


  padding:6px 11px;


  border:1px solid transparent;


  border-radius:9px;


  background:transparent;


  color:#34423d;


  font:inherit;


  font-size:11px;


  font-weight:790;


  cursor:pointer;


  white-space:nowrap;


}


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker button:hover{background:rgba(239,244,241,.94)}


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker button.is-active,


.bbd-app.bbd-release-02323 .bbd-v2323-scene-picker button[aria-pressed="true"]{


  border-color:rgba(7,137,113,.23);


  background:#e7f7f2;


  color:#087a68;


  box-shadow:inset 0 0 0 1px rgba(7,137,113,.03);


}





.bbd-app.bbd-release-02323.bbd-v2323-size-preserved .bbd-canvas-shell{


  animation:bbd-v2323-preserve .52s ease both;


}


@keyframes bbd-v2323-preserve{


  0%{filter:saturate(.95)}


  50%{filter:saturate(1.06)}


  100%{filter:none}


}





@media(max-width:1024px){


  .bbd-app.bbd-release-02323 .bbd-v2323-scene-picker{


    left:10px;top:10px;max-width:calc(100% - 20px);padding:5px;border-radius:12px;


  }


  .bbd-app.bbd-release-02323 .bbd-v2323-scene-picker__label{display:none}


  .bbd-app.bbd-release-02323 .bbd-v2323-scene-picker__buttons{overflow-x:auto;scrollbar-width:none}


  .bbd-app.bbd-release-02323 .bbd-v2323-scene-picker__buttons::-webkit-scrollbar{display:none}


  .bbd-app.bbd-release-02323 .bbd-v2323-scene-picker button{min-height:32px;padding:6px 9px}


}




/* BBD CSS: assets/css/editor-02326.css */
/* Baskibu Designer 0.23.26


 * Native shaped artboard + neutral template labels.


 */





.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-shell {


  background:


    radial-gradient(circle at 50% 42%, rgba(255,255,255,.82) 0%, rgba(244,247,250,.58) 35%, rgba(230,236,242,.48) 72%, rgba(221,228,235,.5) 100%) !important;


}





.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container,


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-shell .canvas-container:hover,


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-container,


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-shell canvas.lower-canvas,


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-shell canvas.upper-canvas {


  background: transparent !important;


  background-color: transparent !important;


  border: 0 !important;


  border-radius: 0 !important;


  box-shadow: none !important;


  outline: 0 !important;


}





/* The product silhouette itself is the visual paper. The rectangular Fabric


 * backstore still exists internally, but must never read as a white card. */


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-stage::before,


.bbd-app.bbd-release-02326[data-edit-surface="feather"] .bbd-canvas-stage::after {


  display: none !important;


}





/* "PRO" badges implied a paid tier. Featured editorial badges can remain. */


.bbd-app.bbd-release-02326 .bbd-template-pro-kicker:empty {


  display: none !important;


}




/* BBD CSS: assets/css/editor-02334.css */
/* Baskibu Designer 0.23.34 — rounded rail + shared-axis panel motion


   Visual-only shell polish. Keeps commerce, save, canvas and template engines untouched. */





/* Desktop rail: softer 15px app tiles instead of square buttons. */


@media (min-width:1025px) {


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    border-radius:15px !important;


    transition:


      background-color 170ms cubic-bezier(.2,.8,.2,1),


      color 170ms cubic-bezier(.2,.8,.2,1),


      box-shadow 190ms cubic-bezier(.2,.8,.2,1),


      transform 170ms cubic-bezier(.2,.8,.2,1) !important;


    transform:translate3d(0,0,0) scale(1) !important;


    transform-origin:center !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:hover:not(.is-active) {


    border-radius:15px !important;


    background:#f2f8f6 !important;


    color:#075f54 !important;


    box-shadow:0 6px 16px rgba(15,23,42,.055) !important;


    transform:translate3d(0,-1px,0) scale(1.012) !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active {


    border-radius:15px !important;


    background:linear-gradient(180deg,#108b79 0%,#0b7a6a 100%) !important;


    color:#fff !important;


    box-shadow:


      0 9px 20px rgba(11,122,106,.20),


      inset 0 1px 0 rgba(255,255,255,.18) !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:active {


    transform:translate3d(0,0,0) scale(.965) !important;


    transition-duration:80ms !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-svg {


    transition:transform 180ms cubic-bezier(.2,.8,.2,1), color 170ms ease !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active .bbd-v70-nav-svg {


    transform:scale(1.045) !important;


  }


}





/* Shared-axis content motion: JS supplies the direction, CSS keeps the panel clipped and calm. */


.bbd-app.bbd-v02334-motion-ready #bbd-panel {


  overflow-x:hidden !important;


}


.bbd-app.bbd-v02334-motion-ready #bbd-panel > [data-panel-content]:not([hidden]) {


  will-change:transform,opacity;


  backface-visibility:hidden;


  transform:translateZ(0);


}





/* Compact nav gets the same tactile language, without changing its six-column geometry. */


@media (max-width:1024px) {


  .bbd-app.bbd-v02334-motion-ready .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    border-radius:15px !important;


    transition:


      background-color 160ms cubic-bezier(.2,.8,.2,1),


      color 160ms cubic-bezier(.2,.8,.2,1),


      transform 140ms cubic-bezier(.2,.8,.2,1) !important;


  }


  .bbd-app.bbd-v02334-motion-ready .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:active {


    transform:scale(.965) !important;


  }


}





@media (prefers-reduced-motion:reduce) {


  .bbd-app.bbd-v02334-motion-ready .bbd-sidebar .bbd-tool,


  .bbd-app.bbd-v02334-motion-ready .bbd-sidebar .bbd-tool .bbd-v70-nav-svg {


    transition:none !important;


    transform:none !important;


  }


}




/* BBD CSS: assets/css/editor-02335.css */
/* Baskibu Designer 0.23.35 — square rail refinement


   Final visual override: reduce primary tool radius from 15px to 6px.


   Motion and interaction behavior from 0.23.34 are intentionally preserved. */





@media (min-width:1025px) {


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"],


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:hover:not(.is-active),


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active {


    border-radius:6px !important;


  }


}





@media (max-width:1024px) {


  .bbd-app.bbd-v02334-motion-ready .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    border-radius:6px !important;


  }


}




/* BBD CSS: assets/css/editor-02336.css */
/* Baskibu Designer 0.23.36 — fluid text transform + selected-object ellipsis menu */





/* The old fixed selection HUD / right inspector / mobile object dock are replaced


   by one contextual ellipsis anchored to the selected object. Their DOM remains


   available for legacy handlers, but they no longer cover the artwork. */


.bbd-app.bbd-release-02336 > .bbd-v92-selection-hud,


.bbd-app.bbd-release-02336 > .bbd-v2321-context-dock,


.bbd-app.bbd-release-02336 .bbd-context-route-toolbar,


.bbd-app.bbd-release-02336 .bbd-context-route-toolbar.bbd-0232-mobile-object-dock{


  position:fixed!important;


  left:-10000px!important;


  top:-10000px!important;


  right:auto!important;


  bottom:auto!important;


  width:1px!important;


  height:1px!important;


  min-width:0!important;


  min-height:0!important;


  max-width:1px!important;


  max-height:1px!important;


  padding:0!important;


  margin:0!important;


  overflow:hidden!important;


  opacity:0!important;


  visibility:hidden!important;


  pointer-events:none!important;


  transform:none!important;


}





.bbd-app.bbd-release-02336 > .bbd-v2336-object-menu{


  position:fixed!important;


  inset:0 auto auto 0!important;


  z-index:9750!important;


  width:0!important;


  height:0!important;


  overflow:visible!important;


  pointer-events:none!important;


}


.bbd-app.bbd-release-02336 > .bbd-v2336-object-menu[hidden]{display:none!important}





.bbd-v2336-object-menu__trigger{


  position:fixed!important;


  left:var(--bbd-v2336-trigger-left,10px)!important;


  top:var(--bbd-v2336-trigger-top,80px)!important;


  z-index:9752!important;


  width:36px!important;


  height:36px!important;


  min-width:36px!important;


  min-height:36px!important;


  display:grid!important;


  place-items:center!important;


  padding:0 0 4px!important;


  border:1px solid rgba(197,211,208,.98)!important;


  border-radius:10px!important;


  background:rgba(255,255,255,.98)!important;


  color:#344054!important;


  box-shadow:0 7px 22px rgba(15,23,42,.14),0 1px 4px rgba(15,23,42,.07)!important;


  backdrop-filter:blur(16px) saturate(1.06)!important;


  font:900 18px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;


  letter-spacing:1px!important;


  cursor:pointer!important;


  pointer-events:auto!important;


  transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease!important;


}


.bbd-v2336-object-menu__trigger:hover,


.bbd-v2336-object-menu.is-open .bbd-v2336-object-menu__trigger{


  border-color:#9ed3c7!important;


  background:#eef9f6!important;


  color:#0b7a6a!important;


}


.bbd-v2336-object-menu__trigger:active{transform:scale(.96)!important}


.bbd-v2336-object-menu__trigger:focus-visible{outline:3px solid rgba(11,122,106,.18)!important;outline-offset:2px!important}





.bbd-v2336-object-menu__popover{


  position:fixed!important;


  z-index:9753!important;


  width:min(296px,calc(100vw - 20px))!important;


  max-height:min(520px,calc(100dvh - 90px))!important;


  overflow:auto!important;


  padding:9px!important;


  border:1px solid rgba(207,220,217,.98)!important;


  border-radius:16px!important;


  background:rgba(255,255,255,.985)!important;


  color:#1d2939!important;


  box-shadow:0 20px 54px rgba(15,23,42,.18),0 3px 12px rgba(15,23,42,.06)!important;


  backdrop-filter:blur(22px) saturate(1.08)!important;


  pointer-events:auto!important;


  transform-origin:top right!important;


  animation:bbd-v2336-menu-in .15s cubic-bezier(.2,.8,.2,1) both!important;


}


.bbd-v2336-object-menu__popover[hidden]{display:none!important}


@keyframes bbd-v2336-menu-in{


  from{opacity:0;transform:translateY(-5px) scale(.985)}


  to{opacity:1;transform:translateY(0) scale(1)}


}


.bbd-v2336-object-menu__head{


  display:flex!important;


  align-items:center!important;


  justify-content:space-between!important;


  gap:10px!important;


  min-height:38px!important;


  padding:3px 5px 9px!important;


  border-bottom:1px solid #e9efed!important;


}


.bbd-v2336-object-menu__head strong{


  min-width:0!important;


  overflow:hidden!important;


  text-overflow:ellipsis!important;


  white-space:nowrap!important;


  font-size:12.5px!important;


  font-weight:850!important;


}


.bbd-v2336-object-menu__head small{


  flex:0 0 auto!important;


  padding:4px 7px!important;


  border-radius:999px!important;


  background:#eef8f5!important;


  color:#0b7a6a!important;


  font-size:9.5px!important;


  font-weight:800!important;


}





.bbd-v2336-object-menu__primary{


  display:grid!important;


  grid-template-columns:repeat(2,minmax(0,1fr))!important;


  gap:6px!important;


  padding:8px 0!important;


}


.bbd-v2336-object-menu__primary .bbd-v2336-menu-clone{


  min-width:0!important;


  min-height:42px!important;


  display:flex!important;


  align-items:center!important;


  justify-content:flex-start!important;


  gap:7px!important;


  padding:0 10px!important;


  border:1px solid #dfe8e6!important;


  border-radius:10px!important;


  background:#fff!important;


  color:#344054!important;


  box-shadow:none!important;


  font-size:11px!important;


  font-weight:800!important;


  cursor:pointer!important;


}


.bbd-v2336-object-menu__primary .bbd-v2336-menu-clone:hover{


  border-color:#acd8ce!important;


  background:#f0f9f6!important;


  color:#0b7a6a!important;


}


.bbd-v2336-object-menu__primary .bbd-context-label{display:inline!important}


.bbd-v2336-object-menu__primary .bbd-context-label-short{display:none!important}


.bbd-v2336-object-menu__primary svg,


.bbd-v2336-object-menu__primary .bbd-context-icon{width:16px!important;height:16px!important;flex:0 0 16px!important}





.bbd-v2336-object-menu__secondary{


  display:grid!important;


  grid-template-columns:repeat(2,minmax(0,1fr))!important;


  gap:5px!important;


  padding-top:8px!important;


  border-top:1px solid #edf1f0!important;


}


.bbd-v2336-menu-action{


  min-width:0!important;


  min-height:38px!important;


  display:flex!important;


  align-items:center!important;


  gap:7px!important;


  padding:0 9px!important;


  border:0!important;


  border-radius:9px!important;


  background:#f7f9fa!important;


  color:#475467!important;


  cursor:pointer!important;


}


.bbd-v2336-menu-action>span{width:17px!important;text-align:center!important;font-size:14px!important;line-height:1!important}


.bbd-v2336-menu-action>strong{font-size:10.5px!important;font-weight:800!important;white-space:nowrap!important}


.bbd-v2336-menu-action:hover{background:#eef8f5!important;color:#0b7a6a!important}


.bbd-v2336-menu-action.is-danger{grid-column:1/-1!important;justify-content:center!important;background:#fff4f3!important;color:#b42318!important}


.bbd-v2336-menu-action.is-danger:hover{background:#fee4e2!important}








@media (max-width:760px){


  .bbd-v2336-object-menu__trigger{


    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;


    border-radius:10px!important;font-size:17px!important;


  }


  .bbd-v2336-object-menu__popover{


    width:min(286px,calc(100vw - 16px))!important;


    max-height:min(470px,calc(100dvh - 96px))!important;


    border-radius:15px!important;


  }


  .bbd-v2336-object-menu__primary .bbd-v2336-menu-clone{min-height:44px!important}


  .bbd-v2336-menu-action{min-height:42px!important}


}





@media (prefers-reduced-motion:reduce){


  .bbd-v2336-object-menu__popover{animation:none!important}


  .bbd-v2336-object-menu__trigger{transition:none!important}


}




/* BBD CSS: assets/css/editor-02337.css */
/* Baskibu Designer 0.23.37 — clearer tool rail labels without larger buttons


   Keeps the existing 78px rail and 58px desktop tool height. The visual gain


   comes from tighter spacing, stronger labels and a compact SVG icon tile. */





@media (min-width:1025px) {


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    min-height:58px !important;


    margin:5px 6px !important;


    padding:5px 3px 4px !important;


    gap:2px !important;


    border-radius:6px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-svg {


    width:26px !important;


    height:26px !important;


    min-width:26px !important;


    min-height:26px !important;


    padding:3px !important;


    box-sizing:border-box !important;


    border:1px solid #e7eeec !important;


    border-radius:6px !important;


    background:#f7f9f9 !important;


    transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-palette-svg {


    width:29px !important;


    height:26px !important;


    min-width:29px !important;


    min-height:26px !important;


    padding:2px 3px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-label {


    font-size:11px !important;


    line-height:1 !important;


    font-weight:820 !important;


    letter-spacing:-.14px !important;


    white-space:nowrap !important;


    text-rendering:geometricPrecision !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"]:hover:not(.is-active) .bbd-v70-nav-svg {


    background:#edf7f4 !important;


    border-color:#cfe5df !important;


    color:#075f54 !important;


    transform:translateY(-1px) !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active .bbd-v70-nav-svg {


    background:rgba(255,255,255,.14) !important;


    border-color:rgba(255,255,255,.30) !important;


    color:#fff !important;


    transform:none !important;


  }


}





/* Compact shell: keep exactly the same six slots and overall bar height, but


   give labels one extra readability step without causing a seventh slot/wrap. */


@media (max-width:1024px) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    gap:2px !important;


    padding-top:5px !important;


    padding-bottom:4px !important;


    border-radius:6px !important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {


    width:22px !important;


    height:22px !important;


    min-width:22px !important;


    min-height:22px !important;


    padding:2px !important;


    box-sizing:border-box !important;


    border:1px solid #e8efed !important;


    border-radius:5px !important;


    background:#f7f9f9 !important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"].is-active .bbd-v70-nav-svg {


    background:rgba(255,255,255,.14) !important;


    border-color:rgba(255,255,255,.28) !important;


    color:#fff !important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    font-size:9.2px !important;


    line-height:1 !important;


    font-weight:800 !important;


    letter-spacing:-.12px !important;


  }


}





@media (max-width:390px) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    font-size:8.6px !important;


  }


}





@media (prefers-reduced-motion:reduce) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {


    transition:none !important;


  }


}




/* BBD CSS: assets/css/editor-02338.css */
/* Baskibu Designer 0.23.38 — compact square rail, stronger icon/label scale


   Keeps the 78px desktop rail and 58px tool slot; only visual density changes. */





@media (min-width:1025px) {


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    min-height:58px !important;


    margin:5px 5px !important;


    padding:4px 2px 4px !important;


    gap:1px !important;


    border-radius:4px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-svg {


    width:28px !important;


    height:28px !important;


    min-width:28px !important;


    min-height:28px !important;


    padding:3px !important;


    border-radius:4px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-palette-svg {


    width:30px !important;


    height:28px !important;


    min-width:30px !important;


    min-height:28px !important;


    padding:2px 3px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-label {


    font-size:11.8px !important;


    line-height:.98 !important;


    font-weight:820 !important;


    letter-spacing:-.22px !important;


    white-space:nowrap !important;


  }


}





@media (max-width:1024px) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    border-radius:4px !important;


    gap:1px !important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-svg {


    width:23px !important;


    height:23px !important;


    min-width:23px !important;


    min-height:23px !important;


    border-radius:4px !important;


  }





  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    font-size:9.6px !important;


    font-weight:810 !important;


    letter-spacing:-.14px !important;


  }


}





@media (max-width:390px) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    font-size:9px !important;


  }


}




/* BBD CSS: assets/css/editor-02340.css */
/* Baskibu Designer 0.23.40 — topmost stage selection + tight shaped workspace */





/* Yelken editörü artık dikdörtgen bir pasteboard kartı gibi görünmez. İç koordinat


   motorunda yalnızca 6 birim anti-clipping payı kalır; görsel kabuk da sıkılaşır. */


.bbd-app.bbd-release-02340 .bbd-canvas-shell{


  padding:4px!important;


}


.bbd-app.bbd-release-02340 .bbd-canvas-shell .canvas-container{


  box-shadow:none!important;


  overflow:visible!important;


}


.bbd-app.bbd-release-02340 .bbd-canvas-shell .canvas-container,


.bbd-app.bbd-release-02340 .bbd-canvas-shell canvas{


  filter:none!important;


}





/* Product silhouette already owns its own Fabric shadow. This prevents a second,


   rectangular canvas shadow from visually creating the old empty frame. */


.bbd-app.bbd-release-02340 .bbd-stage-area{


  isolation:isolate;


}


.bbd-app.bbd-release-02340 .bbd-v2340-selection-overlay{


  display:block!important;


  position:absolute!important;


  inset:0!important;


  width:100%!important;


  height:100%!important;


  pointer-events:none!important;


  z-index:9400!important;


}


.bbd-app.bbd-release-02340 .bbd-v2336-object-menu,


.bbd-app.bbd-release-02340 .bbd-v2336-object-menu__trigger,


.bbd-app.bbd-release-02340 .bbd-v2336-object-menu__popover{


  z-index:9750!important;


}




/* BBD CSS: assets/css/editor-02342.css */
/* Baskibu Designer 0.23.42 — balanced tool rail labels + breathing room


   Keeps the 78px rail/58px slot. Long Turkish labels get their own optical


   scale so no label touches the active button edges. */





@media (min-width:1025px) {


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] {


    min-height:58px !important;


    width:calc(100% - 12px) !important;


    margin:5px 6px !important;


    padding:4px 5px 5px !important;


    gap:2px !important;


    border-radius:4px !important;


    box-sizing:border-box !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-bbd-v70-primary="1"] .bbd-v70-nav-svg {


    width:27px !important;


    height:27px !important;


    min-width:27px !important;


    min-height:27px !important;


    padding:3px !important;


    border-radius:4px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-palette-svg {


    width:29px !important;


    min-width:29px !important;


  }





  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    display:block !important;


    width:100% !important;


    max-width:56px !important;


    padding-inline:2px !important;


    box-sizing:border-box !important;


    overflow:hidden !important;


    text-overflow:clip !important;


    white-space:nowrap !important;


    text-align:center !important;


    font-size:11.1px !important;


    line-height:1.08 !important;


    font-weight:810 !important;


    letter-spacing:-.18px !important;


  }





  /* The three longest Turkish labels need ~4px of true side air inside a


     66px tool button; tune only them instead of shrinking every item. */


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-panel="quick-designs"] .bbd-v70-nav-label,


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-panel="image"] .bbd-v70-nav-label,


  .bbd-modal[data-layout="docked"] .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-tool[data-panel="layers"] .bbd-v70-nav-label {


    font-size:10.15px !important;


    letter-spacing:-.24px !important;


  }


}





@media (max-width:1024px) {


  .bbd-app.bbd-pro-workspace-v0230-dev70 .bbd-sidebar.bbd-v70-six-nav .bbd-v70-nav-label {


    padding-inline:2px !important;


    box-sizing:border-box !important;


    font-size:9.4px !important;


    line-height:1.05 !important;


  }


}




/* BBD CSS: assets/css/editor-02343.css */
/* Baskibu Designer 0.23.43 — interactive topmost selection handles.


   The blue selection chrome remains visual-only canvas from 0.23.42; this


   transparent DOM layer adds real pointer hit targets even outside Fabric's


   narrow product canvas. */


.bbd-v2343-hit-layer{


  position:absolute!important;


  inset:0!important;


  pointer-events:none!important;


  z-index:9460!important;


  overflow:visible!important;


}


.bbd-v2343-hit{


  position:absolute!important;


  display:block;


  pointer-events:auto!important;


  touch-action:none!important;


  user-select:none!important;


  -webkit-user-select:none!important;


  background:transparent!important;


  border:0!important;


  padding:0!important;


  margin:0!important;


  box-sizing:border-box!important;


}


.bbd-v2343-hit[hidden]{display:none!important}


.bbd-v2343-hit--point,


.bbd-v2343-hit--rotation{z-index:3!important}


.bbd-v2343-hit--edge{z-index:2!important}


.bbd-v2343-hit.is-dragging{cursor:grabbing!important}


@media (pointer:coarse){


  .bbd-v2343-hit--edge{min-height:20px!important}


}




/* BBD CSS: assets/css/editor-02344.css */
/* Baskibu Designer 0.23.44 — draggable selection body.


   The selection box is now a real interaction surface, not only resize chrome. */


.bbd-v2344-move-layer{


  position:absolute!important;


  inset:0!important;


  pointer-events:none!important;


  z-index:9450!important;


  overflow:visible!important;


}


.bbd-v2344-selection-body{


  position:absolute!important;


  display:block!important;


  pointer-events:auto!important;


  touch-action:none!important;


  user-select:none!important;


  -webkit-user-select:none!important;


  background:transparent!important;


  border:0!important;


  padding:0!important;


  margin:0!important;


  box-sizing:border-box!important;


  cursor:move!important;


  z-index:1!important;


}


.bbd-v2344-selection-body[hidden]{display:none!important}


.bbd-v2344-selection-body.is-dragging{cursor:grabbing!important}




/* BBD CSS: assets/css/editor-02345.css */
/* Baskibu Designer 0.23.45 — smart overlap selection and layer picker. */


.bbd-app.bbd-release-02345 .bbd-v2336-object-menu__trigger[data-stack-count]::after{


  content:attr(data-stack-count);


  position:absolute;


  right:-6px;


  bottom:-6px;


  min-width:17px;


  height:17px;


  padding:0 4px;


  display:grid;


  place-items:center;


  border:2px solid #fff;


  border-radius:999px;


  background:#0b7a6a;


  color:#fff;


  font:800 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;


  letter-spacing:0;


  box-shadow:0 2px 7px rgba(15,23,42,.16);


}


.bbd-v2345-layer-action{grid-column:auto!important}





.bbd-v2345-stack-picker{


  position:absolute!important;


  z-index:9850!important;


  width:min(286px,calc(100% - 16px))!important;


  max-height:min(430px,calc(100% - 16px))!important;


  overflow:auto!important;


  padding:8px!important;


  border:1px solid rgba(202,216,213,.98)!important;


  border-radius:14px!important;


  background:rgba(255,255,255,.985)!important;


  box-shadow:0 18px 48px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.07)!important;


  backdrop-filter:blur(18px) saturate(1.06)!important;


  pointer-events:auto!important;


  color:#1d2939!important;


  animation:bbd-v2345-picker-in .14s cubic-bezier(.2,.8,.2,1) both;


}


.bbd-v2345-stack-picker[hidden]{display:none!important}


.bbd-v2345-stack-picker__head{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:10px;


  min-height:36px;


  padding:2px 3px 7px;


  border-bottom:1px solid #e9efed;


}


.bbd-v2345-stack-picker__head strong{font-size:11.5px;font-weight:850}


.bbd-v2345-stack-picker__head button{


  width:28px;height:28px;min-width:28px;padding:0;border:0;border-radius:7px;


  background:#f2f5f4;color:#667085;font:700 18px/1 system-ui;cursor:pointer;


}


.bbd-v2345-stack-picker__head button:hover{background:#eaf6f2;color:#0b7a6a}


.bbd-v2345-stack-picker__list{display:grid;gap:4px;padding-top:6px}


.bbd-v2345-stack-picker__item{


  width:100%;min-height:46px;display:flex;align-items:center;gap:9px;text-align:left;


  padding:6px 8px;border:1px solid transparent;border-radius:9px;background:#fff;color:#344054;cursor:pointer;


}


.bbd-v2345-stack-picker__item:hover{background:#f2faf7;border-color:#cae5de}


.bbd-v2345-stack-picker__item.is-active{background:#edf8f5;border-color:#a9d8cd;color:#0b7a6a}


.bbd-v2345-stack-picker__index{


  flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;


  background:#f1f4f3;color:#667085;font-size:9.5px;font-weight:850;


}


.bbd-v2345-stack-picker__item.is-active .bbd-v2345-stack-picker__index{background:#d9f0ea;color:#08705f}


.bbd-v2345-stack-picker__copy{min-width:0;display:grid;gap:1px;flex:1 1 auto}


.bbd-v2345-stack-picker__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850}


.bbd-v2345-stack-picker__copy small{font-size:9px;font-weight:700;color:#98a2b3}


.bbd-v2345-stack-picker__lock{flex:0 0 auto;padding:3px 5px;border-radius:5px;background:#f4f5f7;color:#667085;font-size:8px;font-weight:800}


@keyframes bbd-v2345-picker-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}


@media (max-width:760px){


  .bbd-v2345-stack-picker{width:min(272px,calc(100% - 12px))!important;border-radius:13px!important}


  .bbd-v2345-stack-picker__item{min-height:48px}


}


@media (prefers-reduced-motion:reduce){.bbd-v2345-stack-picker{animation:none!important}}




/* BBD CSS: assets/css/editor-02348.css */
/* Baskibu Designer 0.23.48


   Uploaded media library: compact 2-column cards with top-right remove + options. */





.bbd-app.bbd-release-v02348{


  --bbd-v2348-green:#0b7a6a;


  --bbd-v2348-ink:#17212b;


  --bbd-v2348-muted:#667085;


  --bbd-v2348-line:#dfe7e5;


  --bbd-v2348-soft:#f7faf9;


}





.bbd-app.bbd-release-v02348 #bbd-upload-list.bbd-v2348-upload-grid{


  display:grid!important;


  grid-template-columns:repeat(2,minmax(0,1fr))!important;


  align-items:start!important;


  gap:10px!important;


  margin:12px 0 2px!important;


  padding:0!important;


  overflow:visible!important;


}





.bbd-app.bbd-release-v02348 #bbd-upload-list.bbd-v2348-upload-grid[hidden]{display:none!important}





.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card{


  position:relative!important;


  display:flex!important;


  flex-direction:column!important;


  gap:0!important;


  min-width:0!important;


  width:100%!important;


  padding:7px!important;


  border:1px solid var(--bbd-v2348-line)!important;


  border-radius:15px!important;


  background:#fff!important;


  box-shadow:0 2px 7px rgba(15,23,42,.035)!important;


  overflow:visible!important;


  isolation:isolate!important;


  animation:none!important;


  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;


}





.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card:hover{


  border-color:#c9d9d5!important;


  box-shadow:0 5px 14px rgba(15,23,42,.07)!important;


}





.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card.is-done,


.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card.is-processed{


  border-color:#c9e6de!important;


  background:#fff!important;


}





.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card.is-failed,


.bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card.is-cancelled{


  border-color:#f1c6c3!important;


  background:#fffafa!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__thumb{


  position:relative!important;


  display:grid!important;


  place-items:center!important;


  width:100%!important;


  height:auto!important;


  aspect-ratio:4 / 3!important;


  min-height:84px!important;


  overflow:hidden!important;


  border:0!important;


  border-radius:11px!important;


  background-color:#f5f8f7!important;


  background-image:linear-gradient(45deg,#eef2f1 25%,transparent 25%),linear-gradient(-45deg,#eef2f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f1 75%),linear-gradient(-45deg,transparent 75%,#eef2f1 75%)!important;


  background-size:16px 16px!important;


  background-position:0 0,0 8px,8px -8px,-8px 0!important;


  cursor:pointer!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__thumb:focus-visible{


  outline:2px solid rgba(11,122,106,.55)!important;


  outline-offset:2px!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__thumb img{


  display:block!important;


  width:100%!important;


  height:100%!important;


  padding:3px!important;


  object-fit:contain!important;


  border-radius:10px!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__body{


  display:grid!important;


  gap:5px!important;


  min-width:0!important;


  padding:8px 2px 2px!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__title{


  display:grid!important;


  grid-template-columns:minmax(0,1fr)!important;


  gap:3px!important;


  min-width:0!important;


  padding-right:0!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__title strong{


  display:block!important;


  min-width:0!important;


  overflow:hidden!important;


  text-overflow:ellipsis!important;


  white-space:nowrap!important;


  color:var(--bbd-v2348-ink)!important;


  font-size:11.5px!important;


  line-height:1.25!important;


  font-weight:780!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__title span{


  justify-self:start!important;


  display:inline-flex!important;


  align-items:center!important;


  min-height:18px!important;


  padding:0 6px!important;


  border-radius:999px!important;


  background:#edf8f5!important;


  color:var(--bbd-v2348-green)!important;


  font-size:8.5px!important;


  line-height:1!important;


  font-weight:800!important;


  text-transform:uppercase!important;


  letter-spacing:.035em!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card.is-failed .bbd-upload-asset__title span,


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card.is-cancelled .bbd-upload-asset__title span{


  background:#fff0ef!important;color:#b42318!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__meta{


  min-width:0!important;


  overflow:hidden!important;


  text-overflow:ellipsis!important;


  white-space:nowrap!important;


  color:var(--bbd-v2348-muted)!important;


  font-size:9.5px!important;


  line-height:1.3!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__quality{


  justify-self:start!important;


  display:inline-flex!important;


  align-items:center!important;


  min-height:21px!important;


  padding:0 7px!important;


  border:1px solid #e4e7ec!important;


  border-radius:999px!important;


  background:#f8fafc!important;


  color:#667085!important;


  font-size:9px!important;


  line-height:1!important;


  font-weight:750!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__quality.is-good{border-color:#b7e3d7!important;background:#edf9f5!important;color:#087764!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__quality.is-medium{border-color:#f4d7a2!important;background:#fff8eb!important;color:#9a6700!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__quality.is-low{border-color:#f0c9a5!important;background:#fff4e8!important;color:#a94b00!important}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__error{


  margin-top:1px!important;


  color:#b42318!important;


  font-size:9.5px!important;


  line-height:1.35!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__error:empty{display:none!important}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__progress{


  order:-1!important;


  width:100%!important;


  height:4px!important;


  margin:0 0 1px!important;


  border-radius:999px!important;


  background:#eaf0ee!important;


  overflow:hidden!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card.is-done .bbd-upload-asset__progress,


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card.is-processed .bbd-upload-asset__progress{display:none!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__progress span{background:var(--bbd-v2348-green)!important}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-controls{


  position:absolute!important;


  z-index:8!important;


  top:12px!important;


  right:12px!important;


  display:flex!important;


  align-items:center!important;


  gap:5px!important;


}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-control{


  display:grid!important;


  place-items:center!important;


  width:29px!important;


  height:29px!important;


  min-width:29px!important;


  min-height:29px!important;


  padding:0!important;


  border:1px solid rgba(215,223,221,.95)!important;


  border-radius:9px!important;


  background:rgba(255,255,255,.94)!important;


  color:#344054!important;


  box-shadow:0 2px 8px rgba(15,23,42,.10)!important;


  backdrop-filter:blur(8px)!important;


  -webkit-backdrop-filter:blur(8px)!important;


  cursor:pointer!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-control:hover{background:#fff!important;border-color:#b9cbc7!important;color:#101828!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-control:focus-visible{outline:2px solid rgba(11,122,106,.55)!important;outline-offset:2px!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-control svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-remove:hover{color:#b42318!important;border-color:#efc7c3!important;background:#fff6f5!important}





.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions{


  position:absolute!important;


  z-index:30!important;


  top:47px!important;


  right:10px!important;


  grid-column:auto!important;


  display:none!important;


  width:154px!important;


  max-width:calc(100vw - 30px)!important;


  padding:6px!important;


  margin:0!important;


  flex-direction:column!important;


  gap:3px!important;


  border:1px solid #dce5e3!important;


  border-radius:12px!important;


  background:rgba(255,255,255,.98)!important;


  box-shadow:0 12px 30px rgba(15,23,42,.15)!important;


  backdrop-filter:blur(10px)!important;


  -webkit-backdrop-filter:blur(10px)!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions.is-open{display:flex!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions button{


  display:flex!important;


  align-items:center!important;


  justify-content:flex-start!important;


  gap:8px!important;


  width:100%!important;


  min-height:34px!important;


  height:34px!important;


  padding:0 9px!important;


  border:0!important;


  border-radius:8px!important;


  background:transparent!important;


  color:#344054!important;


  font-size:10.5px!important;


  font-weight:700!important;


  text-align:left!important;


}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions button:hover{background:#f2f7f5!important;color:#101828!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions button svg{flex:0 0 auto!important;width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}


.bbd-app.bbd-release-v02348 .bbd-v2348-upload-card .bbd-upload-asset__actions .bbd-v2348-hidden-delete{display:none!important}





@media (max-width:360px){


  .bbd-app.bbd-release-v02348 #bbd-upload-list.bbd-v2348-upload-grid{grid-template-columns:1fr!important}


}





@media (prefers-reduced-motion:reduce){


  .bbd-app.bbd-release-v02348 .bbd-upload-asset.bbd-v2348-upload-card{transition:none!important}


}




/* BBD CSS: assets/css/editor-02349.css */
/* Baskibu Designer 0.23.49 — Advanced Designer Suite


   Integrated pro workflow: snap HUD, history/versions, hover selection,


   compact Layers 2.0, contextual inspector, smart frames, preflight score,


   premium preview scenes and local version milestones. */





.bbd-app.bbd-release-v02349{


  --bbd-v2349-accent:#0b7a6a;


  --bbd-v2349-accent-soft:#eaf7f3;


  --bbd-v2349-blue:#2563eb;


  --bbd-v2349-ink:#15202b;


  --bbd-v2349-muted:#667085;


  --bbd-v2349-line:#dce5e3;


  --bbd-v2349-surface:rgba(255,255,255,.975);


}





/* 1 — smart snap HUD */


.bbd-app.bbd-release-v02349 .bbd-v2349-snap-hud{


  position:absolute!important;


  z-index:9630!important;


  transform:translate(-50%,-100%)!important;


  display:flex!important;


  align-items:center!important;


  gap:6px!important;


  min-height:27px!important;


  padding:4px 7px!important;


  border:1px solid rgba(37,99,235,.28)!important;


  border-radius:7px!important;


  background:rgba(255,255,255,.96)!important;


  color:#1d4ed8!important;


  box-shadow:0 4px 14px rgba(15,23,42,.10)!important;


  pointer-events:none!important;


  white-space:nowrap!important;


  backdrop-filter:blur(8px)!important;


}


.bbd-app.bbd-release-v02349 .bbd-v2349-snap-hud[hidden]{display:none!important}


.bbd-v2349-snap-hud>span{font-size:10px!important;font-weight:850!important;letter-spacing:.01em!important}


.bbd-v2349-snap-hud>small{font-size:9px!important;font-weight:700!important;color:#64748b!important}





/* 2 + 10 — history + durable local versions */


.bbd-v2349-history-wrap{position:relative!important;display:flex!important;align-items:center!important}


.bbd-v2349-history-button{


  display:flex!important;align-items:center!important;gap:6px!important;


  min-height:36px!important;padding:0 9px!important;


  border:1px solid #d9e3e1!important;border-radius:9px!important;


  background:#fff!important;color:#475467!important;


  font:750 10.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;


  cursor:pointer!important;


}


.bbd-v2349-history-button:hover,.bbd-v2349-history-button[aria-expanded="true"]{background:#f1f8f6!important;border-color:#bad8d1!important;color:#0b7a6a!important}


.bbd-v2349-history-button svg{width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}


.bbd-v2349-history-popover{


  position:absolute!important;z-index:9900!important;top:calc(100% + 8px)!important;right:0!important;


  width:300px!important;max-height:min(520px,calc(100vh - 120px))!important;overflow:auto!important;


  padding:8px!important;border:1px solid #dce5e3!important;border-radius:14px!important;


  background:rgba(255,255,255,.985)!important;box-shadow:0 18px 50px rgba(15,23,42,.17)!important;


  backdrop-filter:blur(16px)!important;


}


.bbd-v2349-history-popover[hidden]{display:none!important}


.bbd-v2349-history-head{display:grid!important;gap:2px!important;padding:5px 5px 8px!important}


.bbd-v2349-history-head strong{font-size:13px!important;color:#101828!important}


.bbd-v2349-history-head small{font-size:9.5px!important;color:#667085!important}


.bbd-v2349-history-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px!important;padding:3px!important;border-radius:9px!important;background:#f2f5f4!important}


.bbd-v2349-history-tabs button{min-height:31px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#667085!important;font-size:10px!important;font-weight:800!important;cursor:pointer!important}


.bbd-v2349-history-tabs button.is-active{background:#fff!important;color:#0b7a6a!important;box-shadow:0 1px 4px rgba(15,23,42,.07)!important}


.bbd-v2349-history-list{display:grid!important;gap:4px!important;padding-top:7px!important}


.bbd-v2349-history-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;width:100%!important;min-height:45px!important;padding:6px 8px!important;border:1px solid transparent!important;border-radius:9px!important;background:#fff!important;color:#344054!important;text-align:left!important;cursor:pointer!important}


.bbd-v2349-history-row:hover{background:#f4f9f7!important;border-color:#d8e8e4!important}


.bbd-v2349-history-row.is-current{background:#ecf8f4!important;border-color:#b8e0d6!important;color:#0b7a6a!important}


.bbd-v2349-history-row>span{display:grid!important;gap:2px!important;min-width:0!important}


.bbd-v2349-history-row strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10.5px!important;font-weight:800!important}


.bbd-v2349-history-row small{font-size:9px!important;color:#98a2b3!important}


.bbd-v2349-history-row em{font-size:9px!important;font-style:normal!important;font-weight:800!important;color:#0b7a6a!important}


.bbd-v2349-history-empty{margin:0!important;padding:16px 8px!important;color:#667085!important;font-size:10px!important;line-height:1.45!important;text-align:center!important}





/* 3 — hover preselection */


.bbd-v2349-hover-outline{


  position:absolute!important;z-index:9550!important;box-sizing:border-box!important;


  border:1px solid rgba(37,99,235,.58)!important;border-radius:2px!important;


  background:rgba(37,99,235,.025)!important;pointer-events:none!important;


  box-shadow:0 0 0 1px rgba(255,255,255,.8) inset!important;


}


.bbd-v2349-hover-outline[hidden]{display:none!important}





/* 4 — Layers 2.0. Existing drag/drop and actions remain; visual noise is reduced. */


.bbd-app.bbd-release-v02349 #bbd-layer-list{display:grid!important;gap:5px!important;padding:2px 0 14px!important}


.bbd-app.bbd-release-v02349 .bbd-layer-row{


  display:grid!important;grid-template-columns:minmax(0,1fr) repeat(5,30px)!important;align-items:center!important;


  min-height:50px!important;padding:4px!important;border:1px solid #e3e9e7!important;border-radius:9px!important;


  background:#fff!important;box-shadow:none!important;transition:border-color .12s ease,background-color .12s ease!important;


}


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover{border-color:#c9dad6!important;background:#fbfdfc!important}


.bbd-app.bbd-release-v02349 .bbd-layer-row.is-selected{border-color:#83cbbc!important;background:#eff9f6!important;box-shadow:0 0 0 1px rgba(11,122,106,.08)!important}


.bbd-app.bbd-release-v02349 .bbd-layer-main{min-width:0!important;min-height:40px!important;padding:3px 4px!important;gap:7px!important}


.bbd-app.bbd-release-v02349 .bbd-layer-thumb{width:30px!important;height:30px!important;min-width:30px!important;border-radius:7px!important}


.bbd-app.bbd-release-v02349 .bbd-layer-drag-handle{width:13px!important;opacity:.42!important}


.bbd-app.bbd-release-v02349 .bbd-layer-name{font-size:10.5px!important;font-weight:790!important}


.bbd-app.bbd-release-v02349 .bbd-layer-meta,.bbd-app.bbd-release-v02349 .bbd-layer-quality{font-size:8.5px!important}


.bbd-app.bbd-release-v02349 .bbd-layer-row>.bbd-layer-eye,


.bbd-app.bbd-release-v02349 .bbd-layer-row>.bbd-layer-solo,


.bbd-app.bbd-release-v02349 .bbd-layer-row>.bbd-layer-lock,


.bbd-app.bbd-release-v02349 .bbd-layer-row>.bbd-layer-copy,


.bbd-app.bbd-release-v02349 .bbd-layer-row>.bbd-layer-trash{


  width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border-radius:7px!important;


  opacity:.18!important;transition:opacity .12s ease,background-color .12s ease!important;


}


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover>.bbd-layer-eye,


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover>.bbd-layer-solo,


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover>.bbd-layer-lock,


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover>.bbd-layer-copy,


.bbd-app.bbd-release-v02349 .bbd-layer-row:hover>.bbd-layer-trash,


.bbd-app.bbd-release-v02349 .bbd-layer-row.is-selected>button{opacity:1!important}





/* 5 — contextual right inspector, overlay not grid column */


.bbd-v2349-inspector{


  position:absolute!important;z-index:9620!important;top:14px!important;right:14px!important;


  width:286px!important;max-height:calc(100% - 28px)!important;overflow:auto!important;


  padding:10px!important;border:1px solid rgba(213,224,221,.98)!important;border-radius:15px!important;


  background:rgba(255,255,255,.975)!important;color:#1d2939!important;


  box-shadow:0 18px 46px rgba(15,23,42,.15)!important;backdrop-filter:blur(18px)!important;


}


.bbd-v2349-inspector[hidden]{display:none!important}


.bbd-v2349-inspector__head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:3px 3px 9px!important;border-bottom:1px solid #e9efed!important}


.bbd-v2349-inspector__head>span{display:grid!important;gap:2px!important;min-width:0!important}


.bbd-v2349-inspector__head small{font-size:8px!important;font-weight:850!important;letter-spacing:.12em!important;color:#98a2b3!important}


.bbd-v2349-inspector__head strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:13px!important;font-weight:850!important;color:#101828!important}


.bbd-v2349-inspector__head button{width:30px!important;height:30px!important;border:0!important;border-radius:8px!important;background:#f4f6f6!important;color:#667085!important;font-size:18px!important;cursor:pointer!important}


.bbd-v2349-inspector__body{display:grid!important;gap:9px!important;padding-top:9px!important}


.bbd-v2349-field,.bbd-v2349-grid label{display:grid!important;gap:4px!important;font-size:9px!important;font-weight:750!important;color:#667085!important}


.bbd-v2349-field input[type="text"],.bbd-v2349-field textarea,.bbd-v2349-grid input[type="number"]{width:100%!important;min-height:35px!important;padding:7px 8px!important;border:1px solid #dce5e3!important;border-radius:8px!important;background:#fff!important;color:#101828!important;font-size:11px!important;font-weight:650!important;outline:none!important}


.bbd-v2349-field textarea{resize:vertical!important;min-height:62px!important}


.bbd-v2349-field input:focus,.bbd-v2349-field textarea:focus,.bbd-v2349-grid input:focus{border-color:#86c9bb!important;box-shadow:0 0 0 3px rgba(11,122,106,.08)!important}


.bbd-v2349-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}


.bbd-v2349-grid input[type="color"]{width:100%!important;height:35px!important;padding:3px!important;border:1px solid #dce5e3!important;border-radius:8px!important;background:#fff!important}


.bbd-v2349-grid input[type="range"]{width:100%!important;accent-color:#0b7a6a!important}


.bbd-v2349-image-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}


.bbd-v2349-image-actions button,.bbd-v2349-inspector__footer button{min-height:36px!important;padding:0 7px!important;border:1px solid #dfe7e5!important;border-radius:8px!important;background:#fff!important;color:#344054!important;font-size:9.5px!important;font-weight:800!important;cursor:pointer!important}


.bbd-v2349-image-actions button:hover,.bbd-v2349-inspector__footer button:hover{border-color:#a9d5ca!important;background:#eff8f5!important;color:#0b7a6a!important}


.bbd-v2349-inspector__footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding-top:8px!important;border-top:1px solid #edf1f0!important}


.bbd-v2349-inspector__footer .is-danger{color:#b42318!important;background:#fff7f6!important;border-color:#f0d3cf!important}





/* 6 — smart frame visual language */


.bbd-app.bbd-release-v02349 .bbd-v2349-frame-hint{color:#0b7a6a!important}





/* 8 — preflight score pill */


.bbd-v2349-quality-pill{display:flex!important;align-items:center!important;gap:5px!important;min-height:36px!important;padding:0 8px!important;border:1px solid #dce5e3!important;border-radius:9px!important;background:#fff!important;color:#475467!important;cursor:pointer!important}


.bbd-v2349-quality-pill:hover{background:#f6faf9!important}


.bbd-v2349-quality-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#16a34a!important;box-shadow:0 0 0 3px rgba(22,163,74,.09)!important}


.bbd-v2349-quality-pill strong{font-size:9.5px!important;font-weight:850!important;white-space:nowrap!important}


.bbd-v2349-quality-pill small{font-size:8.5px!important;font-weight:700!important;color:#98a2b3!important;white-space:nowrap!important}


.bbd-v2349-quality-pill[data-level="warning"] .bbd-v2349-quality-dot{background:#f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.10)!important}


.bbd-v2349-quality-pill[data-level="error"] .bbd-v2349-quality-dot{background:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.10)!important}





/* 9 — premium preview scenes */


.bbd-app.bbd-release-v02349 .bbd-v2323-scene-picker{display:none!important}


.bbd-v2349-preview-picker{


  position:absolute!important;z-index:20!important;top:14px!important;left:14px!important;


  display:flex!important;align-items:center!important;gap:3px!important;padding:4px!important;


  border:1px solid rgba(219,226,224,.96)!important;border-radius:11px!important;background:rgba(255,255,255,.94)!important;


  box-shadow:0 7px 20px rgba(15,23,42,.09)!important;backdrop-filter:blur(12px)!important;


}


.bbd-v2349-preview-picker>span{padding:0 5px!important;color:#98a2b3!important;font-size:8px!important;font-weight:900!important;letter-spacing:.11em!important}


.bbd-v2349-preview-picker button{min-height:29px!important;padding:0 8px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:#475467!important;font-size:9.5px!important;font-weight:800!important;cursor:pointer!important}


.bbd-v2349-preview-picker button:hover{background:#f4f7f6!important}


.bbd-v2349-preview-picker button.is-active{border-color:#a7d7cc!important;background:#eaf8f4!important;color:#087764!important}


.bbd-product-preview__viewport[data-bbd-v2349-scene="retail"]{background:linear-gradient(180deg,#e4ecef,#cbd5d9)!important}


.bbd-product-preview__viewport[data-bbd-v2349-scene="fair"]{background:linear-gradient(135deg,#eef1f6,#cad4df)!important}


.bbd-product-preview__viewport[data-bbd-v2349-scene="clean"]{background:#f9faf9!important}





/* Existing object ellipsis remains the fast-action owner. Keep it above the new inspector. */


.bbd-app.bbd-release-v02349>.bbd-v2336-object-menu{z-index:9770!important}


.bbd-app.bbd-release-v02349 .bbd-v2336-object-menu__trigger{z-index:9772!important}


.bbd-app.bbd-release-v02349 .bbd-v2336-object-menu__popover{z-index:9773!important}





@media (max-width:1179px){


  .bbd-v2349-inspector{display:none!important}


  .bbd-v2349-history-button span,.bbd-v2349-quality-pill small{display:none!important}


  .bbd-v2349-history-button,.bbd-v2349-quality-pill{min-width:36px!important;justify-content:center!important;padding:0 7px!important}


}





@media (max-width:760px){


  .bbd-v2349-history-wrap{display:none!important}


  .bbd-v2349-quality-pill{display:none!important}


  .bbd-v2349-preview-picker{top:8px!important;left:8px!important;max-width:calc(100% - 16px)!important;overflow-x:auto!important}


  .bbd-v2349-preview-picker>span{display:none!important}


  .bbd-v2349-preview-picker button{min-height:32px!important;white-space:nowrap!important}


  .bbd-v2349-hover-outline{display:none!important}


}





@media (prefers-reduced-motion:reduce){


  .bbd-v2349-history-row,.bbd-v2349-quality-pill,.bbd-v2349-history-button,.bbd-layer-row{transition:none!important}


}




/* BBD CSS: assets/css/editor-02356.css */
/* Baskibu Designer 0.23.56 — upload recovery and readable navigation */





/* ----------------------------- Media workspace ---------------------------- */


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"].bbd-v2353-media-panel .bbd-v90-media-stack{


  gap:14px!important;


}


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v90-media-section--upload.bbd-v2353-upload-section,


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v90-media-section--assets.bbd-v2353-assets-section{


  border:1px solid #dfe8e6!important;


  border-radius:18px!important;


  background:#fff!important;


  box-shadow:0 3px 12px rgba(15,23,42,.035)!important;


  overflow:hidden!important;


}


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v2353-upload-section>.bbd-v90-media-section__head,


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v2353-assets-section>.bbd-v90-media-section__head{


  display:grid!important;


  grid-template-columns:42px minmax(0,1fr) auto!important;


  min-height:66px!important;


  padding:11px 12px!important;


  border-bottom:1px solid #edf2f1!important;


  background:#fff!important;


  cursor:default!important;


}


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v2353-upload-section>.bbd-v90-media-section__body,


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v2353-assets-section>.bbd-v90-media-section__body{


  padding:12px!important;


}





/* The uploader must feel like a real working area, not a tiny toolbar row. */


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone.bbd-v81-upload-card,


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone.bbd-v91-upload-card{


  display:grid!important;


  grid-template-columns:56px minmax(0,1fr) auto!important;


  align-items:center!important;


  gap:13px!important;


  width:100%!important;


  min-height:132px!important;


  height:auto!important;


  margin:0!important;


  padding:18px!important;


  border:1.5px dashed #a9d7cd!important;


  border-radius:15px!important;


  background:linear-gradient(180deg,#fbfefd 0%,#f2faf7 100%)!important;


  box-shadow:none!important;


  cursor:pointer!important;


  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;


}


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone:hover,


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone:focus-visible,


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone.is-dragging{


  border-color:#0b7a6a!important;


  background:#eefaf6!important;


  box-shadow:0 0 0 3px rgba(11,122,106,.08)!important;


  outline:0!important;


}


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone .bbd-v81-upload-card__icon{


  width:56px!important;height:56px!important;min-width:56px!important;


  border-radius:12px!important;background:#e2f5ef!important;color:#0b7a6a!important;


}


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone .bbd-v81-upload-card__copy strong{


  font-size:16px!important;line-height:1.18!important;font-weight:820!important;color:#101828!important;


}


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone .bbd-v81-upload-card__copy p{


  margin-top:5px!important;font-size:12.5px!important;line-height:1.42!important;color:#667085!important;


}


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone .bbd-v81-upload-card__action{


  min-width:112px!important;height:46px!important;min-height:46px!important;padding:0 16px!important;


  border-radius:10px!important;background:#0b7a6a!important;color:#fff!important;font-size:13px!important;font-weight:820!important;


  box-shadow:0 5px 12px rgba(11,122,106,.16)!important;


}





/* Keep the uploader and every queue card reachable after scrolling/reopening. */


.bbd-app.bbd-pro-workspace-v02353 [data-panel-content="image"] .bbd-v2353-upload-section>.bbd-v90-media-section__body{


  max-height:none!important;


  opacity:1!important;


  overflow:visible!important;


  pointer-events:auto!important;


}


.bbd-app .bbd-upload-intake-status{


  display:block!important;


  margin:10px 0 0!important;


  padding:10px 12px!important;


  border-radius:8px!important;


  background:#edf7f4!important;


  color:#075a4e!important;


  font-size:13px!important;


  line-height:1.45!important;


  overflow-wrap:anywhere;


}


.bbd-app .bbd-upload-intake-status[data-tone="error"]{


  background:#fff1f2!important;


  color:#9f1239!important;


}


.bbd-app #bbd-upload-dropzone:focus-visible{


  outline:2px solid #0b7a6a!important;


  outline-offset:3px!important;


}





/* Preserve the two-column upload library from 0.23.48 and keep cards visible. */


.bbd-app.bbd-pro-workspace-v02353 #bbd-upload-list:not([hidden]){


  display:grid!important;


  grid-template-columns:repeat(2,minmax(0,1fr))!important;


  gap:10px!important;


  margin-top:12px!important;


}





@media (max-width:1024px){


  .bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone.bbd-v81-upload-card,


  .bbd-app.bbd-pro-workspace-v02353 #bbd-upload-dropzone.bbd-v91-upload-card{


    min-height:118px!important;


    grid-template-columns:50px minmax(0,1fr) auto!important;


    padding:14px!important;


  }


  .bbd-app.bbd-pro-workspace-v02353 #bbd-upload-list:not([hidden]){


    grid-template-columns:1fr!important;


  }


}





/* One set of dimensions for the workspace column, rail, button and label.


   The ID makes these rules win over the older, deeply nested !important rules. */


@media (min-width:1025px){


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356{


    --bbd-rail-width:96px!important;


  }


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar.bbd-v70-six-nav{


    width:96px!important;


    min-width:96px!important;


    max-width:96px!important;


    box-sizing:border-box!important;


    padding:10px 6px!important;


    gap:6px!important;


    align-items:stretch!important;


  }


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-bbd-v70-primary="1"]{


    width:100%!important;


    min-width:0!important;


    max-width:none!important;


    height:64px!important;


    min-height:64px!important;


    margin:0!important;


    padding:6px 4px!important;


    box-sizing:border-box!important;


    gap:5px!important;


    border-radius:6px!important;


    overflow:visible!important;


  }


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-bbd-v70-primary="1"]>.bbd-v70-nav-label{


    display:block!important;


    width:100%!important;


    min-width:0!important;


    max-width:none!important;


    margin:0!important;


    padding:0!important;


    overflow:visible!important;


    text-overflow:clip!important;


    white-space:nowrap!important;


    font-size:12px!important;


    line-height:1.25!important;


    font-weight:700!important;


    letter-spacing:0!important;


    text-align:center!important;


  }


}


@media (max-width:1024px){


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar.bbd-v70-six-nav{


    width:100%!important;


    min-width:0!important;


    max-width:none!important;


    padding-inline:4px!important;


    gap:0!important;


    box-sizing:border-box!important;


  }


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-bbd-v70-primary="1"]{


    flex:1 1 0!important;


    width:0!important;


    min-width:0!important;


    max-width:none!important;


    margin:0!important;


    padding:6px 2px!important;


    gap:4px!important;


    box-sizing:border-box!important;


    overflow:visible!important;


  }


  #bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-bbd-v70-primary="1"]>.bbd-v70-nav-label{


    display:block!important;


    width:100%!important;


    min-width:0!important;


    max-width:none!important;


    margin:0!important;


    padding:0!important;


    white-space:nowrap!important;


    overflow:visible!important;


    text-overflow:clip!important;


    font-size:clamp(9.5px,2.6vw,12px)!important;


    line-height:1.25!important;


    font-weight:650!important;


    letter-spacing:0!important;


    text-align:center!important;


  }


}


#bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-bbd-v70-primary="1"]>svg{


  display:block!important;


  width:24px!important;


  height:24px!important;


  min-width:24px!important;


  min-height:24px!important;


  margin:0 auto!important;


  padding:0!important;


  visibility:visible!important;


  opacity:1!important;


}


#bbd-modal.bbd-modal .bbd-app.bbd-pro-workspace-v02356 .bbd-sidebar .bbd-tool[data-panel="background"]::before{


  content:none!important;


  display:none!important;


}





@media (prefers-reduced-motion:reduce){


  .bbd-app.bbd-pro-workspace-v02353 *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}


}




/* BBD CSS: assets/css/editor-02517.css */
/* Baskibu Designer 0.25.16 — selected text alignment controls */


.bbd-v2349-text-align{display:grid!important;gap:5px!important}


.bbd-v2349-text-align__label{font-size:9px!important;font-weight:750!important;color:#667085!important}


.bbd-v2349-text-align__buttons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}


.bbd-v2349-text-align__buttons button{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-height:36px!important;padding:0 7px!important;border:1px solid #dfe7e5!important;border-radius:9px!important;background:#fff!important;color:#475467!important;font-size:9.5px!important;font-weight:800!important;cursor:pointer!important;transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease!important}


.bbd-v2349-text-align__buttons button:hover{border-color:#a9d5ca!important;background:#f4fbf8!important;color:#0b7a6a!important}


.bbd-v2349-text-align__buttons button.is-active,.bbd-v2349-text-align__buttons button[aria-pressed="true"]{border-color:#78c4b4!important;background:#eaf7f3!important;color:#0b7a6a!important;box-shadow:0 0 0 2px rgba(11,122,106,.06)!important}


.bbd-v2349-text-align__buttons svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:0 0 auto!important}








/* 0.25.17 — corporate template customer mode */


.bbd-corporate-template-mode .bbd-menu-command-button,


.bbd-corporate-template-mode .bbd-menu-rail-divider{display:none!important}


.bbd-corporate-template-mode .bbd-corporate-photo-help{display:flex;align-items:center;gap:12px;margin:12px 0 16px;padding:14px;border:1px solid #d7e7e2;border-radius:12px;background:#f7fbfa;color:#344054}


.bbd-corporate-template-mode .bbd-corporate-photo-help>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#e8f5f1;color:#0b7a6a;font-size:21px;font-weight:800}


.bbd-corporate-template-mode .bbd-corporate-photo-help strong{display:block;font-size:12px;color:#101828;margin-bottom:3px}


.bbd-corporate-template-mode .bbd-corporate-photo-help small{display:block;font-size:10px;line-height:1.45;color:#667085}


.bbd-corporate-template-mode .bbd-corporate-info-panel .bbd-quick-personalizer{margin-top:8px!important}


.bbd-v2349-inspector.is-corporate-customer .bbd-v2349-shape-field,


.bbd-v2349-inspector.is-corporate-customer .bbd-v2349-generic-image-field{display:none!important}




/* BBD CSS: assets/css/editor-02522.css */
/* Baskibu Designer 0.25.22 — template-first personalization final */





/* First paint must never leak a second tool panel below the active panel. */


#bbd-panel [data-panel-content][hidden]{display:none!important}





/* Canvas-first layout: the stage is the workspace; the artboard is the only card. */


.bbd-app .bbd-stage-area{


  padding:6px 8px 8px!important;


}


.bbd-app .bbd-canvas-shell,


.bbd-app .bbd-canvas-shell.bbd-premium-canvas-shell{


  border:0!important;


  border-radius:0!important;


  background:transparent!important;


  box-shadow:none!important;


  outline:0!important;


}


.bbd-app .bbd-canvas-shell .canvas-container{


  outline:0!important;


  border:0!important;


  border-radius:2px!important;


  box-shadow:0 12px 30px rgba(15,23,42,.13),0 2px 8px rgba(15,23,42,.06)!important;


}


.bbd-app .bbd-canvas-shell .canvas-container:hover{


  outline:0!important;


  box-shadow:0 14px 34px rgba(15,23,42,.15),0 2px 8px rgba(15,23,42,.07)!important;


}





/* Template choice is an explicit select -> use flow, not an accidental destructive click. */


#bbd-panel [data-panel-content="templates"]{padding-bottom:88px!important}


.bbd-template-card.is-template-candidate{


  border-color:#0b7a6a!important;


  box-shadow:0 0 0 2px rgba(11,122,106,.12),0 10px 24px rgba(15,23,42,.08)!important;


  transform:translateY(-1px)


}


.bbd-template-card.is-template-candidate .bbd-template-card__preview-action{


  background:#0b7a6a!important;color:#fff!important


}


.bbd-template-card.is-template-applied{


  border-color:#75b9ac!important;


  box-shadow:0 0 0 2px rgba(11,122,106,.08)!important


}


.bbd-template-card.is-template-applied .bbd-template-card__preview-action{


  background:#eaf7f3!important;color:#0b7a6a!important


}


.bbd-template-choice-bar{


  position:sticky;bottom:8px;z-index:40;


  display:flex;align-items:center;justify-content:space-between;gap:12px;


  margin:14px 8px 0;padding:10px 10px 10px 12px;


  border:1px solid #cfe2dd;border-radius:13px;


  background:rgba(255,255,255,.96);


  box-shadow:0 12px 30px rgba(15,23,42,.14);


  backdrop-filter:blur(12px)


}


.bbd-template-choice-bar[hidden]{display:none!important}


.bbd-template-choice-bar>span{min-width:0;display:grid;gap:2px}


.bbd-template-choice-bar small{font-size:8px;line-height:1.2;letter-spacing:.06em;font-weight:800;color:#7a8794}


.bbd-template-choice-bar strong{font-size:11.5px;line-height:1.25;color:#172033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.bbd-template-choice-bar button{


  flex:0 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:10px;


  background:#0b7a6a;color:#fff;font-size:11px;font-weight:850;cursor:pointer


}


.bbd-template-choice-bar button:hover{filter:brightness(.96)}





/* Controlled personalization: required fields are obvious, but calm. */


.bbd-product-personalizer__heading strong{font-size:13px!important}


.bbd-personalizer-field.is-required>label{font-weight:800!important;color:#344054!important}


.bbd-personalizer-field.is-required-missing{


  padding:8px;border:1px solid #efc6c1;border-radius:10px;background:#fff8f7


}


.bbd-personalizer-field.is-required-missing>label{color:#b42318!important}


.bbd-personalizer-field.is-required-missing input,


.bbd-personalizer-field.is-required-missing textarea{border-color:#e79b93!important;box-shadow:0 0 0 2px rgba(180,35,24,.05)!important}





/* Corporate customer mode stays focused on choosing and personalizing a template. */


.bbd-corporate-template-mode [data-panel-content="product"] .bbd-product-personalizer{margin-top:0!important}


.bbd-corporate-template-mode [data-panel-content="product"] .bbd-product-personalizer__heading{


  padding-bottom:10px;border-bottom:1px solid #edf1f3


}





@media(max-width:760px){


  .bbd-app .bbd-stage-area{padding:4px!important}


  #bbd-panel [data-panel-content="templates"]{padding-bottom:82px!important}


  .bbd-template-choice-bar{bottom:6px;margin:10px 4px 0;padding:9px;border-radius:12px}


  .bbd-template-choice-bar button{min-height:40px;padding:0 11px;font-size:10.5px}


}





@media(prefers-reduced-motion:reduce){


  .bbd-template-card.is-template-candidate{transform:none}


}




/* BBD CSS: assets/css/editor-02523.css */
/* Baskibu Designer 0.25.23 — quality control drawer final */





/* Retire the permanent quality card/chip from the artwork surface. The same


   live status is now owned by the top Quality pill + on-demand side drawer. */


.bbd-quality-drawer-final #bbd-quality-summary,


.bbd-quality-drawer-final .bbd-quality-summary{


  display:none!important;


  visibility:hidden!important;


  pointer-events:none!important;


}





.bbd-quality-drawer-backdrop{


  position:absolute!important;


  inset:56px 0 0!important;


  z-index:240!important;


  border:0!important;


  padding:0!important;


  margin:0!important;


  background:rgba(15,23,42,.06)!important;


  cursor:default!important;


  opacity:0!important;


  transition:opacity .18s ease!important;


}


.bbd-quality-drawer-backdrop[hidden]{display:none!important}


.bbd-quality-drawer-final.is-quality-drawer-open .bbd-quality-drawer-backdrop{opacity:1!important}





.bbd-quality-drawer{


  position:absolute!important;


  top:56px!important;


  right:0!important;


  bottom:0!important;


  z-index:250!important;


  width:min(390px,calc(100vw - 118px))!important;


  min-width:330px!important;


  display:grid!important;


  grid-template-rows:auto minmax(0,1fr) auto!important;


  background:#fff!important;


  border:0!important;


  border-left:1px solid #dfe6ea!important;


  box-shadow:-18px 0 48px rgba(15,23,42,.15)!important;


  color:#172033!important;


  transform:translateX(104%)!important;


  opacity:.98!important;


  transition:transform .2s cubic-bezier(.2,.75,.25,1),opacity .18s ease!important;


  overflow:hidden!important;


}


.bbd-quality-drawer[hidden]{display:none!important}


.bbd-quality-drawer.is-open{transform:translateX(0)!important;opacity:1!important}





.bbd-quality-drawer__header{


  display:flex!important;


  align-items:flex-start!important;


  justify-content:space-between!important;


  gap:14px!important;


  padding:18px 18px 14px!important;


  border-bottom:1px solid #edf1f3!important;


  background:#fff!important;


}


.bbd-quality-drawer__heading{display:grid!important;gap:3px!important;min-width:0!important}


.bbd-quality-drawer__heading small{


  font-size:9px!important;line-height:1.2!important;font-weight:850!important;


  letter-spacing:.08em!important;color:#7c8996!important


}


.bbd-quality-drawer__heading strong{font-size:18px!important;line-height:1.18!important;font-weight:850!important;color:#172033!important}


.bbd-quality-drawer__heading em{font-style:normal!important;font-size:11px!important;line-height:1.4!important;color:#667085!important}


.bbd-quality-drawer__close{


  width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;


  display:grid!important;place-items:center!important;border:1px solid #e3e8ed!important;border-radius:10px!important;


  background:#f8fafb!important;color:#526071!important;font-size:21px!important;line-height:1!important;cursor:pointer!important


}


.bbd-quality-drawer__close:hover,.bbd-quality-drawer__close:focus-visible{background:#eef3f5!important;outline:2px solid rgba(11,122,106,.16)!important;outline-offset:1px!important}





.bbd-quality-drawer__body{min-height:0!important;overflow:auto!important;padding:16px 16px 24px!important;background:#f8fafb!important}


.bbd-quality-drawer__body::-webkit-scrollbar{width:7px}


.bbd-quality-drawer__body::-webkit-scrollbar-thumb{background:#d0d7de;border-radius:99px}





.bbd-quality-drawer__score{


  display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;align-items:center!important;gap:13px!important;


  padding:14px!important;margin-bottom:14px!important;border:1px solid #dfe6ea!important;border-radius:14px!important;background:#fff!important


}


.bbd-quality-drawer__ring{


  width:60px!important;height:60px!important;border-radius:50%!important;display:grid!important;place-items:center!important;align-content:center!important;


  border:5px solid #d8e0e5!important;background:#fff!important


}


.bbd-quality-drawer__score[data-tone="ready"] .bbd-quality-drawer__ring{border-color:#62b5a7!important}


.bbd-quality-drawer__score[data-tone="warning"] .bbd-quality-drawer__ring{border-color:#f3bd62!important}


.bbd-quality-drawer__score[data-tone="critical"] .bbd-quality-drawer__ring{border-color:#e88b83!important}


.bbd-quality-drawer__ring strong{font-size:20px!important;line-height:1!important;font-weight:900!important;color:#172033!important}


.bbd-quality-drawer__ring small{font-size:8px!important;line-height:1!important;color:#98a2b3!important;margin-top:2px!important}


.bbd-quality-drawer__score>span{display:grid!important;gap:2px!important;min-width:0!important}


.bbd-quality-drawer__score>span>small{font-size:8.5px!important;letter-spacing:.06em!important;font-weight:850!important;color:#98a2b3!important}


.bbd-quality-drawer__score>span>strong{font-size:14px!important;line-height:1.25!important;font-weight:850!important;color:#172033!important}


.bbd-quality-drawer__score>span>em{font-style:normal!important;font-size:10.5px!important;line-height:1.35!important;color:#667085!important}





.bbd-quality-drawer__list{display:grid!important;gap:9px!important}


.bbd-quality-drawer__item{


  display:grid!important;grid-template-columns:9px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;


  padding:12px!important;border:1px solid #e2e8ec!important;border-radius:12px!important;background:#fff!important


}


.bbd-quality-drawer__item>i{width:8px!important;height:8px!important;border-radius:50%!important;background:#94a3b8!important;align-self:start!important;margin-top:5px!important}


.bbd-quality-drawer__item[data-level="error"]>i{background:#dc4c40!important;box-shadow:0 0 0 3px rgba(220,76,64,.09)!important}


.bbd-quality-drawer__item[data-level="warning"]>i{background:#e9a83b!important;box-shadow:0 0 0 3px rgba(233,168,59,.10)!important}


.bbd-quality-drawer__item[data-level="info"]>i{background:#4d83c5!important;box-shadow:0 0 0 3px rgba(77,131,197,.09)!important}


.bbd-quality-drawer__item>span{display:grid!important;gap:3px!important;min-width:0!important}


.bbd-quality-drawer__item>span>strong{font-size:11.5px!important;line-height:1.3!important;font-weight:820!important;color:#263445!important}


.bbd-quality-drawer__item>span>small{font-size:9.5px!important;line-height:1.42!important;color:#667085!important}


.bbd-quality-drawer__item>button{


  align-self:center!important;min-height:32px!important;padding:0 10px!important;border:1px solid #cfd9dd!important;border-radius:9px!important;


  background:#fff!important;color:#0b7a6a!important;font-size:9.5px!important;font-weight:820!important;white-space:nowrap!important;cursor:pointer!important


}


.bbd-quality-drawer__item>button:hover,.bbd-quality-drawer__item>button:focus-visible{background:#eef8f5!important;border-color:#8dc5ba!important;outline:none!important}





.bbd-quality-drawer__empty{


  display:grid!important;justify-items:center!important;text-align:center!important;gap:5px!important;padding:34px 18px!important;


  border:1px solid #dce8e4!important;border-radius:14px!important;background:#fff!important


}


.bbd-quality-drawer__empty>span{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#eaf7f3!important;color:#0b7a6a!important;font-size:19px!important;font-weight:900!important}


.bbd-quality-drawer__empty>strong{font-size:13px!important;color:#172033!important}


.bbd-quality-drawer__empty>small{max-width:30ch!important;font-size:10px!important;line-height:1.45!important;color:#667085!important}





.bbd-quality-drawer__footer{


  display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:12px 14px!important;


  border-top:1px solid #e6ebee!important;background:#fff!important


}


.bbd-quality-drawer__footer button{min-height:40px!important;border-radius:10px!important;font-size:10.5px!important;font-weight:850!important;cursor:pointer!important}


.bbd-quality-drawer__refresh{border:1px solid #d7e0e3!important;background:#fff!important;color:#475467!important}


.bbd-quality-drawer__done{border:1px solid #0b7a6a!important;background:#0b7a6a!important;color:#fff!important}


.bbd-quality-drawer__refresh:hover{background:#f5f8f9!important}


.bbd-quality-drawer__done:hover{filter:brightness(.96)!important}





/* The top Quality pill is the single persistent entry point. */


.bbd-quality-drawer-final .bbd-v2349-quality-pill{position:relative!important;z-index:2!important}


.bbd-quality-drawer-final .bbd-v2349-quality-pill:focus-visible{outline:2px solid rgba(11,122,106,.22)!important;outline-offset:2px!important}





@media(max-width:760px){


  .bbd-quality-drawer-backdrop{inset:0!important;background:rgba(15,23,42,.28)!important}


  .bbd-quality-drawer{


    top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-width:0!important;max-height:76dvh!important;


    border-left:0!important;border-top:1px solid #dfe6ea!important;border-radius:18px 18px 0 0!important;


    box-shadow:0 -18px 46px rgba(15,23,42,.18)!important;transform:translateY(104%)!important


  }


  .bbd-quality-drawer.is-open{transform:translateY(0)!important}


  .bbd-quality-drawer__header{padding:15px 15px 12px!important}


  .bbd-quality-drawer__heading strong{font-size:16px!important}


  .bbd-quality-drawer__body{padding:12px 12px 20px!important}


  .bbd-quality-drawer__item{grid-template-columns:8px minmax(0,1fr)!important}


  .bbd-quality-drawer__item>button{grid-column:2!important;justify-self:start!important}


}





@media(prefers-reduced-motion:reduce){


  .bbd-quality-drawer,.bbd-quality-drawer-backdrop{transition:none!important}


}




/* BBD CSS: assets/css/editor-02524.css */
/* Baskibu Designer 0.25.24 — corporate lock + product rulers + expanded preview */





/* Real print-surface rulers. They are positioned at runtime against the actual


   artboard, not against the Fabric pasteboard. */


.bbd-02524-final .bbd-ruler{


  position:absolute!important;


  z-index:34!important;


  overflow:visible!important;


  border:0!important;


  border-radius:6px!important;


  background:rgba(255,255,255,.92)!important;


  box-shadow:0 1px 4px rgba(15,23,42,.08)!important;


  color:#667085!important;


  pointer-events:none!important;


}


.bbd-02524-final .bbd-ruler--horizontal{


  right:auto!important;


  bottom:auto!important;


  border-bottom:1px solid #cfd8df!important;


}


.bbd-02524-final .bbd-ruler--vertical{


  right:auto!important;


  bottom:auto!important;


  border-left:1px solid #cfd8df!important;


}


.bbd-02524-final .bbd-product-ruler-tick{


  position:absolute!important;


  margin:0!important;


  padding:0!important;


  min-width:0!important;


  width:1px!important;


  height:6px!important;


  border:0!important;


  background:#aab6c1!important;


  transform:none!important;


}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-tick{bottom:0!important;top:auto!important}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-tick.is-major{height:11px!important;background:#7c8996!important}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-tick em{


  position:absolute!important;


  left:3px!important;


  bottom:9px!important;


  font-style:normal!important;


  font-size:8px!important;


  line-height:1!important;


  font-weight:750!important;


  color:#667085!important;


  white-space:nowrap!important;


}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-tick.is-end em{left:auto!important;right:3px!important}


.bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-tick{


  left:0!important;


  top:auto;


  width:7px!important;


  height:1px!important;


}


.bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-tick.is-major{width:12px!important;background:#7c8996!important}


.bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-tick em{


  position:absolute!important;


  left:12px!important;


  top:-4px!important;


  width:auto!important;


  transform:none!important;


  transform-origin:center!important;


  font-style:normal!important;


  font-size:8px!important;


  line-height:1!important;


  font-weight:750!important;


  color:#667085!important;


  white-space:nowrap!important;


}


.bbd-02524-final .bbd-ruler--vertical.is-left-fallback{border-left:0!important;border-right:1px solid #cfd8df!important}


.bbd-02524-final .bbd-ruler--vertical.is-left-fallback .bbd-product-ruler-tick{left:auto!important;right:0!important}


.bbd-02524-final .bbd-ruler--vertical.is-left-fallback .bbd-product-ruler-tick em{left:auto!important;right:12px!important}


.bbd-02524-final .bbd-product-ruler-dimension{


  position:absolute!important;


  z-index:2!important;


  display:inline-flex!important;


  align-items:center!important;


  justify-content:center!important;


  min-height:18px!important;


  padding:0 7px!important;


  border:1px solid #d8e1e6!important;


  border-radius:7px!important;


  background:#fff!important;


  box-shadow:0 2px 8px rgba(15,23,42,.08)!important;


  color:#344054!important;


  font-size:9px!important;


  line-height:1!important;


  font-weight:850!important;


  white-space:nowrap!important;


}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-dimension{


  left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;


}


.bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-dimension{


  left:50%!important;top:50%!important;transform:translate(-50%,-50%) rotate(-90deg)!important;


}


.bbd-02524-final .bbd-product-ruler-caption{


  position:absolute!important;


  font-size:7px!important;


  line-height:1!important;


  letter-spacing:.08em!important;


  font-weight:850!important;


  color:#98a2b3!important;


}


.bbd-02524-final .bbd-ruler--horizontal .bbd-product-ruler-caption{left:4px!important;top:3px!important}


.bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-caption{


  right:2px!important;top:4px!important;writing-mode:vertical-rl!important;transform:rotate(180deg)!important;


}





/* Corporate RE/MAX mode: only customer fields and the photo slot remain


   interactive. Fixed brand surfaces never advertise editability. */


.bbd-02524-final.bbd-corporate-template-mode .bbd-stage-area{


  --bbd-corporate-fixed:#0b7a6a;


}





/* Preview: remove the card-inside-card feel and let the artwork occupy the


   preview viewport while preserving its physical aspect ratio. */


.bbd-02524-final.is-preview-mode .bbd-product-preview,


.bbd-02524-final.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout{


  margin:4px 6px 8px!important;


  padding:0!important;


  border:0!important;


  border-radius:14px!important;


  background:#eef2f5!important;


  box-shadow:none!important;


  overflow:hidden!important;


}


.bbd-02524-final.is-preview-mode .bbd-product-preview__header.bbd-preview-pro-chrome{


  margin:0!important;


  border:0!important;


  border-bottom:1px solid #dde5ea!important;


  border-radius:0!important;


  box-shadow:none!important;


  background:rgba(255,255,255,.94)!important;


}


.bbd-02524-final.is-preview-mode .bbd-product-preview__viewport{


  min-height:calc(100dvh - 190px)!important;


  margin:0!important;


  padding:10px!important;


  border:0!important;


  border-radius:0!important;


  background:#eef2f5!important;


  box-shadow:none!important;


  display:flex!important;


  align-items:center!important;


  justify-content:center!important;


}


.bbd-02524-final.is-preview-mode .bbd-product-preview__viewport:not(.is-three-preview) #bbd-product-preview-canvas{


  display:block!important;


  width:auto!important;


  height:auto!important;


  max-width:calc(100% - 10px)!important;


  max-height:calc(100dvh - 220px)!important;


  object-fit:contain!important;


  margin:auto!important;


  border:0!important;


  border-radius:2px!important;


  box-shadow:none!important;


}


.bbd-02524-final.is-preview-mode .bbd-product-preview__footer{


  margin:0!important;


  border-top:1px solid #dde5ea!important;


  background:#fff!important;


}





@media(max-width:760px){


  .bbd-02524-final .bbd-product-ruler-caption{display:none!important}


  .bbd-02524-final .bbd-ruler--vertical{width:28px!important}


  .bbd-02524-final .bbd-ruler--vertical .bbd-product-ruler-tick em{display:none!important}


  .bbd-02524-final .bbd-product-ruler-dimension{font-size:8px!important;padding:0 5px!important}


  .bbd-02524-final.is-preview-mode .bbd-product-preview{margin:2px!important;border-radius:10px!important}


  .bbd-02524-final.is-preview-mode .bbd-product-preview__viewport{min-height:calc(100dvh - 150px)!important;padding:5px!important}


  .bbd-02524-final.is-preview-mode .bbd-product-preview__viewport:not(.is-three-preview) #bbd-product-preview-canvas{max-height:calc(100dvh - 176px)!important}


}





@media(prefers-reduced-motion:reduce){


  .bbd-02524-final .bbd-product-preview,.bbd-02524-final .bbd-ruler{transition:none!important}


}




/* BBD CSS: assets/css/editor-02525.css */
/* Baskibu Designer 0.25.25 — calm feedback + overlay-safe quality drawer + scoped template UX */





/* --------------------------------------------------------------------------


   1) Quality drawer must be a true overlay. Its off-canvas transform must never


      increase the editor's scroll width or nudge the workspace left/right.


   -------------------------------------------------------------------------- */


.bbd-app.bbd-02525-ux-final{


  max-width:100vw!important;


  overflow-x:hidden!important;


  overscroll-behavior-x:none!important;


}


@supports (overflow:clip){


  .bbd-app.bbd-02525-ux-final{overflow-x:clip!important}


}


.bbd-app.bbd-02525-ux-final .bbd-quality-drawer,


.bbd-app.bbd-02525-ux-final .bbd-quality-drawer-backdrop{


  will-change:transform,opacity!important;


}





/* --------------------------------------------------------------------------


   2) Product-scoped/template-first products already have a curated library.


      Generic sector chips add noise and imply unrelated templates are available.


      Search + orientation remain because they are still useful inside the set.


   -------------------------------------------------------------------------- */


.bbd-app.bbd-02525-product-scoped-templates .bbd-template-pro-filters{


  display:none!important;


}


.bbd-app.bbd-02525-product-scoped-templates [data-panel-content="templates"] .bbd-search-field{


  margin-bottom:2px!important;


}





/* --------------------------------------------------------------------------


   3) Routine confirmations become one quiet micro-status pill. Errors/warnings


      remain rich and explicit; only low-risk success/info/progress feedback is


      condensed so editing does not feel like a stream of modal notifications.


   -------------------------------------------------------------------------- */


.bbd-app.bbd-02525-ux-final > .bbd-v90-toast-region{


  gap:6px!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress{


  width:auto!important;


  max-width:min(310px,calc(100vw - 28px))!important;


  min-height:38px!important;


  grid-template-columns:24px minmax(0,1fr)!important;


  gap:8px!important;


  padding:6px 10px 6px 7px!important;


  border-radius:12px!important;


  border:1px solid rgba(15,23,42,.10)!important;


  background:rgba(255,255,255,.96)!important;


  box-shadow:0 8px 24px rgba(15,23,42,.10),0 1px 4px rgba(15,23,42,.04)!important;


  backdrop-filter:blur(12px) saturate(1.08)!important;


  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__icon,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__icon,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__icon{


  width:24px!important;height:24px!important;border-radius:8px!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__icon svg,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__icon svg,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__icon svg{


  width:15px!important;height:15px!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__copy,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__copy,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__copy{


  display:block!important;min-width:0!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__copy strong,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__copy strong,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__copy strong{


  display:block!important;font-size:11.5px!important;line-height:1.2!important;font-weight:760!important;


  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;


}


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__copy small,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__copy small,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__copy small,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success .bbd-v90-toast__close,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info .bbd-v90-toast__close,


.bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress .bbd-v90-toast__close{


  display:none!important;


}





@media (min-width:761px){


  .bbd-app.bbd-02525-ux-final > .bbd-v90-toast-region{


    right:18px!important;bottom:16px!important;width:auto!important;max-width:min(320px,calc(100vw - 36px))!important;


    align-items:flex-end!important;


  }


}


@media (max-width:760px){


  .bbd-app.bbd-02525-ux-final > .bbd-v90-toast-region{


    top:68px!important;left:50%!important;right:auto!important;bottom:auto!important;


    width:auto!important;max-width:calc(100vw - 24px)!important;transform:translateX(-50%)!important;


    align-items:center!important;


  }


  .bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-success,


  .bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-info,


  .bbd-app.bbd-02525-ux-final .bbd-v90-toast.is-progress{


    max-width:calc(100vw - 24px)!important;


  }


}




/* BBD CSS: assets/css/editor-02526.css */
/* Baskibu Designer 0.25.26 — RE/MAX calm corporate UX final */





/* --------------------------------------------------------------------------


   1) Quality drawer lives at BODY level: fixed overlay, zero layout ownership.


   -------------------------------------------------------------------------- */


body > .bbd-quality-drawer.bbd-02526-quality-portal{


  position:fixed!important;


  top:var(--bbd-02526-editor-top,56px)!important;


  right:var(--bbd-02526-editor-right,0px)!important;


  bottom:var(--bbd-02526-editor-bottom,0px)!important;


  left:auto!important;


  contain:layout paint!important;


  z-index:2147483200!important;


  max-width:calc(100vw - var(--bbd-02526-editor-left,0px))!important;


}


body > .bbd-quality-drawer-backdrop.bbd-02526-quality-portal{


  position:fixed!important;


  top:var(--bbd-02526-editor-top,56px)!important;


  right:var(--bbd-02526-editor-right,0px)!important;


  bottom:var(--bbd-02526-editor-bottom,0px)!important;


  left:var(--bbd-02526-editor-left,0px)!important;


  width:auto!important;


  height:auto!important;


  contain:strict!important;


  z-index:2147483100!important;


}


body > .bbd-quality-drawer-backdrop.bbd-02526-quality-portal:not([hidden]){opacity:1!important}





/* --------------------------------------------------------------------------


   2) Template confirmation belongs to the selected card, never a sticky footer.


   -------------------------------------------------------------------------- */


.bbd-02526-final [data-panel-content="templates"].bbd-02526-inline-template-action{


  padding-bottom:16px!important;


}


.bbd-02526-final [data-panel-content="templates"].bbd-02526-inline-template-action .bbd-template-choice-bar{


  display:none!important;


}


.bbd-02526-final .bbd-template-card.is-template-candidate .bbd-template-card__preview-action{


  display:none!important;


}


.bbd-02526-template-use{


  width:100%!important;


  min-height:38px!important;


  display:flex!important;


  align-items:center!important;


  justify-content:center!important;


  gap:7px!important;


  margin-top:2px!important;


  padding:0 10px!important;


  border:1px solid #0b7a6a!important;


  border-radius:10px!important;


  background:#0b7a6a!important;


  color:#fff!important;


  font:inherit!important;


  font-size:10.5px!important;


  line-height:1!important;


  font-weight:850!important;


  cursor:pointer!important;


  box-shadow:0 5px 14px rgba(11,122,106,.16)!important;


}


.bbd-02526-template-use b{font-size:14px!important;line-height:1!important;font-weight:700!important}


.bbd-02526-template-use:hover,.bbd-02526-template-use:focus-visible{


  filter:brightness(.96)!important;


  outline:2px solid rgba(11,122,106,.18)!important;


  outline-offset:2px!important;


}





/* --------------------------------------------------------------------------


   3) RE/MAX customer media = photo only. Generic decoration library is hidden.


   -------------------------------------------------------------------------- */


.bbd-02526-remax-photo-only [data-panel-content="image"] .bbd-v90-media-section--assets,


.bbd-02526-remax-photo-only [data-panel-content="image"] [data-bbd-v51-asset-library]{


  display:none!important;


  visibility:hidden!important;


}


.bbd-02526-remax-photo-only [data-panel-content="image"] .bbd-v90-media-stack{


  gap:10px!important;


}


.bbd-02526-remax-photo-only [data-panel-content="image"] .bbd-corporate-photo-help{


  margin-top:4px!important;


}





/* --------------------------------------------------------------------------


   4) RE/MAX 2D mockup scenes: visible, product-relevant environments.


   Existing scene buttons still own state; this layer owns flat visual scenery.


   -------------------------------------------------------------------------- */


.bbd-02526-remax .bbd-product-preview__viewport.bbd-02526-remax-preview{


  position:relative!important;


  isolation:isolate!important;


  overflow:hidden!important;


  background:#e9edf0!important;


}


.bbd-02526-remax .bbd-product-preview__viewport.bbd-02526-remax-preview > .bbd-02526-scene-backdrop{


  position:absolute!important;


  inset:0!important;


  z-index:0!important;


  pointer-events:none!important;


  overflow:hidden!important;


  transition:background .22s ease,filter .22s ease!important;


}


.bbd-02526-remax .bbd-product-preview__viewport.bbd-02526-remax-preview > .bbd-02526-scene-backdrop::before,


.bbd-02526-remax .bbd-product-preview__viewport.bbd-02526-remax-preview > .bbd-02526-scene-backdrop::after{


  content:"";


  position:absolute!important;


  pointer-events:none!important;


}


.bbd-02526-remax .bbd-product-preview__viewport.bbd-02526-remax-preview > #bbd-product-preview-canvas{


  position:relative!important;


  z-index:2!important;


  box-shadow:0 20px 46px rgba(15,23,42,.20),0 3px 12px rgba(15,23,42,.10)!important;


}


.bbd-02526-remax .bbd-v2349-preview-picker{


  z-index:8!important;


}





/* Duvar: warm architectural plaster + floor line. */


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="studio"] > .bbd-02526-scene-backdrop{


  background:


    radial-gradient(circle at 54% 30%,rgba(255,255,255,.98) 0,rgba(255,255,255,.48) 28%,rgba(255,255,255,0) 54%),


    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(55,65,81,.015) 1px 4px),


    linear-gradient(180deg,#e8e4de 0 72%,#d8d1c9 72% 73%,#bcb3a9 73% 100%)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="studio"] > .bbd-02526-scene-backdrop::after{


  left:0!important;right:0!important;bottom:26%!important;height:1px!important;


  background:rgba(75,68,61,.18)!important;


  box-shadow:0 14px 28px rgba(35,31,28,.10)!important;


}





/* Balkon: daylight skyline + glass railing. */


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="retail"] > .bbd-02526-scene-backdrop{


  background:


    radial-gradient(circle at 76% 18%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 25%),


    linear-gradient(180deg,#bcd9ec 0 43%,#dfe8eb 43% 64%,#9eabb0 64% 65%,#d4d5d2 65% 100%)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="retail"] > .bbd-02526-scene-backdrop::before{


  left:0!important;right:0!important;bottom:35%!important;height:27%!important;


  background:


    linear-gradient(90deg,


      transparent 0 4%,rgba(77,96,107,.16) 4% 10%,transparent 10% 13%,


      rgba(77,96,107,.12) 13% 19%,transparent 19% 24%,rgba(77,96,107,.18) 24% 32%,


      transparent 32% 39%,rgba(77,96,107,.13) 39% 46%,transparent 46% 52%,


      rgba(77,96,107,.17) 52% 61%,transparent 61% 66%,rgba(77,96,107,.12) 66% 74%,


      transparent 74% 81%,rgba(77,96,107,.16) 81% 91%,transparent 91% 100%);


  filter:blur(.2px)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="retail"] > .bbd-02526-scene-backdrop::after{


  left:0!important;right:0!important;bottom:10%!important;height:23%!important;


  border-top:5px solid rgba(50,63,72,.78)!important;


  border-bottom:3px solid rgba(50,63,72,.64)!important;


  background:


    repeating-linear-gradient(90deg,transparent 0 18%,rgba(48,62,72,.62) 18% 18.7%,transparent 18.7% 36%),


    linear-gradient(180deg,rgba(224,240,247,.26),rgba(177,199,209,.16))!important;


  box-shadow:0 -2px 0 rgba(255,255,255,.48) inset!important;


}





/* Ofis: bright wall/window geometry, calmer than a trade-fair booth. */


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="fair"] > .bbd-02526-scene-backdrop{


  background:linear-gradient(180deg,#f0f2f1 0 73%,#d9d8d4 73% 100%)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="fair"] > .bbd-02526-scene-backdrop::before{


  top:8%!important;right:5%!important;width:31%!important;height:52%!important;


  border:7px solid rgba(255,255,255,.78)!important;


  background:


    linear-gradient(90deg,transparent 49%,rgba(255,255,255,.72) 49% 51%,transparent 51%),


    linear-gradient(180deg,transparent 49%,rgba(255,255,255,.72) 49% 51%,transparent 51%),


    linear-gradient(180deg,#c6dce9,#eef3f3)!important;


  box-shadow:0 6px 24px rgba(15,23,42,.08)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="fair"] > .bbd-02526-scene-backdrop::after{


  left:5%!important;bottom:8%!important;width:18%!important;height:12%!important;


  border-radius:12px 12px 4px 4px!important;


  background:#7b8583!important;


  box-shadow:0 14px 0 -8px rgba(15,23,42,.10)!important;


}





/* Clean: neutral commerce preview. */


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="clean"] > .bbd-02526-scene-backdrop{


  background:radial-gradient(circle at 50% 36%,#fff 0 24%,#f3f5f5 58%,#e5e9ea 100%)!important;


}


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="clean"] > .bbd-02526-scene-backdrop::before,


.bbd-02526-remax .bbd-product-preview__viewport[data-bbd-v2349-scene="clean"] > .bbd-02526-scene-backdrop::after{display:none!important}





@media(max-width:760px){


  body > .bbd-quality-drawer.bbd-02526-quality-portal{


    top:auto!important;left:var(--bbd-02526-editor-left,0px)!important;right:var(--bbd-02526-editor-right,0px)!important;bottom:var(--bbd-02526-editor-bottom,0px)!important;


    width:auto!important;max-width:none!important;


  }


  body > .bbd-quality-drawer-backdrop.bbd-02526-quality-portal{


    top:var(--bbd-02526-editor-top,0px)!important;


  }


  .bbd-02526-template-use{min-height:40px!important;font-size:10.5px!important}


}





@media(prefers-reduced-motion:reduce){


  .bbd-02526-remax .bbd-02526-scene-backdrop{transition:none!important}


}




/* BBD CSS: assets/css/editor-02529.css */
/* Corporate customer navigation: hidden means visually and interactively absent,

   even under old six-item rail and compact-dock display:flex!important rules. */

#bbd-modal .bbd-app.bbd-02529-corporate-nav .bbd-sidebar .bbd-tool[hidden],

#bbd-modal .bbd-app.bbd-02529-corporate-nav .bbd-v72-dock-item[hidden] {

  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



/* BBD CSS: assets/css/editor-02530.css */
.bbd-02526-remax .bbd-photo-position-controls {margin:16px 0;padding:14px;border:1px solid #d7e7e2;border-radius:12px;background:#f7fbfa;display:grid;gap:9px}

.bbd-02526-remax .bbd-photo-position-controls strong {font-size:12px;color:#344054}

.bbd-02526-remax .bbd-photo-position-controls button {min-height:40px;padding:7px 10px;border:1px solid #a7d6cd;border-radius:9px;background:#fff;color:#0b7a6a;font:inherit;font-size:11px;font-weight:750;cursor:pointer;text-align:left}

.bbd-02526-remax .bbd-photo-position-controls button[aria-pressed="true"] {background:#e8f5f1;border-color:#0b7a6a}



/* BBD CSS: assets/css/editor-02532.css */
.bbd-02532-corporate-panels [data-panel-content="text"] > :not(h2):not(.bbd-quick-personalizer):not(.bbd-corporate-panel-note),

.bbd-02532-corporate-panels [data-panel-content="background"] > :not(h2):not(.bbd-corporate-panel-note) { display:none!important }

.bbd-02532-corporate-panels [data-panel-content="layers"] > .bbd-inline-actions,

.bbd-02532-corporate-panels [data-panel-content="layers"] > .bbd-action-card,

.bbd-02532-corporate-panels [data-panel-content="layers"] > .bbd-field { display:none!important }

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-eye,

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-solo,

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-copy,

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-trash,

.bbd-02532-corporate-panels .bbd-layer-row:not([data-bbd-customer-photo-slot="1"]) .bbd-layer-lock { display:none!important }

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-name,

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-drag-handle { pointer-events:none }

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-drag-handle { display:none!important }

.bbd-02532-corporate-panels .bbd-layer-row .bbd-layer-main:disabled { opacity:.62;cursor:default }

.bbd-02532-corporate-panels .bbd-corporate-panel-note { margin:12px 0 16px;padding:12px 14px;border:1px solid #d7e7e2;border-radius:10px;background:#f7fbfa;color:#475467;font-size:12px;line-height:1.5 }



/* BBD CSS: assets/css/editor-02540.css */
/* 0.25.40 — Textbox geometry controls */
.bbd-v2349-text-geometry{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
  align-items:end!important;
}
.bbd-v2349-text-geometry[hidden]{display:none!important}
.bbd-v2349-text-geometry label{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
  font-size:9px!important;
  font-weight:750!important;
  color:#667085!important;
}
.bbd-v2349-text-geometry input{
  width:100%!important;
  min-height:35px!important;
  padding:7px 8px!important;
  border:1px solid #dce5e3!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#101828!important;
  font-size:11px!important;
  font-weight:650!important;
  outline:none!important;
}
.bbd-v2349-text-geometry input:focus{
  border-color:#86c9bb!important;
  box-shadow:0 0 0 3px rgba(11,122,106,.08)!important;
}
.bbd-v2349-text-geometry button{
  min-height:35px!important;
  padding:0 10px!important;
  border:1px solid #dfe7e5!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#344054!important;
  font-size:9.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
.bbd-v2349-text-geometry button:hover{
  border-color:#a9d5ca!important;
  background:#eff8f5!important;
  color:#0b7a6a!important;
}
.bbd-v2349-text-geometry small{
  grid-column:1/-1!important;
  margin-top:-1px!important;
  color:#98a2b3!important;
  font-size:8.5px!important;
  line-height:1.35!important;
}