.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;}
}