/* =============================================================
   Bigstep AI — Design System v2
   Clean architecture · single-pass cascade
   ============================================================= */

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
}

/* Keep CSS-generated Studio side labels in the selected language. */
html[lang^="en"] body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="front"] .bigstep-ai-side-tab__label::after { content: "Front"; }
html[lang^="en"] body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="back"] .bigstep-ai-side-tab__label::after { content: "Back"; }
html[lang^="en"] body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="left_sleeve"] .bigstep-ai-side-tab__label::after { content: "L.Sleeve"; }
html[lang^="en"] body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="right_sleeve"] .bigstep-ai-side-tab__label::after { content: "R.Sleeve"; }
html:not([lang^="en"]) body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="label"] .bigstep-ai-side-tab__label::after { content: "Nhãn"; }

/* Final label-sheet guard: expansion is based on the phone viewport, never on
 * a transformed canvas containing block or the 40px collapsed state. */
@media (max-width:760px) {
  html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar:not([hidden]) {
    max-height:calc(100dvh - var(--toolbar-m,68px) - 70px)!important;
  }
}

/* 2026-10-04 product panel desktop correction — must remain last. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch-grid--color {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb.is-active {
  border-color: #21d4c2 !important;
  background: rgba(33,212,194,.11) !important;
  background-image: none !important;
  color: #bafff8 !important;
  box-shadow: inset 0 0 0 1px rgba(33,212,194,.14) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-head { display:none !important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  display:grid !important;
  grid-template-columns:minmax(108px,1fr) minmax(128px,1.12fr) !important;
  gap:9px 10px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:10px !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-variant {
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control {
  display:grid !important;
  grid-template-columns:30px minmax(42px,1fr) 30px !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  display:grid !important;
  gap:3px !important;
  min-width:0 !important;
  padding-top:8px !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-head {
  display:grid !important;
  grid-template-columns:minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  grid-template-columns:minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  padding-top:0 !important;
  border-top:0 !important;
}

/* Product picker desktop: a compact fixed palette. The drag grip belongs to
 * the mobile bottom sheet and must not leak into the desktop UI. */
@media (min-width:981px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker {
    top:82px!important;right:auto!important;bottom:auto!important;
    left:calc(var(--sidebar-w,86px) + 18px)!important;
    display:flex!important;flex-direction:column!important;
    width:390px!important;height:min(72dvh,680px)!important;max-height:calc(100dvh - 104px)!important;
    padding:10px!important;overflow:hidden!important;
    border:1px solid #43504b!important;border-radius:18px!important;
    background:linear-gradient(180deg,rgba(22,28,26,.985),rgba(10,15,14,.99))!important;
    box-shadow:0 24px 64px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.045)!important;
    backdrop-filter:blur(14px)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker[hidden]{display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker.is-custom-position{right:auto!important;bottom:auto!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker-handle {
    display:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head {
    flex:0 0 auto!important;min-height:48px!important;padding:7px 8px 10px!important;border-radius:12px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card-grid {
    flex:1 1 auto!important;min-height:0!important;margin-top:8px!important;padding:0 1px 8px!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    scrollbar-width:thin!important;scrollbar-color:#52605a transparent!important;
  }
}

/* Label template thumbnails: one metric system for desktop and mobile. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview]{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;padding:7px!important;
  font-family:Montserrat,Arial,sans-serif!important;font-style:normal!important;
  font-weight:900!important;line-height:1.05!important;text-align:center!important;
  transform:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview] small{
  position:static!important;display:block!important;max-width:100%!important;margin:7px 0 0!important;
  color:#c8d0cb!important;font-family:Montserrat,Arial,sans-serif!important;font-size:7px!important;
  font-weight:800!important;line-height:1.25!important;letter-spacing:.02em!important;
  text-align:center!important;white-space:normal!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="varsity"],
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="woven"]{
  font-family:Montserrat,Arial,sans-serif!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="utility"],
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="tech"]{
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="stamp"]{
  width:62px!important;height:82px!important;min-height:82px!important;margin:0 auto!important;
  border-radius:50%!important;
}

/* Context-sheet grips: the touch target overlays the panel edge and must not
 * create a separate grey row or consume scarce mobile canvas height. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) > .bigstep-ai-image-sheet-handle,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-sheet-handle {
    position:absolute!important;
    top:0!important;
    left:0!important;
    z-index:60!important;
    display:block!important;
    width:100%!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    touch-action:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar] > .bigstep-ai-image-sheet-handle::before,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-sheet-handle::before {
    top:7px!important;
    width:42px!important;
    height:4px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) {
    position:fixed!important;
    padding-top:18px!important;
  }
}
@media (max-width:760px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area > .bigstep-ai-label-template-bar.bigstep-ai-label-template-bar:not([hidden]) {
    position:fixed!important;z-index:790!important;right:6px!important;left:6px!important;
    bottom:calc(var(--toolbar-m,68px) + env(safe-area-inset-bottom,0px))!important;
    display:flex!important;grid-template-columns:none!important;flex-direction:column!important;align-items:stretch!important;
    width:auto!important;max-width:none!important;height:276px!important;min-height:0!important;
    margin:0!important;padding:24px 10px 10px!important;gap:10px!important;overflow:hidden!important;
    border-radius:20px 20px 0 0!important;transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar.is-label-sheet-collapsed {
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-head,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-grid {
    display:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-sheet-handle {
    top:0!important;
    height:30px!important;
    min-height:30px!important;
  }
}

/* Desktop label palette: vertical, floating and draggable like image/text. */
@media (min-width:981px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area>.bigstep-ai-label-template-bar.bigstep-ai-label-template-bar:not([hidden]){
    position:absolute!important;z-index:95!important;top:74px!important;right:22px!important;bottom:auto!important;left:auto!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;
    width:318px!important;max-width:318px!important;height:min(70vh,680px)!important;max-height:calc(100% - 100px)!important;
    margin:0!important;padding:10px!important;overflow:hidden!important;border:1px solid #43504b!important;
    border-radius:18px!important;background:linear-gradient(180deg,rgba(22,28,26,.98),rgba(10,15,14,.985))!important;
    box-shadow:0 24px 64px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.045)!important;
    backdrop-filter:blur(14px)!important;transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar>.bigstep-ai-panel-drag-handle{
    order:-20!important;flex:0 0 28px!important;height:28px!important;min-height:28px!important;margin:-2px 0 0!important;
    border:1px solid #303b37!important;border-radius:9px!important;background:#111715!important;color:#87938e!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar>.bigstep-ai-label-sheet-handle{display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar>.bigstep-ai-label-template-head{
    flex:0 0 auto!important;display:block!important;padding:2px 4px 6px!important;border-bottom:1px solid #2d3733!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-head>span{display:block!important;font-size:14px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-head>small{display:block!important;margin-top:4px!important;font-size:9px!important;line-height:1.35!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar>.bigstep-ai-label-template-grid{
    flex:1 1 auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;gap:9px!important;width:100%!important;min-height:0!important;padding:1px 2px 10px!important;
    overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:thin!important;scrollbar-color:#52605a transparent!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button{
    display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;min-width:0!important;
    min-height:132px!important;padding:9px 7px 8px!important;border:1px solid #313c38!important;border-radius:13px!important;
    background:#111614!important;text-align:center!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button:is(:hover,:focus-visible,.is-active){border-color:#c8ff00!important;background:#172016!important;color:#c8ff00!important;transform:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i{width:64px!important;height:84px!important;min-height:84px!important;margin:auto!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span{display:block!important;width:100%!important;padding:0!important;border:0!important;font-size:9px!important;text-align:center!important;white-space:normal!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span small{display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-custom-position{right:auto!important;bottom:auto!important}
}

/* Mobile contextual sheets v3: calm grip spacing + a real label gallery. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) {
    padding-top:32px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar] > .bigstep-ai-image-sheet-handle::before,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-sheet-handle::before {
    top:10px!important;background:#7f8c87!important;
  }
}
@media (max-width:760px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar .bigstep-ai-label-template-head {
    padding:0 3px 5px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-head>span {font-size:14px!important;letter-spacing:-.01em!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid {
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;gap:10px!important;padding:0 1px 10px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button {
    display:flex!important;grid-template-columns:none!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-start!important;gap:7px!important;
    min-height:126px!important;padding:8px 5px 7px!important;border:1px solid #313c38!important;
    border-radius:13px!important;background:#111614!important;box-shadow:none!important;text-align:center!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button:is(:hover,:focus-visible,.is-active) {
    border-color:#c8ff00!important;background:#172016!important;transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i {
    width:62px!important;height:82px!important;min-height:82px!important;margin:0 auto!important;
    border:1px solid #48534f!important;border-radius:7px!important;background:#080c0b!important;
    color:#f3f6f2!important;box-shadow:0 7px 16px rgba(0,0,0,.28)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="y2k"] {
    border-color:#66716d!important;color:#f3f6f2!important;font-size:14px!important;text-shadow:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="utility"] {
    align-items:flex-start!important;padding:7px!important;color:#f3f6f2!important;font-size:23px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="tag"] {color:#f3f6f2!important;font-size:11px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="tag"]::after {width:72%!important;height:1px!important;background:#c8ff00!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span {
    display:block!important;width:100%!important;color:#e9eeea!important;font-size:9px!important;
    line-height:1.2!important;text-align:center!important;white-space:normal!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span small {display:none!important}
}

/* Mobile contextual text editor: rebuild the legacy horizontal strip as a
 * real bottom sheet. Controls are grouped semantically instead of merely
 * forcing the old row to scroll vertically. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) {
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(var(--toolbar-m, 68px) + 8px + env(safe-area-inset-bottom, 0px))!important;
    z-index:780!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    align-content:start!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(34dvh,280px)!important;
    margin:0!important;
    padding:10px 8px 8px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    white-space:normal!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:14px 14px 0 0!important;
    box-shadow:0 -16px 34px rgba(0,0,0,.48)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]::before,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]::after,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-sep {
    display:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-sheet-handle,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-group,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-label:has([data-font-family]),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-label:has(.bigstep-ai-text-bar-stroke),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-label:has([data-text-effect]),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > [data-text-curve-wrap],
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > [data-warp-intensity-wrap] {
    grid-column:1 / -1!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-group {
    display:flex!important;
    width:100%!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:4px!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-group::-webkit-scrollbar { display:none!important; }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-group > .bigstep-ai-tool {
    flex:1 0 40px!important;
    min-width:40px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-bar-label {
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    padding:8px!important;
    border:1px solid var(--bs-border, #2d3735)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    white-space:normal!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] .bigstep-ai-text-bar-select,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] input[type="number"],
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] input[type="range"] {
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-sheet-handle {
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    display:block!important;
    width:100%!important;
    height:18px!important;
    min-height:18px!important;
    margin:-10px 0 -8px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    touch-action:none!important;
    cursor:ns-resize!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-sheet-handle::before {
    content:""!important;
    position:absolute!important;
    top:4px!important;
    left:50%!important;
    width:40px!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(130,145,141,.78)!important;
    transform:translateX(-50%)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup].is-mobile-text-sheet-dragging {
    animation:none!important;
    transition:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
}
@media (min-width:981px) {
  .bigstep-ai-text-sheet-handle { display:none!important; }
}

/* Graphite-lime lock: freehand, erase and image edit controls must not fall
   back to the legacy indigo/violet palette on either editor breakpoint. */
body .bigstep-ai-drawing-notice,
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-popup {
	border-color: rgba(200,255,0,.42) !important;
	background: linear-gradient(180deg, rgba(17,23,22,.98), rgba(9,14,13,.98)) !important;
	color: #f4f7f2 !important;
	box-shadow: 0 18px 48px rgba(0,0,0,.52), inset 0 0 0 1px rgba(200,255,0,.04) !important;
}
body .bigstep-ai-drawing-notice__icon {
	background: rgba(200,255,0,.12) !important;
	color: #c8ff00 !important;
}
body .bigstep-ai-drawing-notice__color span {
	box-shadow: 0 0 0 2px rgba(200,255,0,.22) !important;
}
body .bigstep-ai-drawing-notice__width input,
body .bigstep-ai-image-erase-popup__range input {
	accent-color: #c8ff00 !important;
}
body .bigstep-ai-drawing-notice__brush,
body .bigstep-ai-drawing-notice__clear {
	border-color: #36413e !important;
	background: #171d1c !important;
	color: #e7ede9 !important;
	box-shadow: none !important;
}
body .bigstep-ai-drawing-notice__exit,
body .bigstep-ai-image-erase-popup__exit,
body .bigstep-ai-image-erase-popup__exit:hover {
	border-color: #c8ff00 !important;
	background: #c8ff00 !important;
	color: #080a0b !important;
	box-shadow: 0 8px 22px rgba(200,255,0,.16) !important;
}
@media (max-width: 980px) {
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active {
		border-color: #c8ff00 !important;
		background: linear-gradient(135deg, rgba(200,255,0,.14), rgba(200,255,0,.07)), #151b19 !important;
		color: #eaffaa !important;
		box-shadow: inset 0 0 0 1px rgba(200,255,0,.16), 0 12px 26px rgba(0,0,0,.30) !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active svg {
		background: rgba(200,255,0,.10) !important;
		color: #c8ff00 !important;
		box-shadow: none !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden])::before,
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden])::after {
		border-color: #303a37 !important;
		box-shadow: 0 -16px 34px rgba(0,0,0,.48) !important;
	}
}

/* Legacy text drawer used by Studio Lab. Two stable rows on phones: colors,
   then direction buttons. This prevents narrow color wells and word wrapping. */
.bigstep-ai-text-gradient__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bigstep-ai-text-gradient__head > span { display: grid; gap: 2px; min-width: 0; }
.bigstep-ai-text-gradient__head strong { color: #f4f7f5; font-size: 12px; font-weight: 900; }
.bigstep-ai-text-gradient__head small { color: #8f9b94; font-size: 10px; line-height: 1.3; }
.bigstep-ai-text-gradient__switch { display: flex !important; flex-direction: row !important; align-items: center; gap: 7px !important; }
.bigstep-ai-text-gradient__track { position: relative; display: block; width: 38px; height: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #303932; }
.bigstep-ai-text-gradient__track > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #f5f7f6; transition: transform .2s ease; }
.bigstep-ai-text-gradient__switch > input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.bigstep-ai-text-gradient__switch > input:checked + .bigstep-ai-text-gradient__track { border-color: #c8ff00; background: #c8ff00; }
.bigstep-ai-text-gradient__switch > input:checked + .bigstep-ai-text-gradient__track > span { transform: translateX(16px); background: #101511; }
.bigstep-ai-text-gradient__body { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); align-items: end; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }
.bigstep-ai-text-gradient__body[hidden] { display: none !important; }
.bigstep-ai-text-gradient__body label { display: grid; gap: 4px; min-width: 0; color: #9ba69f; font-size: 10px; }
.bigstep-ai-text-gradient__body input[type="color"] { width: 100% !important; min-width: 0 !important; height: 34px !important; padding: 3px !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 9px !important; background: #1b231e !important; }
.bigstep-ai-text-gradient__directions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.bigstep-ai-text-gradient__directions button { min-width: 0; min-height: 32px; padding: 5px 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #111713; color: #cfd7d2; font-size: 10px; font-weight: 800; white-space: nowrap; }
.bigstep-ai-text-gradient__directions button.is-active { border-color: #c8ff00; background: #192118; color: #c8ff00; }
@media (max-width: 640px) {
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-text-gradient {
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 10px !important;
    padding: 10px !important;
  }
}

/* Default Studio sidebar is ~332px wide even on desktop. Use a two-row card
   there; only the user-expanded wide panel has room for a real four-column table. */
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-head {
  display: none !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  grid-template-columns: minmax(108px, 1fr) minmax(128px, 1.12fr) !important;
  gap: 9px 10px !important;
  min-width: 0 !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,.12);
}
html body .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-head {
  display: grid !important;
  grid-template-columns: minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  grid-template-columns: minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  padding-top: 0;
  border-top: 0;
}

/* Studio product panel aligned with the single-product option hierarchy. */
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] {
  --bs-product-accent: #21d4c2;
  --bs-product-accent-soft: rgba(33,212,194,.11);
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-fields--editor {
  gap: 0 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-field-block {
  margin: 0 !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(148,163,184,.16);
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-field-block > span,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-field-head > span,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-title {
  display: block;
  margin: 0 0 9px;
  color: #aeb8b4 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-field-block > span::before,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-field-head > span::before,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 8px;
  border-radius: 9px;
  background: var(--bs-product-accent);
  vertical-align: -2px;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch:hover,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-radio-row label:hover {
  border-color: rgba(33,212,194,.55) !important;
  color: #e7fffc !important;
  background: rgba(33,212,194,.06) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.is-active,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-radio-row label:has(input:checked) {
  border-color: var(--bs-product-accent) !important;
  color: #bafff8 !important;
  background: var(--bs-product-accent-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(33,212,194,.10) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-title {
  margin-top: 13px;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-options {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 44px;
  padding: 8px 48px 8px 12px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 10px !important;
  background: #171d1d !important;
  cursor: pointer;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option__check {
  position: absolute !important;
  right: 10px;
  top: 50%;
  width: 36px !important;
  height: 21px !important;
  margin: 0 !important;
  border: 1px solid #46504e !important;
  border-radius: 999px !important;
  background: #26302e !important;
  transform: translateY(-50%);
  transition: .18s ease;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option__check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #b8c2bf;
  transition: transform .18s ease, background .18s ease;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option:has(input:checked) {
  border-color: rgba(33,212,194,.64) !important;
  background: rgba(33,212,194,.08) !important;
  color: #dffffb !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option input:checked + .bigstep-ai-extra-print-option__check {
  border-color: var(--bs-product-accent) !important;
  background: var(--bs-product-accent) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option input:checked + .bigstep-ai-extra-print-option__check::after {
  transform: translateX(15px);
  background: #071311;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown {
  margin-top: 14px !important;
  border-color: rgba(33,212,194,.25) !important;
  border-radius: 12px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-head {
  border-color: rgba(33,212,194,.18) !important;
  background: rgba(33,212,194,.055) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-head strong {
  color: #eafffc !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-guide-open:hover {
  border-color: rgba(33,212,194,.58) !important;
  color: #bafff8 !important;
  background: rgba(33,212,194,.08) !important;
}

/* Product panel final layout overrides. Keep these at the end of the cascade:
   older Studio rules otherwise restore lime and nested colour scrolling. */
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch-grid--color {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb.is-active {
  border-color: var(--bs-product-accent) !important;
  background: var(--bs-product-accent-soft) !important;
  color: #bafff8 !important;
  box-shadow: inset 0 0 0 1px rgba(33,212,194,.13) !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb:hover {
  border-color: rgba(33,212,194,.55) !important;
  background: rgba(33,212,194,.06) !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-head {
  display: grid !important;
  grid-template-columns: minmax(92px, 1.1fr) minmax(112px, 1.2fr) minmax(74px, .8fr) minmax(82px, .9fr) !important;
  align-items: center;
  gap: 8px;
  padding: 0 10px 7px;
  color: #87928e;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  display: grid !important;
  grid-template-columns: minmax(92px, 1.1fr) minmax(112px, 1.2fr) minmax(74px, .8fr) minmax(82px, .9fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 64px !important;
  padding: 9px 10px !important;
  border-color: rgba(148,163,184,.18) !important;
  border-radius: 10px !important;
  background: #171d1d !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-variant {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-size {
  color: #f1f5f3;
  font-size: 12px;
  font-weight: 900;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-color {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 24px 0 8px !important;
  font-size: 11px !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control {
  display: grid !important;
  grid-template-columns: 30px minmax(42px,1fr) 30px !important;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control button {
  display: grid !important;
  place-items: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid #3b4744 !important;
  border-radius: 8px !important;
  background: #222b29 !important;
  color: #dce6e2 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control button:hover {
  border-color: rgba(33,212,194,.62) !important;
  color: #bafff8 !important;
  background: rgba(33,212,194,.09) !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 4px !important;
  border-color: #3b4744 !important;
  background: #111716 !important;
  color: #f5f8f7 !important;
  font-size: 12px !important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  display: grid !important;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money small {
  color: #7f8b87;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money b {
  color: #e8efec;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(33,212,194,.22);
  border-radius: 10px;
  background: rgba(33,212,194,.055);
  color: #aeb9b5;
  font-size: 10.5px;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-summary strong {
  color: #bafff8 !important;
}
@media (max-width: 640px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-head { display: none !important; }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-row {
    grid-template-columns: minmax(108px, 1fr) minmax(122px, 1.15fr) !important;
    gap: 9px 10px !important;
    padding: 10px !important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money {
    padding-top: 7px;
    border-top: 1px solid rgba(148,163,184,.12);
  }
}

/* Artwork wishlist: keep the selected heart red and readable in Graphite Lime. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  [data-tool-panel="library"]
  .bigstep-ai-artwork-card.is-favorite
  .bigstep-ai-artwork-favorite {
	border-color:rgba(255,77,94,.88)!important;
	background:rgba(17,23,21,.96)!important;
	color:#ff4d5e!important;
	-webkit-text-fill-color:#ff4d5e!important;
	box-shadow:0 8px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(255,77,94,.12)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  [data-tool-panel="library"]
  .bigstep-ai-artwork-card.is-favorite
  .bigstep-ai-artwork-favorite:hover {
	border-color:#ff4d5e!important;
	background:#1b1718!important;
	color:#ff6675!important;
	-webkit-text-fill-color:#ff6675!important;
}

/* Sleeve and label workspaces use a clean square canvas with shadow only. */
html body .bigstep-ai-app[data-editor-mode="editor"].is-extra-print-side-active .bigstep-ai-canvas-wrap,
html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-canvas-wrap,
html body .bsai-label-canvas-wrap {
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .42) !important;
}

html body .bigstep-ai-app[data-editor-mode="editor"].is-extra-print-side-active .bigstep-ai-canvas-wrap :is(.canvas-container, .lower-canvas, .upper-canvas),
html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-canvas-wrap :is(.canvas-container, .lower-canvas, .upper-canvas),
html body .bsai-label-canvas-wrap :is(.canvas-container, .lower-canvas, .upper-canvas) {
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
}

/* ── 0. Theme isolation — neutralize WordPress theme overrides ─
   Themes (Elementor, Astra, Divi, OceanWP, Storefront…) globally style
   `button`, `.button`, `.btn`, `a.button`, even via the body selector.
   Their gradient backgrounds, box-shadows, letter-spacing and text-shadow
   bleed into our toolbar. We force-reset paint properties for ANY
   clickable inside .bigstep-ai-app using !important so the cascade
   actually wins. Specific button classes below re-apply their own
   solid colors on top. */
.bigstep-ai-app,
.bigstep-ai-app * {
  box-sizing: border-box;
}

/* Four print-area switcher: front, back and both sleeves. */
.bigstep-ai-side-tab__thumb--sleeve {
	display: grid !important;
	place-items: center;
	background: linear-gradient(145deg, #1b2020, #0c1010) !important;
	color: var(--bs-accent);
	font-size: 18px;
	font-weight: 900;
}

.bigstep-ai-side-tab__thumb--label {
	display: grid !important;
	place-items: center;
	background: linear-gradient(145deg, #1b2020, #0c1010) !important;
	color: var(--bs-accent);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .04em;
}

.bigstep-ai-side-tab__thumb--label svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Extra print sides show their real artwork preview once a design exists. */
.bigstep-ai-side-tab__thumb--sleeve.has-design-preview,
.bigstep-ai-side-tab__thumb--label.has-design-preview {
	background-color: #0c1010 !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

.bigstep-ai-side-tab__thumb--sleeve.has-design-preview > span,
.bigstep-ai-side-tab__thumb--label.has-design-preview > svg {
	display: none !important;
}

/* Sleeve/label workspace: softer frame; the in-canvas safezone stays visible. */
.bigstep-ai-app[data-editor-mode="editor"].is-extra-print-side-active .bigstep-ai-canvas-wrap {
	border: 0 !important;
	border-radius: 22px !important;
	background: #0d1210 !important;
	box-shadow: 0 24px 64px rgba(0,0,0,.38),0 0 0 1px rgba(142,158,149,.28),0 0 0 7px rgba(12,17,15,.42) !important;
}

.bigstep-ai-app[data-editor-mode="editor"].is-extra-print-side-active .bigstep-ai-canvas-wrap :is(.canvas-container,.lower-canvas,.upper-canvas) {
	border-radius: 21px !important;
}

.bigstep-ai-app[data-editor-mode="editor"].is-extra-print-side-active .bigstep-ai-canvas-wrap::after {
	position: absolute;
	inset: 0;
	z-index: 7;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
	content: '';
	pointer-events: none;
}

.bigstep-ai-label-template-bar {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 16;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 28px);
	padding: 7px;
	border: 1px solid rgba(200,255,0,.34);
	border-radius: 14px;
	background: rgba(12,17,15,.94);
	box-shadow: 0 14px 34px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.025) inset;
	backdrop-filter: blur(10px);
}

.bigstep-ai-label-template-bar[hidden] {
	display: none !important;
}

.bigstep-ai-label-template-bar span {
	flex: 0 0 auto;
	color: #aeb9b3;
	font-size: 10px;
	font-weight: 900;
	white-space: nowrap;
	padding: 0 7px 0 5px;
	border-right: 1px solid #35403b;
}

.bigstep-ai-label-template-bar button {
	flex: 0 0 auto;
	min-height: 32px !important;
	padding: 7px 9px !important;
	border: 1px solid rgba(200,255,0,.35) !important;
	border-radius: 9px !important;
	background: #171e1b !important;
	color: #f5f7f0 !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	white-space: nowrap;
}

.bigstep-ai-label-template-bar button:hover {
	border-color: #c8ff00 !important;
	color: #c8ff00 !important;
	background: #1d281a !important;
}

.bigstep-ai-extra-print-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
}

.bigstep-ai-extra-print-option {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px;
	min-width: 0;
	min-height: 40px;
	padding: 7px 8px;
	border: 1px solid rgba(151,164,160,.25);
	border-radius: 10px;
	background: #151b1b;
	color: #e7eee7;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.bigstep-ai-extra-print-option:hover {
	border-color: rgba(200,255,0,.44);
	transform: translateY(-1px);
}

.bigstep-ai-extra-print-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bigstep-ai-extra-print-option__check {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 1px solid #64706d;
	border-radius: 5px;
	background: #0c1010;
}

.bigstep-ai-extra-print-option__text {
	display: inline-flex !important;
	min-width: 0;
	flex-direction: row !important;
	align-items: center !important;
	line-height: 1.18;
}

.bigstep-ai-extra-print-option__text strong {
	overflow: hidden;
	color: #f4f7f3;
	font-size: 11px;
	font-weight: 850;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bigstep-ai-extra-print-option__text:only-child,
.bigstep-ai-extra-print-option__text strong:only-child {
	margin: 0;
}

.bigstep-ai-extra-print-option__text small {
	margin-top: 3px;
	color: #a8b3b0;
	font-size: 9.5px;
	font-weight: 700;
	white-space: nowrap;
}

.bigstep-ai-extra-print-option:has(input:checked) {
	border-color: #c8ff00;
	background: rgba(200,255,0,.08);
	color: #c8ff00;
}

.bigstep-ai-extra-print-option:has(input:checked) .bigstep-ai-extra-print-option__check {
	border-color: #c8ff00;
	background: #c8ff00;
}

.bigstep-ai-extra-print-option:has(input:checked) .bigstep-ai-extra-print-option__check::after {
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border: solid #0a0e0d;
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}

.bigstep-ai-extra-print-option:has(input:checked) strong,
.bigstep-ai-extra-print-option:has(input:checked) small {
	color: #c8ff00;
}

@media (max-width: 720px) {
	.bigstep-ai-label-template-bar {
		left: 8px;
		right: 8px;
		bottom: 8px;
		transform: none;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.bigstep-ai-label-template-bar span { min-width: 50px; }
	.bigstep-ai-label-template-bar button { padding-inline: 8px !important; }
	.bigstep-ai-label-template-bar::-webkit-scrollbar { display: none; }
}
@media (min-width: 761px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs {
		max-height: calc(100dvh - 180px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}
@media (max-width: 760px) and (orientation: portrait) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs {
		width: min(292px, calc(100dvw - 20px)) !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button {
		flex-direction: row !important;
		justify-content: flex-start !important;
		min-width: 0 !important;
	}
}

/* ── Unified Bigstep progress system ─────────────────────────────
   One visual language for Studio boot, AI jobs, mockup rendering,
   ordering, QR transfer and compact in-panel waits. */
.bigstep-ai-loading .bsai-loader-card,
.bigstep-ai-loading.is-loading-ai .bsai-loader-card,
.bigstep-ai-loading.is-loading-typo .bsai-loader-card {
  width: min(404px, calc(100vw - 32px)) !important;
  padding: 28px 26px 24px !important;
  gap: 10px !important;
  border: 1px solid rgba(129,140,248,.42) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(99,102,241,.18), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.98), rgba(7,12,24,.98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 58px rgba(99,102,241,.16) !important;
}
.bigstep-ai-loading .bsai-loader-card::before,
.bigstep-ai-loading .bsai-loader-card::after { content: none !important; display: none !important; }
.bigstep-ai-loading .bsai-loader-mark,
.bigstep-ai-loading.is-loading-ai .bsai-loader-mark,
.bigstep-ai-loading.is-loading-typo .bsai-loader-mark {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 2px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: conic-gradient(from 210deg, #22d3ee, #6366f1, #a855f7, #ec4899, #22d3ee) !important;
  box-shadow: 0 16px 36px rgba(79,70,229,.30), 0 0 30px rgba(34,211,238,.14) !important;
  animation: bsai-loader-float 1.8s ease-in-out infinite !important;
  overflow: visible !important;
}
.bigstep-ai-loading .bsai-loader-mark::before,
.bigstep-ai-loading .bsai-loader-mark::after { content: none !important; display: none !important; }
.bsai-loader-brand { display:flex; align-items:center; justify-content:center; width:132px; height:48px; margin:0 auto 2px; }
.bsai-loader-brand img { display:block; width:auto; max-width:132px; height:42px; object-fit:contain; }
.bsai-loader-brand .bigstep-ai-brand-text { color:#fff; font-size:30px; font-weight:800; letter-spacing:-.06em; }
.bigstep-ai-loading .bsai-loader-card [data-loading-title]:empty { display:none !important; }
.bsai-loader-mark i {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(145deg, #111827, #080d1a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.bsai-loader-mark i::before,
.bsai-loader-mark i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%,-50%);
}
.bsai-loader-mark i::before {
  width: 22px;
  height: 22px;
  border: 3px solid transparent;
  border-top-color: #67e8f9;
  border-right-color: #a78bfa;
  animation: bsai-ring-spin .8s linear infinite;
}
.bsai-loader-mark i::after {
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow: 0 0 14px #a78bfa;
}
.bsai-loader-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(129,140,248,.30);
  border-radius: 999px;
  background: rgba(99,102,241,.10);
  color: #a5b4fc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}
.bigstep-ai-loading .bsai-loader-card strong {
  margin-top: 2px !important;
  color: #f8fafc !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.bigstep-ai-loading .bsai-loader-card p {
  min-height: 40px !important;
  max-width: 330px;
  color: #aebbd1 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.bigstep-ai-loading .bigstep-ai-loading-style-badge {
  order: 3;
  padding: 5px 9px !important;
  border-color: rgba(34,211,238,.24) !important;
  background: rgba(34,211,238,.08) !important;
  color: #a5f3fc !important;
  box-shadow: none !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
}
.bigstep-ai-loading .bsai-loader-track,
.bigstep-ai-loading.is-loading-ai .bsai-loader-track,
.bigstep-ai-loading.is-loading-typo .bsai-loader-track {
  order: 5;
  width: 100% !important;
  height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.13) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
  overflow: hidden !important;
}
.bigstep-ai-loading .bsai-loader-track::after { content: none !important; display: none !important; }
.bsai-loader-track > span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #6366f1 52%, #a855f7);
  box-shadow: 0 0 16px rgba(99,102,241,.55);
  transition: width .48s cubic-bezier(.22,.61,.36,1);
}
.bsai-loader-meta {
  order: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #718096;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.bsai-loader-meta b { color: #a5b4fc; font-size: 11px; font-variant-numeric: tabular-nums; }
@keyframes bsai-loader-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bsai-ring-spin { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Compact variants keep the same mark, surface and progress colors. */
.bigstep-ai-mockup-load-progress__box,
.bigstep-ai-remix-progress,
.bigstep-ai-remix-panel-overlay,
.bigstep-personalizer__loading,
.bsai-share-loading {
  border-color: rgba(129,140,248,.30) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(7,12,24,.96)) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.bigstep-ai-mockup-load-progress__icon,
.bigstep-personalizer__spinner,
.bigstep-ai-qr-spinner,
.bsai-share-spinner {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border: 3px solid rgba(129,140,248,.18) !important;
  border-top-color: #22d3ee !important;
  border-right-color: #8b5cf6 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 16px rgba(99,102,241,.18) !important;
  animation: bs-spin .8s linear infinite !important;
}
.bigstep-ai-mockup-load-progress__icon::before { content: none !important; }
.bigstep-ai-mockup-load-progress__bar,
.bigstep-ai-remix-progress-bar,
.bigstep-ai-remix-gen-progress {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.13) !important;
  overflow: hidden !important;
}
.bigstep-ai-mockup-load-progress__bar i,
.bigstep-ai-remix-progress-bar span,
.bigstep-ai-remix-gen-progress::after {
  background: linear-gradient(90deg, #22d3ee, #6366f1 52%, #a855f7) !important;
  box-shadow: 0 0 14px rgba(99,102,241,.45) !important;
}
.bigstep-ai-font-picker__loading,
.bigstep-ai-emoji-loading {
  color: #a5b4fc !important;
  font-weight: 750 !important;
}
@media (prefers-reduced-motion: reduce) {
  .bigstep-ai-loading .bsai-loader-mark { animation: none !important; }
  .bsai-loader-mark i::before,
  .bigstep-ai-mockup-load-progress__icon,
  .bigstep-personalizer__spinner,
  .bigstep-ai-qr-spinner,
  .bsai-share-spinner { animation-duration: 1.6s !important; }
}

/* Canonical loading brand: logo only. Remove legacy spinner tiles and
   product-name kickers even when an older cached loader markup is present. */
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-mark,
html body .bigstep-ai-loading .bsai-loader-mark,
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-kicker,
html body .bigstep-ai-loading .bsai-loader-kicker {
	display: none !important;
}
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-brand,
html body .bigstep-ai-loading .bsai-loader-brand {
	display: flex !important;
}

.bigstep-ai-app button,
.bigstep-ai-app input[type="button"],
.bigstep-ai-app input[type="submit"],
.bigstep-ai-app input[type="reset"],
.bigstep-ai-app a.button,
.bigstep-ai-app .button,
.bigstep-ai-app a.btn,
.bigstep-ai-app .btn,
.bigstep-ai-app a.elementor-button,
.bigstep-ai-app .elementor-button {
  /* Wipe theme paint */
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  /* Reset sizing — themes love min-height: 50px on buttons */
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  /* Reset typography */
  font-family: inherit;
  font-style: normal;
  font-variant: normal;
  line-height: 1.2;
  vertical-align: middle;
  /* Make sure default theme transforms don't shift */
  transform: none;
}
.bigstep-ai-app button:focus,
.bigstep-ai-app button:active,
.bigstep-ai-app button:focus-visible {
  outline: none;
  box-shadow: none !important;
}
/* CTA buttons that NEED a gradient re-apply it with !important so the
   wipe above doesn't strip them. */
.bigstep-ai-app .bigstep-ai-button--primary,
.bigstep-ai-app .bigstep-ai-tool--primary,
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
.bigstep-ai-app .bigstep-ai-gen-submit {
  background-image: var(--bs-grd) !important;
}
/* Reset solid backgrounds on common click surfaces so theme blue doesn't
   show through. Each specific class still owns its colour below. */
.bigstep-ai-app .bigstep-ai-swatch,
.bigstep-ai-app .bigstep-ai-tool,
.bigstep-ai-app .bigstep-ai-top-button,
.bigstep-ai-app .bigstep-ai-style-chips button,
.bigstep-ai-app [data-editor-style-chips] button,
.bigstep-ai-app .bigstep-ai-template-catalog-card,
.bigstep-ai-app .bigstep-ai-template-design-card,
.bigstep-ai-app .bigstep-ai-product-card,
.bigstep-ai-app .bigstep-ai-product-open,
.bigstep-ai-app .bigstep-ai-text-template-grid button,
.bigstep-ai-app .bigstep-ai-shape-grid button,
.bigstep-ai-app .bigstep-ai-element-menu button,
.bigstep-ai-app .bigstep-ai-element-grid button,
.bigstep-ai-app .bigstep-ai-history-toggle,
.bigstep-ai-app .bigstep-ai-side-tabs button,
.bigstep-ai-app .bigstep-ai-zoom-controls button,
.bigstep-ai-app .bigstep-ai-editor-icon-button,
.bigstep-ai-app .bigstep-ai-layer-row button,
.bigstep-ai-app .bigstep-ai-radio-row label,
.bigstep-ai-app .bigstep-ai-obj-toolbar button,
.bigstep-ai-app .bigstep-ai-text-bar button,
.bigstep-ai-app [data-context-action],
.bigstep-ai-app [data-panel-toggle] {
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  color: var(--bs-muted) !important;
  border-color: var(--bs-border);
  text-shadow: none !important;
  box-shadow: none !important;
}
/* Active states win over the reset */
.bigstep-ai-app .bigstep-ai-swatch.is-active,
.bigstep-ai-app .bigstep-ai-tool.is-active,
.bigstep-ai-app .bigstep-ai-style-chips button.is-active,
.bigstep-ai-app [data-editor-style-chips] button.is-active,
.bigstep-ai-app .bigstep-ai-side-tabs button.is-active,
.bigstep-ai-app [data-panel-toggle].is-active,
.bigstep-ai-app [data-text-align].is-active,
.bigstep-ai-app [data-text-template].is-active {
  background: rgba(99,102,241,.14) !important;
  background-image: none !important;
  color: #a5b4fc !important;
  border-color: var(--bs-accent) !important;
}
/* Hover states */
.bigstep-ai-app .bigstep-ai-swatch:hover,
.bigstep-ai-app .bigstep-ai-tool:hover,
.bigstep-ai-app .bigstep-ai-top-button:hover,
.bigstep-ai-app .bigstep-ai-style-chips button:hover,
.bigstep-ai-app [data-editor-style-chips] button:hover,
.bigstep-ai-app .bigstep-ai-template-catalog-card:hover,
.bigstep-ai-app .bigstep-ai-template-design-card:hover {
  background: var(--bs-surface-2) !important;
  color: var(--bs-text) !important;
}
/* The cart, primary CTA and standalone exits keep their own paint */
.bigstep-ai-app .bigstep-ai-button--primary,
.bigstep-ai-app .bigstep-ai-tool--primary,
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
.bigstep-ai-app .bigstep-ai-gen-submit {
  color: var(--bs-ink) !important;
  border-color: transparent !important;
}
/* Zoom controls transparent */
.bigstep-ai-app .bigstep-ai-zoom-controls button {
  background: transparent !important;
  color: var(--bs-text) !important;
  border-color: transparent !important;
}
.bigstep-ai-app .bigstep-ai-zoom-controls button:hover {
  background: var(--bs-surface-3) !important;
}
/* Editor topbar icon buttons (home, info, trash) — also transparent */
.bigstep-ai-app .bigstep-ai-editor-icon-button {
  background: transparent !important;
  color: var(--bs-muted) !important;
  border-color: transparent !important;
}
.bigstep-ai-app .bigstep-ai-editor-icon-button:hover {
  background: var(--bs-surface-3) !important;
  color: var(--bs-text) !important;
}
/* Side menu (left rail) tools transparent */
.bigstep-ai-app .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
  background: transparent !important;
  background-image: none !important;
  color: var(--bs-muted) !important;
  border-color: transparent !important;
}
.bigstep-ai-app .bigstep-ai-tool-grid--menu .bigstep-ai-tool:hover {
  background: var(--bs-surface-2) !important;
  color: var(--bs-text) !important;
}
.bigstep-ai-app .bigstep-ai-tool-grid--menu .bigstep-ai-tool.is-active {
  background: rgba(99,102,241,.12) !important;
  color: #a5b4fc !important;
  border-color: rgba(99,102,241,.35) !important;
}
/* Style chip pill shape */
.bigstep-ai-app .bigstep-ai-style-chips button,
.bigstep-ai-app [data-editor-style-chips] button {
  background: var(--bs-surface-2) !important;
  border-color: var(--bs-border) !important;
}

/* Common bottom-right widgets that crash the editor visually.
   Hidden ONLY when the editor is open (CSS class added by JS on body). */
body.bigstep-ai-editor-active #fb-root,
body.bigstep-ai-editor-active .fb_dialog,
body.bigstep-ai-editor-active .fb-customerchat,
body.bigstep-ai-editor-active iframe[title*="Messenger" i],
body.bigstep-ai-editor-active iframe[id^="ifZaloMW"],
body.bigstep-ai-editor-active div[id^="zalo-chat"],
body.bigstep-ai-editor-active .zalo-chat-widget,
body.bigstep-ai-editor-active #tawkchat-container,
body.bigstep-ai-editor-active iframe[title*="chat" i]:not([title*="Bigstep" i]),
body.bigstep-ai-editor-active .crisp-client,
body.bigstep-ai-editor-active #crisp-chatbox,
body.bigstep-ai-editor-active .intercom-lightweight-app,
body.bigstep-ai-editor-active #intercom-container,
body.bigstep-ai-editor-active .gtranslate_wrapper,
body.bigstep-ai-editor-active .lc_text_chat-wrapper,
body.bigstep-ai-editor-active .livechat-trigger,
body.bigstep-ai-editor-active #lhc_status_container,
body.bigstep-ai-editor-active #subiz-button,
body.bigstep-ai-editor-active .subiz-button-container,
body.bigstep-ai-editor-active iframe[src*="facebook.com/v"],
body.bigstep-ai-editor-active iframe[src*="messenger.com"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 1. Design Tokens ────────────────────────────────────────── */
.bigstep-ai-app {
  /* Backgrounds */
  --bs-bg:        #080b12;
  --bs-surface:   #0f1220;
  --bs-surface-2: #141828;
  --bs-surface-3: #1b2238;

  /* Text */
  --bs-text:   #f1f5f9;
  --bs-muted:  #8896aa;
  --bs-subtle: #3d4a5e;

  /* Borders */
  --bs-border:   #1c2640;
  --bs-border-2: #2a3658;

  /* Accent — indigo/violet */
  --bs-accent:   #6366f1;
  --bs-accent-2: #8b5cf6;
  --bs-grd:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --bs-glow:     0 0 0 3px rgba(99,102,241,.22);
  --bs-ink:      #ffffff;

  /* Semantic */
  --bs-danger:  #ef4444;
  --bs-success: #10b981;

  /* Canvas — bright white sheet */
  --bs-canvas:    #ffffff;
  --bs-canvas-sh: 0 2px 8px rgba(0,0,0,.15), 0 12px 48px rgba(0,0,0,.55);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Layout */
  --topbar-h:   58px;
  --sidebar-w:  72px;
  --panel-w:    344px;
  --toolbar-m:  68px; /* mobile bottom toolbar height */

  /* Type */
  --t-xs:   10px;
  --t-sm:   12px;
  --t-md:   13px;
  --t-base: 14px;
  --t-lg:   16px;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  .16s;
}

/* ── 2. App base ─────────────────────────────────────────────── */
.bigstep-ai-app {
  position: relative;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.bigstep-ai-app *, .bigstep-ai-app *::before, .bigstep-ai-app *::after {
  box-sizing: inherit;
}
.bigstep-ai-app p  { margin: 0; }
.bigstep-ai-app a  { color: inherit; }
.bigstep-ai-app ul { list-style: none; padding: 0; margin: 0; }

/* ── 3. [hidden] ─────────────────────────────────────────────── */
.bigstep-ai-app [hidden] { display: none !important; }

/* ── 4. Shared Button base ───────────────────────────────────── */
/* Scoped to .bigstep-ai-app so CSS tokens always resolve correctly */
.bigstep-ai-app .bigstep-ai-button,
.bigstep-ai-app .bigstep-ai-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  /* Trước đây thiếu color → trên dark theme browser fallback về đen mặc định,
   * làm chữ nút "Tiếp tục thiết kế", "Huỷ", v.v. trông đen xấu. */
  color: var(--bs-text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background   var(--dur) var(--ease),
              color        var(--dur) var(--ease),
              opacity      var(--dur);
}
.bigstep-ai-app .bigstep-ai-button:hover,
.bigstep-ai-app .bigstep-ai-tool:hover {
  border-color: var(--bs-border-2);
  background: var(--bs-surface-2);
}
.bigstep-ai-app .bigstep-ai-tool.is-active {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.14);
  color: #a5b4fc;
  font-weight: 700;
}

/* Primary — gradient */
.bigstep-ai-app .bigstep-ai-button--primary,
.bigstep-ai-app .bigstep-ai-tool--primary {
  border-color: transparent;
  background: var(--bs-grd);
  color: var(--bs-ink);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(99,102,241,.28);
}
.bigstep-ai-app .bigstep-ai-button--primary:hover,
.bigstep-ai-app .bigstep-ai-tool--primary:hover { opacity: .88; }

/* Secondary — outlined */
.bigstep-ai-app .bigstep-ai-button--secondary {
  border-color: var(--bs-border-2);
  background: var(--bs-surface-2);
}
.bigstep-ai-app .bigstep-ai-button--secondary:hover {
  border-color: var(--bs-accent);
}

/* ── 5. Shared form inputs ───────────────────────────────────── */
.bigstep-ai-app input[type="text"],
.bigstep-ai-app input[type="url"],
.bigstep-ai-app input[type="number"],
.bigstep-ai-app select,
.bigstep-ai-app textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  color: var(--bs-text);
  font: inherit;
  font-size: var(--t-md);
  outline: none;
  transition: border-color var(--dur);
  appearance: none;
  -webkit-appearance: none;
}
.bigstep-ai-app input:focus,
.bigstep-ai-app select:focus,
.bigstep-ai-app textarea:focus {
  border-color: var(--bs-accent);
  box-shadow: var(--bs-glow);
}
/* Placeholder — light, regular weight, never bold or styled by theme */
.bigstep-ai-app input::placeholder,
.bigstep-ai-app textarea::placeholder {
  color: rgba(241, 245, 249, 0.42) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.bigstep-ai-app input::-webkit-input-placeholder,
.bigstep-ai-app textarea::-webkit-input-placeholder {
  color: rgba(241, 245, 249, 0.42) !important;
  font-weight: 400 !important;
}
.bigstep-ai-app input::-moz-placeholder,
.bigstep-ai-app textarea::-moz-placeholder {
  color: rgba(241, 245, 249, 0.42) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.bigstep-ai-app input:-ms-input-placeholder,
.bigstep-ai-app textarea:-ms-input-placeholder {
  color: rgba(241, 245, 249, 0.42) !important;
  font-weight: 400 !important;
}
.bigstep-ai-app input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  min-height: unset;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bs-surface-3);
  cursor: pointer;
  box-shadow: none;
}
.bigstep-ai-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bs-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
  cursor: pointer;
}
.bigstep-ai-app input[type="color"] {
  min-height: 36px;
  height: 36px;
  padding: 2px;
  cursor: pointer;
}
.bigstep-ai-hidden-native { display: none !important; }

/* ── 6. Swatch (color / size / method / placement) ───────────── */
.bigstep-ai-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-sm);
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  color: var(--bs-muted) !important;
  font: inherit;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-shadow: none !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
  -webkit-appearance: none !important;
  appearance: none !important;
}
.bigstep-ai-app .bigstep-ai-swatch:hover { border-color: var(--bs-border-2) !important; color: var(--bs-text) !important; background: var(--bs-surface-2) !important; }
.bigstep-ai-app .bigstep-ai-swatch.is-active {
  border-color: var(--bs-accent) !important;
  background: rgba(99,102,241,.14) !important;
  background-image: none !important;
  color: #a5b4fc !important;
  font-weight: 700;
}
.bigstep-ai-swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}
/* Print method swatches — tall */
.bigstep-ai-swatch[data-value="DTF"],
.bigstep-ai-swatch[data-value="DTG"] {
  flex: 1;
  flex-direction: column;
  height: auto;
  min-width: 110px;
  padding: 10px 8px;
  gap: 3px;
  text-align: center;
}
.bigstep-ai-swatch-method-label  { font-size: var(--t-md); font-weight: 800; line-height: 1; }
.bigstep-ai-swatch-method-desc   { font-size: 10px; font-weight: 400; color: var(--bs-muted); line-height: 1.3; white-space: normal; }
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] [data-swatch-group="print_method"] {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch[data-value="DTF"].bigstep-ai-swatch--method-card,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch[data-value="DTG"].bigstep-ai-swatch--method-card {
	display: grid !important;
	grid-template-columns: 38px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 76px !important;
	height: auto !important;
	padding: 10px 44px 10px 12px !important;
	border-color: rgba(71, 85, 105, .74) !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(30, 41, 59, .42)) !important;
	color: #e5e7eb !important;
	position: relative !important;
	text-align: left !important;
	opacity: .82;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card:hover {
	border-color: var(--bs-method-accent, #6366f1) !important;
	background: linear-gradient(135deg, rgba(30, 41, 59, .90), rgba(15, 23, 42, .72)) !important;
	opacity: 1;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active {
	border-color: var(--bs-method-accent, #6366f1) !important;
	background:
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--bs-method-accent, #6366f1) 42%, transparent), transparent 45%),
		linear-gradient(135deg, color-mix(in srgb, var(--bs-method-accent, #6366f1) 26%, rgba(15, 23, 42, .90)), rgba(15, 23, 42, .72)) !important;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--bs-method-accent, #6366f1) 72%, transparent),
		0 12px 26px color-mix(in srgb, var(--bs-method-accent, #6366f1) 18%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--bs-method-accent, #6366f1) 42%, transparent) !important;
	color: #fff !important;
	opacity: 1;
	transform: translateY(-1px);
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card::before {
	content: "";
	position: absolute;
	top: 11px;
	right: 12px;
	width: 19px;
	height: 19px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, .36);
	background: rgba(15, 23, 42, .72);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: transparent;
	background: var(--bs-method-accent, #6366f1);
	color: #fff;
	font-size: 12px;
	font-weight: 950;
	line-height: 1;
	box-shadow: 0 0 16px color-mix(in srgb, var(--bs-method-accent, #6366f1) 44%, transparent);
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active::after {
	content: "\0110 ang ch\1ECD n";
	position: absolute;
	right: 11px;
	bottom: 9px;
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	padding: 0 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bs-method-accent, #6366f1) 22%, rgba(15, 23, 42, .88));
	color: #e0e7ff;
	font-size: 9.5px;
	font-weight: 850;
	line-height: 1;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-method-accent, #6366f1) 38%, transparent);
}
.bigstep-ai-swatch-method-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	color: #fff;
	background: color-mix(in srgb, var(--bs-method-accent, #6366f1) 24%, rgba(15, 23, 42, .92));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-method-accent, #6366f1) 36%, transparent);
}
.bigstep-ai-swatch--method-card.is-active .bigstep-ai-swatch-method-icon {
	background: var(--bs-method-accent, #6366f1);
	box-shadow:
		0 0 18px color-mix(in srgb, var(--bs-method-accent, #6366f1) 36%, transparent),
		inset 0 0 0 1px rgba(255,255,255,.18);
}
.bigstep-ai-swatch-method-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bigstep-ai-swatch-method-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}
.bigstep-ai-swatch-method-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.bigstep-ai-swatch-method-top strong {
	color: #b9c4d8;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
}
.bigstep-ai-swatch--method-card.is-active .bigstep-ai-swatch-method-top strong {
	color: #fff;
	text-shadow: 0 0 12px color-mix(in srgb, var(--bs-method-accent, #6366f1) 38%, transparent);
}
.bigstep-ai-swatch-method-top em {
	min-width: 0;
	color: #f8fafc;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 850;
	line-height: 1.2;
	white-space: normal;
}
.bigstep-ai-swatch-method-copy small {
	display: block;
	color: #aab6c9;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.35;
	white-space: normal;
}

/* Placement grid */
.bigstep-ai-swatch-grid--placement {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.bigstep-ai-swatch-grid--placement .bigstep-ai-swatch {
  flex-direction: column;
  height: auto;
  padding: 10px 6px;
  gap: 4px;
  font-size: var(--t-sm);
}

/* ── 7. Field blocks ─────────────────────────────────────────── */
.bigstep-ai-field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bigstep-ai-field-block > span,
.bigstep-ai-field-block > strong {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .05em;
}
.bigstep-ai-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bigstep-ai-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 700;
}
.bigstep-ai-fields--editor label { font-size: var(--t-sm); font-weight: 600; }

/* ── 8. COMPACT MODE ─────────────────────────────────────────── */
.bigstep-ai-app[data-editor-mode="compact"] {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  --compact-grid-gap: 28px;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.bigstep-ai-app[data-editor-mode="compact"] button,
.bigstep-ai-app[data-editor-mode="compact"] input,
.bigstep-ai-app[data-editor-mode="compact"] textarea,
.bigstep-ai-app[data-editor-mode="compact"] select {
  font-family: inherit;
  letter-spacing: 0 !important;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-topbar-label,
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-title,
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-label,
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-generator-form > label,
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label small,
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price strong {
  letter-spacing: 0 !important;
}

/* Generator topbar
 * Padding ngang để 0 vì outer `.bigstep-ai-app[data-editor-mode="compact"]`
 * đã có padding 24px. Nếu thêm 20px ở đây sẽ làm logo lệch 20px sang phải
 * so với form content bên dưới (.bigstep-ai-generator-left padding ngang 0). */
.bigstep-ai-gen-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
}
.bigstep-ai-gen-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.bigstep-ai-gen-topbar-label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .08em;
  padding-left: 10px;
  border-left: 1px solid var(--bs-border);
}

/* Generator layout
 * Trước đây dùng min-height: calc(100vh - 61px) → ép layout cao bằng viewport
 * dù nội dung ngắn → tạo khoảng trống đen lớn phía dưới (xem screenshot user).
 * Bỏ min-height, để chiều cao = content tự nhiên. Thêm padding-bottom để
 * không sát mép màn hình.
 * Cũng dùng tỉ lệ 5:4 (form:preview) để form không bị bóp quá hẹp khi
 * preview-box chiếm 1 nửa màn hình rộng. */
.bigstep-ai-generator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  gap: var(--compact-grid-gap);
  align-items: start;
  padding-bottom: 36px;
}
.bigstep-ai-generator-left {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.bigstep-ai-generator-right {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 18px;
  min-width: 0;
}
/* Cap preview-box height để không phình to quá khi cột phải rất rộng */
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box {
  width: 100%;
  max-width: 600px;
  max-height: 600px;
  margin: 0 auto;
}

/* Hero text */
.bigstep-ai-gen-hero { display: flex; flex-direction: column; gap: 6px; }
.bigstep-ai-gen-title {
  margin: 0;
  font-size: clamp(26px, 2.75vw, 36px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}
.bigstep-ai-gen-subtitle {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--bs-muted);
  line-height: 1.5;
}

/* Form blocks */
.bigstep-ai-form-block { display: flex; flex-direction: column; gap: 8px; }
.bigstep-ai-form-block--inline { flex-direction: row; align-items: center; gap: 12px; }
.bigstep-ai-form-label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.bigstep-ai-gen-submit { height: 52px; font-size: var(--t-base); font-weight: 700; gap: 8px; }

/* History */
.bigstep-ai-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  color: var(--bs-muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--dur);
}
.bigstep-ai-history-toggle:hover { border-color: var(--bs-accent); color: var(--bs-text); }
.bigstep-ai-history-note {
  font-size: var(--t-xs);
  color: var(--bs-muted);
  margin: 8px 0;
}
.bigstep-ai-history-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; align-items: start; }

/* Brand text fallback */
.bigstep-ai-brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.bigstep-ai-brand-text {
  font-size: 20px;
  font-weight: 900;
  background: var(--bs-grd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Logo — editor topbar (constrained) */
.bigstep-ai-editor-topbar .bigstep-ai-brand-logo { height: 24px; max-width: 110px; }
.bigstep-ai-editor-topbar .bigstep-ai-brand-link  { overflow: hidden; max-height: 44px; }
/* Desktop bumps the logo ~+10-15% so it doesn't look lost in a wider bar. */
@media (min-width: 981px) {
  .bigstep-ai-app .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    height: 32px !important;
    max-width: 150px !important;
  }
  .bigstep-ai-app .bigstep-ai-editor-topbar { height: 62px !important; }
  .bigstep-ai-app[data-editor-mode="editor"] { --topbar-h: 62px; }
}

/* Generator form */
.bigstep-ai-generator-form { display: flex; flex-direction: column; gap: 12px; }

.bigstep-ai-generator-form > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: 0;
}
.bigstep-ai-generator-form textarea { min-height: 104px; resize: vertical; }

.bigstep-ai-prompt-field {
  position: relative;
}
.bigstep-ai-app .bigstep-ai-prompt-field textarea {
  padding-left: 44px !important;
  text-transform: none !important;
}
.bigstep-ai-prompt-spark {
  position: absolute;
  left: 14px;
  top: 46px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #facc15;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(250,204,21,.5));
  animation: bigstep-prompt-spark-blink 1.05s ease-in-out infinite;
}
.bigstep-ai-prompt-spark svg {
  width: 18px;
  height: 18px;
}
.bigstep-ai-prompt-typing-overlay {
  position: absolute;
  left: 44px;
  right: 16px;
  top: 45px;
  bottom: 16px;
  z-index: 2;
  display: block;
  max-width: calc(100% - 60px);
  color: rgba(203,213,225,.58);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.45;
  text-transform: none !important;
  letter-spacing: 0 !important;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow: hidden;
  text-overflow: clip;
}
.bigstep-ai-prompt-typing-overlay::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 4px;
  background: currentColor;
  vertical-align: -.16em;
  animation: bigstep-prompt-caret .8s steps(2) infinite;
}
.bigstep-ai-prompt-typing-overlay[hidden] {
  display: none !important;
}
@keyframes bigstep-prompt-spark-blink {
  0%, 100% { opacity: .55; transform: scale(.86) rotate(-8deg); }
  45% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}
@keyframes bigstep-prompt-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.bigstep-ai-typing {
  min-height: 0;
  font-size: var(--t-sm);
  color: var(--bs-muted);
  font-style: italic;
  margin-top: -6px;
}

/* Style chips */
.bigstep-ai-style-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}
.bigstep-ai-style-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-pill);
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.bigstep-ai-style-chips button:hover { border-color: var(--bs-border-2); color: var(--bs-text); }
.bigstep-ai-style-chips button.is-active,
[data-editor-style-chips] button.is-active {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.14);
  color: #a5b4fc;
  font-weight: 700;
}
:root[data-theme="light"] .bigstep-ai-style-chips button.is-active,
:root[data-theme="light"] [data-editor-style-chips] button.is-active {
  color: #4f46e5;
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap canvas {
    touch-action: none !important;
  }
}

.bigstep-ai-model-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bigstep-ai-model-card {
  min-width: 0;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, .72);
  color: var(--bs-text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.bigstep-ai-model-card:hover {
  border-color: var(--bs-border-2);
  transform: translateY(-1px);
}
.bigstep-ai-model-card.is-active {
  border-color: var(--bs-accent);
  background: rgba(39, 117, 211, .16);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .24);
}
.bigstep-ai-model-card.is-exhausted:not(.is-active) {
  opacity: .62;
}
.bigstep-ai-model-card__name {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}
.bigstep-ai-model-card__meta {
  font-size: 11px;
  line-height: 1.2;
  color: #93c5fd;
  font-weight: 700;
}
.bigstep-ai-model-card__hint {
  font-size: 11px;
  line-height: 1.2;
  color: var(--bs-muted);
}
.bigstep-ai-editor-model-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:root[data-theme="light"] .bigstep-ai-model-card,
.bigstep-ai-app[data-theme="light"] .bigstep-ai-model-card {
  background: #f8fafc;
  border-color: #dbe3ef;
  color: #0f172a;
}
:root[data-theme="light"] .bigstep-ai-model-card.is-active,
.bigstep-ai-app[data-theme="light"] .bigstep-ai-model-card.is-active {
  background: #eef2ff;
  border-color: #6366f1;
}
:root[data-theme="light"] .bigstep-ai-model-card__meta,
.bigstep-ai-app[data-theme="light"] .bigstep-ai-model-card__meta {
  color: #2563eb;
}
@media (max-width: 520px) {
  .bigstep-ai-model-cards {
    grid-template-columns: 1fr;
  }
  .bigstep-ai-model-card {
    min-height: 58px;
  }
}

.bigstep-ai-model-select-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bigstep-ai-model-select-shell {
  position: relative;
  display: block;
}
.bigstep-ai-model-select-shell::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #93c5fd;
  border-bottom: 2px solid #93c5fd;
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}
.bigstep-ai-model-select {
  width: 100%;
  min-height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(99, 102, 241, .42);
  border-radius: 8px;
  appearance: none;
  background:
    linear-gradient(135deg, rgba(39, 117, 211, .16), rgba(15, 23, 42, .82)),
    rgba(15, 23, 42, .94);
  color: var(--bs-text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(2, 6, 23, .18);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.bigstep-ai-model-select:hover {
  border-color: rgba(147, 197, 253, .72);
}
.bigstep-ai-model-select:focus {
  border-color: var(--bs-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bigstep-ai-model-select option {
  color: #0f172a;
  background: #ffffff;
}
.bigstep-ai-model-select-note {
  margin: 7px 0 0;
  color: var(--bs-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
:root[data-theme="light"] .bigstep-ai-model-select,
.bigstep-ai-app[data-theme="light"] .bigstep-ai-model-select {
  background:
    linear-gradient(135deg, rgba(219, 234, 254, .92), rgba(255, 255, 255, .96)),
    #ffffff;
  border-color: #c7d2fe;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px rgba(15, 23, 42, .08);
}
:root[data-theme="light"] .bigstep-ai-model-select-shell::after,
.bigstep-ai-app[data-theme="light"] .bigstep-ai-model-select-shell::after {
  border-color: #2563eb;
}

.bigstep-ai-compact-option-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr);
  gap: 12px;
  align-items: start;
}
.bigstep-ai-compact-option-grid > .bigstep-ai-form-block--style,
.bigstep-ai-compact-option-grid > .bigstep-ai-form-block--model,
.bigstep-ai-compact-option-grid > .bigstep-ai-form-block--color,
.bigstep-ai-compact-option-grid > .bigstep-ai-form-block--placement,
.bigstep-ai-compact-option-grid > .bigstep-ai-prompt-suggestions {
  grid-column: 1 / -1;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--color {
  min-height: 56px;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: rgba(99,102,241,.05);
  overflow: visible;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch-grid--color {
  gap: 8px !important;
  align-items: center;
  overflow: visible;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only {
  width: 40px !important;
  height: 40px !important;
  padding: 4px !important;
  flex: 0 0 40px !important;
  overflow: visible !important;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only .bigstep-ai-swatch-dot {
  width: 30px;
  height: 30px;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch-grid--placement .bigstep-ai-swatch {
  min-height: 38px;
  padding: 0 10px;
  flex-direction: row;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--method .bigstep-ai-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--method .bigstep-ai-swatch[data-value="DTF"],
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--method .bigstep-ai-swatch[data-value="DTG"] {
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--method .bigstep-ai-swatch-method-label {
  font-size: 13px;
}

/* Compact primary button */
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-button--primary {
  width: 100%;
  height: 52px;
  padding: 0 24px;
  font-size: var(--t-base);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 24px rgba(99,102,241,.32);
}
.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-button--primary:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(99,102,241,.4);
}

.bigstep-ai-limit-note {
  font-size: 12px;
  color: var(--bs-muted);
  text-align: center;
  margin-top: -2px;
}

/* Compact price chip — hiển thị tạm tính giữa product info và submit button */
.bigstep-ai-compact-submit-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.bigstep-ai-compact-price {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px;
  padding: 10px 14px;
  margin: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
  border: 1px solid rgba(99,102,241,.32);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(99,102,241,.1);
}
.bigstep-ai-compact-price-label {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.bigstep-ai-compact-price-label svg {
  flex-shrink: 0;
  color: var(--bs-accent, #6366f1);
}
.bigstep-ai-compact-price-label > span {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.bigstep-ai-compact-price-label small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--bs-muted);
  font-family: inherit;
  letter-spacing: 0;
}
.bigstep-ai-price-stack {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: max-content;
}
.bigstep-ai-price-stack del,
.bigstep-ai-price-pill del,
.bigstep-ai-product-panel-price-stack del {
  color: var(--bs-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration-thickness: 1px;
  opacity: .8;
  white-space: nowrap;
}
.bigstep-ai-compact-price strong {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
  white-space: nowrap;
}
.bigstep-ai-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(16,185,129,.16);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.bigstep-ai-compact-submit-row .bigstep-ai-gen-submit {
  width: 100%;
  min-width: 0;
  height: 56px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 10px;
  justify-self: stretch;
  align-self: stretch;
}

/* Light mode override */
:root[data-theme="light"] .bigstep-ai-compact-price strong {
  background: linear-gradient(135deg, #4338ca, #7c3aed);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Product info chip — hiển thị mô tả phôi mặc định dưới form compact */
.bigstep-ai-product-info {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  margin: 0;
  background: rgba(99, 102, 241, .06);
  border: 1px solid var(--bs-border);
  border-left: 3px solid var(--bs-accent, #6366f1);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bs-muted);
}
.bigstep-ai-product-info svg { flex-shrink: 0; color: var(--bs-accent, #6366f1); margin-top: 2px; }
.bigstep-ai-product-info span {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bigstep-ai-status             { min-height: 18px; font-size: var(--t-sm); }
.bigstep-ai-status[data-type="error"]   { color: var(--bs-danger); }
.bigstep-ai-status[data-type="success"] { color: var(--bs-success); }

/* Preview box */
.bigstep-ai-preview-box {
  position: relative;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-xl);
  background: radial-gradient(circle at 50% 60%, rgba(99,102,241,.08) 0%, rgba(8,11,18,.0) 65%),
              var(--bs-surface-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.bigstep-ai-preview-box img { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: contain; }
/* Khi đã có ảnh generated → ẩn animated placeholder.
   Dùng :has() (browser modern) — fallback graceful nếu chưa hỗ trợ. */
.bigstep-ai-preview-box:has(img[data-generated-preview]:not([hidden])) .bigstep-ai-preview-placeholder {
  display: none;
}
/* Rich animated preview placeholder
   ── Static state: gradient orbs + floating particles + central icon + hint
   ── Loading state (parent .is-generating): progress bar + step indicators */
.bigstep-ai-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  text-align: center;
  color: var(--bs-muted);
  overflow: hidden;
  border-radius: var(--r-xl);
}

/* Background decoration layer */
.bigstep-ai-preview-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Animated grid pattern — slow drift */
.bigstep-ai-preview-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: bsPreviewGrid 30s linear infinite;
  opacity: .55;
}
@keyframes bsPreviewGrid {
  to { background-position: 28px 28px; }
}
/* Gradient orbs floating around */
.bigstep-ai-preview-orb {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .42;
  animation: bsPreviewOrb 16s ease-in-out infinite;
}
.bigstep-ai-preview-orb:nth-of-type(1) {
  background: radial-gradient(circle, #6366f1, transparent 70%);
  top: -20%; left: -10%;
  animation-duration: 14s;
}
.bigstep-ai-preview-orb--2 {
  background: radial-gradient(circle, #8b5cf6, transparent 70%) !important;
  bottom: -25%; right: -15%;
  animation-duration: 18s !important;
  animation-delay: -3s !important;
}
.bigstep-ai-preview-orb--3 {
  background: radial-gradient(circle, #a855f7, transparent 70%) !important;
  top: 35%; left: 50%;
  width: 180px !important; height: 180px !important;
  animation-duration: 22s !important;
  animation-delay: -7s !important;
}
@keyframes bsPreviewOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.15); }
  66%      { transform: translate(-30px, 35px) scale(.9); }
}

/* Floating sparkle particles */
.bigstep-ai-preview-particle {
  position: absolute;
  left: var(--bs-px, 50%); top: var(--bs-py, 50%);
  width: 3px; height: 3px;
  background: #c4b5fd;
  border-radius: 50%;
  box-shadow: 0 0 8px #a78bfa, 0 0 16px rgba(167,139,250,.4);
  animation: bsPreviewSpark 3s ease-in-out infinite;
  animation-delay: var(--bs-pd, 0s);
  opacity: 0;
}
@keyframes bsPreviewSpark {
  0%, 100% { opacity: 0; transform: scale(.5) translateY(0); }
  40%      { opacity: 1; transform: scale(1.2) translateY(-8px); }
  60%      { opacity: 1; transform: scale(1) translateY(-12px); }
}

/* Central icon block với gradient sweep */
.bigstep-ai-preview-icon {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.12));
  border: 1px solid rgba(99,102,241,.32);
  color: #c4b5fd;
  box-shadow:
    0 12px 32px rgba(99,102,241,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: bsPreviewIconBreath 3s ease-in-out infinite;
}
.bigstep-ai-preview-icon::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: bsPreviewSweep 3.5s linear infinite;
  pointer-events: none;
}
@keyframes bsPreviewIconBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 32px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.08); }
  50%      { transform: scale(1.04); box-shadow: 0 16px 40px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.12); }
}
@keyframes bsPreviewSweep {
  0%   { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}

/* Sparkle dot góc top-right của icon */
.bigstep-ai-preview-spark {
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  background: radial-gradient(circle, #fff 0%, #c4b5fd 40%, transparent 70%);
  border-radius: 50%;
  animation: bsPreviewSparkBlink 1.6s ease-in-out infinite;
}
@keyframes bsPreviewSparkBlink {
  0%, 100% { opacity: .5; transform: scale(.7); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Text block */
.bigstep-ai-preview-title {
  position: relative; z-index: 2;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -.01em;
  max-width: 240px;
}
.bigstep-ai-preview-hint {
  position: relative; z-index: 2;
  font-size: 12.5px;
  color: var(--bs-muted);
  line-height: 1.55;
  max-width: 240px;
}
.bigstep-ai-preview-hint strong { color: #c4b5fd; font-weight: 700; }

/* Progress/status block — ẩn ở idle state */
.bigstep-ai-preview-status {
  position: relative; z-index: 2;
  display: none;
  width: 100%;
  max-width: 280px;
  margin-top: 6px;
}
.bigstep-ai-preview-bar {
  height: 4px;
  background: rgba(99,102,241,.15);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.bigstep-ai-preview-bar-fill {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
  border-radius: 999px;
  animation: bsPreviewBar 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(139,92,246,.6);
}
@keyframes bsPreviewBar {
  0%   { width: 10%; margin-left: 0%; }
  50%  { width: 60%; margin-left: 20%; }
  100% { width: 10%; margin-left: 90%; }
}
.bigstep-ai-preview-steps {
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  color: var(--bs-muted);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: .03em;
}
.bigstep-ai-preview-step {
  opacity: .5;
  transition: opacity .3s, color .3s;
}

/* Loading state — kích hoạt khi parent .bigstep-ai-preview-box có .is-generating */
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-status { display: block; }
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-title { color: #fff; }
.bigstep-ai-preview-box.is-generating::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0%, rgba(139,92,246,.12) 35%, rgba(196,181,253,.24) 50%, rgba(139,92,246,.12) 65%, transparent 100%);
  background-size: 240% 240%;
  animation: bsPreviewPanelSweep 2.2s linear infinite;
}
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-icon {
  animation-duration: .95s;
  border-color: rgba(139,92,246,.6);
}
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-icon::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  border: 1px solid rgba(196,181,253,.45);
  animation: bsPreviewRing 1.45s ease-out infinite;
}
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-orb { animation-duration: 4.2s !important; opacity: .78; }
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-particle { animation-duration: 1.05s; }
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-bar-fill {
  width: 44%;
  background: linear-gradient(90deg, #60a5fa, #8b5cf6, #f0abfc, #8b5cf6);
  background-size: 220% 100%;
  animation: bsPreviewBar 1.1s ease-in-out infinite, bsPreviewBarGlow 1.8s linear infinite;
}
@keyframes bsPreviewPanelSweep {
  0% { background-position: 180% 50%; opacity: .35; }
  50% { opacity: .8; }
  100% { background-position: -80% 50%; opacity: .35; }
}
@keyframes bsPreviewRing {
  0% { opacity: .9; transform: scale(.86); }
  100% { opacity: 0; transform: scale(1.28); }
}
@keyframes bsPreviewBarGlow {
  to { background-position: 220% 0; }
}

/* Step indicators sequential active glow */
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-step {
  animation: bsPreviewStep 4.5s ease-in-out infinite;
}
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-step:nth-child(1) { animation-delay: 0s; }
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-step:nth-child(2) { animation-delay: 1.5s; }
.bigstep-ai-preview-box.is-generating .bigstep-ai-preview-step:nth-child(3) { animation-delay: 3s; }
@keyframes bsPreviewStep {
  0%, 22%, 100% { opacity: .35; color: var(--bs-muted); }
  25%, 30%      { opacity: 1; color: #c4b5fd; }
  33%, 100%     { opacity: .35; }
}

/* Compact tablet layout */
@media (min-width: 841px) and (max-width: 1040px) {
  .bigstep-ai-app[data-editor-mode="compact"] {
    --compact-grid-gap: 20px;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-generator-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-option-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .9fr);
  }
}

/* Mobile compact: keep the loading animation inside the preview box.
   The empty preview remains hidden while idle, but appears during generation. */
@media (max-width: 840px) {
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box.is-generating .bigstep-ai-preview-placeholder {
    opacity: 1;
    padding: 24px 16px;
    gap: 10px;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box.is-generating .bigstep-ai-preview-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box.is-generating .bigstep-ai-preview-status {
    display: block;
    max-width: 240px;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box.is-generating .bigstep-ai-preview-steps {
    gap: 6px;
    font-size: 9.5px;
  }
}

/* Inline preview loading was removed in v1.0.30 — the modal overlay
   (.bigstep-ai-loading) is the canonical loading UI. Keep the DOM node
   in the template for backward compat but never render it. */
.bigstep-ai-preview-loading {
  display: none !important;
}
/* AI spinner */
.bigstep-ai-pulse {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, #6366f1 110deg, #8b5cf6 230deg, transparent 360deg);
  animation: bs-spin 1s linear infinite;
  box-shadow: 0 0 36px rgba(99,102,241,.4);
}

/* Generator actions */
.bigstep-ai-generator-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bigstep-ai-generator-actions .bigstep-ai-button--primary { height: 48px; }

.bigstep-ai-zalo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  transition: all var(--dur);
}
.bigstep-ai-zalo:hover { border-color: var(--bs-accent); color: var(--bs-text); }

/* Compact history */
.bigstep-ai-history { margin-top: 0; }
.bigstep-ai-history-toggle[aria-expanded="true"] {
  border-color: var(--bs-accent);
  color: #a5b4fc;
  background: rgba(99,102,241,.1);
}
.bigstep-ai-history-panel { margin-top: 12px; }
.bigstep-ai-history-panel > p { margin-bottom: 10px; font-size: var(--t-sm); color: var(--bs-muted); }
.bigstep-ai-history-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  align-items: start;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border) transparent;
}
.bigstep-ai-history-item {
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  padding: 6px;
  cursor: pointer;
  transition: border-color var(--dur);
  text-align: left;
  color: inherit;
  font: inherit;
}
.bigstep-ai-history-item:hover { border-color: var(--bs-accent); }
.bigstep-ai-history-item img  {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
  background: var(--bs-surface-3);
}
.bigstep-ai-history-item span {
  display: block;
  margin-top: 5px;
  font-size: var(--t-xs);
  color: var(--bs-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Compact responsive — stack at ≤840px */
@media (max-width: 840px) {
  .bigstep-ai-app[data-editor-mode="compact"] {
    padding: 0;
    --compact-grid-gap: 12px;
  }
  /* Mobile: outer container không pad → topbar tự pad 16px ngang */
  .bigstep-ai-gen-topbar { padding: 12px 16px; }
  .bigstep-ai-generator-left,
  .bigstep-ai-generator-right { padding-left: 16px; padding-right: 16px; }
  .bigstep-ai-generator-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 24px;
  }
  .bigstep-ai-generator-left {
    border-right: none;
    padding: 20px 16px;
    gap: 16px;
    order: 2;
  }
  .bigstep-ai-generator-right {
    padding: 16px 16px 0;
    order: 1;
    position: static;
  }
  .bigstep-ai-gen-title { font-size: clamp(22px, 6vw, 30px); }
  .bigstep-ai-preview-box { max-width: 100%; aspect-ratio: 1; }
  .bigstep-ai-compact-option-grid,
  .bigstep-ai-compact-submit-row {
    grid-template-columns: 1fr;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-block--color {
    min-height: auto;
  }

  /* Mobile-only: hide the empty preview column until the user actually has
     something to preview. Modal overlay (setLoading) already shows progress
     while generating; the inline placeholder was redundant and ate the top
     half of small screens. Revealed when:
       • showGeneratedPreview() adds .has-preview after AI generates an image
       • user clicks a history thumbnail (same flow)
     On desktop (>840px) the column stays visible to keep 2-col layout balanced. */
  .bigstep-ai-app[data-editor-mode="compact"]:not(.has-preview):not(.is-loading) .bigstep-ai-generator-right {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="compact"].is-loading .bigstep-ai-generator-right {
    display: block !important;
  }
  .bigstep-ai-app[data-editor-mode="compact"].has-preview .bigstep-ai-generator-left {
    border-bottom: 1px solid var(--bs-border);
  }
}

/* ── 9. EDITOR MODE — full-screen ────────────────────────────── */
.bigstep-ai-app[data-editor-mode="editor"] {
  position: fixed;
  inset: 0;
  z-index: 999999;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--bs-bg);
  overflow: hidden;
}
.bigstep-ai-editor-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* Topbar */
.bigstep-ai-editor-topbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 16px;
  background: var(--bs-surface);
  border-bottom: 1px solid var(--bs-border);
  z-index: 20;
  overflow: hidden;
}
.bigstep-ai-editor-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.bigstep-ai-editor-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.bigstep-ai-app .bigstep-ai-editor-icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  background-image: none;
  color: var(--bs-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
  flex-shrink: 0;
  font: inherit;
  font-family: inherit;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app .bigstep-ai-editor-icon-button:hover { background: var(--bs-surface-3); color: var(--bs-text); }
.bigstep-ai-app .bigstep-ai-editor-icon-button.bigstep-ai-clear-design:hover { background: rgba(239,68,68,.12); color: var(--bs-danger); }

/* Price pill */
.bigstep-ai-price-pill {
  display: grid;
  gap: 1px;
  padding: 6px 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  line-height: 1.2;
}
.bigstep-ai-price-pill span   { font-size: var(--t-xs); color: var(--bs-muted); text-transform: none; letter-spacing: .04em; }
.bigstep-ai-price-pill strong { font-size: var(--t-lg); font-weight: 800; }
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
  grid-template-columns: max-content auto;
  grid-template-areas:
    "label label"
    "old old"
    "now badge";
  align-items: center;
  justify-content: end;
  justify-items: end;
  gap: 1px 6px;
  width: auto;
  min-width: 152px;
  min-height: 50px;
  max-height: 52px;
  padding: 5px 10px;
  overflow: visible;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
  grid-area: label;
  justify-self: end;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
  grid-area: old;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
  grid-area: now;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
  grid-area: badge;
  align-self: center;
  min-height: 16px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
}
.bigstep-ai-price-pill del {
  justify-self: end;
  margin-top: 2px;
}
.bigstep-ai-price-pill .bigstep-ai-discount-badge {
  justify-self: end;
  margin-top: 1px;
}

/* Cart button */
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  width: auto;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bs-grd) !important;
  background-image: var(--bs-grd) !important;
  color: var(--bs-ink) !important;
  font: inherit;
  font-family: inherit;
  line-height: 1;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(99,102,241,.3);
  transition: opacity var(--dur), transform var(--dur);
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app [data-bigstep-ai-cart]:hover { opacity: .9; transform: translateY(-1px); }
.bigstep-ai-app [data-bigstep-ai-cart] svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── 10. Editor main grid ────────────────────────────────────── */
.bigstep-ai-editor-main {
  display: grid;
  grid-template-columns: var(--sidebar-w) var(--panel-w) minmax(0,1fr);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
/* Tools wrapper is transparent to grid */
.bigstep-ai-editor-tools { display: contents; }

/* ── 11. Sidebar tool menu ───────────────────────────────────── */
.bigstep-ai-tool-grid--menu {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: var(--sidebar-w);
  height: 100%;
  padding: 8px 5px;
  background: var(--bs-surface);
  border-right: 1px solid var(--bs-border);
  overflow: hidden auto;
  scrollbar-width: none;
}
.bigstep-ai-tool-grid--menu::-webkit-scrollbar { display: none; }

.bigstep-ai-tool-grid--menu .bigstep-ai-tool {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 54px;
  padding: 5px 2px;
  border-color: transparent;
  background: transparent;
  color: var(--bs-muted);
  font-size: var(--t-xs);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--r-md);
}
.bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.bigstep-ai-tool-grid--menu .bigstep-ai-tool:hover { background: var(--bs-surface-2); color: var(--bs-text); border-color: transparent; }
.bigstep-ai-tool-grid--menu .bigstep-ai-tool.is-active {
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
}

/* ── 12. Tool panels ─────────────────────────────────────────── */
.bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
.bigstep-ai-tool-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: var(--panel-w);
  height: 100%;
  padding: 14px;
  background: var(--bs-surface);
  border-right: 1px solid var(--bs-border);
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border) transparent;
}
.bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::-webkit-scrollbar { width: 4px; }
.bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::-webkit-scrollbar-thumb { background: var(--bs-border); border-radius: 4px; }

/* Panel head */
.bigstep-ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bigstep-ai-panel-head strong { font-size: var(--t-md); font-weight: 800; letter-spacing: -.01em; }
.bigstep-ai-panel-head button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--bs-muted);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: all var(--dur);
}
.bigstep-ai-panel-head button:hover { border-color: var(--bs-accent); color: var(--bs-text); }

/* Panel close button removed — no longer injected by JS */

.bigstep-ai-panel-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bigstep-ai-panel-section > strong {
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--bs-subtle);
  text-transform: none;
  letter-spacing: .08em;
  padding: 2px 0;
  border-bottom: 1px solid var(--bs-border);
  padding-bottom: 6px;
}

/* ── 13. Product panel components — card layout with thumbnail ──── */
.bigstep-ai-app .bigstep-ai-product-open,
.bigstep-ai-app button.bigstep-ai-product-open {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 14px 10px 10px !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--bs-surface-2) !important;
  background-image: none !important;
  color: var(--bs-text) !important;
  font: inherit !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color var(--dur), background var(--dur) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 76px;
}
.bigstep-ai-app .bigstep-ai-product-open:hover {
  border-color: var(--bs-accent) !important;
  background: var(--bs-surface-3) !important;
}

/* Thumbnail — 56x56 square with rounded corners */
.bigstep-ai-app .bigstep-ai-product-open-thumb {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255,255,255,.05) !important;
}
.bigstep-ai-app .bigstep-ai-product-open-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Info column — label + name + price stacked */
.bigstep-ai-app .bigstep-ai-product-open-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.bigstep-ai-app .bigstep-ai-product-open-label {
  display: block !important;
  font-size: 10px !important;
  color: var(--bs-muted) !important;
  text-transform: none !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bigstep-ai-app .bigstep-ai-product-open strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px !important;
  color: var(--bs-text) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  width: 100% !important;
  word-break: break-word !important;
}
.bigstep-ai-app .bigstep-ai-product-open-price {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #a5b4fc !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}
.bigstep-ai-app .bigstep-ai-product-open-price del,
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta em del {
  color: var(--bs-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  opacity: .78 !important;
}
.bigstep-ai-app .bigstep-ai-product-open-price strong,
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta em strong {
  display: inline !important;
  color: #a5b4fc !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.bigstep-ai-app .bigstep-ai-product-open-price span,
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta em span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 16px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(16,185,129,.16) !important;
  color: #34d399 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Action chip — "Đổi" pill on the right */
.bigstep-ai-app .bigstep-ai-product-open-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.16) !important;
  background-image: none !important;
  color: #a5b4fc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .08em !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(99,102,241,.3) !important;
  line-height: 1 !important;
  transition: background .14s, color .14s;
}
.bigstep-ai-app .bigstep-ai-product-open:hover .bigstep-ai-product-open-action {
  background: rgba(99,102,241,.28) !important;
  color: #c7d2fe !important;
}

/* Product picker — appears inside the sidebar panel column */
.bigstep-ai-product-picker {
  position: fixed;
  top: var(--topbar-h);
  left: var(--sidebar-w);
  /* Rộng hơn panel thông thường để chứa thumb 100px + meta đầy đủ */
  width: min(520px, calc(100vw - var(--sidebar-w)));
  height: calc(100dvh - var(--topbar-h));
  z-index: 300;
  padding: 20px;
  border-right: 1px solid var(--bs-border-2);
  background: var(--bs-surface);
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
  overflow: auto;
  overscroll-behavior: contain;
}
.bigstep-ai-product-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.bigstep-ai-product-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--bs-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur);
}
.bigstep-ai-product-card:hover { background: var(--bs-surface-3); }
.bigstep-ai-product-card.is-active { background: var(--bs-surface-3); }
.bigstep-ai-product-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.bigstep-ai-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bigstep-ai-product-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bigstep-ai-product-meta strong {
  font-size: var(--t-md); font-weight: 700;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bigstep-ai-product-meta em { font-style: normal; font-size: var(--t-base); color: #a5b4fc; font-weight: 700; }
.bigstep-ai-product-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  background: var(--bs-surface-2);
  color: #c7d2fe;
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
}
.bigstep-ai-product-detail-link:hover {
  border-color: #7c6cff;
  color: #fff;
  background: rgba(124, 108, 255, .16);
}
[data-product-picker-close] {
  width: 32px; height: 32px;
  border: 1px solid var(--bs-border);
  border-radius: 50%;
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--dur);
}
[data-product-picker-close]:hover { border-color: var(--bs-danger); color: var(--bs-danger); }

.bigstep-ai-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bigstep-ai-field-head > span {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .05em;
}
.bigstep-ai-size-guide-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(99,102,241,.35);
  border-radius: var(--r-sm);
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.bigstep-ai-size-guide-open:hover {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.2);
  color: #c7d2fe;
}
.bigstep-ai-size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8,11,18,.72);
  backdrop-filter: blur(10px);
}
.bigstep-ai-size-guide-card {
  width: min(680px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-lg);
  background: var(--bs-surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.bigstep-ai-size-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bs-border);
}
.bigstep-ai-size-guide-head strong {
  min-width: 0;
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigstep-ai-size-guide-head button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border: 1px solid var(--bs-border);
  border-radius: 50%;
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.bigstep-ai-size-guide-head button:hover {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}
.bigstep-ai-size-guide-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 126px);
  object-fit: contain;
  background: #fff;
}
.bigstep-ai-size-guide-advice {
  overflow: auto;
  max-height: calc(100dvh - 126px);
  padding: 16px;
  color: var(--bs-text);
}
.bigstep-ai-size-guide-advice .bigstep-size-advice__panel {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.bigstep-ai-size-guide-advice .bigstep-size-advice__panel p {
  margin: 0 0 10px;
  color: #cbd5e1;
}
.bigstep-ai-size-guide-advice .bigstep-size-advice__scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bigstep-ai-size-guide-advice table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
}
.bigstep-ai-size-guide-advice th,
.bigstep-ai-size-guide-advice td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  color: #dbe4ff;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}
.bigstep-ai-size-guide-advice th {
  background: rgba(99,102,241,.16);
  color: #f8fafc;
  font-weight: 850;
}
.bigstep-ai-size-guide-advice td:first-child {
  color: #fff;
  font-weight: 850;
}
.bigstep-ai-size-guide-advice tr:last-child td {
  border-bottom: 0;
}
.bigstep-ai-size-guide-advice .bigstep-size-advice__tip,
.bigstep-ai-size-guide-advice .bigstep-size-advice__note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245,158,11,.28);
  background: rgba(245,158,11,.1);
  color: #fde68a;
  font-size: 12.5px;
}
.bigstep-ai-size-guide-advice .bigstep-size-advice__note {
  border-color: rgba(148,163,184,.18);
  background: rgba(148,163,184,.08);
  color: #94a3b8;
}

/* Radio row */
.bigstep-ai-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bigstep-ai-app .bigstep-ai-radio-row label {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 44px;
  padding: 10px 14px !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-md);
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  color: var(--bs-text) !important;
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.bigstep-ai-app .bigstep-ai-radio-row label:hover {
  border-color: var(--bs-accent) !important;
}
.bigstep-ai-app .bigstep-ai-radio-row label:has(input:checked) {
  border-color: var(--bs-accent) !important;
  background: rgba(99,102,241,.12) !important;
  color: #c7d2fe !important;
}
/* Ẩn hẳn circle radio — segmented button đồng bộ với DTF/DTG/Size áo. Giữ
 * input để JS data-order-mode + form submit vẫn hoạt động. */
.bigstep-ai-radio-row input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Qty/size grid */
.bigstep-ai-size-qty-grid { display: flex; flex-direction: column; gap: 6px; }
.bigstep-ai-size-qty-row {
  display: grid;
  grid-template-columns: minmax(34px, .5fr) minmax(92px, 1fr) minmax(56px, 78px);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  min-height: 40px;
}
.bigstep-ai-size-qty-row span { font-size: var(--t-sm); font-weight: 700; }
.bigstep-ai-size-qty-color {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 2px 28px 2px 9px;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-sm);
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 800;
}
.bigstep-ai-size-qty-row input {
  min-height: 34px;
  padding: 2px 8px;
  text-align: center;
  background: var(--bs-surface-3);
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-sm);
  width: 100%;
}
.bigstep-ai-size-qty-row input:focus,
.bigstep-ai-size-qty-color:focus { outline: none; border-color: var(--bs-accent); }

.bigstep-ai-ai-color-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(129,140,248,.22);
  border-radius: 10px;
  background: rgba(99,102,241,.08);
  color: #b8c4df;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}
.bigstep-ai-ai-color-hint span { flex: 0 0 auto; }

/* Breakdown / total */
.bigstep-ai-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  font-size: var(--t-sm);
  color: var(--bs-muted);
}
.bigstep-ai-breakdown:empty {
  display: none;
}
.bigstep-ai-product-panel-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: var(--r-md);
  background: rgba(99,102,241,.08);
}
.bigstep-ai-product-panel-total span   { font-size: var(--t-sm); color: var(--bs-muted); }
.bigstep-ai-product-panel-total strong { font-size: var(--t-lg); font-weight: 800; color: #a5b4fc; }
.bigstep-ai-product-panel-price-stack {
  display: grid;
  justify-items: end;
  gap: 2px;
}
.bigstep-ai-product-panel-price-stack .bigstep-ai-discount-badge {
  justify-self: end;
}
/* Pill bên trong panel-total đã có chrome riêng → bỏ border/bg/padding để
 * không thành "box trong box". Chỉ giữ stack giá + badge. */
.bigstep-ai-product-panel-total .bigstep-ai-price-pill {
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── 14. Template panel ──────────────────────────────────────── */
/* Catalog list — name only, click to expand */
.bigstep-ai-template-catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-template-catalog-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-md);
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  color: var(--bs-text) !important;
  font: inherit;
  font-family: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: none !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur), background var(--dur);
  -webkit-appearance: none !important;
  appearance: none !important;
}
.bigstep-ai-app .bigstep-ai-template-catalog-card:hover { border-color: var(--bs-accent) !important; background: rgba(99,102,241,.08) !important; }
.bigstep-ai-app .bigstep-ai-template-catalog-card strong { font-size: var(--t-md); font-weight: 700; color: var(--bs-text) !important; }
.bigstep-ai-app .bigstep-ai-template-catalog-card small  { font-size: var(--t-xs); color: var(--bs-muted) !important; }
.bigstep-ai-app .bigstep-ai-template-catalog-card::after {
  content: "\203A"; /* › — escape unicode để không vỡ khi file bị lưu sai encoding */
  font-size: 18px;
  color: var(--bs-muted);
  flex-shrink: 0;
  margin-left: 8px;
}
/* Design grid — 2-col, fixed square thumbnails */
.bigstep-ai-app [data-template-catalogs].bigstep-ai-template-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.bigstep-ai-app .bigstep-ai-template-folder-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 5px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  overflow: hidden;
}
.bigstep-ai-app .bigstep-ai-template-folder-card::after { display: none; }
.bigstep-ai-template-folder-thumb {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 3px;
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 8px;
  background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,245,249,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}
.bigstep-ai-template-folder-thumb span {
  min-width: 0;
  min-height: 0;
  border-radius: 4px;
  background: #f8fafc;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bigstep-ai-template-folder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bigstep-ai-template-folder-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 2px 2px;
  text-align: left;
}
.bigstep-ai-template-folder-meta strong {
  max-width: 100%;
  font-size: var(--t-xs) !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bigstep-ai-template-folder-meta small {
  font-size: 11px !important;
  line-height: 1.2;
}
.bigstep-ai-template-floating-actions {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
  pointer-events: none;
}
.bigstep-ai-template-floating-actions[hidden] { display: none !important; }
.bigstep-ai-template-floating-actions button {
  pointer-events: auto;
  height: 38px;
  border: 1px solid rgba(148,163,184,.34);
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,.26);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}
.bigstep-ai-template-floating-actions button[data-template-back] { padding: 0 14px; }
.bigstep-ai-template-floating-actions button[data-template-scroll-top] {
  width: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
[data-template-design-section] {
  gap: 0;
}
.bigstep-ai-template-sticky-head {
  position: sticky;
  top: -14px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: -14px 0 0;
  padding: 14px 0 10px;
  background: #0a0f1e;
  box-shadow: 0 12px 22px rgba(2,6,23,.28);
  backdrop-filter: blur(12px);
}
.bigstep-ai-template-sticky-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,15,30,.95), rgba(10,15,30,0));
}
[data-template-design-section] .bigstep-ai-panel-head {
  margin: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
[data-template-design-section] .bigstep-ai-template-floating-actions {
  position: relative;
  left: 0;
  right: 0;
  top: auto;
  bottom: auto;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
[data-template-design-section] .bigstep-ai-template-floating-actions button {
  pointer-events: auto;
  height: 38px;
  border: 1px solid rgba(148,163,184,.34);
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,.26);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur), transform var(--dur);
}
[data-template-design-section] .bigstep-ai-template-floating-actions button span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-.5px);
}
[data-template-design-section] .bigstep-ai-template-floating-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.68);
  background: rgba(30,41,59,.94);
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-back] {
  padding: 0 14px;
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-favorites] {
  padding: 0 14px;
  border-color: rgba(244,114,182,.46);
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-favorites] span[aria-hidden="true"] {
  color: #fb7185;
  font-size: 14px;
  transform: translateY(1px);
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-favorites].is-active {
  border-color: rgba(244,114,182,.96);
  background: #e11d48;
  color: #fff;
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-favorites].is-active span[aria-hidden="true"] {
  color: #fff;
}
[data-template-design-section] .bigstep-ai-template-floating-actions button[data-template-scroll-top] {
  margin-left: auto;
  width: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.bigstep-ai-artwork-search-row { display: none !important; }
.bigstep-ai-app [data-artwork-catalogs].bigstep-ai-template-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.bigstep-ai-app .bigstep-ai-artwork-folder-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  height: auto;
  padding: 5px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  background: rgba(15,23,42,.52) !important;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.bigstep-ai-app .bigstep-ai-artwork-folder-card:hover {
  border-color: rgba(129,140,248,.55) !important;
  background: rgba(30,41,59,.72) !important;
}
.bigstep-ai-app .bigstep-ai-artwork-folder-card::after { display: none; }
.bigstep-ai-artwork-folder-thumb {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 34%;
  grid-template-rows: repeat(3,minmax(0,1fr));
  gap: 3px;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  height: auto;
  padding: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(2,6,23,.20), inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}
.bigstep-ai-artwork-folder-thumb::before { display: none; }
.bigstep-ai-artwork-folder-thumb span {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  border: 1px solid rgba(203,213,225,.65);
  background:
    linear-gradient(45deg, rgba(148,163,184,.20) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148,163,184,.20) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148,163,184,.20) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.20) 75%);
  background-color: #fff;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: 10px 10px;
  overflow: hidden;
}
.bigstep-ai-artwork-folder-thumb span:first-child {
  grid-row: 1 / -1;
}
.bigstep-ai-artwork-folder-thumb span:nth-child(n+5) {
  display: none;
}
.bigstep-ai-artwork-folder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bigstep-ai-artwork-folder-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0 2px 2px;
  text-align: left;
}
.bigstep-ai-artwork-folder-meta strong,
.bigstep-ai-artwork-folder-meta small {
  display: block;
}
.bigstep-ai-artwork-folder-meta strong {
  max-width: 100%;
  font-size: var(--t-xs) !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bigstep-ai-artwork-folder-meta small {
  font-size: 11px !important;
  line-height: 1.2;
  color: rgba(191,219,254,.82) !important;
}
[data-artwork-design-section] {
  gap: 0;
}
.bigstep-ai-artwork-sticky-head {
  position: sticky;
  top: -14px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: -14px 0 0;
  padding: 14px 0 10px;
  background: #0a0f1e;
  box-shadow: 0 12px 22px rgba(2,6,23,.28);
  backdrop-filter: blur(12px);
}
.bigstep-ai-artwork-sticky-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,15,30,.95), rgba(10,15,30,0));
}
[data-artwork-design-section] .bigstep-ai-panel-head {
  margin: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
.bigstep-ai-artwork-floating-actions {
  position: relative;
  left: 0;
  right: 0;
  top: auto;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
.bigstep-ai-artwork-floating-actions[hidden] { display: none !important; }
.bigstep-ai-artwork-floating-actions button {
  height: 38px;
  border: 1px solid rgba(148,163,184,.34);
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,.26);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur), transform var(--dur);
}
.bigstep-ai-artwork-floating-actions button span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  font-size: 15px;
  line-height: 1;
}
.bigstep-ai-artwork-floating-actions button[data-artwork-back] span[aria-hidden="true"] {
  font-size: 14px;
  font-weight: 900;
  transform: translateY(-.5px);
}
.bigstep-ai-artwork-floating-actions button[data-artwork-favorites] span[aria-hidden="true"] {
  color: #fb7185;
  font-size: 14px;
  transform: translateY(1px);
}
.bigstep-ai-artwork-floating-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.68);
  background: rgba(30,41,59,.94);
}
.bigstep-ai-artwork-floating-actions button[data-artwork-back],
.bigstep-ai-artwork-floating-actions button[data-artwork-favorites] {
  padding: 0 14px;
}
.bigstep-ai-artwork-floating-actions button[data-artwork-favorites] {
  border-color: rgba(244,114,182,.46);
}
.bigstep-ai-artwork-floating-actions button[data-artwork-favorites].is-active {
  border-color: rgba(244,114,182,.96);
  background: #e11d48;
  color: #fff;
}
.bigstep-ai-artwork-floating-actions button[data-artwork-scroll-top] {
  margin-left: auto;
  width: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.bigstep-ai-template-design-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: auto;
  align-items: start;
  gap: 12px 10px;
}
.bigstep-ai-template-design-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: auto;
  min-height: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.bigstep-ai-template-design-card strong {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--bs-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigstep-ai-template-thumb {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: #f8fafc;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur);
  width: 100%;
}
.bigstep-ai-template-design-card:hover .bigstep-ai-template-thumb { border-color: var(--bs-accent); }
.bigstep-ai-template-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f8fafc; }
.bigstep-ai-template-design-card--pickable {
  position: relative;
}
.bigstep-ai-template-pick {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer;
  overflow: visible !important;
  text-align: left !important;
  line-height: 1 !important;
}
.bigstep-ai-template-pick strong {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--bs-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigstep-ai-template-favorite {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.62) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateZ(0);
}
.bigstep-ai-template-favorite span {
  display: block !important;
  color: currentColor !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: translateY(1px);
}
.bigstep-ai-template-design-card.is-favorite .bigstep-ai-template-favorite,
.bigstep-ai-template-favorite[aria-pressed="true"] {
  border-color: rgba(244,114,182,.68) !important;
  background: #e11d48 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(225,29,72,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.bigstep-ai-template-favorite:hover {
  transform: translateZ(0) scale(1.06);
}
.bigstep-ai-template-favorite-hint {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 12px;
  background: rgba(15,23,42,.86);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.bigstep-ai-template-favorites-folder .bigstep-ai-template-folder-thumb .is-empty {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  color: #e11d48;
  font-size: 28px;
  font-weight: 900;
}
.bigstep-ai-artwork-card,
.bigstep-ai-artwork-card * {
  -webkit-user-drag: none;
  user-select: none;
}
.bigstep-ai-artwork-card {
  position: relative;
}
.bigstep-ai-artwork-pick {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.bigstep-ai-artwork-card .bigstep-ai-template-thumb {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(45deg, rgba(148,163,184,.20) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148,163,184,.20) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148,163,184,.20) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.20) 75%);
  background-color: #f8fafc;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.bigstep-ai-artwork-favorite {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: rgba(255,255,255,.88);
  box-shadow: 0 8px 18px rgba(2,6,23,.24);
  cursor: pointer;
  transition: transform var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
}
.bigstep-ai-artwork-favorite:hover {
  transform: translateY(-1px);
  border-color: rgba(244,114,182,.72);
  background: rgba(15,23,42,.88);
  color: #fff;
}
.bigstep-ai-artwork-card.is-favorite .bigstep-ai-artwork-favorite {
  border-color: rgba(244,114,182,.92);
  background: #e11d48;
  color: #fff;
}
.bigstep-ai-artwork-favorite span {
  display: block;
  font-size: 15px;
  line-height: 1;
  transform: translateY(1px);
}
.bigstep-ai-artwork-ai-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 8px 8px;
}
.bigstep-ai-artwork-ai-actions button {
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(129,140,248,.28);
  border-radius: 8px;
  background: rgba(15,23,42,.66);
  color: #e0e7ff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
}
.bigstep-ai-artwork-ai-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(165,180,252,.62);
  background: rgba(30,41,59,.86);
  color: #fff;
}
.bigstep-ai-artwork-favorite-hint {
  grid-column: 1 / -1;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(129,140,248,.45);
  border-radius: 12px;
  background: rgba(30,41,59,.72);
  color: #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}
.bigstep-ai-artwork-favorites-folder .bigstep-ai-artwork-folder-thumb .is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d48;
  font-size: 20px;
  font-weight: 900;
}
.bigstep-ai-artwork-load-sentinel {
  padding: 10px 0 4px;
  color: var(--bs-muted);
  font-size: var(--t-xs);
  text-align: center;
}

/* ── 15. Upload panel ────────────────────────────────────────── */
.bigstep-ai-upload-zone {
  border: 2px dashed var(--bs-border);
  border-radius: var(--r-lg);
  background: var(--bs-surface-3);
  transition: border-color var(--dur), background var(--dur);
}
.bigstep-ai-upload-zone:hover,
.bigstep-ai-upload-zone.is-drag-over { border-color: var(--bs-accent); background: rgba(99,102,241,.05); }
.bigstep-ai-upload-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  cursor: pointer;
  color: var(--bs-muted);
  text-align: center;
}
.bigstep-ai-upload-field svg   { opacity: .6; }
.bigstep-ai-upload-field span  { font-size: var(--t-sm); line-height: 1.5; }
.bigstep-ai-upload-field small { font-size: var(--t-xs); opacity: .7; }
.bigstep-ai-upload-field input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.bigstep-ai-url-row { display: flex; gap: 8px; }
.bigstep-ai-url-row input { flex: 1; }
.bigstep-ai-tool--inline { height: 40px; flex-shrink: 0; }

/* Asset grid */
.bigstep-ai-asset-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  align-items: start;
}
.bigstep-ai-asset-card {
  position: relative;
  display: block;
}
.bigstep-ai-asset-thumb {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur);
  padding: 0;
  box-sizing: border-box;
}
.bigstep-ai-asset-thumb:hover { border-color: var(--bs-accent); }
.bigstep-ai-asset-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* SVG/transparent uploads: keep contained so they don't look cropped */
.bigstep-ai-asset-thumb[data-type="svg"] img,
.bigstep-ai-asset-thumb[data-transparent] img { object-fit: contain; }
.bigstep-ai-asset-thumb span {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 4px 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.bigstep-ai-asset-remove {
  position: absolute !important;
  top: 4px; right: 4px;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0 !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(239,68,68,.9) !important;
  color: #fff !important;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid !important;
  place-items: center;
  z-index: 3;
  transition: background var(--dur);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.bigstep-ai-asset-remove:hover { background: var(--bs-danger) !important; }

/* ── 16. Text panel ──────────────────────────────────────────── */
.bigstep-ai-text-quick-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Panel cha đã có padding 14px — chỉ chừa đáy cho đường kẻ phân cách,
     tránh thụt lề kép làm khối này hẹp hơn các section khác. */
  padding: 0 0 14px;
  border-bottom: 1px solid var(--bs-border);
}
.bigstep-ai-tool-section-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--bs-border);
  color: var(--bs-subtle);
  font-size: var(--t-xs);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bigstep-ai-text-quick-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bigstep-ai-text-quick-row input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  font: inherit; font-size: var(--t-sm);
}
.bigstep-ai-text-quick-row input:focus { outline: none; border-color: var(--bs-accent); box-shadow: var(--bs-glow); }
.bigstep-ai-text-quick-row .bigstep-ai-button {
  height: 38px;
  padding: 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm);
}
.bigstep-ai-text-template-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.bigstep-ai-text-template-grid button.bigstep-ai-text-tpl-card {
  height: auto;
  min-height: 78px;
  padding: 10px 6px 8px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all var(--dur);
  font: inherit;
}
.bigstep-ai-text-tpl-sample {
  color: var(--bs-text) !important;
  line-height: 1;
  letter-spacing: -.02em;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
}
.bigstep-ai-text-tpl-sample--heading { font-size: 26px; font-weight: 800; }
.bigstep-ai-text-tpl-sample--title   { font-size: 20px; font-weight: 700; }
.bigstep-ai-text-tpl-sample--body    { font-size: 14px; font-weight: 400; }
.bigstep-ai-text-tpl-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--bs-muted);
}
.bigstep-ai-text-tpl-card:hover {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.12);
}
.bigstep-ai-text-tpl-card:hover .bigstep-ai-text-tpl-label { color: var(--bs-accent); }
.bigstep-ai-text-tpl-card:active { transform: scale(.97); }
/* Style+align combined row */
.bigstep-ai-text-style-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bigstep-ai-text-style-row .bigstep-ai-tool { height: 32px; min-width: 32px; padding: 0; }
.bigstep-ai-tool-sep {
  width: 1px; height: 20px;
  background: var(--bs-border-2);
  flex-shrink: 0;
  margin: 0 2px;
}
/* Tool panel labels */
.bigstep-ai-tool-panel > label,
[data-tool-panel] > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .05em;
}
.bigstep-ai-tool-panel > label select,
[data-tool-panel] > label select,
.bigstep-ai-tool-panel > label input[type="range"],
[data-tool-panel] > label input[type="range"] {
  width: 100%;
  margin: 0;
}
.bigstep-ai-text-actions--inline { display: flex; gap: 5px; flex-wrap: wrap; }
.bigstep-ai-text-actions--inline .bigstep-ai-tool { height: 34px; min-width: 34px; padding: 0 8px; }

/* ── 17. AI panel ────────────────────────────────────────────── */
.bigstep-ai-generate-btn  { width: 100%; height: 44px; font-size: var(--t-md); }
.bigstep-ai-limit-badge   { font-size: var(--t-xs); color: var(--bs-muted); text-align: center; padding: 4px 0; }
.bigstep-ai-editor-ai-prompt-field {
  gap: 8px !important;
}
.bigstep-ai-editor-ai-prompt-field small {
  margin: -2px 0 2px;
  color: var(--bs-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
.bigstep-ai-editor-ai-status {
  font-size: var(--t-xs);
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--r-md);
  margin-top: 4px;
  background: var(--bs-surface-3);
  color: var(--bs-muted);
}
.bigstep-ai-editor-ai-status.is-error {
  background: rgba(239,68,68,.12);
  color: #fca5a5;
}
.bigstep-ai-editor-ai-status.is-success {
  background: rgba(34,197,94,.1);
  color: #86efac;
}

.bigstep-ai-cancel-window {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 7, 7, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bigstep-ai-cancel-window__card {
  width: min(390px, calc(100vw - 32px));
  padding: 20px 20px 18px;
  border: 1px solid rgba(200, 255, 0, .38);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 26, 25, .985), rgba(10, 15, 14, .99));
  color: #f4f7f5;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255,255,255,.045);
  text-align: center;
}
.bigstep-ai-cancel-window__card strong {
  display: block;
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.bigstep-ai-cancel-window__card p {
  max-width: 340px;
  margin: 0 auto 15px;
  color: #b8c1be;
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: balance;
}
.bigstep-ai-cancel-window__countdown {
  display: block;
  margin-top: 3px;
  color: #d8e1dd;
  white-space: nowrap;
}
.bigstep-ai-cancel-window__bar {
  height: 7px;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(149, 164, 159, .16);
}
.bigstep-ai-cancel-window__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fa300, #c8ff00, #e1ff75);
  transition: width .16s linear;
}
.bigstep-ai-cancel-window__card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(200, 255, 0, .42);
  border-radius: 999px;
  background: rgba(200, 255, 0, .09);
  color: #dfff68;
  font: inherit;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
}
.bigstep-ai-cancel-window__card button:hover,
.bigstep-ai-cancel-window__card button:focus-visible {
  background: rgba(200, 255, 0, .18);
  color: #efffc2;
  outline: none;
}

.bigstep-ai-legal-consent{position:fixed;inset:0;z-index:2147483601;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,7,.76);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.bigstep-ai-legal-consent__card{box-sizing:border-box;width:min(370px,calc(100vw - 32px));padding:18px;border:1px solid rgba(192,242,93,.38);border-radius:15px;background:linear-gradient(180deg,#171d1c,#0c1110);color:#f4f7f5;box-shadow:0 24px 60px rgba(0,0,0,.58)}
.bigstep-ai-legal-consent__card>small{display:block;margin-bottom:6px;color:#bdf451;font-size:10px;font-weight:900;letter-spacing:.12em}
.bigstep-ai-legal-consent__card>strong{display:block;margin-bottom:7px;font-size:15px;font-weight:900;line-height:1.25}
.bigstep-ai-legal-consent__card>p{margin:0 0 11px;color:#aeb9b6;font-size:11.5px;line-height:1.5}
.bigstep-ai-legal-consent__card>label{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid #35403d;border-radius:10px;background:#101615;color:#d7dddb;font-size:11px;line-height:1.45;cursor:pointer}
.bigstep-ai-legal-consent__card>label input{flex:0 0 17px;width:17px;height:17px;margin:2px 0 0;accent-color:#bdf451}
.bigstep-ai-legal-consent__card a{color:#bdf451;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.bigstep-ai-legal-consent__card>div{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.bigstep-ai-legal-consent__card button{min-height:40px;padding:0 16px;border:1px solid #3a4542;border-radius:999px;background:#1a211f;color:#e8eeec;font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.bigstep-ai-legal-consent__card button[data-ai-legal-accept]{border-color:#bdf451;background:#bdf451;color:#091000}
.bigstep-ai-legal-consent__card button:disabled{cursor:not-allowed;opacity:.38}
@media(max-width:520px){.bigstep-ai-legal-consent__card{padding:19px}.bigstep-ai-legal-consent__card>div{display:grid;grid-template-columns:1fr 1.25fr}.bigstep-ai-legal-consent__card button{padding:0 10px}}

.bigstep-ai-editor-ai-result {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(99,102,241,.36);
  border-radius: var(--r-lg);
  background: rgba(99,102,241,.1);
}
.bigstep-ai-editor-ai-result__thumb {
  position: relative;
  display: block;
  width: 92px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  overflow: hidden;
  cursor: pointer;
}
.bigstep-ai-editor-ai-result__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bigstep-ai-editor-ai-result__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bigstep-ai-editor-ai-result__label {
  color: #a5b4fc;
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: none;
  letter-spacing: .06em;
}
.bigstep-ai-editor-ai-result__body strong {
  font-size: var(--t-sm);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bigstep-ai-editor-ai-result__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bigstep-ai-editor-ai-result__actions .bigstep-ai-tool {
  width: auto;
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: var(--t-xs);
}
.bigstep-ai-app .bigstep-ai-tool--ghost {
  background: transparent !important;
  border-color: var(--bs-border) !important;
  color: var(--bs-muted) !important;
}
.bigstep-ai-app .bigstep-ai-tool--ghost:hover {
  border-color: var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}

/* ── 18. Elements panel ──────────────────────────────────────── */
.bigstep-ai-element-menu {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.bigstep-ai-element-menu button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 68px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-lg);
  background: var(--bs-surface-3);
  font: inherit; font-size: var(--t-xs); font-weight: 700;
  cursor: pointer;
  transition: all var(--dur);
  white-space: nowrap;
  overflow: hidden;
}
.bigstep-ai-element-menu button:hover,
.bigstep-ai-element-menu button.is-active { border-color: var(--bs-accent); background: rgba(99,102,241,.12); color: #a5b4fc; }
.bigstep-ai-element-menu button svg { width: 24px; height: 24px; display: block; flex-shrink: 0; }
/* Chips category & provider — dùng chung cho Icon, Sticker, Stock, Stock-providers.
   Thay vì <button> default browser (xám/border 3D Win98), pill bo tròn dark theme + hover/active gradient. */
.bigstep-ai-icon-categories {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 4px;
}
/* !important + selector .bigstep-ai-app phía trước để THẮNG rule reset
   `.bigstep-ai-app button { background: none !important }` ở phần đầu file. */
.bigstep-ai-app .bigstep-ai-icon-cat,
.bigstep-ai-icon-cat {
  appearance: none !important; -webkit-appearance: none !important;
  flex: 0 0 auto;
  padding: 6px 12px !important;
  font: 600 12.5px/1.2 inherit !important;
  color: var(--bs-muted, #94a3b8) !important;
  background: var(--bs-surface-2, rgba(15,23,42,.55)) !important;
  border: 1px solid var(--bs-border-2, rgba(129,140,248,.22)) !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
  white-space: nowrap;
  line-height: 1 !important;
  box-shadow: none !important;
}
.bigstep-ai-app .bigstep-ai-icon-cat:hover,
.bigstep-ai-icon-cat:hover {
  color: #e2e8f0 !important;
  border-color: rgba(165,180,252,.55) !important;
  background: rgba(99,102,241,.14) !important;
}
.bigstep-ai-app .bigstep-ai-icon-cat:active,
.bigstep-ai-icon-cat:active { transform: scale(.96); }
.bigstep-ai-app .bigstep-ai-icon-cat.is-active,
.bigstep-ai-icon-cat.is-active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 4px 14px -4px rgba(99,102,241,.6) !important;
}
/* Panel Số & chữ thể thao (varsity) */
.bigstep-ai-varsity-fonts { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bigstep-ai-varsity-fonts::-webkit-scrollbar { height: 5px; }
.bigstep-ai-varsity-fonts::-webkit-scrollbar-thumb { background: rgba(129,140,248,.4); border-radius: 3px; }
.bigstep-ai-varsity-fonts button {
  flex: 0 0 auto; white-space: nowrap; padding: 7px 12px;
  border: 1px solid var(--bs-border-2); border-radius: 8px;
  background: var(--bs-surface-2); color: var(--bs-text);
  font-size: 13px; cursor: pointer; transition: all var(--dur);
}
.bigstep-ai-varsity-fonts button.is-active { border-color: var(--bs-accent); background: rgba(99,102,241,.16); color: #a5b4fc; }
.bigstep-ai-varsity-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bigstep-ai-varsity-styles button {
  width: 40px; height: 40px; border-radius: 9px;
  border: 1px solid var(--bs-border-2); background: var(--bs-surface-3);
  cursor: pointer; display: grid; place-items: center; transition: all var(--dur);
}
.bigstep-ai-varsity-styles button span { font: 900 22px/1 'Anton','Oswald',sans-serif; }
.bigstep-ai-varsity-styles button.is-active { border-color: var(--bs-accent); box-shadow: 0 0 0 2px rgba(99,102,241,.4); }
.bigstep-ai-varsity-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.bigstep-ai-varsity-nums button {
  height: 40px; border: 1px solid var(--bs-border-2); border-radius: 8px;
  background: var(--bs-surface-2); color: var(--bs-text);
  font: 800 18px/1 'Oswald','Anton',sans-serif; cursor: pointer; transition: all var(--dur);
}
.bigstep-ai-varsity-nums button:hover { border-color: var(--bs-accent); background: rgba(99,102,241,.14); color: #a5b4fc; }
.bigstep-ai-element-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}
.bigstep-ai-element-grid button {
  height: 38px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-3);
  font: inherit; font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--dur);
}
.bigstep-ai-element-grid button:hover { border-color: var(--bs-accent); background: rgba(99,102,241,.12); }

/* Shape grid — visual SVG buttons */
.bigstep-ai-shape-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 6px;
  margin-top: 10px;
}
.bigstep-ai-shape-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.bigstep-ai-shape-grid button svg { fill: currentColor; width: 26px; height: 26px; }
.bigstep-ai-shape-grid button:hover {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.1);
  color: #a5b4fc;
}

/* ── 19. Layers panel ────────────────────────────────────────── */
.bigstep-ai-layer-group-actions { display: flex; gap: 8px; width: 100%; }
.bigstep-ai-layer-group-actions .bigstep-ai-tool { flex: 1; justify-content: center; padding: 0 8px; height: 36px; }
.bigstep-ai-layer-list { display: flex; flex-direction: column; gap: 4px; }
.bigstep-ai-layer-row {
  display: grid;
  grid-template-columns: 20px 36px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur);
}
.bigstep-ai-layer-row > span:nth-child(3) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-sm);
}
/* Layer row thumbnail — small square preview (img tag or empty <i> placeholder) */
.bigstep-ai-app .bigstep-ai-layer-row > img,
.bigstep-ai-app .bigstep-ai-layer-row > i {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid var(--bs-border-2) !important;
  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%) !important;
  background-size: 8px 8px !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
}
.bigstep-ai-app .bigstep-ai-layer-row > i {
  background: var(--bs-surface-2) !important;
  background-image: none !important;
}
/* Layer action buttons group */
.bigstep-ai-layer-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.bigstep-ai-layer-actions button {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1;
  border-radius: var(--r-sm) !important;
}
.bigstep-ai-layer-actions button[data-layer-delete]:hover { background: rgba(239,68,68,.15) !important; color: var(--bs-danger) !important; }
.bigstep-ai-layer-drag {
  display: grid; place-items: center;
  color: var(--bs-muted);
  font-size: 16px;
  cursor: grab;
  user-select: none;
  line-height: 1;
}
.bigstep-ai-layer-row:active .bigstep-ai-layer-drag { cursor: grabbing; }
.bigstep-ai-layer-row:hover        { border-color: var(--bs-border-2); }
.bigstep-ai-layer-row.is-active    { border-color: var(--bs-accent); background: rgba(99,102,241,.1); }
.bigstep-ai-layer-row.is-dragging  { opacity: .4; }
.bigstep-ai-layer-row.is-drag-over { border-color: var(--bs-accent); background: rgba(99,102,241,.12); }
.bigstep-ai-layer-row button {
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bs-muted);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: var(--t-sm);
  transition: all var(--dur);
}
.bigstep-ai-layer-row button:hover { background: var(--bs-surface-2); color: var(--bs-text); }

/* ── Nhóm layer (folder UI, giống Photoshop) ─────────────────── */
.bigstep-ai-layer-folder-wrap {
  display: flex; flex-direction: column;
  gap: 4px;
}
.bigstep-ai-layer-row.bigstep-ai-layer-folder {
  background: var(--bs-surface-2);
  border-color: var(--bs-border-2);
}
.bigstep-ai-layer-row.bigstep-ai-layer-folder.is-active {
  border-color: var(--bs-accent); background: rgba(99,102,241,.14);
}
.bigstep-ai-layer-row.bigstep-ai-layer-folder > span:nth-of-type(2) { font-weight: 600; }
.bigstep-ai-layer-caret {
  width: 22px !important; height: 22px !important;
  font-size: 12px !important;
  color: var(--bs-muted);
}
.bigstep-ai-layer-folder-ico {
  display: grid; place-items: center;
  color: var(--bs-accent);
}
.bigstep-ai-layer-folder [data-folder-delete]:hover { background: rgba(239,68,68,.15) !important; color: var(--bs-danger) !important; }
/* Thành viên trong nhóm: thụt vào + đường nối dọc cho trực quan */
.bigstep-ai-layer-row.is-grouped {
  margin-left: 16px;
  border-left: 2px solid var(--bs-border-2);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* ── 20. Info panel ──────────────────────────────────────────── */
.bigstep-ai-empty-note { font-size: var(--t-sm); color: var(--bs-muted); line-height: 1.6; }
.bigstep-ai-about-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--bs-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 20px;
  margin-bottom: 10px;
}
.bigstep-ai-about-title {
  display: block;
  font-size: var(--t-md);
  font-weight: 700;
  margin-bottom: 8px;
}
.bigstep-ai-about-desc {
  font-size: var(--t-sm);
  color: var(--bs-muted);
  line-height: 1.65;
  margin: 0;
}
.bigstep-ai-about-section-title {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: 8px;
}
.bigstep-ai-about-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bigstep-ai-about-features li {
  font-size: var(--t-sm);
  color: var(--bs-muted);
  padding-left: 12px;
  position: relative;
  line-height: 1.5;
}
.bigstep-ai-about-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bs-accent);
}
.bigstep-ai-about-features li strong {
  color: var(--bs-text);
  font-weight: 700;
}
.bigstep-ai-about-subhead {
  margin: 12px 0 6px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bs-text);
}
.bigstep-ai-about-subhead span {
  font-weight: 500;
  font-size: var(--t-xs, 12px);
  color: var(--bs-muted);
}
.bigstep-ai-about-version {
  font-size: var(--t-sm);
  color: var(--bs-accent);
  font-weight: 600;
  margin: 0 0 6px;
}
.bigstep-ai-about-copy {
  font-size: 11px;
  color: var(--bs-muted);
  margin: 0;
  line-height: 1.5;
}
.bigstep-ai-about-author { display: flex; flex-direction: column; gap: 8px; }
.bigstep-ai-about-author-name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
}
.bigstep-ai-about-author-links { display: flex; flex-direction: column; gap: 6px; }
.bigstep-ai-about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--bs-border-2);
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  transition: border-color var(--dur), color var(--dur);
}
.bigstep-ai-about-link:hover { color: var(--bs-text); border-color: var(--bs-accent); }
.bigstep-ai-about-link--fb:hover { color: #93c5fd; border-color: #3b82f6; }
.bigstep-ai-about-link--zalo:hover { color: #6ee7b7; border-color: #10b981; }
.bigstep-ai-about-link--mail:hover { color: #fcd34d; border-color: #f59e0b; }
.bigstep-ai-about-author-role {
  margin: 2px 0 8px;
  font-size: var(--t-xs, 12px);
  color: var(--bs-muted);
}
.bigstep-ai-about-author-alias {
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bs-accent);
}

/* ── 21. Canvas area ─────────────────────────────────────────── */
.bigstep-ai-editor-canvas-area {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--bs-bg);
  overflow: hidden;
}

/* Canvas action bar */
.bigstep-ai-app .bigstep-ai-canvas-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* Toolbar width = sum of its buttons. We INTENTIONALLY do NOT tie this to
   * --bigstep-editor-size — previously the toolbar visually shrank/grew
   * whenever the user zoomed the canvas, which made it feel like part of
   * the mockup instead of a chrome control. Now it stays the same size at
   * every zoom level. Overflow scrolling happens on the parent canvas-area
   * (see editor override), not on the toolbar itself. */
  width: auto;
  max-width: none;
}
.bigstep-ai-app .bigstep-ai-canvas-actions .bigstep-ai-top-button,
.bigstep-ai-app button.bigstep-ai-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  width: auto;
  padding: 0 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  background-image: none;
  color: var(--bs-muted);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app .bigstep-ai-top-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.bigstep-ai-app .bigstep-ai-top-button:hover {
  border-color: var(--bs-border-2);
  background: var(--bs-surface-3);
  background-image: none;
  box-shadow: none;
}
.bigstep-ai-app .bigstep-ai-top-button:focus,
.bigstep-ai-app .bigstep-ai-top-button:active {
  outline: none;
  box-shadow: none;
}
.bigstep-ai-app .bigstep-ai-clear-design:hover     { border-color: var(--bs-danger); color: var(--bs-danger); background: rgba(239,68,68,.08); }
.bigstep-ai-app .bigstep-ai-btn-delete-layer:hover { border-color: var(--bs-danger); color: var(--bs-danger); background: rgba(239,68,68,.08); }
.bigstep-ai-app .bigstep-ai-btn-rmbg               { border-color: rgba(99,102,241,.45); color: #a5b4fc; background: rgba(99,102,241,.06); }
.bigstep-ai-app .bigstep-ai-btn-rmbg:hover         { border-color: var(--bs-accent); background: rgba(99,102,241,.16); color: #c7d2fe; }
.bigstep-ai-toolbar-sep {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--bs-border);
  flex-shrink: 0;
  margin: 0 2px;
  align-self: center;
}

/* WHITE canvas wrap.
 * Width comes straight from --bigstep-editor-size set by updateZoom() in JS;
 * the JS computes "fit-to-viewport" at zoom=1 so the canvas fills the
 * available space without overflow. When the user zooms IN past 1.0 the
 * variable grows past viewport bounds — canvas-area is set to overflow:auto
 * (see editor canvas-area override below) so they can pan/scroll to see
 * details. Without this fix, the previous min() cap with viewport limits
 * made zoom-in a no-op past the fit size. */
.bigstep-ai-canvas-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--bigstep-editor-size, 600px);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--bs-canvas);
  box-shadow: var(--bs-canvas-sh);
  overflow: hidden;
}
.bigstep-ai-mockup-load-progress {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 12;
  width: min(320px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.bigstep-ai-mockup-load-progress[hidden] {
  display: none !important;
}
.bigstep-ai-mockup-load-progress__box {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon copy"
    "bar bar";
  gap: 8px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(129, 140, 248, .42);
  border-radius: 12px;
  background: rgba(8, 11, 18, .82);
  color: #f8fafc;
  box-shadow: 0 18px 42px rgba(2, 6, 23, .34);
  backdrop-filter: blur(12px);
}
.bigstep-ai-mockup-load-progress__icon {
  grid-area: icon;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(129, 140, 248, .95), rgba(139, 92, 246, .95));
  box-shadow: 0 0 24px rgba(129, 140, 248, .36);
}
.bigstep-ai-mockup-load-progress__icon::before {
  content: "";
  position: absolute;
  inset: 7px 8px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-top-width: 4px;
  border-radius: 3px;
}
.bigstep-ai-mockup-load-progress__copy {
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bigstep-ai-mockup-load-progress__copy strong {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
}
.bigstep-ai-mockup-load-progress__copy small {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(203, 213, 225, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bigstep-ai-mockup-load-progress__bar {
  grid-area: bar;
  height: 4px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .18);
  overflow: hidden;
}
.bigstep-ai-mockup-load-progress__bar i {
  display: block;
  width: var(--bs-mockup-progress, 12%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #8b5cf6, #22d3ee);
  transition: width .28s ease;
}
/* Canvas-area is the positioning context for the floating toolbars (canvas-
 * actions, side-tabs, zoom-controls). It does NOT scroll itself — scrolling
 * lives on the inner `.bigstep-ai-canvas-scroll` div which wraps just the
 * canvas mockup. This way zooming the mockup never makes the toolbars scroll
 * out of view. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
  overflow: hidden;
}
.bigstep-ai-canvas-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) rgba(15,18,32,.72);
}
.bigstep-ai-canvas-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.bigstep-ai-canvas-scroll::-webkit-scrollbar-track {
  background: rgba(15,18,32,.72);
  border-radius: 999px;
}
.bigstep-ai-canvas-scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.55);
  border: 2px solid rgba(15,18,32,.72);
  border-radius: 999px;
}
.bigstep-ai-canvas-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Desktop: float the toolbars absolutely on canvas-area so they don't scroll
 * with the canvas content when zoomed in. Mobile keeps the normal flex flow
 * (toolbars below canvas) for touch ergonomics. */
@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions {
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    margin: 0 !important;
    background: var(--bs-surface) !important;
    border: 1px solid var(--bs-border) !important;
    border-radius: var(--r-pill) !important;
    padding: 6px 8px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.28) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom {
    position: absolute !important;
    bottom: 64px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    margin: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    margin: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.28) !important;
  }
}
.bigstep-ai-canvas-wrap .canvas-container,
.bigstep-ai-canvas-wrap .lower-canvas,
.bigstep-ai-canvas-wrap .upper-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.bigstep-ai-canvas-wrap .upper-canvas { z-index: 6; cursor: move; }

/* Empty hint — prominent centered overlay */
.bigstep-ai-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(8,11,18,.55);
  backdrop-filter: blur(2px);
  z-index: 10;
  cursor: pointer;
  border-radius: inherit;
}
.bigstep-ai-empty::before {
  content: "\2726"; /* ✦ — escape unicode để không vỡ khi file bị lưu sai encoding */
  font-size: 36px;
  background: var(--bs-grd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.bigstep-ai-empty p {
  font-size: var(--t-sm);
  color: var(--bs-muted);
  max-width: 200px;
  line-height: 1.6;
}
.bigstep-ai-empty strong {
  font-size: var(--t-md);
  font-weight: 700;
}

/* Object toolbar — bar below canvas for SVG/shape controls */
.bigstep-ai-obj-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: var(--bs-surface);
  border-top: 1px solid var(--bs-border);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex-shrink: 0;
  pointer-events: auto;
}
.bigstep-ai-obj-toolbar::-webkit-scrollbar { display: none; }
.bigstep-ai-obj-toolbar::before,
.bigstep-ai-obj-toolbar::after {
  content: '';
  min-width: 14px;
  flex-shrink: 0;
  display: block;
}
.bigstep-ai-obj-toolbar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--bs-muted);
  cursor: pointer;
  position: relative;
}
.bigstep-ai-obj-toolbar-item span:first-child { font-weight: 700; font-size: 10px; }
.bigstep-ai-obj-toolbar-item .bigstep-ai-color-swatch {
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; cursor: pointer;
}
.bigstep-ai-obj-toolbar-item input[type="color"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.bigstep-ai-obj-toolbar-item input[type="number"] {
  width: 44px; height: 26px; padding: 0 6px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  font: inherit; font-size: 12px;
  text-align: center;
}
.bigstep-ai-obj-toolbar-sep {
  width: 1px; height: 22px; background: var(--bs-border-2); flex-shrink: 0;
}
.bigstep-ai-obj-toolbar-btn {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all var(--dur);
  display: flex; align-items: center; gap: 4px;
}
.bigstep-ai-obj-toolbar-btn:hover { border-color: var(--bs-accent); color: #a5b4fc; }
.bigstep-ai-obj-toolbar-btn--danger:hover { border-color: var(--bs-danger); color: var(--bs-danger); }
@media (max-width: 980px) {
  .bigstep-ai-obj-toolbar {
    align-self: center;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding: 6px 10px;
  }
}

/* Safezone out-of-bounds warning */
.bigstep-ai-safezone-warning {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: rgba(239,68,68,.92);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Front/back tabs — same chrome principle as canvas-actions: do NOT
 * resize with canvas zoom. */
.bigstep-ai-side-tabs--bottom {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 280px;
  max-width: 90vw;
}
.bigstep-ai-app .bigstep-ai-side-tabs--bottom button {
  height: 33px;
  min-height: 33px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  background-image: none;
  color: var(--bs-muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--dur), color var(--dur), background var(--dur);
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app .bigstep-ai-side-tabs--bottom button:hover {
  border-color: var(--bs-border-2);
  background: var(--bs-surface-3);
}
.bigstep-ai-app .bigstep-ai-side-tabs--bottom button.is-active {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.14);
  color: #a5b4fc;
  font-weight: 700;
}

/* Mobile: đảo thứ tự +- để '-' nằm trái, '+' nằm phải (chuẩn UX mobile) */
@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-zoom-controls [data-tool="zoom-out"] { order: 0 !important; }
  .bigstep-ai-app .bigstep-ai-zoom-controls input[type="range"] { order: 1 !important; }
  .bigstep-ai-app .bigstep-ai-zoom-controls span { order: 2 !important; }
  .bigstep-ai-app .bigstep-ai-zoom-controls [data-tool="zoom-in"] { order: 3 !important; }
}

/* Zoom controls */
.bigstep-ai-app .bigstep-ai-zoom-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 33px;
  padding: 3px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-pill);
  background: var(--bs-surface-2);
}
.bigstep-ai-app .bigstep-ai-zoom-controls button {
  width: 26px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  background-image: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dur);
  display: grid;
  place-items: center;
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app .bigstep-ai-zoom-controls button:hover { background: var(--bs-surface-3); }
.bigstep-ai-app .bigstep-ai-zoom-controls input[type="range"] {
  width: 112px;
  flex: 0 0 112px;
}
.bigstep-ai-app .bigstep-ai-zoom-controls span {
  width: 46px;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
}

/* ── 22. Text bar (fixed below canvas when text layer selected) ── */
.bigstep-ai-text-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;       /* side padding via pseudo spacers — fixes flex overflow-x clip bug */
  background: var(--bs-surface);
  border-top: 1px solid var(--bs-border);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  touch-action: pan-x;               /* let horizontal swipe through */
  overscroll-behavior-x: contain;
}
.bigstep-ai-text-bar::-webkit-scrollbar { display: none; }
/* Invisible spacers so first/last item isn't clipped at scroll ends */
.bigstep-ai-text-bar::before,
.bigstep-ai-text-bar::after {
  content: '';
  min-width: 14px;
  flex-shrink: 0;
  display: block;
}
.bigstep-ai-text-bar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.bigstep-ai-text-bar-sep {
  width: 1px;
  height: 20px;
  background: var(--bs-border-2);
  flex-shrink: 0;
  margin: 0 4px;
}
.bigstep-ai-text-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-muted);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.bigstep-ai-image-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  flex: 0 0 auto;
  min-width: 246px;
  padding: 4px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
}
.bigstep-ai-image-mode-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--bs-muted) !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.bigstep-ai-image-mode-tabs button svg,
.bigstep-ai-image-edit-section .bigstep-ai-tool svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.bigstep-ai-image-mode-tabs button.is-active {
  background: rgba(99,102,241,.18) !important;
  color: #c4b5fd !important;
}
.bigstep-ai-image-edit-section {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.bigstep-ai-image-edit-section[hidden] {
  display: none !important;
}
.bigstep-ai-image-section-title {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.bigstep-ai-text-bar .bigstep-ai-image-reset-main {
  width: auto !important;
  min-width: 82px !important;
  padding: 0 10px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.bigstep-ai-image-menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 6px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-md);
  background: var(--bs-surface-2);
  background: color-mix(in srgb, var(--bs-surface-2) 86%, transparent);
}
.bigstep-ai-image-menu[hidden] {
  display: none !important;
}
.bigstep-ai-image-menu--adjust .bigstep-ai-text-bar-label--range input[type="range"] {
  width: 92px;
}
.bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range input[type="range"] {
  width: 92px;
}
.bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-x]),
.bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-y]),
.bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-w]),
.bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-h]) {
  display: none !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-x]),
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-y]),
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-w]),
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range:has([data-image-crop-h]) {
  display: none !important;
}
.bigstep-ai-image-crop-controls .bigstep-ai-tool {
  width: auto !important;
  min-width: 86px !important;
  height: 28px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.bigstep-ai-image-crop-done {
  color: #f8fbff !important;
  border-color: color-mix(in srgb, var(--bs-primary) 72%, #ffffff 10%) !important;
  background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
}
.bigstep-ai-image-crop-done:hover {
  filter: brightness(1.08);
}
.bigstep-ai-image-menu .bigstep-ai-tool,
.bigstep-ai-text-bar .bigstep-ai-tool[data-image-erase-toggle] {
  width: auto !important;
  min-width: 92px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}
.bigstep-ai-text-bar .bigstep-ai-tool[data-image-erase-toggle] {
  min-width: 132px !important;
}
.bigstep-ai-image-erase-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.bigstep-ai-image-erase-controls[hidden] {
  display: none !important;
}
.bigstep-ai-image-erase-controls .bigstep-ai-text-bar-label--range input[type="range"] {
  width: 112px;
}
.bigstep-ai-image-erase-hint {
  color: var(--bs-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.bigstep-ai-app.is-image-erase-mode .bigstep-ai-canvas-wrap .upper-canvas {
  cursor: crosshair !important;
}
.bigstep-ai-app.is-image-erase-mode,
.bigstep-ai-app.is-image-erase-mode .bigstep-ai-canvas-wrap,
.bigstep-ai-app.is-image-erase-mode .bigstep-ai-editor-canvas-area {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bigstep-ai-image-erase-overlay {
  position: absolute;
  inset: 0;
  z-index: 13;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  pointer-events: auto;
  touch-action: none;
}
.bigstep-ai-image-erase-popup {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 16;
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 9px 10px;
  border: 1px solid rgba(99,102,241,.48);
  border-radius: 14px;
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  pointer-events: auto;
  transform: translateX(-50%);
}
.bigstep-ai-image-erase-popup__status {
  display: grid;
  gap: 2px;
  min-width: 112px;
}
.bigstep-ai-image-erase-popup__status strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.bigstep-ai-image-erase-popup__status span {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.bigstep-ai-image-erase-popup__range {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.bigstep-ai-image-erase-popup__range input[type="range"] {
  width: 90px;
}
.bigstep-ai-image-erase-popup__exit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.bigstep-ai-image-erase-popup__exit svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.bigstep-ai-image-erase-popup__exit:hover {
  background: #5b4ce0 !important;
}
/* Erase popup: the drag handle is a small inline grip, not the generic
   full-width handle bar (that bar is designed for vertical panels). */
.bigstep-ai-app .bigstep-ai-image-erase-popup > .bigstep-ai-panel-drag-handle {
  width: auto !important;
  flex: 0 0 auto;
  height: 26px;
  margin: 0;
  padding: 4px 6px;
}
.bigstep-ai-crop-drag-overlay {
  position: absolute;
  z-index: 12;
  border: 2px dashed #38bdf8;
  background: rgba(56,189,248,.08);
  box-shadow: 0 0 0 9999px rgba(8,11,18,.34), 0 0 0 1px rgba(15,23,42,.75) inset;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}
.bigstep-ai-crop-drag-overlay.is-dragging {
  border-color: #a5b4fc;
  background: rgba(99,102,241,.12);
}
.bigstep-ai-crop-drag-overlay.is-fixed-ratio {
  border-color: #a5b4fc;
}
.bigstep-ai-crop-drag-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 33.333%, rgba(255,255,255,.55) 33.333%, rgba(255,255,255,.55) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.55) 66.666%, rgba(255,255,255,.55) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(0deg, transparent 33.333%, rgba(255,255,255,.55) 33.333%, rgba(255,255,255,.55) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.55) 66.666%, rgba(255,255,255,.55) calc(66.666% + 1px), transparent calc(66.666% + 1px));
}
.bigstep-ai-crop-drag-overlay [data-crop-handle] {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #0f172a;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 2px 7px rgba(0,0,0,.35);
  touch-action: none;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="n"] { top: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="s"] { bottom: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="e"] { right: -10px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="w"] { left: -10px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.bigstep-ai-app.is-crop-drag-mode .bigstep-ai-canvas-wrap .upper-canvas {
  cursor: default !important;
}
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:not([hidden]) {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(42vh, 320px);
    padding: 8px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
    touch-action: pan-y !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar::before,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar::after {
    display: none;
  }
  .bigstep-ai-image-mode-tabs {
    width: 100%;
    min-width: 0;
    /* 3 nút: AI Remix + Chỉnh ảnh + Tẩy xóa (tab Cắt ảnh đã bỏ 20260703) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bigstep-ai-image-mode-tabs button {
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  /* Mobile: badge "AI" của CTA remix chật chỗ trong grid 4 cột → ẩn */
  .bigstep-ai-image-mode-tabs .bigstep-ai-image-remix-cta-badge {
    display: none !important;
  }
  .bigstep-ai-image-mode-tabs button svg {
    width: 14px;
    height: 14px;
  }
  .bigstep-ai-image-section-title {
    display: none;
  }
  .bigstep-ai-image-edit-section:not([hidden]) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bigstep-ai-image-menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bigstep-ai-image-menu .bigstep-ai-text-bar-label,
  .bigstep-ai-image-erase-controls {
    width: 100%;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-text-bar-label {
    flex-direction: column !important;
    align-items: stretch !important;
    white-space: normal !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-image-bar:not([hidden])),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden])),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-obj-toolbar:not([hidden])) {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar:not([hidden]) {
    margin-bottom: 0 !important;
  }
  .bigstep-ai-image-menu .bigstep-ai-text-bar-label--range input[type="range"],
  .bigstep-ai-image-erase-controls .bigstep-ai-text-bar-label--range input[type="range"],
  .bigstep-ai-image-menu .bigstep-ai-text-bar-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .bigstep-ai-image-menu .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
  }
  .bigstep-ai-image-erase-popup {
    position: fixed;
    left: 12px;
    right: 64px;
    top: auto;
    bottom: calc(var(--toolbar-m) + env(safe-area-inset-bottom) + 154px);
    width: auto;
    max-width: none;
    min-height: 34px;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 6px;
    transform: none;
    border-radius: 999px;
    z-index: 27;
  }
  .bigstep-ai-image-erase-popup__status {
    min-width: 0;
    flex: 1 1 auto;
    gap: 0;
  }
  .bigstep-ai-image-erase-popup__status strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
  }
  .bigstep-ai-image-erase-popup__status span {
    display: none;
  }
  .bigstep-ai-image-erase-popup__range {
    flex: 0 0 auto;
    order: 0;
    gap: 5px;
  }
  .bigstep-ai-image-erase-popup__range input[type="range"] {
    width: 74px;
    min-height: 28px;
  }
  .bigstep-ai-image-erase-popup__exit {
    flex: 0 0 auto;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
  .bigstep-ai-crop-drag-overlay [data-crop-handle] {
    width: 24px;
    height: 24px;
  }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="n"] { top: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="s"] { bottom: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="e"] { right: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="w"] { left: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="nw"] { left: -13px; top: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="ne"] { right: -13px; top: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="se"] { right: -13px; bottom: -13px; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="sw"] { left: -13px; bottom: -13px; }
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: normal !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) .bigstep-ai-image-mode-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) [data-image-edit-section="crop"] {
    width: 100% !important;
    flex: 1 0 100% !important;
    display: flex !important;
    align-items: stretch !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) .bigstep-ai-image-crop-controls:not([hidden]) {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:has([data-image-edit-section="crop"]:not([hidden])) .bigstep-ai-image-crop-controls .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
  }
}
.bigstep-ai-text-bar-label--range { gap: 8px; }
.bigstep-ai-text-bar-label--range input[type="range"] {
  width: 80px;
  flex-shrink: 0;
  accent-color: var(--bs-accent);
}
.bigstep-ai-text-bar-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  max-width: 140px;
}
.bigstep-ai-text-bar .bigstep-ai-tool {
  width: 30px; height: 28px;
  padding: 0;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bigstep-ai-text-bar .bigstep-ai-color-swatch {
  width: 20px; height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.bigstep-ai-text-bar .bigstep-ai-color-swatch-wrap { flex-shrink: 0; }
.bigstep-ai-text-bar-stroke {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.bigstep-ai-text-bar-stroke input[type="number"],
.bigstep-ai-text-bar-stroke .bigstep-ai-stroke-preset-select {
  width: 74px; height: 26px;
  padding: 0 5px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-sm);
  background: var(--bs-surface-3);
  font: inherit; font-size: 12px;
  text-align: left;
  font-weight: 800;
}
.bigstep-ai-stroke-range-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 118px;
  flex: 1 1 118px;
}
.bigstep-ai-stroke-range-wrap input[type="range"] {
  min-width: 74px;
  height: 4px;
  flex: 1 1 auto;
  accent-color: var(--bs-accent);
}
.bigstep-ai-stroke-value {
  min-width: 24px;
  color: var(--bs-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Legacy text-popup — keep hidden, no longer shown */
.bigstep-ai-text-popup { display: none !important; }

.bigstep-ai-text-stroke-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.bigstep-ai-text-stroke-row input[type="number"],
.bigstep-ai-text-stroke-row .bigstep-ai-stroke-preset-select {
  width: 112px;
  flex-shrink: 0;
}
.bigstep-ai-text-stroke-row .bigstep-ai-stroke-range-wrap {
  min-width: 160px;
  flex: 1 1 160px;
}
.bigstep-ai-text-stroke-row .bigstep-ai-stroke-value {
  min-width: 34px;
}
.bigstep-ai-text-stroke-row .bigstep-ai-color-swatch-wrap { flex-shrink: 0; }

/* ── 23. Floating actions ────────────────────────────────────── */
/* Hidden by default — only shown in editor mode on desktop (≥981px) */
.bigstep-ai-floating-actions {
  position: fixed;
  right: 36px;
  bottom: 24px;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.bigstep-ai-app .bigstep-ai-float-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  align-self: flex-end;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 50%;
  background: rgba(30, 35, 52, .9);
  background-image: none;
  /* Icon dùng fill="currentColor"; thiếu color → trên dark theme icon thành đen
   * tan vào nền tối, người dùng không thấy nút "?". Set sáng rõ. */
  color: #f3f5f9;
  font: inherit;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  transition: background var(--dur), transform var(--dur), border-color var(--dur), color var(--dur);
  flex-shrink: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.bigstep-ai-app .bigstep-ai-float-button svg { flex-shrink: 0; display: block; width: 20px; height: 20px; }
.bigstep-ai-app .bigstep-ai-float-button:hover {
  background: rgba(99, 102, 241, .18);
  border-color: rgba(139, 92, 246, .6);
  color: #fff;
  transform: translateY(-2px);
}
.bigstep-ai-app .bigstep-ai-float-button[data-zalo-cta] {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: #0068ff;
  background-image: none;
  border-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.bigstep-ai-app .bigstep-ai-float-button[data-zalo-cta]:hover { background: #0054d4; }
.bigstep-ai-app .bigstep-ai-float-button[data-zalo-cta] span  { display: inline; font-size: var(--t-sm); color: #fff; font-weight: 700; }
.bigstep-ai-support-contact {
  position: relative;
  align-self: flex-end;
}
.bigstep-ai-app .bigstep-ai-float-button[data-support-contact-toggle] {
  border: 0;
  box-shadow: 0 12px 30px rgba(0, 82, 212, .3), inset 0 1px 0 rgba(255,255,255,.18);
}
.bigstep-ai-app .bigstep-ai-float-button[data-support-contact-toggle][aria-expanded="true"] {
  background: #0054d4;
}
.bigstep-ai-app .bigstep-ai-float-button .bigstep-ai-support-chevron {
  width: 15px;
  height: 15px;
  margin-left: 1px;
  transition: transform .2s ease;
}
.bigstep-ai-app .bigstep-ai-float-button[aria-expanded="true"] .bigstep-ai-support-chevron {
  transform: rotate(180deg);
}
.bigstep-ai-support-contact-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 3;
  box-sizing: border-box;
  width: min(304px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid rgba(129, 140, 248, .34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 102, 241, .23), transparent 38%),
    linear-gradient(180deg, rgba(17, 24, 39, .98), rgba(8, 13, 27, .98));
  color: #f8fafc;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .52), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(16px) saturate(1.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  transform-origin: right bottom;
  animation: bigstep-ai-support-menu-in .2s cubic-bezier(.2,.8,.2,1);
}
.bigstep-ai-support-contact-menu[hidden] { display: none !important; }
@keyframes bigstep-ai-support-menu-in {
  from { opacity: 0; transform: translateY(7px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bigstep-ai-support-contact-menu > strong {
  display: block;
  margin: 0;
  color: #09100d !important;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}
.bigstep-ai-support-contact-menu > small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}
.bigstep-ai-support-contact-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.bigstep-ai-support-contact-options a {
  display: flex;
  min-width: 0;
  min-height: 78px;
  box-sizing: border-box;
  padding: 9px 5px 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 13px;
  background: rgba(15, 23, 42, .68);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.bigstep-ai-support-contact-options a:hover {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, .58);
  background: rgba(30, 41, 59, .88);
  color: #fff;
}
.bigstep-ai-support-contact-options i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .3);
}
.bigstep-ai-support-contact-options i svg {
  width: 21px;
  height: 21px;
}
.bigstep-ai-support-contact-options .is-messenger {
  background: linear-gradient(145deg, #00b2ff, #7b2cff);
}
.bigstep-ai-support-contact-options .is-zalo {
  background: #0877f9;
  font-size: 10px;
  font-weight: 900;
}
.bigstep-ai-support-contact-options .is-hotline {
  background: linear-gradient(145deg, #22c55e, #0f9f49);
}

/* Help popover */
.bigstep-ai-help-popover {
  position: fixed;
  right: 72px; bottom: 24px;
  z-index: 500;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-xl);
  background: var(--bs-surface);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.bigstep-ai-help-popover strong { display: block; margin-bottom: 10px; font-size: var(--t-md); font-weight: 700; }
.bigstep-ai-help-popover ul    { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; list-style: disc; }
.bigstep-ai-help-popover li    { font-size: var(--t-sm); color: var(--bs-muted); line-height: 1.5; }

/* ── 24. Context menu — premium redesign with blur, animation, accent ─ */
.bigstep-ai-app .bigstep-ai-context-menu,
.bigstep-ai-context-menu {
  position: fixed !important;
  z-index: 2147483640 !important;
  min-width: 200px !important;
  max-width: 240px !important;
  padding: 6px !important;
  border: 1px solid rgba(99, 102, 241, .2) !important;
  border-radius: 14px !important;
  background: rgba(15, 18, 32, .94) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .55),
    0 8px 16px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .04) inset !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: bs-ctx-in .18s cubic-bezier(.16, 1, .3, 1);
  transform-origin: top left;
}
.bigstep-ai-app .bigstep-ai-context-menu[hidden],
.bigstep-ai-context-menu[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-context-menu button,
.bigstep-ai-context-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .14s ease, color .14s ease, transform .14s ease !important;
  width: 100% !important;
  min-height: 0 !important;
  position: relative;
  letter-spacing: 0 !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  white-space: nowrap;
}
.bigstep-ai-app .bigstep-ai-context-menu button[hidden],
.bigstep-ai-context-menu button[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-context-menu.is-paste-only,
.bigstep-ai-context-menu.is-paste-only {
  min-width: 150px !important;
  max-width: 170px !important;
  padding: 5px !important;
}
.bigstep-ai-app .bigstep-ai-context-menu button svg,
.bigstep-ai-context-menu button svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  opacity: .72;
  transition: opacity .14s, transform .14s;
}
.bigstep-ai-app .bigstep-ai-context-menu button:hover,
.bigstep-ai-context-menu button:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, .18), rgba(139, 92, 246, .08)) !important;
  background-image: linear-gradient(90deg, rgba(99, 102, 241, .18), rgba(139, 92, 246, .08)) !important;
  color: #ffffff !important;
}
.bigstep-ai-app .bigstep-ai-context-menu button:hover svg,
.bigstep-ai-context-menu button:hover svg {
  opacity: 1;
  transform: scale(1.08);
}
.bigstep-ai-app .bigstep-ai-context-menu button:active,
.bigstep-ai-context-menu button:active {
  transform: scale(.98);
}
.bigstep-ai-app .bigstep-ai-context-menu .bigstep-ai-context-danger,
.bigstep-ai-context-menu .bigstep-ai-context-danger {
  color: #f87171 !important;
}
.bigstep-ai-app .bigstep-ai-context-menu .bigstep-ai-context-danger:hover,
.bigstep-ai-context-menu .bigstep-ai-context-danger:hover {
  background: linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(239, 68, 68, .06)) !important;
  background-image: linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(239, 68, 68, .06)) !important;
  color: #fca5a5 !important;
}
.bigstep-ai-app .bigstep-ai-context-divider,
.bigstep-ai-context-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 20%, rgba(255, 255, 255, .08) 80%, transparent) !important;
  margin: 4px 8px !important;
}
.bigstep-ai-app .bigstep-ai-context-divider[hidden],
.bigstep-ai-context-divider[hidden] {
  display: none !important;
}

@keyframes bs-ctx-in {
  from {
    opacity: 0;
    transform: scale(.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── 25. Plain shirt modal ───────────────────────────────────── */
.bigstep-ai-plain-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}
.bigstep-ai-plain-modal__card {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-xl);
  background: var(--bs-surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bigstep-ai-plain-modal__card strong { font-size: var(--t-lg); font-weight: 800; }
.bigstep-ai-plain-modal__card p      { font-size: var(--t-sm); color: var(--bs-muted); line-height: 1.6; }
.bigstep-ai-plain-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.bigstep-ai-plain-modal__actions .bigstep-ai-button { height: 44px; }

/* ── 26. Loading overlay — must beat anything the theme paints ─ */
.bigstep-ai-app .bigstep-ai-loading,
.bigstep-ai-loading {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(99,102,241,.18), transparent 32%),
    linear-gradient(180deg, rgba(2,6,23,.78), rgba(3,7,18,.88)) !important;
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}
.bigstep-ai-app .bigstep-ai-loading[hidden],
.bigstep-ai-loading[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-loading-box,
.bigstep-ai-loading-box {
  position: relative !important;
  width: min(386px, calc(100vw - 32px)) !important;
  padding: 30px 26px 28px !important;
  border: 1px solid rgba(167,139,250,.34) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(18,25,45,.94), rgba(8,13,26,.96)) padding-box,
    linear-gradient(135deg, rgba(99,102,241,.75), rgba(168,85,247,.55), rgba(34,211,238,.34)) border-box !important;
  box-shadow: 0 28px 78px rgba(0,0,0,.72), 0 0 70px rgba(99,102,241,.18) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--bs-text) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.bigstep-ai-app .bigstep-ai-loading-box::before,
.bigstep-ai-loading-box::before {
  content: none !important;
  display: none !important;
}
.bigstep-ai-loading-box > * {
  position: relative;
  z-index: 1;
}
.bigstep-ai-app .bigstep-ai-loading-box strong,
.bigstep-ai-loading-box strong {
  font-size: clamp(17px, 4.8vw, 20px) !important;
  font-weight: 900 !important;
  color: var(--bs-text) !important;
  margin: 0 !important;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #dbeafe, #c4b5fd 46%, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bigstep-ai-app .bigstep-ai-loading-box p,
.bigstep-ai-loading-box p {
  font-size: 13.5px !important;
  color: #c7d2fe !important;
  margin: 0 !important;
  min-height: 20px;
  line-height: 1.5;
}
.bigstep-ai-app .bigstep-ai-loading-style-badge,
.bigstep-ai-loading-style-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(125,211,252,.36) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.72), rgba(30,41,59,.46)) padding-box,
    linear-gradient(135deg, rgba(125,211,252,.72), rgba(167,139,250,.62)) border-box !important;
  color: #e0f2fe !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 24px rgba(56,189,248,.16) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bigstep-ai-app .bigstep-ai-loading-style-badge[hidden],
.bigstep-ai-loading-style-badge[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-spinner,
.bigstep-ai-spinner {
  display: block !important;
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at center, rgba(15,23,42,.92) 0 48%, transparent 50%),
    conic-gradient(from 0deg, #67e8f9, #6366f1, #a855f7, #67e8f9) !important;
  border-radius: 50% !important;
  animation: bs-spin .9s linear infinite !important;
  box-shadow: 0 0 34px rgba(99,102,241,.42), inset 0 0 20px rgba(255,255,255,.08);
}
.bigstep-ai-app .bigstep-ai-spinner::after,
.bigstep-ai-spinner::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 18px rgba(196,181,253,.82);
}
/* Progress bar appearing inside loading box */
.bigstep-ai-loading-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.bigstep-ai-loading-progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 55%;
  background: linear-gradient(90deg, transparent, #67e8f9 12%, #8b5cf6 55%, #f0abfc 84%, transparent);
  animation: bs-progress-slide 1.15s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.75));
}
@keyframes bs-progress-slide {
  0%   { left: -55%; }
  100% { left: 100%; }
}
@keyframes bs-loading-sheen {
  0%, 100% { transform: translateX(-18%); opacity: .72; }
  50% { transform: translateX(18%); opacity: 1; }
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-loading-box {
  width: min(402px, calc(100vw - 32px)) !important;
  border-radius: 20px !important;
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-loading-box::before {
  content: none !important;
  display: none !important;
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-loading-box::after {
  content: none !important;
  display: none !important;
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-spinner {
  width: 62px !important;
  height: 62px !important;
  box-shadow: 0 0 30px rgba(56,189,248,.32), inset 0 0 18px rgba(255,255,255,.08) !important;
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-loading-progress {
  height: 10px;
  padding: 2px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 24px rgba(99,102,241,.12);
}

.bigstep-ai-loading.is-loading-typo .bigstep-ai-loading-progress::after {
  top: 2px;
  bottom: 2px;
  left: -46%;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, #67e8f9 18%, #a78bfa 58%, #f0abfc 86%, transparent 100%);
  animation: bs-typo-progress-slide 1.35s cubic-bezier(.42, 0, .22, 1) infinite;
  filter: drop-shadow(0 0 8px rgba(125,211,252,.58));
}

@keyframes bs-typo-loading-field {
  0%, 100% { background-position: 50% 46%, 8% 8%, 0 0; }
  50% { background-position: 50% 34%, 24% 18%, 0 0; }
}

@keyframes bs-typo-progress-slide {
  0% { left: -46%; }
  100% { left: 100%; }
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-box {
  width: min(418px, calc(100vw - 32px)) !important;
  border-radius: 18px !important;
  border-color: rgba(196,181,253,.32) !important;
  background:
    linear-gradient(180deg, rgba(20,24,42,.95), rgba(10,13,28,.97)) padding-box,
    linear-gradient(135deg, rgba(129,140,248,.62), rgba(168,85,247,.70), rgba(217,70,239,.36)) border-box !important;
  box-shadow: 0 28px 78px rgba(0,0,0,.72), 0 0 72px rgba(168,85,247,.18) !important;
  gap: 13px !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-box::before {
  content: none !important;
  display: none !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-box::after {
  content: none !important;
  display: none !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-spinner {
  width: 76px !important;
  height: 76px !important;
  border: 1px solid rgba(196,181,253,.26) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(20,18,38,.94)) padding-box,
    linear-gradient(135deg, rgba(196,181,253,.62), rgba(168,85,247,.70), rgba(240,171,252,.40)) border-box !important;
  animation: none !important;
  box-shadow: 0 18px 42px rgba(24,16,48,.46), 0 0 30px rgba(168,85,247,.18) !important;
  overflow: hidden !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-spinner::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(196,181,253,.18), transparent 32%),
    linear-gradient(90deg, transparent 0 18%, rgba(240,171,252,.18) 18% 24%, transparent 24% 100%),
    linear-gradient(180deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 100% 100%, 18px 100%, 100% 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -20px 30px rgba(88,28,135,.18);
  animation: bs-ai-artwork-build 2.6s ease-in-out infinite;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-spinner::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 37%, rgba(255,255,255,.30) 47%, rgba(240,171,252,.20) 52%, transparent 64% 100%);
  animation: bs-ai-render-scan 1.75s cubic-bezier(.42, 0, .22, 1) infinite;
  box-shadow: none !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-box strong {
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  background: linear-gradient(135deg, #ede9fe, #c4b5fd 48%, #f0abfc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-style-badge {
  border-color: rgba(196,181,253,.36) !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.72), rgba(30,27,75,.46)) padding-box,
    linear-gradient(135deg, rgba(196,181,253,.62), rgba(168,85,247,.60)) border-box !important;
  color: #f5f3ff !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 0 18px rgba(168,85,247,.14) !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-progress {
  height: 10px !important;
  padding: 2px !important;
  background: rgba(15,23,42,.74) !important;
  border: 1px solid rgba(196,181,253,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 24px rgba(168,85,247,.12) !important;
}

.bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-progress::after {
  top: 2px;
  bottom: 2px;
  left: -42%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #a78bfa 18%, #8b5cf6 55%, #f0abfc 88%, transparent) !important;
  animation: bs-ai-progress-slide 1.35s cubic-bezier(.42, 0, .22, 1) infinite !important;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.62)) !important;
}

@keyframes bs-ai-field-breathe {
  0%, 100% { background-position: 50% 42%, 0 0; opacity: .88; }
  50% { background-position: 50% 28%, 0 0; opacity: 1; }
}

@keyframes bs-ai-artwork-build {
  0%, 100% { background-position: 0 0, 0 0, 0 0; opacity: .78; }
  50% { background-position: 0 0, 18px 0, 0 9px; opacity: 1; }
}

@keyframes bs-ai-render-scan {
  0% { transform: translateX(-72%); opacity: 0; }
  16% { opacity: .9; }
  100% { transform: translateX(72%); opacity: 0; }
}

@keyframes bs-ai-progress-slide {
  0% { left: -42%; }
  100% { left: 100%; }
}

/* ── 27. WC single product button ────────────────────────────── */
/*
 * This element is rendered on WooCommerce product pages, outside .bigstep-ai-app,
 * so CSS custom properties from the app's design tokens are not in scope.
 * All values use explicit fallbacks so the button works without the token context.
 */
.bigstep-ai-single-product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-lg, 14px);
  background: var(--bs-grd, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
  color: var(--bs-ink, #ffffff);
  font: inherit; font-size: var(--t-base, 14px); font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(99,102,241,.3);
  transition: opacity var(--dur, .16s), transform var(--dur, .16s);
  margin: 0 0 12px;
}
.bigstep-ai-single-product-button:hover { opacity: .9; transform: translateY(-1px); }

/* ── 27b. WC cart mockup thumbnail ──────────────────────────── */
.bigstep-ai-cart-mockup-thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
}

body.bigstep-plugin-surface :where(
  .cart-side-widget,
  .widget_shopping_cart,
  .widget_shopping_cart_content
) {
  border-color: rgba(129, 140, 248, .22) !important;
  background: #0b1222 !important;
  color: #d4dbea !important;
}

body.bigstep-plugin-surface :where(
  .cart-side-widget *,
  .widget_shopping_cart_content *,
  .woocommerce-mini-cart *
) {
  color: #d4dbea !important;
}

body.bigstep-plugin-surface :where(
  .cart-side-widget h2,
  .cart-side-widget h3,
  .cart-side-widget .widget-title,
  .cart-side-widget .product-title,
  .cart-side-widget .product-title a,
  .widget_shopping_cart_content .product-title,
  .widget_shopping_cart_content .product-title a,
  .woocommerce-mini-cart-item a:not(.remove)
) {
  color: #f8fafc !important;
}

body.bigstep-plugin-surface :where(
  .cart-side-widget .amount,
  .cart-side-widget bdi,
  .widget_shopping_cart_content .amount,
  .widget_shopping_cart_content bdi
) {
  color: #60a5fa !important;
  font-weight: 900 !important;
}

/* ── 28. Desktop-only toggle ─────────────────────────────────── */
.bigstep-ai-desktop-only { display: none; }
@media (min-width: 981px) {
  .bigstep-ai-desktop-only { display: inline-flex; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-floating-actions { display: flex; }
  /* Mobile info button (cloned next to logo) — only shown on mobile */
  .bigstep-ai-app .bigstep-ai-editor-info-mobile { display: none !important; }
}

/* ── 29. Mobile editor (≤ 980px) ─────────────────────────────── */
@media (max-width: 980px) {
  /* Editor fills viewport, canvas takes column 1 */
  .bigstep-ai-editor-main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr);
  }

  .bigstep-ai-editor-canvas-area {
    grid-column: 1;
    grid-row: 1;
    padding: 10px 10px 0;
    justify-content: flex-start;
    padding-bottom: calc(var(--toolbar-m) + 6px);
  }

  /* Canvas scales to fit available height; --bigstep-editor-size is set by zoom controls */
  .bigstep-ai-canvas-wrap {
    width: min(
      var(--bigstep-editor-size, 520px),
      calc(100dvh - var(--topbar-h) - var(--toolbar-m) - 100px),
      calc(100vw - 20px)
    );
    box-shadow: 0 2px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06);
  }

  .bigstep-ai-side-tabs--bottom { width: 100%; max-width: calc(100vw - 20px); }

  /* Canvas actions: reset desktop formula that uses sidebar/panel widths (would go negative) */
  .bigstep-ai-canvas-actions { max-width: calc(100vw - 20px); }

  /* Floating bottom toolbar — full-width scrollable flex row */
  .bigstep-ai-tool-grid--menu {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: var(--toolbar-m);
    padding: 4px 6px;
    gap: 6px;
    background: var(--bs-surface);
    border-top: 1px solid var(--bs-border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bigstep-ai-tool-grid--menu::-webkit-scrollbar { display: none; }

  .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    height: calc(var(--toolbar-m) - 10px);
    padding: 5px 3px;
    font-size: var(--t-xs);
    line-height: 1.05;
    border-radius: var(--r-md);
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0 auto;
  }

  /* Bottom sheet panels */
  .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
  .bigstep-ai-tool-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--toolbar-m);
    z-index: 100;
    width: 100%;
    max-height: min(56dvh, 450px);
    height: auto;
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--bs-border-2);
    border-bottom: 0;
    padding: 26px 14px 14px;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 32px rgba(0,0,0,.4);
    animation: bs-sheet-up var(--dur) var(--ease);
  }
  /* Drag pill */
  .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before,
  .bigstep-ai-tool-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--bs-border-2);
  }

  /* Topbar compact */
  .bigstep-ai-editor-topbar { height: 52px; padding: 0 12px; }
  .bigstep-ai-editor-topbar .bigstep-ai-brand-logo { height: 24px; max-width: 88px; }
  /* Price pill — compact on mobile: hide label, keep price number */
  .bigstep-ai-price-pill { padding: 4px 8px; gap: 0; border: none; background: transparent; }
  .bigstep-ai-price-pill span   { display: none; }
  .bigstep-ai-price-pill strong { font-size: var(--t-sm); color: var(--bs-text); font-weight: 700; }
  [data-bigstep-ai-cart]    { height: 36px; padding: 0 14px; font-size: var(--t-sm); }

  /* Canvas action bar — icon-only on mobile */
  .bigstep-ai-top-button span { display: none; }
  .bigstep-ai-top-button {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bigstep-ai-toolbar-sep { display: none; }
  .bigstep-ai-download-mockup { display: none; }

  /* Tách nền — show label + accent on mobile so it's easy to find */
  .bigstep-ai-btn-rmbg {
    width: auto;
    padding: 0 10px;
    gap: 5px;
    background: rgba(99,102,241,.2);
    border-color: var(--bs-accent);
    color: #c7d2fe;
    font-weight: 700;
  }
  .bigstep-ai-btn-rmbg span { display: inline; }

  /* Layer row fits within panel (panel now has 14px side padding) */
  .bigstep-ai-layer-row {
    grid-template-columns: 16px 32px 1fr auto;
    gap: 4px;
    padding: 5px 8px;
  }

  /* Text bar — compact on mobile */
  .bigstep-ai-text-bar { padding: 6px 10px; gap: 4px; }
  .bigstep-ai-text-bar-label--range input[type="range"] { width: 60px; }
  .bigstep-ai-text-bar-select { max-width: 110px; }
  /* Color swatch — hide native oval, show tappable square */
  .bigstep-ai-color-swatch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .bigstep-ai-color-swatch {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    border: 2px solid var(--bs-border-2);
    flex-shrink: 0;
    cursor: pointer;
  }
  .bigstep-ai-color-swatch-wrap input[type="color"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
  }

  /* Floating elements hidden on mobile */
  .bigstep-ai-floating-actions { display: none; }

  /* Product picker full width, clear bottom toolbar */
  .bigstep-ai-product-picker {
    top: 54px; left: 10px; right: 10px;
    transform: none;
    width: auto;
    max-height: calc(100dvh - 54px - var(--toolbar-m) - 8px);
    overflow: hidden auto;
    padding: 16px;
  }
  .bigstep-ai-product-card-grid { grid-template-columns: 1fr; }
  .bigstep-ai-product-card { grid-template-columns: 72px 1fr; gap: 10px; }
  .bigstep-ai-product-thumb { width: 72px; height: 72px; }

}

/* ── 30. Touch optimizations ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .bigstep-ai-app * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* === Tap targets — đảm bảo tối thiểu 44×44 cho ngón tay người lớn ===
   * Apple HIG: 44pt. Material: 48dp. Mặc định cũ ~36px → khó touch chính xác. */
  .bigstep-ai-app .bigstep-ai-top-button {
    width: 44px !important;
    height: 44px !important;
  }
  .bigstep-ai-app .bigstep-ai-zoom-controls button {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
  .bigstep-ai-app .bigstep-ai-zoom-controls span { min-width: 56px; text-align: center; }
  .bigstep-ai-app .bigstep-ai-side-tabs button {
	height: auto !important;
	min-height: 0 !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: var(--t-sm) !important;
  }
  .bigstep-ai-app .bigstep-ai-editor-icon-button {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .bigstep-ai-app .bigstep-ai-style-chips button {
    min-height: 38px;
    padding: 8px 14px;
  }
  .bigstep-ai-app .bigstep-ai-text-template-grid button {
    min-height: 44px;
  }

  /* === Layer row — full-width tap target === */
  .bigstep-ai-app .bigstep-ai-layer-row {
    min-height: 52px !important;
    padding: 8px 10px !important;
  }
  .bigstep-ai-app .bigstep-ai-layer-row button {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* === Color swatches & color pickers === */
  .bigstep-ai-app .bigstep-ai-swatch {
    min-height: 44px;
    padding: 8px 12px;
  }
  .bigstep-ai-app .bigstep-ai-swatch-dot {
    width: 22px !important;
    height: 22px !important;
  }
  .bigstep-ai-app .bigstep-ai-color-swatch {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .bigstep-ai-app .bigstep-ai-color-swatch-wrap {
    min-height: 44px;
    padding: 4px;
  }

  /* === Range sliders — to lớn cho thumb dễ kéo === */
  .bigstep-ai-app input[type="range"] {
    height: 36px;
    accent-color: var(--bs-accent);
  }
  .bigstep-ai-app input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .bigstep-ai-app input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* === Inputs — 16px để iOS không auto-zoom khi focus.
   * QUAN TRỌNG: <select> KHÔNG cần 16px (iOS không zoom select), nên giảm
   * xuống 13px để dấu tiếng Việt ("Mặc định", "Tương phản"…) không bị
   * truncate trong dropdown cỡ nhỏ ở text-bar / image-bar. */
  .bigstep-ai-app input[type="text"],
  .bigstep-ai-app input[type="number"],
  .bigstep-ai-app input[type="search"],
  .bigstep-ai-app input[type="tel"],
  .bigstep-ai-app input[type="email"],
  .bigstep-ai-app textarea {
    font-size: 16px !important;
  }
  .bigstep-ai-app input[type="number"] {
    min-height: 40px;
  }
  .bigstep-ai-app select {
    min-height: 40px;
    padding: 8px 26px 8px 10px;
    font-size: 13px !important;
  }
  /* Selects trong panel form (Text panel, AI panel…) cần đọc rõ → 15px */
  .bigstep-ai-app .bigstep-ai-tool-panel select {
    font-size: 15px !important;
  }

  /* === Text-bar dưới canvas — control to hơn để dễ touch === */
  .bigstep-ai-app .bigstep-ai-text-bar { padding: 10px 12px; gap: 8px; }
  .bigstep-ai-app .bigstep-ai-text-bar-select {
    min-height: 36px !important;
    max-width: 170px !important;
    font-size: 13px !important;
    padding-right: 24px !important;
  }
  /* Image-bar selects: cần rộng hơn để chứa "Mặc định" / "Tương phản" */
  .bigstep-ai-app .bigstep-ai-image-bar .bigstep-ai-text-bar-select,
  .bigstep-ai-app .bigstep-ai-image-bar select {
    min-width: 130px !important;
    max-width: 180px !important;
    font-size: 13px !important;
  }
  /* Label trong text-bar / image-bar — chữ nhỏ gọn, không chiếm chỗ */
  .bigstep-ai-app .bigstep-ai-text-bar-label {
    font-size: 11px !important;
  }
  .bigstep-ai-app .bigstep-ai-text-bar .bigstep-ai-tool {
    width: 40px !important;
    height: 36px !important;
  }
  .bigstep-ai-app .bigstep-ai-text-bar input[type="number"] {
    min-height: 36px !important;
  }
  .bigstep-ai-app .bigstep-ai-text-bar-label--range input[type="range"] {
    width: 100px !important;
    height: 36px;
  }
  .bigstep-ai-app .bigstep-ai-image-bar .bigstep-ai-tool[data-image-erase-toggle],
  .bigstep-ai-app .bigstep-ai-image-bar .bigstep-ai-image-reset-main,
  .bigstep-ai-app .bigstep-ai-image-bar .bigstep-ai-image-crop-controls .bigstep-ai-tool {
    width: auto !important;
    min-width: 92px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  /* === Bottom sheet — drag handle to và rõ hơn === */
  .bigstep-ai-app .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before,
  .bigstep-ai-app .bigstep-ai-tool-panel::before {
    width: 48px !important;
    height: 5px !important;
    top: 10px !important;
    background: var(--bs-border-2) !important;
    opacity: .9;
  }
  /* Tăng vùng pad-bottom cho safe-area iPhone notch + dễ scroll cuối panel */
  .bigstep-ai-app .bigstep-ai-tool-panel {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 12px)) !important;
    max-height: min(70dvh, 540px) !important;
  }
  .bigstep-ai-app .bigstep-ai-tool-grid--menu {
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  /* === Quick color picker — chip to hơn để dễ nhấn === */
  .bigstep-ai-app .bigstep-ai-quick-color-btn {
    min-height: 44px !important;
    padding: 8px 14px !important;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-btn .bigstep-ai-quick-color-dot {
    width: 22px !important;
    height: 22px !important;
  }

  /* === Image bar — đồng bộ với text-bar === */
  .bigstep-ai-app .bigstep-ai-image-bar select,
  .bigstep-ai-app .bigstep-ai-image-bar input[type="range"] {
    min-height: 36px;
  }

  /* === Buttons primary/secondary — chuẩn 44px === */
  .bigstep-ai-app .bigstep-ai-button {
    min-height: 44px;
  }
  .bigstep-ai-app .bigstep-ai-tool {
    min-height: 40px;
  }

  /* === Product cards — vùng tap rộng hơn, dễ chọn === */
  .bigstep-ai-app .bigstep-ai-product-card {
    min-height: 64px;
    padding: 14px !important;
  }

  /* === Canvas — cấm page bounce khi đang thao tác fabric, nhưng giữ
   * khả năng scroll khi canvas zoom lớn hơn wrap. touch-action:none chỉ
   * trên <canvas> để fabric độc quyền xử lý gesture; wrap vẫn pan-scroll
   * được khi cần. */
  .bigstep-ai-app #bigstep-ai-canvas,
  .bigstep-ai-app .canvas-container {
    touch-action: none !important;
  }
  .bigstep-ai-app .bigstep-ai-canvas-scroll,
  .bigstep-ai-app .bigstep-ai-canvas-wrap {
    overscroll-behavior: contain;
  }
  /* Body cuộn được, nhưng panel/canvas thì không lan ra ngoài */
  .bigstep-ai-app .bigstep-ai-tool-panel {
    overscroll-behavior: contain;
  }

  /* === Form swatch grid — cell to hơn === */
  .bigstep-ai-app .bigstep-ai-swatch-grid {
    gap: 8px;
  }

  /* === Tăng dáng cho close button / collapse === */
  .bigstep-ai-app [data-panel-close],
  .bigstep-ai-app [data-history-toggle] {
    min-height: 44px;
  }
}

/* Touch-only refinement: hide hover-only affordances that confuse on tap */
@media (hover: none) and (pointer: coarse) {
  .bigstep-ai-app *:hover { transition: none; }
}

/* ── 31. Keyframes ───────────────────────────────────────────── */
@keyframes bs-spin {
  to { transform: rotate(360deg); }
}
@keyframes bs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.92); }
}
@keyframes bs-sheet-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── 32. Tablet (981px–1199px) ───────────────────────────────── */
@media (min-width: 981px) and (max-width: 1199px) {
  .bigstep-ai-app[data-editor-mode="editor"] {
    --sidebar-w: 64px;
    --panel-w:   300px;
  }
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool { font-size: 10px; height: 50px; }
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg { width: 16px; height: 16px; }
  /* Topbar — slim down so the price pill + cart button still fit */
  .bigstep-ai-editor-topbar { padding: 0 10px; }
  .bigstep-ai-price-pill { padding: 4px 8px; }
  .bigstep-ai-price-pill strong { font-size: var(--t-md); }
  [data-bigstep-ai-cart] { padding: 0 14px; height: 36px; }
}

/* ── 33. Small mobile (≤ 380px) ──────────────────────────────── */
@media (max-width: 380px) {
  .bigstep-ai-editor-topbar { padding: 0 8px; gap: 4px; }
  .bigstep-ai-editor-topbar .bigstep-ai-brand-logo { height: 20px; max-width: 60px; }
  .bigstep-ai-editor-right { gap: 6px; }
  [data-bigstep-ai-cart] { padding: 0 10px; font-size: 11px; }
  [data-bigstep-ai-cart] svg { width: 14px; height: 14px; }
  /* Hide "Tải mockup" label even on small mobile - just icon */
  .bigstep-ai-top-button { width: 32px; height: 32px; padding: 0; }
  /* Bottom toolbar — keep 6 main items minimum visible */
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool { min-width: 48px; max-width: 56px; font-size: 9px; }
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg { width: 18px; height: 18px; }
  /* Compact mode: narrow padding */
  .bigstep-ai-generator-left,
  .bigstep-ai-generator-right { padding: 16px 12px; }
  .bigstep-ai-gen-title { font-size: clamp(20px, 6vw, 26px); }
  /* History grid — switch to 2 columns on tiny screens */
  .bigstep-ai-history-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 34. Landscape mobile ────────────────────────────────────── */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  /* In landscape we can free up vertical space by collapsing the topbar */
  .bigstep-ai-editor-topbar { height: 44px; }
  .bigstep-ai-app[data-editor-mode="editor"] { --topbar-h: 44px; }
  .bigstep-ai-app[data-editor-mode="editor"] { --toolbar-m: 56px; }
  /* Canvas — fit available height in landscape */
  .bigstep-ai-canvas-wrap {
    width: min(
      var(--bigstep-editor-size, 520px),
      calc(100dvh - 44px - 56px - 50px),
      calc(100vw - 20px)
    );
  }
  /* Tool sheets — limit height in landscape */
  .bigstep-ai-tool-panel { max-height: min(60dvh, 320px); }
}

/* ── 35. iPad portrait fine tuning ───────────────────────────── */
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
  /* iPad portrait sits in mobile-mode but we want bigger touch targets */
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool { min-width: 64px; max-width: 80px; font-size: var(--t-sm); height: calc(var(--toolbar-m) - 8px); }
  .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg { width: 22px; height: 22px; }
  .bigstep-ai-editor-topbar { height: 60px; }
  .bigstep-ai-app[data-editor-mode="editor"] { --topbar-h: 60px; }
  .bigstep-ai-editor-topbar .bigstep-ai-brand-logo { height: 28px; max-width: 110px; }
  /* Bottom sheet — wider on tablet */
  .bigstep-ai-tool-panel { max-height: min(50dvh, 480px); }
}

/* ── 36. Standalone editor — full-screen surface ─────────────── */
body.bigstep-ai-standalone-editor {
  margin: 0;
  background: #080b12;
  overflow: hidden;
  overscroll-behavior: none;
}
body.bigstep-ai-standalone-editor .bigstep-ai-standalone-host {
  position: fixed;
  inset: 0;
  z-index: 0;
}
body.bigstep-ai-standalone-editor .bigstep-ai-standalone-host > .bigstep-ai-app[data-editor-mode="editor"] {
  position: relative !important;
  inset: auto !important;
  height: 100dvh;
  width: 100vw;
  z-index: 0;
}
body.bigstep-ai-standalone-editor #wpadminbar,
body.bigstep-ai-standalone-editor header.site-header,
body.bigstep-ai-standalone-editor footer.site-footer,
body.bigstep-ai-standalone-editor #masthead,
body.bigstep-ai-standalone-editor #colophon,
body.bigstep-ai-standalone-editor .site-branding,
body.bigstep-ai-standalone-editor .skip-link {
  display: none !important;
}

/* ── 37. iOS Safari safe-area insets ─────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 980px) {
    .bigstep-ai-tool-grid--menu {
      padding-bottom: max(4px, env(safe-area-inset-bottom));
      height: calc(var(--toolbar-m) + env(safe-area-inset-bottom));
    }
    .bigstep-ai-editor-canvas-area {
      padding-bottom: calc(var(--toolbar-m) + env(safe-area-inset-bottom) + 6px);
    }
    .bigstep-ai-tool-panel,
    .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel {
      bottom: calc(var(--toolbar-m) + env(safe-area-inset-bottom));
    }
  }
}

/* ── 38. Reduced motion — keep spinner/loading active so user still sees feedback */
/* Waiting hero: make the source -> AI crossfade obvious under the progress overlay. */
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf {
  background: #050816;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf .bigstep-ai-remix-fit {
  position: absolute;
  inset: 0;
  opacity: 1;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-after {
  animation: bigstep-ai-remix-cf-after-wait 4.2s ease-in-out infinite;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-before {
  animation: bigstep-ai-remix-cf-before-wait 4.2s ease-in-out infinite;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf .bigstep-ai-remix-fit-img {
  object-fit: cover;
  padding: 0;
  filter: saturate(1.08) contrast(1.04);
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf .bigstep-ai-remix-fit-bg {
  display: block;
  object-fit: cover;
  filter: blur(18px) saturate(1.18) brightness(.72);
  transform: scale(1.14);
  opacity: .62;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-label {
  z-index: 5;
  min-width: 46px;
  height: 22px;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-label i {
  padding: 3px 10px;
  border: 1px solid rgba(196,181,253,.28);
  background: rgba(7,10,22,.76);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 0 18px rgba(139,92,246,.18);
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-label .is-before {
  animation: bigstep-ai-remix-cf-before-wait 4.2s ease-in-out infinite;
}
.bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-label .is-after {
  animation: bigstep-ai-remix-cf-after-label-wait 4.2s ease-in-out infinite;
}
@keyframes bigstep-ai-remix-cf-before-wait {
  0%, 30% { opacity: 1; transform: scale(1.015); }
  48%, 82% { opacity: 0; transform: scale(1.075); }
  100% { opacity: 1; transform: scale(1.015); }
}
@keyframes bigstep-ai-remix-cf-after-wait {
  0%, 30% { opacity: .12; transform: scale(1.08); }
  48%, 82% { opacity: 1; transform: scale(1.015); }
  100% { opacity: .12; transform: scale(1.08); }
}
@keyframes bigstep-ai-remix-cf-after-label-wait {
  0%, 30% { opacity: 0; transform: translateY(3px); }
  48%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Under reduced-motion collapse decorative animations to instant, but keep
     "system-busy" indicators (spinner, pulse, loading overlays, remix/typo
     generation UI) animating — a frozen "generating…" screen reads as broken.
     Individual overrides may then slow them further for less-jarring motion. */
  .bigstep-ai-app *:not(.bigstep-ai-spinner):not(.bigstep-ai-pulse):not(.bigstep-ai-loading):not(.bigstep-ai-loading *):not(.bigstep-ai-remix-panel-overlay):not(.bigstep-ai-remix-panel-overlay *):not(.bigstep-ai-remix-gen-progress):not(.bigstep-ai-remix-gen-progress *),
  .bigstep-ai-app *:not(.bigstep-ai-spinner):not(.bigstep-ai-pulse):not(.bigstep-ai-loading):not(.bigstep-ai-loading *):not(.bigstep-ai-remix-panel-overlay):not(.bigstep-ai-remix-panel-overlay *):not(.bigstep-ai-remix-gen-progress):not(.bigstep-ai-remix-gen-progress *)::before,
  .bigstep-ai-app *:not(.bigstep-ai-spinner):not(.bigstep-ai-pulse):not(.bigstep-ai-loading):not(.bigstep-ai-loading *):not(.bigstep-ai-remix-panel-overlay):not(.bigstep-ai-remix-panel-overlay *):not(.bigstep-ai-remix-gen-progress):not(.bigstep-ai-remix-gen-progress *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 39. High-DPI canvas crispness ───────────────────────────── */
.bigstep-ai-canvas-wrap canvas {
  image-rendering: auto;
  image-rendering: smooth;
}

/* ── 40. Print-ready hide ────────────────────────────────────── */
@media print {
  .bigstep-ai-app { display: none !important; }
}

/* =============================================================
   ── 41. v1.0.22 — Comprehensive UI repair pack ─────────────
   Tackles user-reported issues:
   #1  AI generate button styling lost
   #2  Color pickers ugly / not synced across panels
   #3  Remove-bg button clipped on mobile
   #4  Toolbar misaligned
   #5  Text bar not horizontally scrollable on narrow viewports
   #7  Logo hidden under topbar buttons on mobile
   #8  Editor header layout broken
   #9  Upload zone dashed border invisible (theme override)
   #10 Asset thumbnails (template/upload/AI history) squished — must be square
   #11 Product picker button overflow / extra theme button paint
   ============================================================= */

/* ── 41.1  AI generate button — full primary gradient, big tap target */
.bigstep-ai-app .bigstep-ai-generate-btn,
.bigstep-ai-app button.bigstep-ai-generate-btn,
.bigstep-ai-app .bigstep-ai-tool.bigstep-ai-generate-btn,
.bigstep-ai-app .bigstep-ai-tool--primary.bigstep-ai-generate-btn {
  width: 100% !important;
  min-width: 0;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  background-color: #6366f1 !important;
  color: #ffffff !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: var(--t-md) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(99,102,241,.32) !important;
  cursor: pointer !important;
  transition: opacity .16s, transform .16s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 4px 0 !important;
}
.bigstep-ai-app .bigstep-ai-generate-btn:hover {
  opacity: .92 !important;
  transform: translateY(-1px) !important;
}
.bigstep-ai-app .bigstep-ai-generate-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.bigstep-ai-app .bigstep-ai-generate-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: #ffffff !important;
}

/* ── 41.2  Unified color picker swatch — clickable square, no native paint */
.bigstep-ai-app .bigstep-ai-color-swatch-wrap,
.bigstep-ai-app [data-color-swatch-wrap],
.bigstep-ai-app [data-stroke-swatch-wrap] {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-md);
  background: var(--bs-surface-3) !important;
  cursor: pointer;
  transition: border-color .16s;
}
.bigstep-ai-app .bigstep-ai-color-swatch-wrap:hover,
.bigstep-ai-app [data-color-swatch-wrap]:hover,
.bigstep-ai-app [data-stroke-swatch-wrap]:hover {
  border-color: var(--bs-accent) !important;
}
.bigstep-ai-app .bigstep-ai-color-swatch,
.bigstep-ai-app [data-color-swatch],
.bigstep-ai-app [data-text-stroke-swatch],
.bigstep-ai-app [data-obj-fill-swatch],
.bigstep-ai-app [data-obj-stroke-swatch] {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background-clip: padding-box;
  pointer-events: none;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
/* Hidden-overlay color inputs — inside any swatch wrap; clicking the wrap delegates to the input. */
.bigstep-ai-app [data-color-swatch-wrap] input[type="color"],
.bigstep-ai-app [data-stroke-swatch-wrap] input[type="color"],
.bigstep-ai-app .bigstep-ai-color-swatch-wrap input[type="color"],
.bigstep-ai-app input[type="color"][data-text-color],
.bigstep-ai-app input[type="color"][data-text-stroke-color],
.bigstep-ai-app input[type="color"][data-obj-fill-input],
.bigstep-ai-app input[type="color"][data-obj-stroke-input] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Visible standalone color inputs (no wrap/swatch sibling) — render as a
   neat colored chip the user can click directly. */
.bigstep-ai-app input[type="color"][data-shape-fill],
.bigstep-ai-app input[type="color"][data-template-text-color],
.bigstep-ai-app input[type="color"][data-template-shape-color] {
  position: static !important;
  display: inline-block !important;
  width: 44px !important;
  height: 32px !important;
  min-width: 44px !important;
  min-height: 32px !important;
  max-width: 44px !important;
  max-height: 32px !important;
  padding: 2px !important;
  margin: 0 !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  /* IMPORTANT: keep native appearance so the OS color picker UI works */
  -webkit-appearance: auto !important;
  appearance: auto !important;
  box-shadow: none !important;
  inset: auto !important;
  pointer-events: auto !important;
}
.bigstep-ai-app input[type="color"][data-shape-fill]::-webkit-color-swatch-wrapper,
.bigstep-ai-app input[type="color"][data-template-text-color]::-webkit-color-swatch-wrapper,
.bigstep-ai-app input[type="color"][data-template-shape-color]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 4px;
}
.bigstep-ai-app input[type="color"][data-shape-fill]::-webkit-color-swatch,
.bigstep-ai-app input[type="color"][data-template-text-color]::-webkit-color-swatch,
.bigstep-ai-app input[type="color"][data-template-shape-color]::-webkit-color-swatch {
  border: 0;
  border-radius: 4px;
}
.bigstep-ai-app input[type="color"][data-shape-fill]::-moz-color-swatch,
.bigstep-ai-app input[type="color"][data-template-text-color]::-moz-color-swatch,
.bigstep-ai-app input[type="color"][data-template-shape-color]::-moz-color-swatch {
  border: 0;
  border-radius: 4px;
}

/* Make sure the "Màu nền/shape" label lines up beside its color chip */
.bigstep-ai-app [data-element-section="shape"] label,
.bigstep-ai-app [data-tool-panel="elements"] > label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .05em;
}

/* ── 41.3  Remove-bg button — never clipped on mobile */
@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-canvas-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: calc(100vw - 16px) !important;
    gap: 5px !important;
    padding: 0 4px !important;
  }
  .bigstep-ai-app .bigstep-ai-btn-rmbg {
    order: -1;
    width: auto !important;
    height: 36px !important;
    padding: 0 12px !important;
    background: rgba(99,102,241,.18) !important;
    border-color: var(--bs-accent) !important;
    color: #c7d2fe !important;
    font-weight: 700 !important;
  }
  .bigstep-ai-app .bigstep-ai-btn-rmbg span {
    display: inline !important;
    font-size: var(--t-xs) !important;
  }
}

/* ── 41.4  Toolbar alignment — centered, intrinsic width, no zoom link */
.bigstep-ai-app .bigstep-ai-canvas-actions {
  max-width: 100% !important;
  width: auto !important;
  margin: 0 auto;
}

/* ── 41.5  Text bar — horizontally scrollable when content too wide */
.bigstep-ai-app .bigstep-ai-text-bar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border) transparent;
  max-width: 100% !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
.bigstep-ai-app .bigstep-ai-text-bar::-webkit-scrollbar { height: 4px; }
.bigstep-ai-app .bigstep-ai-text-bar::-webkit-scrollbar-thumb { background: var(--bs-border-2); border-radius: 2px; }
.bigstep-ai-app .bigstep-ai-text-bar > * { flex-shrink: 0 !important; }

/* ── 41.7 + 41.8  Mobile header — logo always visible, hide non-essential icons */
@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-editor-topbar {
    padding: 0 10px !important;
    gap: 6px !important;
    height: 52px !important;
  }
  .bigstep-ai-app .bigstep-ai-editor-left {
    flex: 0 1 auto !important;
    min-width: 60px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    height: 26px !important;
    max-width: 96px !important;
    object-fit: contain !important;
  }
  .bigstep-ai-app .bigstep-ai-editor-right {
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-left: auto !important;
  }
  /* Hide redundant home button (logo IS the home link) and clear button on
   * mobile. The right-side info button is also hidden — we show the mobile
   * info button next to the logo instead (see below). */
  .bigstep-ai-app .bigstep-ai-editor-right .bigstep-ai-editor-icon-button[aria-label="Về trang chủ"],
  .bigstep-ai-app .bigstep-ai-editor-right [data-panel-toggle="info"],
  .bigstep-ai-app .bigstep-ai-editor-right .bigstep-ai-clear-design {
    display: none !important;
  }
  /* Mobile info button — compact, right next to the logo */
  .bigstep-ai-app .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 4px !important;
    border-radius: 50% !important;
    color: var(--bs-text);
  }
  .bigstep-ai-app .bigstep-ai-editor-left { display: flex; align-items: center; }
  /* Compact price + cart so they fit on phones */
  .bigstep-ai-app .bigstep-ai-price-pill {
    padding: 2px 6px !important;
    line-height: 1.1 !important;
  }
  .bigstep-ai-app .bigstep-ai-price-pill strong {
    font-size: 13px !important;
    color: #a5b4fc !important;
    font-weight: 800 !important;
  }
  .bigstep-ai-app [data-bigstep-ai-cart] {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }
  .bigstep-ai-app [data-bigstep-ai-cart] svg { width: 14px !important; height: 14px !important; }
}
@media (max-width: 380px) {
  .bigstep-ai-app .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    height: 22px !important;
    max-width: 68px !important;
  }
  .bigstep-ai-app .bigstep-ai-price-pill {
    display: none !important;
  }
}

/* ── 41.9  Upload zone — visible dashed border, prominent */
.bigstep-ai-app .bigstep-ai-upload-zone {
  border: 2px dashed var(--bs-border-2) !important;
  border-radius: var(--r-lg) !important;
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  transition: border-color .16s, background .16s;
  position: relative;
}
.bigstep-ai-app .bigstep-ai-upload-zone:hover,
.bigstep-ai-app .bigstep-ai-upload-zone.is-drag-over {
  border-color: var(--bs-accent) !important;
  background: rgba(99,102,241,.08) !important;
}
.bigstep-ai-app .bigstep-ai-upload-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 28px 16px !important;
  cursor: pointer !important;
  color: var(--bs-muted) !important;
  text-align: center !important;
}
.bigstep-ai-app .bigstep-ai-upload-field svg { opacity: .6; width: 28px; height: 28px; }
.bigstep-ai-app .bigstep-ai-upload-field span {
  font-size: var(--t-sm) !important;
  line-height: 1.5 !important;
  color: var(--bs-text) !important;
}
.bigstep-ai-app .bigstep-ai-upload-field small {
  font-size: var(--t-xs) !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-weight: 600;
  letter-spacing: .01em;
  font-kerning: normal;
  color: var(--bs-muted) !important;
  opacity: .8;
}
.bigstep-ai-app .bigstep-ai-upload-field input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── 41.10  Asset thumbnails — strict 1:1 square. Theme cannot override */
.bigstep-ai-app .bigstep-ai-asset-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.bigstep-ai-app .bigstep-ai-asset-card {
  position: relative !important;
  display: block !important;
  /* asset-thumb child uses padding-top:100% so the card sizes from it */
}
.bigstep-ai-app .bigstep-ai-asset-thumb,
.bigstep-ai-app button.bigstep-ai-asset-thumb {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-md) !important;
  background: #f8fafc !important;
  background-image: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color .16s !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.bigstep-ai-app .bigstep-ai-asset-thumb:hover { border-color: var(--bs-accent) !important; }
.bigstep-ai-app .bigstep-ai-asset-thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
/* SVG / transparent images — contain, not cover */
.bigstep-ai-app .bigstep-ai-asset-thumb[data-type="svg"] img,
.bigstep-ai-app .bigstep-ai-asset-thumb[data-transparent] img {
  object-fit: contain !important;
}
.bigstep-ai-app .bigstep-ai-asset-thumb span {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 4px 6px !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Template design thumbnails — also strict square */
.bigstep-ai-app .bigstep-ai-template-design-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 12px 10px !important;
}
.bigstep-ai-app .bigstep-ai-template-design-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.bigstep-ai-app .bigstep-ai-template-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  padding-top: 100% !important;
  /* aspect-ratio doesn't always survive themes — padding-top:100% does. */
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-md) !important;
  background: var(--bs-surface-3) !important;
  background-image: none !important;
  overflow: hidden !important;
  transition: border-color .16s !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.bigstep-ai-app .bigstep-ai-template-thumb img {
  position: absolute !important;
  inset: 6px !important;
  width: calc(100% - 12px) !important;
  height: calc(100% - 12px) !important;
  object-fit: contain !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}
.bigstep-ai-app .bigstep-ai-template-crossfade {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}
.bigstep-ai-app .bigstep-ai-template-crossfade img {
  position: absolute !important;
  inset: 6px !important;
  width: calc(100% - 12px) !important;
  height: calc(100% - 12px) !important;
  object-fit: contain !important;
  opacity: 1 !important;
  animation: bigstep-template-front-fade 5.6s ease-in-out infinite !important;
}
.bigstep-ai-app .bigstep-ai-template-crossfade img.is-back {
  opacity: 0 !important;
  animation-name: bigstep-template-back-fade !important;
}
.bigstep-ai-app .bigstep-ai-template-crossfade em {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  z-index: 2 !important;
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .78) !important;
  color: #eef2ff !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24) !important;
}
@keyframes bigstep-template-front-fade {
  0%, 42%, 100% { opacity: 1; }
  50%, 92% { opacity: 0; }
}
@keyframes bigstep-template-back-fade {
  0%, 42%, 100% { opacity: 0; }
  50%, 92% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bigstep-ai-app .bigstep-ai-template-crossfade img {
    animation: none !important;
  }
  .bigstep-ai-app .bigstep-ai-template-crossfade img.is-back {
    opacity: 0 !important;
  }
}
.bigstep-ai-app .bigstep-ai-template-thumb span {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--bs-muted) !important;
  font-size: var(--t-xs) !important;
}

/* History grid in compact generator — fills full width of the left column,
   square thumbnails, responsive count via auto-fill */
.bigstep-ai-app .bigstep-ai-history,
.bigstep-ai-app .bigstep-ai-history-panel {
  width: 100% !important;
  max-width: 100% !important;
}
.bigstep-ai-app .bigstep-ai-history-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 2px 4px 0 !important;
  scrollbar-width: thin;
}
.bigstep-ai-app .bigstep-ai-history-grid::-webkit-scrollbar { width: 5px; }
.bigstep-ai-app .bigstep-ai-history-grid::-webkit-scrollbar-thumb { background: var(--bs-border-2); border-radius: 3px; }
@media (max-width: 480px) {
  .bigstep-ai-app .bigstep-ai-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ── COMPACT HISTORY: BREAKOUT khi mở ──────────────────────────
   Khi user bấm "Lịch sử ảnh" trong compact, panel mặc định bị bóp
   trong cột trái (5/9 width). Breakout sang cột phải để cân đối
   layout và hiển thị nhiều thumbnail hơn.
   Cách làm: dùng position-relative trên .bigstep-ai-history (parent
   ở cột trái), panel position-absolute với width tính bằng calc()
   dựa trên ratio grid 5fr 4fr + gap 32px.
   Chỉ áp dụng > 840px (desktop). Mobile vẫn stack vertical bình thường. */
@media (min-width: 841px) {
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-history {
    position: relative;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-history:has(.bigstep-ai-history-toggle[aria-expanded="true"]) .bigstep-ai-history-panel,
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-history-toggle[aria-expanded="true"] + .bigstep-ai-history-panel {
    position: relative;
    width: calc(200% + var(--compact-grid-gap)) !important;
    max-width: calc(200% + var(--compact-grid-gap)) !important;
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--r-md);
    padding: 12px;
    max-height: none;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.15);
    margin-top: 12px !important;
    animation: bsHistoryReveal .25s cubic-bezier(.16,1,.3,1);
  }
  @keyframes bsHistoryReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  /* Grid in breakout state — show 5-6 columns since space is wider */
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-history-toggle[aria-expanded="true"] + .bigstep-ai-history-panel .bigstep-ai-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    max-height: 220px !important;
  }
  /* Đảm bảo layout có đủ chỗ cho panel breakout ở dưới — chỉ tăng
     padding-bottom của LAYOUT (cả 2 cột), không phá sticky preview. */
  .bigstep-ai-app[data-editor-mode="compact"]:has(.bigstep-ai-history-toggle[aria-expanded="true"]) .bigstep-ai-generator-layout {
    padding-bottom: 24px;
    transition: padding-bottom .25s ease;
  }
}

/* Light theme: surface lighter for breakout panel */
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-history-toggle[aria-expanded="true"] + .bigstep-ai-history-panel {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(99,102,241,.15), 0 0 0 1px rgba(99,102,241,.2);
}

/* ── Custom font picker (preview + lazy load + search) ─────────
 * Thay <select> native vì native không hỗ trợ font preview hay
 * lazy load. Mỗi item render bằng chính font đó để user thấy ngay
 * hình dáng chữ trước khi chọn.
 */
.bigstep-ai-font-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}
.bigstep-ai-font-picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--r-sm);
  background: var(--bs-surface-3) !important;
  color: var(--bs-text) !important;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.bigstep-ai-font-picker__toggle:hover {
  border-color: var(--bs-accent);
}
.bigstep-ai-font-picker__toggle[aria-expanded="true"] {
  border-color: var(--bs-accent);
  box-shadow: var(--bs-glow);
}
.bigstep-ai-font-picker__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.bigstep-ai-font-picker__toggle svg {
  flex-shrink: 0;
  opacity: .7;
}
.bigstep-ai-font-picker__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  max-width: 360px;
  z-index: 9999;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.40);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 380px;
}
.bigstep-ai-font-picker__panel.is-floating {
  position: fixed;
  right: auto;
  z-index: 100000;
  min-width: 260px;
}
.bigstep-ai-font-picker__search {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--bs-border);
  background: var(--bs-surface-2);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.bigstep-ai-font-picker__search:focus {
  background: var(--bs-surface-3);
}
.bigstep-ai-font-picker__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-2) transparent;
}
.bigstep-ai-font-picker__list::-webkit-scrollbar { width: 6px; }
.bigstep-ai-font-picker__list::-webkit-scrollbar-track {
  background: transparent;
}
.bigstep-ai-font-picker__list::-webkit-scrollbar-thumb:hover {
  background: var(--bs-muted);
}
.bigstep-ai-font-picker__list::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.35);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.bigstep-ai-font-picker__item {
  padding: 10px 14px;
  font-size: 17px;
  line-height: 1.2;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.bigstep-ai-font-picker__item:hover {
  background: var(--bs-surface-2);
}
.bigstep-ai-font-picker__item.is-active {
  border-left-color: var(--bs-accent);
  background: var(--bs-surface-2);
}
.bigstep-ai-font-picker__empty {
  padding: 18px 14px;
  font-size: 13px;
  color: var(--bs-muted);
  text-align: center;
}
.bigstep-ai-font-picker__loading {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--bs-muted);
  text-align: center;
  border-top: 1px solid var(--bs-border);
  background: var(--bs-surface-2);
}
/* Trong text-bar floating: picker tự co theo bar */
.bigstep-ai-text-bar .bigstep-ai-font-picker {
  min-width: 140px;
}
.bigstep-ai-text-bar .bigstep-ai-font-picker__panel {
  right: auto;
}
@media (max-width: 980px) {
  .bigstep-ai-font-picker__panel.is-floating {
    min-width: 0;
    max-width: calc(100vw - 16px);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 56px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.05);
  }
  .bigstep-ai-font-picker__panel.is-floating .bigstep-ai-font-picker__search {
    min-height: 48px;
    font-size: 16px;
  }
  .bigstep-ai-font-picker__panel.is-floating .bigstep-ai-font-picker__item {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* ── AI prompt suggestions ───────────────────────────────────── */
.bigstep-ai-prompt-suggestions {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--bs-border-2);
  border-radius: var(--r-md);
  background: rgba(99,102,241,.06);
}
.bigstep-ai-prompt-suggestions__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-muted);
  text-transform: none;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.bigstep-ai-prompt-suggestions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-prompt-suggestion-chip {
  padding: 6px 10px;
  border: 1px solid var(--bs-border-2);
  border-radius: var(--r-pill);
  background: var(--bs-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
}
.bigstep-ai-app .bigstep-ai-prompt-suggestion-chip:hover {
  background: var(--bs-accent) !important;
  border-color: var(--bs-accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Swatch dot-only (chỉ hiện màu, không hiện tên — tên qua tooltip) ── */
.bigstep-ai-app .bigstep-ai-swatch.bigstep-ai-swatch--color-only {
  width: 44px !important;
  height: 44px !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--bs-border-2) !important;
  background: transparent !important;
  transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.bigstep-ai-app .bigstep-ai-swatch.bigstep-ai-swatch--color-only:hover {
  transform: scale(1.08);
  border-color: var(--bs-accent) !important;
}
.bigstep-ai-app .bigstep-ai-swatch.bigstep-ai-swatch--color-only.is-active {
  border-color: var(--bs-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.30), 0 2px 8px rgba(0,0,0,.30) !important;
  transform: scale(1.04);
}
.bigstep-ai-app .bigstep-ai-swatch.bigstep-ai-swatch--color-only .bigstep-ai-swatch-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.20);
}
/* Swatch grid for shirt_color → flex-wrap default (compact dùng row layout) */
.bigstep-ai-app .bigstep-ai-swatch-grid--color {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: unset !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch-grid--color {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  gap: 7px !important;
  max-height: 132px;
  overflow-y: auto;
  /* Ring is-active vẽ bằng box-shadow lan ra ngoài 4px — padding phải ≥5px
     để không bị overflow:auto cắt viền ở mép grid. */
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.35) transparent;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch-grid--color::-webkit-scrollbar { width: 6px; }
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch-grid--color::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.35);
  border-radius: 99px;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 3px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  overflow: visible !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only .bigstep-ai-swatch-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.20);
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only.is-active {
  box-shadow: 0 0 0 2px var(--bs-accent), 0 0 0 4px rgba(99,102,241,.25) !important;
  border: 0 !important;
}
@media (max-width: 720px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch-grid--color {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
    max-height: 148px;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-only {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
  }
}

/* ── Draggable panel handle (desktop only) ─────────────────────
 * Cho phép user kéo text-bar / image-bar / obj-toolbar đến vị trí khác.
 * Mobile không hiện (toolbar full-width dưới canvas đã hợp lý).
 */
.bigstep-ai-app .bigstep-ai-panel-drag-handle {
  display: none;
}
@media (min-width: 981px) {
  .bigstep-ai-app .bigstep-ai-panel-drag-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    height: 26px;
    margin: -6px 0 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--bs-surface-3);
    color: var(--bs-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .08em;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: background .12s, color .12s;
  }
  .bigstep-ai-app .bigstep-ai-panel-drag-handle:hover {
    background: var(--bs-surface-2);
    color: var(--bs-text);
  }
  .bigstep-ai-app .bigstep-ai-panel-drag-handle:active,
  .bigstep-ai-app .is-dragging .bigstep-ai-panel-drag-handle {
    cursor: grabbing;
    background: var(--bs-accent);
    color: #fff;
  }
  .bigstep-ai-app .is-dragging {
    opacity: .92;
    box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
  }
}

/* ── 41.11  Product picker — clean, no extra theme paint, no outer frame */
.bigstep-ai-app .bigstep-ai-product-picker {
  background: var(--bs-surface) !important;
  background-image: none !important;
  border: 0 !important;
}
.bigstep-ai-app .bigstep-ai-product-card,
.bigstep-ai-app button.bigstep-ai-product-card {
  display: grid !important;
  /* Trước là 88px nhưng thumb bên trong width 100px → tràn cell → meta bị
   * đẩy ra ngoài → product picker hiển thị không hết. Đặt = thumb thật. */
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: var(--r-lg) !important;
  background: var(--bs-surface-2) !important;
  background-image: none !important;
  color: var(--bs-text) !important;
  font: inherit !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background .16s !important;
  /* IMPORTANT: no outline ring even when active — the white card thumbnail
     already conveys "this is the selected product". The previous indigo
     border looked like a wasted frame around a single card. */
  outline: none !important;
}
.bigstep-ai-app .bigstep-ai-product-card:hover {
  background: var(--bs-surface-3) !important;
}
.bigstep-ai-app .bigstep-ai-product-card.is-active {
  background: var(--bs-surface-3) !important;
}
/* Subtle check indicator on active card instead of outer indigo frame */
.bigstep-ai-app .bigstep-ai-product-card.is-active::after {
  content: "\2713"; /* ✓ — escape unicode để không vỡ khi file bị lưu sai encoding */
  position: absolute;
  top: 10px;
  right: 14px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.bigstep-ai-app .bigstep-ai-product-card { position: relative !important; }
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-thumb {
  width: 84px !important;
  height: 84px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: var(--r-md) !important;
  background: var(--bs-surface-3) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta strong {
  font-size: var(--t-md) !important;
  font-weight: 700 !important;
  color: var(--bs-text) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta em {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  font-style: normal !important;
  font-size: var(--t-base) !important;
  color: #a5b4fc !important;
  font-weight: 700 !important;
}
/* Product picker close (×) button */
.bigstep-ai-app [data-product-picker-close],
.bigstep-ai-app button[data-product-picker-close] {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: 50% !important;
  background: var(--bs-surface-2) !important;
  background-image: none !important;
  color: var(--bs-muted) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  flex-shrink: 0 !important;
}
.bigstep-ai-app [data-product-picker-close]:hover {
  border-color: var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}

/* ── 41.12  Editor history grid (AI panel) — strict 2-col square thumbs */
.bigstep-ai-app [data-editor-history-grid],
.bigstep-ai-app [data-upload-history-grid] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
}

/* ── 41.13 Quota-exhausted modal — Zalo support CTA ─────────── */
.bigstep-ai-quota-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483640 !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: bs-quota-fade-in .22s ease-out !important;
}
.bigstep-ai-quota-modal.is-leaving {
  animation: bs-quota-fade-out .2s ease-in forwards !important;
}
.bigstep-ai-quota-card {
  width: min(440px, 100%) !important;
  padding: 28px 24px 22px !important;
  background: linear-gradient(180deg, rgba(99, 102, 241, .08), rgba(15, 18, 32, 0)) #0f1220 !important;
  background-image: linear-gradient(180deg, rgba(99, 102, 241, .08), rgba(15, 18, 32, 0)) !important;
  background-color: #0f1220 !important;
  border: 1px solid rgba(99, 102, 241, .25) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 4px 16px rgba(0, 0, 0, .4) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  color: #f1f5f9 !important;
  animation: bs-quota-card-in .26s cubic-bezier(.16, 1, .3, 1) !important;
}
.bigstep-ai-quota-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 4px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(245, 158, 11, .08)) !important;
  display: grid !important;
  place-items: center !important;
  color: #fbbf24 !important;
  flex-shrink: 0 !important;
}
.bigstep-ai-quota-card strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #f1f5f9 !important;
  margin: 0 !important;
}
.bigstep-ai-quota-text {
  font-size: 14px !important;
  color: #cbd5e1 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.bigstep-ai-quota-help {
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
  margin: 4px 0 0 !important;
  padding: 12px 14px !important;
  background: rgba(99, 102, 241, .1) !important;
  border-radius: 10px !important;
  border-left: 3px solid rgba(99, 102, 241, .6) !important;
  text-align: left !important;
}
.bigstep-ai-quota-help-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #a5b4fc !important;
  margin-bottom: 4px !important;
}
.bigstep-ai-quota-help strong {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}
.bigstep-ai-quota-actions {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.bigstep-ai-quota-actions .bigstep-ai-quota-cancel,
.bigstep-ai-quota-actions .bigstep-ai-quota-zalo,
.bigstep-ai-quota-modal button,
.bigstep-ai-quota-modal a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  transition: opacity .14s, transform .14s, background .14s !important;
}
.bigstep-ai-quota-cancel {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #cbd5e1 !important;
}
.bigstep-ai-quota-cancel:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #f1f5f9 !important;
}
.bigstep-ai-quota-zalo {
  border: 0 !important;
  background: #0068ff !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 104, 255, .35) !important;
}
.bigstep-ai-quota-zalo:hover {
  background: #0054d4 !important;
  transform: translateY(-1px) !important;
}
.bigstep-ai-quota-zalo svg {
  flex-shrink: 0 !important;
}

@keyframes bs-quota-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bs-quota-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bs-quota-card-in {
  from { transform: scale(.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}

/* ── 42. Toast notifications — push-style, top-right, auto-dismiss ─ */
.bigstep-ai-toast-container {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483600 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: none !important;
  max-width: calc(100vw - 32px) !important;
}
.bigstep-ai-toast {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 280px !important;
  max-width: 420px !important;
  padding: 12px 14px !important;
  background: #121817 !important;
  background-image: none !important;
  border: 1px solid #33403c !important;
  border-left: 3px solid #b6ff00 !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font: inherit !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.48), 0 0 0 1px rgba(182,255,0,.035) !important;
  pointer-events: auto !important;
  animation: bs-toast-in .26s cubic-bezier(.16,1,.3,1) !important;
}
.bigstep-ai-toast--success { border-left-color: #b6ff00 !important; }
.bigstep-ai-toast--error   { border-left-color: #ff6b6b !important; }
.bigstep-ai-toast--warning { border-left-color: #ffd166 !important; }
.bigstep-ai-toast--info    { border-left-color: #b6ff00 !important; }

.bigstep-ai-toast-icon {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.bigstep-ai-toast--success .bigstep-ai-toast-icon { background: rgba(182,255,0,.14); color: #c8ff4d; }
.bigstep-ai-toast--error   .bigstep-ai-toast-icon { background: rgba(255,107,107,.15); color: #ff9a9a; }
.bigstep-ai-toast--warning .bigstep-ai-toast-icon { background: rgba(255,209,102,.14); color: #ffe29a; }
.bigstep-ai-toast--info    .bigstep-ai-toast-icon { background: rgba(182,255,0,.14); color: #c8ff4d; }

.bigstep-ai-toast-text {
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
}
.bigstep-ai-toast-close {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8896aa !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.bigstep-ai-toast-close:hover { color: #f1f5f9 !important; background: rgba(255,255,255,.08) !important; }

.bigstep-ai-toast.is-leaving { animation: bs-toast-out .25s ease-in forwards !important; }

.bigstep-ai-drawing-notice {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid rgba(99,102,241,.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transform: translateX(-50%);
}
.bigstep-ai-drawing-notice__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(99,102,241,.22);
  color: #c4b5fd;
  font-weight: 900;
}
.bigstep-ai-drawing-notice__text {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.bigstep-ai-drawing-notice__exit {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

@keyframes bs-toast-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bs-toast-out {
  to { transform: translateX(24px); opacity: 0; }
}

@media (max-width: 600px) {
  .bigstep-ai-toast-container {
    top: auto !important;
    bottom: calc(var(--toolbar-m, 68px) + 12px) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    align-items: stretch !important;
  }
  .bigstep-ai-toast {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────────
 * 42. EDITOR LAYOUT REFINEMENTS (desktop ≥981px)
 *
 * Layout target:
 *   - canvas-actions (Undo/Redo/Delete/RmBg/Download) → horizontal bar at
 *     the TOP of the canvas-area (its default position; nothing to do).
 *   - Canvas mockup → centered in the canvas-area, aspect ratio preserved.
 *   - When user selects a TEXT or SHAPE layer, the contextual formatting
 *     bar (text-bar / obj-toolbar) docks as a vertical FLOATING PANEL on
 *     the RIGHT side of the canvas — uses the empty space next to the
 *     mockup. Controls are stacked vertically; full width selects/ranges.
 *
 * Mobile (<981px) keeps the bars below the canvas; image controls stack as
 * compact menus under their mode tabs.
 * ──────────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  /* canvas-area is the positioning context for the floating side panel */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
    position: relative;
  }

  /* Explicit hide for [hidden] — our `:not([hidden])` rule below has equal
   * specificity with the global `.bigstep-ai-app [hidden]` rule, but stronger
   * source-order, so without this guard the dock would show even when the
   * panel is supposed to be invisible. */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar[hidden],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar[hidden] {
    display: none !important;
  }

  /* ── Text + object toolbars become a vertical RIGHT-side panel ──
   * Only applies when the element is NOT hidden — text-bar is shown by
   * the JS only after a text/shape layer is selected. */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar:not([hidden]) {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 650 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;

    width: 230px !important;
    max-width: 230px !important;
    max-height: calc(100% - 80px) !important;

    padding: 14px !important;
    margin: 0 !important;
    border: 1px solid var(--bs-border) !important;
    border-top: 1px solid var(--bs-border) !important;
    border-radius: var(--r-lg) !important;
    background: var(--bs-surface) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.32);

    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-canvas-scroll {
    padding-right: 310px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-zoom-controls {
    right: 276px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar::-webkit-scrollbar,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar::-webkit-scrollbar { width: 5px; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar::-webkit-scrollbar-thumb,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar::-webkit-scrollbar-thumb { background: var(--bs-border-2); border-radius: 3px; }

  /* Kill the invisible spacers (only needed for the horizontal scroll layout) */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar::before,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar::after,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar::before,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar::after {
    display: none !important;
  }

  /* Each direct child fills the panel width */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar > *,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar > * {
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* B/I/Aa, align, etc. — small icon groups stay HORIZONTAL row inside the panel */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }

  /* Section separator → horizontal line (was vertical) */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-sep,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar-sep {
    width: 100% !important;
    height: 1px !important;
    background: var(--bs-border-2) !important;
    margin: 2px 0 !important;
  }

  /* Labels stack vertically: label on top, control underneath, full width */
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-label,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: .04em !important;
    color: var(--bs-muted) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-label--range input[type="range"] {
    width: 100% !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-mode-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section:not([hidden]) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-section-title {
    display: block !important;
    width: 100% !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid var(--bs-border-2) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section .bigstep-ai-tool {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section .bigstep-ai-tool svg {
    flex: 0 0 auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section .bigstep-ai-tool span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu[hidden],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-controls[hidden] {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-text-bar-label--range input[type="range"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-text-bar-label--range input[type="range"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-controls .bigstep-ai-text-bar-label--range input[type="range"] {
    width: 100% !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-tool,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-bar-stroke {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-obj-toolbar-item input[type="number"] {
    width: 100% !important;
  }
}

/* ── 42.x  Product picker card — NO frame, strict text containment
 * The previous implementation drew a frame around the card that the
 * truncated product title visually escaped from. We drop the frame
 * entirely: cards are just tiles laid out in a column, the active one
 * is signified by a left accent stripe + ✓ checkmark, no outer border.
 * Image and text are strictly bounded inside their grid cells. */
.bigstep-ai-app .bigstep-ai-product-card,
.bigstep-ai-app button.bigstep-ai-product-card {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 12px 14px !important;
  border-radius: var(--r-md) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.bigstep-ai-app .bigstep-ai-product-card:hover {
  background: var(--bs-surface-2) !important;
}
.bigstep-ai-app .bigstep-ai-product-card.is-active {
  background: var(--bs-surface-2) !important;
}
/* Active accent stripe on the left edge (replaces frame) */
.bigstep-ai-app .bigstep-ai-product-card.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--bs-accent);
}
/* Strict text containment: title clamped to 2 lines, no overflow */
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  line-height: 1.35 !important;
}
.bigstep-ai-app .bigstep-ai-product-card .bigstep-ai-product-meta em {
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
/* The ✓ checkmark from rule 41.11 still works as secondary indicator */

/* Editor mobile product switcher: keep thumbnails, titles, and prices inside
   stable rows. Earlier touch rules forced product rows to 64px while their
   thumbnails were 84px, causing cropped images and overlapping text. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open,
  .bigstep-ai-app[data-editor-mode="editor"] button.bigstep-ai-product-open {
    grid-template-columns: 56px minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 10px !important;
    align-items: center !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-info {
    align-self: stretch !important;
    justify-content: center !important;
    gap: 2px !important;
    height: auto !important;
    max-height: 68px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-label {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open > .bigstep-ai-product-open-info > strong {
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 2 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-price {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 1px 6px !important;
    align-items: center !important;
    max-height: 30px !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-price del {
    grid-column: 1 / -1 !important;
    font-size: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-price strong {
    display: block !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-price span {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-open-action {
    height: 28px !important;
    min-width: 42px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card,
  .bigstep-ai-app[data-editor-mode="editor"] button.bigstep-ai-product-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-thumb {
    width: 68px !important;
    height: 68px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta {
    justify-content: center !important;
    gap: 4px !important;
    min-height: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta strong {
    font-size: 12.5px !important;
    line-height: 1.24 !important;
    -webkit-line-clamp: 2 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em {
    gap: 4px !important;
    max-height: 30px !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em strong {
    display: inline !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em del {
    font-size: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em span {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card.is-active::after {
    top: 10px !important;
    right: 10px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 980px) and (max-height: 430px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker {
    padding: 12px 14px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card,
  .bigstep-ai-app[data-editor-mode="editor"] button.bigstep-ai-product-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 70px !important;
    padding: 8px 9px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta {
    gap: 3px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta strong {
    font-size: 10.8px !important;
    line-height: 1.18 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em {
    max-height: 15px !important;
    gap: 3px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    flex-wrap: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em del {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card .bigstep-ai-product-meta em strong {
    font-size: 10.5px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-card.is-active::after {
    top: 7px !important;
    right: 7px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}

/* ── 42.z  Quick shirt-color picker — floats above the canvas ──
 *
 * Saves the customer a trip back to the "Sản phẩm" sidebar tab just to
 * change shirt colour. Pill-style button on the top-right of the canvas
 * area opens a popover with the same swatch list as the sidebar.
 */
.bigstep-ai-app .bigstep-ai-quick-color {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 24;
}
.bigstep-ai-app .bigstep-ai-quick-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 13px;
  border: 2px solid var(--bs-accent);
  border-radius: var(--r-pill);
  background: #fff !important;
  background-origin: border-box;
  color: #0f172a !important;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(99,102,241,.18);
  transition: transform var(--dur), box-shadow var(--dur);
}
.bigstep-ai-app .bigstep-ai-quick-color-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), 0 0 0 4px rgba(99,102,241,.22);
}
.bigstep-ai-app .bigstep-ai-quick-color-btn[aria-expanded="true"] {
  box-shadow: 0 8px 24px rgba(0,0,0,.24), 0 0 0 4px rgba(99,102,241,.25);
}
.bigstep-ai-app .bigstep-ai-quick-color-btn .bigstep-ai-quick-color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #000;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.40);
}
.bigstep-ai-app .bigstep-ai-quick-color-btn svg {
  opacity: .7;
  color: #334155;
  flex-shrink: 0;
}
@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color {
    top: 12px;
    right: 30px;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn {
    min-height: 40px;
    padding: 0 14px 0 10px;
    gap: 8px;
    border-width: 1px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(99,102,241,.12);
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 0 3px rgba(99,102,241,.16);
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn .bigstep-ai-quick-color-dot {
    width: 22px;
    height: 22px;
    border-width: 2px;
  }
}
.bigstep-ai-app .bigstep-ai-quick-color-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 14px 14px;
  border: 1px solid var(--bs-border);
  border-radius: var(--r-lg);
  background: var(--bs-surface);
  box-shadow: 0 12px 36px rgba(0,0,0,.30);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bigstep-ai-app .bigstep-ai-quick-color-panel strong {
  font-size: var(--t-sm);
  font-weight: 700;
}
.bigstep-ai-app .bigstep-ai-quick-color-panel .bigstep-ai-swatch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Mobile: quick-color button — top-right of canvas, above bottom toolbar */
@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-quick-color {
    /* sit at the top-right corner — stays out of the way of all bottom toolbars */
    top: 10px;
    right: 10px;
    bottom: auto;
    z-index: 24;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-panel {
    top: calc(100% + 8px);
    bottom: auto;
    right: 0;
    max-width: calc(100vw - 20px);
  }
  /* Toolbars (text-bar / image-bar / obj-toolbar) always win over the color btn */
  .bigstep-ai-app .bigstep-ai-text-bar,
  .bigstep-ai-app .bigstep-ai-obj-toolbar,
  .bigstep-ai-app .bigstep-ai-image-bar { z-index: 26; position: relative; }
}

/* ────────────────────────────────────────────────────────────────
 * 43. LIGHT THEME OVERRIDES
 *
 * Activated when `data-theme="light"` is present on either <html>
 * (set by inline boot script for FOUC-free load) or .bigstep-ai-app.
 * Re-points every --bs-* token to a light palette and re-paints the
 * page chrome (which lives outside .bigstep-ai-app via inline style
 * in editor-standalone.php).
 *
 * No HTML restructure required. JS toggles `dataset.theme` and the
 * cascade does the rest. Logo swap to the light-mode URL is handled
 * separately in frontend.js based on BigstepAI.logoUrlLight setting.
 * ──────────────────────────────────────────────────────────────── */
:root[data-theme="light"],
:root[data-theme="light"] body,
:root[data-theme="light"] body.bigstep-ai-standalone-editor {
  background: #f6f7fb !important;
  color: #0f172a !important;
}
:root[data-theme="light"] #bigstep-ai-boot {
  background:
    radial-gradient(circle at 50% 38%, rgba(124,58,237,.14), transparent 32%),
    linear-gradient(180deg, rgba(250,245,255,.94), rgba(245,243,255,.98)) !important;
  color: #0f172a !important;
}
:root[data-theme="light"] #bigstep-ai-boot .boot-card {
  border-color: rgba(129,140,248,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)) padding-box,
    linear-gradient(135deg, rgba(129,140,248,.44), rgba(168,85,247,.44), rgba(217,70,239,.24)) border-box !important;
  box-shadow: 0 28px 78px rgba(15,23,42,.12), 0 0 60px rgba(168,85,247,.10) !important;
}
:root[data-theme="light"] #bigstep-ai-boot .boot-text {
  background: linear-gradient(135deg, #5b21b6, #7c3aed 48%, #a21caf) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
:root[data-theme="light"] #bigstep-ai-boot .boot-sub {
  color: #6d28d9 !important;
}
:root[data-theme="light"] #bigstep-ai-boot .boot-progress {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(99,102,241,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 20px rgba(168,85,247,.08) !important;
}
:root[data-theme="light"] #bigstep-ai-boot .boot-chip {
  border-color: rgba(168,85,247,.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(238,242,255,.66)) padding-box,
    linear-gradient(135deg, rgba(196,181,253,.52), rgba(168,85,247,.44)) border-box !important;
  color: #581c87 !important;
}

.bigstep-ai-app[data-theme="light"],
:root[data-theme="light"] .bigstep-ai-app {
  --bs-bg:        #f6f7fb;
  --bs-surface:   #ffffff;
  --bs-surface-2: #f1f3f9;
  --bs-surface-3: #e6e9f2;

  --bs-text:   #0f172a;
  --bs-muted:  #64748b;
  --bs-subtle: #94a3b8;

  --bs-border:   #e2e8f0;
  --bs-border-2: #cbd5e1;

  /* Accent stays — works on both themes */
  --bs-accent:   #6366f1;
  --bs-accent-2: #8b5cf6;
  --bs-grd:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --bs-glow:     0 0 0 3px rgba(99,102,241,.22);
  --bs-ink:      #ffffff;

  --bs-danger:  #dc2626;
  --bs-success: #059669;

  /* Canvas stays bright white but shadow softer */
  --bs-canvas:    #ffffff;
  --bs-canvas-sh: 0 2px 8px rgba(15,23,42,.06), 0 12px 36px rgba(15,23,42,.10);
}

/* Light mode: harden #a5b4fc active text to a readable indigo */
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-tool.is-active,
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-swatch.is-active,
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-style-chips button.is-active,
:root[data-theme="light"] .bigstep-ai-app [data-editor-style-chips] button.is-active,
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-side-tabs button.is-active,
:root[data-theme="light"] .bigstep-ai-app [data-panel-toggle].is-active,
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-tool-grid--menu .bigstep-ai-tool.is-active {
  color: #4f46e5 !important;
}

/* Subtle border on the topbar in light mode so it doesn't blend with body */
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-editor-topbar {
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-tool-grid--menu {
  box-shadow: 1px 0 0 rgba(15,23,42,.04);
}

/* Theme-toggle button — sun/moon icon swap */
.bigstep-ai-app .bigstep-ai-theme-toggle .bigstep-ai-theme-icon--sun  { display: none; }
.bigstep-ai-app .bigstep-ai-theme-toggle .bigstep-ai-theme-icon--moon { display: block; }
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-theme-toggle .bigstep-ai-theme-icon--sun  { display: block; }
:root[data-theme="light"] .bigstep-ai-app .bigstep-ai-theme-toggle .bigstep-ai-theme-icon--moon { display: none; }

/* ── 42.y  Layer lock state — visual feedback in layer panel */
.bigstep-ai-app .bigstep-ai-layer-row.is-locked > span:nth-child(3) {
  color: var(--bs-muted) !important;
  text-decoration: line-through;
  text-decoration-color: var(--bs-border-2);
}
.bigstep-ai-app .bigstep-ai-layer-row.is-locked > img,
.bigstep-ai-app .bigstep-ai-layer-row.is-locked > i {
  opacity: .55 !important;
}
.bigstep-ai-app .bigstep-ai-layer-row [data-layer-lock][aria-pressed="true"] {
  color: var(--bs-accent) !important;
  background: rgba(99,102,241,.15) !important;
}
.bigstep-ai-app .bigstep-ai-layer-row [data-layer-lock] svg {
  display: block;
}

/* ── 43.1  Hide prompt suggestion chips (replaced by textarea animation) ── */
.bigstep-ai-app [data-editor-prompt-suggestions],
.bigstep-ai-app [data-prompt-suggestions] {
  display: none !important;
}

@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-quick-color {
    top: 6px;
    right: 6px;
    z-index: 23;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border-width: 1px !important;
    font-size: 11px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.24), 0 0 0 2px rgba(99,102,241,.14) !important;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-btn .bigstep-ai-quick-color-dot {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-btn svg {
    width: 10px;
    height: 10px;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-panel {
    position: fixed;
    left: 12px;
    right: 64px;
    top: auto;
    bottom: calc(var(--toolbar-m) + env(safe-area-inset-bottom) + 74px);
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 12px);
    max-height: 96px;
    overflow: auto;
    z-index: 27;
  }
}

@media (max-width: 520px) {
  .bigstep-ai-app .bigstep-ai-quick-color-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .bigstep-ai-app .bigstep-ai-quick-color-label,
  .bigstep-ai-app .bigstep-ai-quick-color-btn svg {
    display: none !important;
  }
}

/* Editor mobile sale-price polish.
 * The compare price added for Woo sale products needs a tighter topbar layout
 * so it does not push the cart button or spill below the header. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    height: 56px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    gap: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "old badge"
      "now now";
    align-items: end !important;
    justify-items: end !important;
    min-width: 112px !important;
    max-width: 122px !important;
    min-height: 38px !important;
    padding: 0 2px !important;
    gap: 1px 5px !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
    grid-area: old;
    margin: 0 !important;
    color: rgba(148,163,184,.9) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    grid-area: now;
    color: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    grid-area: badge;
    min-height: 14px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color {
    top: 8px !important;
    right: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    gap: 7px !important;
    border-width: 1px !important;
    font-size: 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 2px rgba(99,102,241,.14) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn .bigstep-ai-quick-color-dot {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.12), 0 1px 4px rgba(0,0,0,.22) !important;
  }
}

@media (min-width: 421px) and (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-label,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color-btn svg {
    display: none !important;
  }
}

/* Editor canvas quality + side switch placement.
 * Keep front/back controls in the editor chrome, not on top of the mockup. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap canvas {
  image-rendering: auto !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: min(260px, calc(100vw - 32px)) !important;
  margin: 2px auto 0 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
  flex: 0 0 auto !important;
}

@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
    padding-top: 52px;
    padding-bottom: 6px;
    padding-right: 96px;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom {
    margin-top: 0 !important;
    width: 230px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom button {
    height: 31px !important;
    min-height: 31px !important;
    font-size: 12px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    position: absolute !important;
    top: 50% !important;
    right: 52px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 25 !important;
    width: 42px !important;
    height: auto !important;
    padding: 8px 5px !important;
    flex-direction: column !important;
    gap: 7px !important;
    border-radius: var(--r-pill) !important;
    background: var(--bs-surface) !important;
    border: 1px solid var(--bs-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.32) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
    width: 136px !important;
    height: 16px !important;
    min-height: 16px !important;
    flex: 0 0 136px !important;
    writing-mode: vertical-lr;
    direction: rtl;
    accent-color: var(--bs-accent);
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
    width: 16px !important;
    height: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls span {
    width: auto !important;
    min-width: 0 !important;
    font-size: 10px !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"]:not([hidden]) {
    position: fixed;
    left: calc(var(--sidebar-w) + var(--panel-w) + 14px);
    top: calc(var(--topbar-h) + 86px);
    z-index: 280;
    width: 268px;
    padding: 14px;
    border: 1px solid var(--bs-border);
    border-radius: var(--r-lg);
    background: var(--bs-surface);
    box-shadow: 0 14px 42px rgba(0,0,0,.42);
    cursor: move;
    user-select: none;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"].is-dragging {
    opacity: .96;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    color: var(--bs-muted);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: none;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] select,
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] input[type="range"] {
    width: 100%;
  }
}

.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform: rotate(-90deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}

/* EOF compact light-mode fixes: this intentionally stays after all responsive editor rules. */
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay *,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay * {
  color: #64748b !important;
  opacity: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field textarea,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field textarea {
  background: #ffffff !important;
  border-color: #818cf8 !important;
  color: #0f172a !important;
  text-transform: none !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-title,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-title {
  color: #0f172a !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-subtitle,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-generator-form > label,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-subtitle,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-generator-form > label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-form-label {
  color: #334155 !important;
}

/* Final editor mobile topbar guard.
 * Avoid text/attribute selectors here: localized aria-labels may be encoded
 * differently after PHP/theme output. Hide the duplicate right-side home/info
 * and destructive clear button by structure/class so price never sits under
 * those controls on narrow screens. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > a.bigstep-ai-editor-icon-button,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > button[data-panel-toggle="info"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-clear-design {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex: 0 1 104px !important;
    width: 104px !important;
    min-width: 88px !important;
    max-width: 128px !important;
    min-height: 34px !important;
    max-height: 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "now badge" !important;
    align-items: center !important;
    justify-items: end !important;
    gap: 4px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 70px !important;
    overflow: visible !important;
    color: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    min-width: 0 !important;
    min-height: 14px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex-basis: 98px !important;
    width: 98px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    padding: 0 10px !important;
  }
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only) {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button.is-active,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button.is-active,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only) {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-product-info,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-product-info,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-compact-price {
  background: #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-preview-box {
  background:
    linear-gradient(rgba(99,102,241,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.055) 1px, transparent 1px),
    #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}

/* Absolute final mobile topbar layout. Keep this at the physical end of the
   file so older mobile/header overrides cannot re-show the duplicated icons. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    height: 56px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 132px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-editor-icon-button {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    display: grid !important;
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 38px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "now badge" !important;
    align-items: center !important;
    justify-items: end !important;
    gap: 5px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    grid-area: now !important;
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: #f8fafc !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    grid-area: badge !important;
    min-height: 15px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex: 0 0 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 94px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex-basis: 106px !important;
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    font-size: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    padding: 0 10px !important;
  }
}

@media (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 128px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    min-width: 122px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    grid-template-areas: "now badge" !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    padding: 0 11px !important;
  }
}

/* Selection bbox controls: Fabric owns corner scale/rotation; image edge
 * handles are a thin DOM layer that edits the existing crop model. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay {
  z-index: 18 !important;
  /* Khung nét đứt do FABRIC vẽ trong canvas (nằm dưới 4 góc) — overlay này
   * trong suốt, chỉ định vị 4 thanh crop (20260703) */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  transform-origin: center center !important;
}
/* Thanh crop đồng bộ tông với 4 góc fabric: trắng + viền tím, pill mềm (20260703) */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle] {
  pointer-events: auto !important;
  background: #ffffff !important;
  border: 1.8px solid #8b3dff !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="n"],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="s"] {
  width: 26px !important;
  height: 8px !important;
  left: 50% !important;
  right: auto !important;
}
/* Offset -8px: tâm thanh (dày 9px) trùng đúng nét khung dashed (20260703) */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="n"] {
  top: -4.5px !important;
  transform: translateX(-50%) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="s"] {
  bottom: -4.5px !important;
  transform: translateX(-50%) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="e"],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="w"] {
  width: 8px !important;
  height: 26px !important;
  top: 50% !important;
  bottom: auto !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="e"] {
  right: -4.5px !important;
  transform: translateY(-50%) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="w"] {
  left: -4.5px !important;
  transform: translateY(-50%) !important;
}

.bigstep-ai-selection-toolbar {
  position: absolute;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .3);
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: manipulation;
}
.bigstep-ai-selection-toolbar[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar button[hidden] {
  display: none !important;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar button:hover,
.bigstep-ai-app .bigstep-ai-selection-toolbar button.is-active {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar button.is-danger:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.bigstep-ai-selection-toolbar svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 980px) {
  .bigstep-ai-selection-toolbar {
    padding: 4px;
  }
  .bigstep-ai-app .bigstep-ai-selection-toolbar button {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="n"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="s"] {
    width: 32px !important;
    height: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="e"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-crop-drag-overlay [data-crop-handle="w"] {
    width: 10px !important;
    height: 32px !important;
  }
}

/* Mobile object actions replace the desktop right-click menu. */
.bigstep-ai-mobile-object-actions {
  display: none;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar [data-selection-action="remove-bg"] {
  color: #2563eb !important;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar [data-selection-action="remove-bg"]:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

@media (max-width: 980px) {
  .bigstep-ai-context-menu {
    display: none !important;
  }
  .bigstep-ai-mobile-object-actions:not([hidden]) {
    position: fixed;
    left: 50%;
    bottom: calc(var(--toolbar-m, 68px) + 62px + env(safe-area-inset-bottom, 0px));
    z-index: 735;
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: min(420px, calc(100dvw - 18px));
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 8px;
    background: rgba(15, 23, 42, .96);
    box-shadow: 0 12px 32px rgba(2, 6, 23, .46);
    transform: translateX(-50%);
    backdrop-filter: blur(14px);
  }
  .bigstep-ai-app .bigstep-ai-mobile-object-actions button {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 5px 2px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app .bigstep-ai-mobile-object-actions button:active:not(:disabled) {
    background: rgba(99, 102, 241, .2) !important;
    color: #ffffff !important;
  }
  .bigstep-ai-app .bigstep-ai-mobile-object-actions button:disabled {
    opacity: .32 !important;
  }
  .bigstep-ai-mobile-object-actions svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app .bigstep-ai-mobile-object-actions button {
    font-size: 8px !important;
  }
}

/* Final compact light-mode readability pass. Keep this late in the file so it wins over editor-wide light theme rules. */
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"],
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] {
  --bs-bg: #ffffff;
  --bs-surface: #ffffff;
  --bs-surface-2: #eef2ff;
  --bs-surface-3: #e5e9f5;
  --bs-text: #0f172a;
  --bs-muted: #475569;
  --bs-subtle: #64748b;
  --bs-border: #c8d1f4;
  --bs-border-2: #aebbf7;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-title,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-title {
  color: #0f172a !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-subtitle,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-generator-form > label,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-subtitle,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-generator-form > label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-form-label {
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field textarea,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field textarea {
  background: #ffffff !important;
  border-color: #818cf8 !important;
  color: #0f172a !important;
  text-transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.28), 0 0 0 3px rgba(99,102,241,.12) !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field textarea:focus,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.42), 0 0 0 4px rgba(99,102,241,.18) !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay *,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay * {
  color: #64748b !important;
  opacity: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] input,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] select,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] input,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #aebbf7 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only) {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button.is-active,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button.is-active,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only) {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-product-info,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-product-info,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-compact-price {
  background: #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-preview-box {
  background:
    linear-gradient(rgba(99,102,241,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.055) 1px, transparent 1px),
    #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-placeholder,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-preview-placeholder {
  color: #475569 !important;
}

/* Final zoom range override must stay after desktop/mobile zoom blocks. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform: rotate(-90deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}


.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform: rotate(-90deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}

/* Zoom slider: render as a rotated horizontal range so browser vertical-range
   thumbs do not balloon into an oversized circular control. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
  overflow: visible !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform: rotate(-90deg) !important;
  transform-origin: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}

@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
    width: 132px !important;
    height: 18px !important;
    flex: 0 0 132px !important;
  }
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
    width: 108px !important;
    height: 18px !important;
    flex: 0 0 108px !important;
  }
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
    padding-right: 0;
    padding-bottom: 8px;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom {
    width: min(300px, calc(100vw - 24px)) !important;
    margin-top: 6px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom button {
    min-height: 38px !important;
    padding: 0 14px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 1 !important;
    width: min(286px, calc(100vw - 56px)) !important;
    height: 38px !important;
    margin: 0 auto !important;
    padding: 3px 7px !important;
    flex-direction: row !important;
    gap: 6px !important;
    border-radius: var(--r-pill) !important;
    background: var(--bs-surface) !important;
    border: 1px solid var(--bs-border) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.34) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-zoom-controls {
    bottom: auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls button {
    width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 15px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
    width: auto !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 1 1 120px !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    transform: none !important;
    accent-color: var(--bs-accent);
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
    width: 16px !important;
    height: 16px !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls span {
    width: auto !important;
    min-width: 42px !important;
    font-size: 10px !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"]:not([hidden]) {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default !important;
    user-select: auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"]:not([hidden])::before {
    display: none !important;
    content: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    color: var(--bs-muted);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: none;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] select,
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="elements"] [data-element-section="draw"] input[type="range"] {
    width: 100%;
  }
}

.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform: rotate(-90deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.28) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 2px solid #7c6cff !important;
  border-radius: 999px !important;
  background: #6d5dfc !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important;
}
/* True EOF compact light-mode patch: placed after every responsive override. */
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay *,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field .bigstep-ai-prompt-typing-overlay * {
  color: #64748b !important;
  opacity: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-prompt-field textarea,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-prompt-field textarea {
  background: #ffffff !important;
  border-color: #818cf8 !important;
  color: #0f172a !important;
  text-transform: none !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-title,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-title {
  color: #0f172a !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-subtitle,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-generator-form > label,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-form-label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-gen-subtitle,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-generator-form > label,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-form-label {
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch:not(.bigstep-ai-swatch--color-only) {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button.is-active,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only),
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-style-chips button.is-active,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-swatch.is-active:not(.bigstep-ai-swatch--color-only) {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-product-info,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-product-info,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-compact-price {
  background: #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-preview-box,
.bigstep-ai-app[data-editor-mode="compact"][data-theme="light"] .bigstep-ai-preview-box {
  background:
    linear-gradient(rgba(99,102,241,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.055) 1px, transparent 1px),
    #f8faff !important;
  border-color: #c7d2fe !important;
  color: #334155 !important;
}

.bigstep-product-options {
  --bspo-bg: #ffffff;
  --bspo-panel: #ffffff;
  --bspo-panel-2: #f8fafc;
  --bspo-text: #323842;
  --bspo-strong: #111827;
  --bspo-muted: #7b8492;
  --bspo-border: #e5e7eb;
  --bspo-border-2: #cfd7e3;
  --bspo-accent: #246bfe;
  --bspo-accent-2: #7c3aed;
  --bspo-active-bg: #eef4ff;
  display: grid;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--bspo-border);
  border-radius: 12px;
  background: var(--bspo-bg);
  color: var(--bspo-text);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  isolation: isolate;
}

.bigstep-product-options *,
.bigstep-product-options *::before,
.bigstep-product-options *::after {
  box-sizing: border-box;
}

.bigstep-product-options button,
.bigstep-product-options a.button {
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.bigstep-product-options__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bspo-border);
}

.bigstep-product-options__head strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--bspo-strong);
}

.bigstep-product-options__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--bspo-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

/* Ẩn giá ở header — đã có "BẢNG TÍNH GIÁ" chi tiết bên dưới, không cần lặp lại.
   (Theme cũng đã ẩn ở bigstep-child.css; rule này là fallback của plugin.) */
.bigstep-product-options__price {
  display: none !important;
}

.bigstep-product-options__price strong {
  color: var(--bspo-accent);
  font-size: 22px;
  font-weight: 900;
}

.bigstep-product-options__price del {
  color: var(--bspo-muted);
  font-size: 14px;
}

.bigstep-product-options__section { display: grid; gap: 6px; }

.bigstep-product-options__extra-print {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bigstep-product-options__extra-print-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid var(--bspo-border-2);
  border-radius: 10px;
  background: var(--bspo-panel-2);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.bigstep-product-options__extra-print-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bigstep-product-options__extra-print-check {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid #78847f;
  border-radius: 5px;
  background: var(--bspo-panel);
}

.bigstep-product-options__extra-print-card > span:last-child {
  display: flex;
  min-width: 0;
  align-items: center;
  line-height: 1.2;
}

.bigstep-product-options__extra-print-card strong {
  color: var(--bspo-strong);
  font-size: 12px;
  font-weight: 850;
}

.bigstep-product-options__extra-print-card:has(input:checked) {
  border-color: #b6eb00;
  background: rgba(200,255,0,.1);
}

.bigstep-product-options__extra-print-card:has(input:checked) .bigstep-product-options__extra-print-check {
  border-color: #b6eb00;
  background: #c8ff00;
}

.bigstep-product-options__extra-print-card:has(input:checked) .bigstep-product-options__extra-print-check::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #080b0a;
  content: "✓";
  font: 950 13px/1 Arial, sans-serif;
}

/* Đồng bộ card vị trí in thêm với chip Mặt trước/Mặt sau. Các rule checkbox
 * của theme/Woo có độ ưu tiên cao nên cần scope đầy đủ để trạng thái tick
 * không bị trả về nền tối sau khi người dùng chọn. */
body .bigstep-product-options .bigstep-product-options__extra-print-card {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid #34413c !important;
  border-radius: 10px !important;
  background: #121817 !important;
  color: #eef2f0 !important;
  box-shadow: none !important;
}

body .bigstep-product-options .bigstep-product-options__extra-print-card:has(input:checked) {
  border-color: #c8ff00 !important;
  background: rgba(200,255,0,.07) !important;
  color: #c8ff00 !important;
}

body .bigstep-product-options label.bigstep-product-options__extra-print-card:has(input:checked) > span:last-child > strong {
  color: #c8ff00 !important;
}

body .bigstep-product-options .bigstep-product-options__extra-print-card:has(input:checked) .bigstep-product-options__extra-print-check {
  border-color: #c8ff00 !important;
  background: #c8ff00 !important;
}

.bigstep-product-options__label {
  color: #596273;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
 margin: 0; line-height: 1.2; }

.bigstep-product-options__segmented,
.bigstep-product-options__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bigstep-product-options__segment,
.bigstep-product-options__chip,
.bigstep-product-options__clear {
  appearance: none;
  border: 1px solid var(--bspo-border);
  background: var(--bspo-panel-2) !important;
  color: var(--bspo-text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}

.bigstep-product-options__segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 8px;
}

.bigstep-product-options__segment svg,
.bigstep-product-options__design svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.bigstep-product-options__chip {
  min-width: 54px;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 8px;
}

.bigstep-product-options__segment.is-active,
.bigstep-product-options__chip.is-active,
.bigstep-product-options__color.is-active {
  border-color: var(--bspo-accent);
  background: var(--bspo-active-bg) !important;
  box-shadow: 0 0 0 2px rgba(36, 107, 254, .11);
  color: #164ec7;
}

.bigstep-product-options__print[hidden] {
  display: none !important;
}

.bigstep-product-options__print {
  display: grid;
  gap: 14px;
}

.bigstep-product-options__color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.bigstep-product-options__color {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 68px;
  padding: 8px 10px;
  border: 1px solid var(--bspo-border);
  border-radius: 8px;
  background: #fff !important;
  color: var(--bspo-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}

.bigstep-product-options__color-media {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  flex: 0 0 52px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #edf0f5;
  overflow: hidden;
}

.bigstep-product-options__color-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bigstep-product-options__swatch {
  width: 38px;
  height: 38px;
  border: 1px solid var(--bspo-border);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.78), 0 4px 12px rgba(15, 23, 42, .08);
}

.bigstep-product-options__color-name {
  min-width: 0;
  overflow: hidden;
  color: var(--bspo-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bigstep-product-options__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--bspo-border);
}

.bigstep-product-options__design {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 100%;
  width: 100%;
  min-height: 60px;
  padding: 0 28px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0057ff 0%, #1677ff 48%, #00a3ff 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, .28);
  box-shadow: 0 18px 46px rgba(22, 119, 255, .52), 0 0 0 1px rgba(255,255,255,.18) inset;
  overflow: hidden;
  transform: translateZ(0);
  animation: bigstep-design-cta-pulse 2.8s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.bigstep-product-options__design::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.36) 46%, transparent 58%);
  transform: translateX(-120%);
  animation: bigstep-design-cta-shine 3.4s ease-in-out infinite;
}

.bigstep-product-options__design::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 50%, rgba(0,87,255,.44), rgba(0,163,255,.26) 42%, transparent 70%);
  opacity: .9;
  filter: blur(10px);
  animation: bigstep-design-cta-aura 2.8s ease-in-out infinite;
}

.bigstep-product-options__design:hover,
.bigstep-product-options__design:focus-visible {
  color: #ffffff !important;
  filter: saturate(1.12) brightness(1.06);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 58px rgba(0, 87, 255, .58), 0 0 0 1px rgba(255,255,255,.3) inset;
}

.bigstep-product-options__design:active {
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(22, 119, 255, .42), 0 0 0 1px rgba(255,255,255,.18) inset;
}

.bigstep-product-options__design svg {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .28));
}

body .bigstep-product-options .bigstep-product-options__design,
body .bigstep-product-options .bigstep-product-options__design span,
body .bigstep-product-options .bigstep-product-options__design svg {
  color: #fff !important;
  fill: #fff !important;
}

@keyframes bigstep-design-cta-pulse {
  0%, 100% {
    box-shadow: 0 18px 46px rgba(22, 119, 255, .52), 0 0 0 1px rgba(255,255,255,.18) inset;
  }
  50% {
    box-shadow: 0 24px 62px rgba(0, 87, 255, .62), 0 0 0 1px rgba(255,255,255,.28) inset;
  }
}

@keyframes bigstep-design-cta-aura {
  0%, 100% {
    opacity: .58;
    transform: scale(.98);
  }
  50% {
    opacity: .95;
    transform: scale(1.04);
  }
}

@keyframes bigstep-design-cta-shine {
  0%, 48% {
    transform: translateX(-120%);
  }
  72%, 100% {
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bigstep-product-options__design,
  .bigstep-product-options__design::before,
  .bigstep-product-options__design::after {
    animation: none;
  }
}

.bigstep-product-options__design[hidden],
body .bigstep-product-options .bigstep-product-options__design[hidden] {
  display: none !important;
}

.bigstep-product-options__clear {
  flex: 1 1 100%;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--bspo-muted);
  background: #fff !important;
}

.bigstep-product-options__segment:hover,
.bigstep-product-options__chip:hover,
.bigstep-product-options__clear:hover,
.bigstep-product-options__color:hover {
  border-color: var(--bspo-border-2);
  background: #fff !important;
  color: var(--bspo-strong);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

@media (max-width: 640px) {
  .bigstep-product-options {
    margin: 22px 0 18px;
    padding: 16px;
    gap: 16px;
    border-radius: 10px;
  }
  .bigstep-product-options__head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .bigstep-product-options__price {
    justify-content: flex-start;
  }
  .bigstep-product-options__segment,
  .bigstep-product-options__chip {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
  .bigstep-product-options__color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.bigstep-product-options__actions {    flex-direction: column;    align-items: stretch;  }  .bigstep-product-options__actions > * {    flex: 1 1 auto;    width: 100%;  }  .bigstep-product-options__design {    font-size: 15px;    padding: 14px 22px !important;    min-height: 56px;    letter-spacing: 0;    animation: none;  }  .bigstep-product-options__design::after {    inset: -4px;  }
}

body .bigstep-product-options .bigstep-product-options__segment,
body .bigstep-product-options .bigstep-product-options__chip,
body .bigstep-product-options .bigstep-product-options__clear {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--bspo-border) !important;
  line-height: 1.2 !important;
  color: var(--bspo-text) !important;
  background: var(--bspo-panel-2) !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow: none !important;
}

body .bigstep-product-options .bigstep-product-options__segment {
  min-height: 46px !important;
}

body .bigstep-product-options .bigstep-product-options__color {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--bspo-border) !important;
  line-height: 1.25 !important;
  color: var(--bspo-text) !important;
  background: #fff !important;
  text-align: center !important;
  white-space: normal !important;
}

body .bigstep-product-options .bigstep-product-options__segment.is-active,
body .bigstep-product-options .bigstep-product-options__chip.is-active,
body .bigstep-product-options .bigstep-product-options__color.is-active {
  border-color: var(--bspo-accent) !important;
  background: var(--bspo-active-bg) !important;
  color: #164ec7 !important;
  box-shadow: 0 0 0 2px rgba(36, 107, 254, .11) !important;
}

body .bigstep-product-options .bigstep-product-options__color.is-active .bigstep-product-options__color-name {
  color: #164ec7 !important;
}

body .bigstep-product-options .bigstep-product-options__segment:not(.is-active):hover,
body .bigstep-product-options .bigstep-product-options__chip:not(.is-active):hover,
body .bigstep-product-options .bigstep-product-options__clear:hover,
body .bigstep-product-options .bigstep-product-options__color:not(.is-active):hover {
  border-color: var(--bspo-border-2) !important;
  background: #fff !important;
  color: var(--bspo-strong) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 640px) {
  body .bigstep-product-options .bigstep-product-options__segmented,
  body .bigstep-product-options .bigstep-product-options__chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  body .bigstep-product-options .bigstep-product-options__segmented--tight {
    grid-template-columns: 1fr;
  }

  body .bigstep-product-options .bigstep-product-options__segment,
  body .bigstep-product-options .bigstep-product-options__chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 9px 8px !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  body .bigstep-product-options .bigstep-product-options__segment svg,
  body .bigstep-product-options .bigstep-product-options__design svg {
    width: 15px !important;
    height: 15px !important;
  }

  body .bigstep-product-options .bigstep-product-options__chips .bigstep-product-options__chip:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  body .bigstep-product-options .bigstep-product-options__color-grid {
    gap: 8px !important;
  }

  body .bigstep-product-options .bigstep-product-options__color {
    min-height: 66px !important;
    padding: 8px 10px !important;
  }

  body .bigstep-product-options .bigstep-product-options__color-media {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
  }

  body .bigstep-product-options .bigstep-product-options__swatch {
    width: 32px;
    height: 32px;
  }
}

/* Product printing-options color thumbnails: keep real shirt images square and visible
   even when theme/mobile rules are loaded around the component. */
body .bigstep-product-options .bigstep-product-options__color {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}

body .bigstep-product-options .bigstep-product-options__color-media {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body .bigstep-product-options .bigstep-product-options__color-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 640px) {
  body .bigstep-product-options .bigstep-product-options__color-media {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* Absolute final topbar guard. Must remain at physical EOF. */
@media (max-width: 1180px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    height: 56px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: min(36vw, 180px) !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > a.bigstep-ai-editor-icon-button,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > button[data-panel-toggle="info"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-clear-design {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    display: grid !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 144px !important;
    max-width: none !important;
    min-height: 38px !important;
    max-height: 48px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--bs-border) !important;
    background: var(--bs-surface-2) !important;
    overflow: visible !important;
    grid-template-columns: max-content auto !important;
    grid-template-areas:
      "label label"
      "now badge" !important;
    align-items: center !important;
    justify-items: end !important;
    gap: 1px 5px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
    grid-area: label !important;
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    grid-area: now !important;
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: #f8fafc !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    grid-area: badge !important;
    min-height: 15px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex: 0 0 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 128px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-brand-text {
    font-size: 18px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-brand-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin-left: 2px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    min-width: 122px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    grid-template-areas: "now badge" !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    font-size: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    padding: 0 10px !important;
  }
}

@media (min-width: 421px) and (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 124px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-brand-text {
    font-size: 18px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-brand-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin-left: 2px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    min-width: 122px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    grid-template-areas: "now badge" !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    padding: 0 11px !important;
  }
}

/* Final mobile zoom guard: desktop uses a rotated range inside a vertical pill.
 * Mobile must stay a normal horizontal control, and this lives at EOF so older
 * rotated slider patches cannot win by source order. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 74px !important;
    height: 34px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    cursor: pointer !important;
    transition: width .16s ease, height .16s ease, padding .16s ease, background .16s ease !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls button {
    display: none !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"] {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: auto !important;
    height: 16px !important;
    min-height: 16px !important;
    flex: 1 1 104px !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    transform: none !important;
    transform-origin: center !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 3px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-webkit-slider-thumb {
    width: 14px !important;
    height: 14px !important;
    margin-top: -5.5px !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-track {
    height: 3px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls span {
    min-width: 0 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls.is-expanded {
    width: min(286px, calc(100vw - 56px)) !important;
    height: 38px !important;
    padding: 3px 7px !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: default !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls.is-expanded button {
    display: inline-flex !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls.is-expanded input[type="range"] {
    display: block !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls.is-expanded span {
    min-width: 36px !important;
    font-size: 10px !important;
  }
}

/* Final product picker guard. The active theme sets all buttons to height:48px,
 * which clips product thumbnails and text when the picker uses <button> cards. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button.bigstep-ai-product-card {
  height: auto !important;
  min-height: 108px !important;
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-thumb {
  width: 84px !important;
  height: 84px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta {
  min-width: 0 !important;
  overflow: hidden !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button.bigstep-ai-product-card {
    min-height: 92px !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-thumb {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 980px) and (max-height: 430px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button.bigstep-ai-product-card {
    min-height: 70px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 9px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-thumb {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Final guard for the size-guide trigger. Some theme button rules still force
   this small utility action into a large blue CTA in the editor sidebar. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head button.bigstep-ai-size-guide-open {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 8px !important;
  background: rgba(30, 41, 59, .76) !important;
  background-image: none !important;
  color: #c7d2fe !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open:hover,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open:focus-visible {
  border-color: rgba(129, 140, 248, .55) !important;
  background: rgba(99, 102, 241, .14) !important;
  color: #e0e7ff !important;
}

:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open,
.bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-field-head .bigstep-ai-size-guide-open {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #4f46e5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Keep the canvas anchored when selection toolbars appear. The toolbar panel is
   absolute, so reserving extra scroll padding makes the mockup jump left. */
@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-canvas-scroll {
    padding-right: 96px !important;
  }
}

/* Mobile density guard for editor sheets. Keep icon actions horizontal and
   reduce high tap-card layouts that were wasting vertical space. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar .bigstep-ai-image-reset-main,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-erase-toggle],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-reset],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-done] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar .bigstep-ai-image-reset-main svg,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-erase-toggle] svg,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-reset] svg,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-done] svg {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar .bigstep-ai-image-reset-main span,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-erase-toggle] span,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-reset] span,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-crop-done] span {
    display: inline !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase .bigstep-ai-image-erase-controls {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase .bigstep-ai-text-bar-label--range {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase .bigstep-ai-text-bar-label--range input[type="range"] {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-hint {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-radio-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-radio-row label {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-radio-row input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-style-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-style-chips button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 360px) {
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-style-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* -- Editor tour callouts -------------------------------------------------- */
.bigstep-ai-tour-hint {
  position: fixed !important;
  right: 24px !important;
  bottom: 148px !important;
  z-index: 2147483490 !important;
  /* Mặc định = layout MOBILE cũ (grid 3 cột: icon | text | actions inline) —
   * giữ nguyên bản gốc đã ổn ở di động. Stack 2 hàng (text trên, nút dưới)
   * CHỈ áp cho desktop (≥641px) vì đó là nơi user thấy text "Cần hướng dẫn
   * nhanh?" bị bóp + nhảy dòng. Mobile giữ inline cho gọn. */
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(330px, calc(100vw - 28px)) !important;
  padding: 10px 12px 10px 10px !important;
  border: 1px solid rgba(165, 180, 252, .48) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(18, 24, 43, .96), rgba(34, 26, 76, .94)) !important;
  color: #eef2ff !important;
  box-shadow:
    0 18px 48px rgba(2, 6, 23, .52),
    0 0 26px rgba(129, 140, 248, .18),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  font-family: inherit !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(.98) !important;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.bigstep-ai-tour-hint.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.bigstep-ai-tour-hint-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed, #06b6d4) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .32) !important;
}
.bigstep-ai-tour-hint-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.bigstep-ai-tour-hint-copy strong {
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
.bigstep-ai-tour-hint-copy span {
  color: #c7d2fe !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.bigstep-ai-tour-hint-actions {
  /* Mặc định MOBILE: inline-flex cột 3 của grid, gọn theo bản gốc. */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* Desktop (≥641px): chuyển sang layout 2 hàng — text trên, 2 nút full-width
 * ở dưới. Tránh bóp text "Cần hướng dẫn nhanh?" bị nhảy dòng vỡ vụn khi cùng
 * hàng với nút. CHỈ áp dụng cho desktop, KHÔNG đụng mobile. */
@media (min-width: 641px) {
  .bigstep-ai-tour-hint {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
  }
  .bigstep-ai-tour-hint-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }
  .bigstep-ai-tour-hint-actions button {
    flex: 1 1 0 !important;
    justify-content: center !important;
  }
}
.bigstep-ai-tour-hint-actions button,
.bigstep-ai-tour-hint-close {
  font-family: inherit !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.bigstep-ai-tour-hint-dismiss,
.bigstep-ai-tour-hint-start {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bigstep-ai-tour-hint-dismiss {
  background: rgba(15, 23, 42, .62) !important;
  color: #cbd5e1 !important;
}
.bigstep-ai-tour-hint-start {
  border-color: transparent !important;
  background: linear-gradient(135deg, #7c3aed, #38bdf8) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(56, 189, 248, .20) !important;
}
.bigstep-ai-tour-hint-close {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .34) !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .96) !important;
  color: #e2e8f0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 20px rgba(2, 6, 23, .42) !important;
}
.bigstep-ai-tour-hint button:hover {
  filter: brightness(1.08) !important;
}
.bigstep-ai-tour-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  background: rgba(2, 6, 23, .05) !important;
  pointer-events: auto !important;
}
.bigstep-ai-tour-pointer {
  position: fixed !important;
  z-index: 2147483504 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(99, 102, 241, .35), #4f46e5) !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, .50) !important;
  transform-origin: left center !important;
  pointer-events: none !important;
}
.bigstep-ai-tour-pointer::after {
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid rgba(79, 70, 229, .96) !important;
  border-right: 2px solid rgba(79, 70, 229, .96) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border-radius: 1px !important;
}
.bigstep-ai-tour-pointer-dot {
  position: fixed !important;
  z-index: 2147483504 !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #4f46e5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 5px rgba(99, 102, 241, .18),
    0 0 22px rgba(99, 102, 241, .36) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}
.bigstep-ai-tour-bubble {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 2147483503 !important;
  padding: 14px !important;
  border: 2px solid rgba(99, 102, 241, .68) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%) !important;
  color: #111827 !important;
  box-shadow:
    0 18px 48px rgba(2, 6, 23, .34),
    0 0 0 1px rgba(255, 255, 255, .86) inset !important;
  font-family: inherit !important;
  pointer-events: auto !important;
}
.bigstep-ai-tour-bubble::before {
  content: "";
  display: none !important;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-left: 2px solid rgba(99, 102, 241, .68);
  border-top: 2px solid rgba(99, 102, 241, .68);
}
.bigstep-ai-tour-bubble[data-placement="right"]::before {
  left: -6px;
  top: 22px;
  transform: rotate(-45deg);
}
.bigstep-ai-tour-bubble[data-placement="left"]::before {
  right: -6px;
  top: 22px;
  transform: rotate(135deg);
}
.bigstep-ai-tour-bubble[data-placement="bottom"]::before {
  top: -6px;
  left: 24px;
  transform: rotate(45deg);
}
.bigstep-ai-tour-bubble[data-placement="top"]::before {
  bottom: -6px;
  left: 24px;
  transform: rotate(225deg);
}
.bigstep-ai-tour-kicker {
  margin-bottom: 6px !important;
  color: #4f46e5 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.bigstep-ai-tour-bubble h3 {
  margin: 0 0 6px !important;
  color: #0f172a !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}
.bigstep-ai-tour-bubble p {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  line-height: 1.46 !important;
}
.bigstep-ai-tour-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin-top: 12px !important;
}
.bigstep-ai-tour-actions button {
  font-family: inherit !important;
  cursor: pointer !important;
}
.bigstep-ai-tour-skip,
.bigstep-ai-tour-next {
  min-height: 31px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.bigstep-ai-tour-skip {
  background: #fff !important;
  color: #334155 !important;
}
.bigstep-ai-tour-next {
  background: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .32) !important;
}
@media (max-width: 600px) {
  .bigstep-ai-tour-hint {
    left: auto !important;
    right: 12px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: min(324px, calc(100vw - 24px)) !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 6px 7px 6px 12px !important;
    gap: 8px !important;
    border-radius: 999px !important;
  }
  .bigstep-ai-tour-hint-icon,
  .bigstep-ai-tour-hint-copy span {
    display: none !important;
  }
  .bigstep-ai-tour-hint-copy strong {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-tour-hint-dismiss,
  .bigstep-ai-tour-hint-start {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 11px !important;
    margin: 0 !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }
  .bigstep-ai-tour-hint-close {
    display: none !important;
  }
  .bigstep-ai-tour-bubble {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }
  .bigstep-ai-tour-bubble::before {
    display: none !important;
  }
}

/* Final mobile polish: drawing controls, zoom growth, and compact style chips. */
.bigstep-ai-drawing-notice {
  gap: 7px !important;
  padding: 7px 8px !important;
  border-radius: 16px !important;
  max-width: min(560px, calc(100vw - 18px)) !important;
}
.bigstep-ai-drawing-notice__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bigstep-ai-drawing-notice__text {
  font-size: 12px !important;
}
.bigstep-ai-drawing-notice__color {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  cursor: pointer;
}
.bigstep-ai-drawing-notice__color span {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(99,102,241,.24);
}
.bigstep-ai-drawing-notice__color input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bigstep-ai-drawing-notice__width {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
  text-transform: none;
  white-space: nowrap;
}
.bigstep-ai-drawing-notice__width input {
  width: 84px;
  min-height: 24px;
  accent-color: #6d5dfc;
}
.bigstep-ai-drawing-notice__brush {
  width: 64px;
  height: 30px;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(129,140,248,.34);
  border-radius: 10px;
  background: rgba(30,41,59,.92);
  color: #e0e7ff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.bigstep-ai-drawing-notice__clear,
.bigstep-ai-drawing-notice__exit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.bigstep-ai-drawing-notice__clear {
  width: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(129,140,248,.34) !important;
  background: rgba(30,41,59,.92) !important;
  color: #c7d2fe !important;
  font-weight: 900 !important;
}
.bigstep-ai-drawing-notice__exit {
  padding: 0 11px !important;
}

@media (max-width: 980px) {
  .bigstep-ai-drawing-notice {
    left: 50% !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.46) !important;
  }
  .bigstep-ai-drawing-notice__icon {
    width: 24px !important;
    height: 24px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"].is-canvas-zoomed-in .bigstep-ai-canvas-wrap {
    width: var(--bigstep-editor-size, calc(100vw - 20px)) !important;
    max-width: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"].is-canvas-zoomed-in .bigstep-ai-canvas-scroll {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 390px) {
  .bigstep-ai-drawing-notice__brush {
    display: none !important;
  }
  .bigstep-ai-drawing-notice__width input {
    width: 72px;
  }
}

@media (max-width: 360px) {
  .bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-style-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Final UX pass: mobile editor fit, cleaner empty state, and denser navigation.
   This must stay at EOF because the site/theme has broad button/layout rules. */
/* Empty state "Bắt đầu thiết kế" — DARK glass khớp tone editor (trước đây là
 * thẻ light xanh xám lạc lõng). Tone giống topbar pill: dark navy + viền tím
 * nhẹ + glow accent indigo. Tự fade out khi hover canvas để không cản tay. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty {
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(320px, calc(100% - 44px)) !important;
  min-height: 0 !important;
  padding: 20px 22px 16px !important;
  gap: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(99, 102, 241, .35) !important;
  background: linear-gradient(160deg, rgba(20, 24, 38, .92), rgba(14, 17, 28, .92)) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 38px rgba(99, 102, 241, .18) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  color: #e2e8f0 !important;
  transition: opacity .25s ease;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty:hover { opacity: .35; }
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty::before {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: border-box !important;
  font-size: 22px !important;
  box-shadow:
    0 10px 28px rgba(99, 102, 241, .42),
    0 0 0 4px rgba(99, 102, 241, .12) !important;
  filter: none !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty strong {
  color: #f3f5f9 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty p {
  color: #9aa3b5 !important;
  max-width: 282px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty p::after {
  content: "Chạm để ẩn";
  /* PHẢI display:flex (không inline-flex) — pseudo của <p> phải xuống DÒNG
   * RIÊNG, không dính sau text "...báo này." (lỗi rõ nhất ở mobile hẹp). */
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 10px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .15);
  border: 1px solid rgba(99, 102, 241, .3);
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    display: grid !important;
    grid-template-columns: minmax(82px, max-content) minmax(0, 1fr) !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    gap: 7px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 112px !important;
    gap: 6px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-brand-link {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    width: auto !important;
    height: 23px !important;
    max-width: 84px !important;
    object-fit: contain !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 24px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > a.bigstep-ai-editor-icon-button,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > button[data-panel-toggle="info"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-clear-design,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 34px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "now badge" !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    max-width: 96px !important;
    overflow: visible !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    min-height: 15px !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 8px 0 !important;
    gap: 9px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions {
    gap: 6px !important;
    max-width: calc(100vw - 18px) !important;
    margin: 0 auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-top-button {
    width: 36px !important;
    height: 34px !important;
    min-width: 36px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-btn-rmbg {
    width: auto !important;
    min-width: 116px !important;
    padding: 0 12px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-btn-rmbg span {
    display: inline !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-scroll {
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 0 8px !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {
    width: min(var(--bigstep-editor-size, calc(100vw - 64px)), calc(100vw - 64px), calc(100dvh - var(--topbar-h) - var(--toolbar-m) - 150px)) !important;
    max-width: calc(100vw - 64px) !important;
    min-width: 280px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"].is-canvas-zoomed-in .bigstep-ai-canvas-scroll {
    overflow: auto !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom {
    margin-top: 2px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu {
    height: var(--toolbar-m) !important;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(var(--toolbar-m) - 10px) !important;
    padding: 5px 2px !important;
    gap: 3px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 128px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    max-width: 82px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex-basis: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex-basis: 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    font-size: 11px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {
    width: min(var(--bigstep-editor-size, calc(100vw - 46px)), calc(100vw - 46px), calc(100dvh - var(--topbar-h) - var(--toolbar-m) - 150px)) !important;
    max-width: calc(100vw - 46px) !important;
    min-width: 260px !important;
  }
}

/* Phone hard clamps. Some mobile browsers report a wider layout viewport than
   the visual viewport, so vw-only sizing can still crop the editor chrome. */
@media (max-width: 560px) {
  html:has(.bigstep-ai-app[data-editor-mode="editor"]),
  body.bigstep-ai-editor-active,
  body.bigstep-ai-standalone-editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-shell,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
    flex: 0 0 92px !important;
    width: 92px !important;
    max-width: 92px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    max-width: 92px !important;
    font-size: 15px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {
    width: min(var(--bigstep-editor-size, 326px), 326px) !important;
    max-width: 326px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {
    width: min(var(--bigstep-editor-size, 306px), 306px) !important;
    max-width: 306px !important;
  }
}

@media (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
    width: 100dvw !important;
    max-width: 100dvw !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    position: relative !important;
    display: block !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    position: fixed !important;
    left: 10px !important;
    top: 0 !important;
    z-index: 35 !important;
    height: 56px !important;
    max-width: 122px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
    position: fixed !important;
    right: 10px !important;
    top: 0 !important;
    z-index: 35 !important;
    width: auto !important;
    max-width: calc(100dvw - 148px) !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-scroll {
    justify-content: flex-start !important;
    padding-left: 32px !important;
    padding-right: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu {
    left: 0 !important;
    right: auto !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-scroll {
    padding-left: 24px !important;
  }
}

@media (min-width: 421px) and (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
    flex-basis: 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    padding: 0 9px !important;
    gap: 5px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span {
    display: inline !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* Editor regression guard after the latest CSS pass.
   Keep the mockup anchored when contextual tools appear, and keep the erase
   sheet readable on phones. */
@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-canvas-scroll {
    padding-right: 96px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-zoom-controls {
    right: 52px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:not([hidden]) {
    z-index: 720 !important;
  }
}

@media (max-width: 560px) {
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-scroll {
    justify-content: center !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:not([hidden]) {
    max-height: min(42dvh, 330px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section[data-image-edit-section="erase"]:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar [data-image-erase-toggle] {
    min-height: 42px !important;
    height: 42px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar:not([hidden]) {
    max-height: min(46dvh, 360px) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-menu--erase .bigstep-ai-image-erase-controls:not([hidden]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-menu--erase .bigstep-ai-text-bar-label--range {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-menu--erase .bigstep-ai-text-bar-label--range input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  body.bigstep-ai-editor-active .bigstep-ai-toast-container,
  body.bigstep-ai-standalone-editor .bigstep-ai-toast-container {
    top: calc(var(--topbar-h, 56px) + 8px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    align-items: center !important;
    max-width: none !important;
  }

  body.bigstep-ai-editor-active .bigstep-ai-toast,
  body.bigstep-ai-standalone-editor .bigstep-ai-toast {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(360px, calc(100vw - 20px)) !important;
    gap: 7px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  body.bigstep-ai-editor-active .bigstep-ai-toast-icon,
  body.bigstep-ai-standalone-editor .bigstep-ai-toast-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  body.bigstep-ai-editor-active .bigstep-ai-toast-close,
  body.bigstep-ai-standalone-editor .bigstep-ai-toast-close {
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
}

/* Final mobile editor display pass: keep contextual image tools compact, crop
   handles modest, and size-guide readable inside phone viewport. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(31dvh, 250px) !important;
    margin: 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 46px) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-mode-tabs button {
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-edit-section:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu:not([hidden]) {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase .bigstep-ai-image-erase-controls,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls [data-image-crop-ratio],
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-crop-controls [data-image-crop-zoom] {
    grid-column: auto !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--quick .bigstep-ai-image-reset-main {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(180px, 100%) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-text-bar-label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 5px !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-text-bar-select,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu select,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-menu--erase {
    grid-template-columns: 1fr !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-menu--erase {
    grid-template-columns: 1fr !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-menu--erase .bigstep-ai-image-erase-controls:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 34px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-hint {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .bigstep-ai-crop-drag-overlay [data-crop-handle] {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .32) !important;
  }

  .bigstep-ai-crop-drag-overlay [data-crop-handle="n"] { top: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="s"] { bottom: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="e"] { right: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="w"] { left: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="nw"] { left: -9px !important; top: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="ne"] { right: -9px !important; top: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="se"] { right: -9px !important; bottom: -9px !important; }
  .bigstep-ai-crop-drag-overlay [data-crop-handle="sw"] { left: -9px !important; bottom: -9px !important; }
}

@media (max-width: 600px) {
  .bigstep-ai-size-guide-modal {
    padding: 14px !important;
    align-items: center !important;
  }

  .bigstep-ai-size-guide-card {
    width: calc(100vw - 28px) !important;
    max-height: min(72dvh, 560px) !important;
    border-radius: 18px !important;
  }

  .bigstep-ai-size-guide-head {
    min-height: 54px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .bigstep-ai-size-guide-head strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .bigstep-ai-size-guide-head button {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 999px !important;
    font-size: 24px !important;
  }

  .bigstep-ai-size-guide-card img {
    width: 100% !important;
    height: auto !important;
    max-height: calc(72dvh - 62px) !important;
    object-fit: contain !important;
  }

  .bigstep-ai-size-guide-advice {
    max-height: calc(72dvh - 62px) !important;
    padding: 12px !important;
  }

  .bigstep-ai-size-guide-advice table {
    min-width: 480px !important;
  }
}

/* Absolute final mobile image-toolbar fix. Some crop-mode rules re-enable
   wrapping; that pushes Crop/Tay controls into an offscreen second column. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar:has([data-image-edit-section="crop"]:not([hidden])),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar:has([data-image-edit-section="erase"]:not([hidden])) {
    display: flex !important;
    flex-direction: column !important;
    flex-flow: column nowrap !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-content: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-mode-tabs,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-edit-section:not([hidden]) {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-edit-section:not([hidden]) {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Final template preview override: 4:5 print-design thumbnails, no cropping. */
.bigstep-ai-app .bigstep-ai-template-design-grid {
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 12px 10px !important;
}
.bigstep-ai-app .bigstep-ai-template-design-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.bigstep-ai-app .bigstep-ai-template-thumb {
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  background: #f8fafc !important;
}
.bigstep-ai-app .bigstep-ai-template-thumb img {
  inset: 6px !important;
  width: calc(100% - 12px) !important;
  height: calc(100% - 12px) !important;
  object-fit: contain !important;
  background: #f8fafc !important;
}

/* ── Scrollbar đồng bộ theme tối editor ─────────────────────────────── */
.bigstep-ai-app * {
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.3) transparent;
}
.bigstep-ai-app *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.bigstep-ai-app *::-webkit-scrollbar-track {
  background: transparent;
}
.bigstep-ai-app *::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.3);
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background .15s;
}
.bigstep-ai-app *::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.6);
}
.bigstep-ai-app *::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Scrollbar dong bo theme toi editor ─────────────────────────────── */
.bigstep-ai-app * {
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.3) transparent;
}
.bigstep-ai-app *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.bigstep-ai-app *::-webkit-scrollbar-track {
  background: transparent;
}
.bigstep-ai-app *::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.3);
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background .15s;
}
.bigstep-ai-app *::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.6);
}
.bigstep-ai-app *::-webkit-scrollbar-corner {
  background: transparent;
}


/* ── Named drafts dropdown panel ─────────────────────────── */
.bigstep-ai-drafts-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.bigstep-ai-drafts-panel {
	position: fixed;
	top: 60px;
	right: 12px;
	z-index: 99999;
	width: 320px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
	background: var(--bs-surface, rgba(15, 23, 42, .96));
	border: 1px solid var(--bs-border, rgba(129, 140, 248, .26));
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--bs-text, #e2e8f0);
	font-family: inherit;
	overflow: hidden;
}
.bigstep-ai-drafts-panel[hidden] { display: none; }
.bigstep-ai-drafts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(129, 140, 248, .14);
	background: rgba(99, 102, 241, .06);
}
.bigstep-ai-drafts-head strong {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: none;
	color: #e2e8f0;
}
.bigstep-ai-drafts-close {
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease;
}
.bigstep-ai-drafts-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.bigstep-ai-drafts-save {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(129, 140, 248, .14);
}
.bigstep-ai-drafts-save input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid rgba(129, 140, 248, .26);
	border-radius: 8px;
	background: rgba(8, 11, 18, .60);
	color: #e2e8f0;
	font-size: 12.5px;
	font-family: inherit;
}
.bigstep-ai-drafts-save input::placeholder { color: #64748b; }
.bigstep-ai-drafts-save input:focus { outline: none; border-color: var(--bs-accent, #6366f1); }
.bigstep-ai-drafts-save button {
	flex: 0 0 auto;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #6366f1, #4f46e5);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: filter .14s ease, transform .14s ease;
	white-space: nowrap;
}
.bigstep-ai-drafts-save button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bigstep-ai-drafts-save button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bigstep-ai-drafts-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(99,102,241,.35) transparent;
}
.bigstep-ai-drafts-list::-webkit-scrollbar { width: 6px; }
.bigstep-ai-drafts-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 4px; }
.bigstep-ai-drafts-empty {
	padding: 28px 16px;
	text-align: center;
	color: #64748b;
	font-size: 12.5px;
	line-height: 1.5;
}
.bigstep-ai-draft-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .14s ease;
}
.bigstep-ai-draft-item:hover { background: rgba(99, 102, 241, .10); }
.bigstep-ai-draft-item + .bigstep-ai-draft-item { margin-top: 2px; }
.bigstep-ai-draft-thumb {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: #0b1426;
	border: 1px solid rgba(255,255,255,.06);
}
.bigstep-ai-draft-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bigstep-ai-draft-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bigstep-ai-draft-name {
	font-size: 13px;
	font-weight: 800;
	color: #e2e8f0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bigstep-ai-draft-date {
	font-size: 11px;
	color: #64748b;
}
.bigstep-ai-draft-actions {
	display: flex;
	gap: 4px;
}
.bigstep-ai-draft-actions button {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 6px;
	background: rgba(8, 11, 18, .50);
	color: #94a3b8;
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.bigstep-ai-draft-actions button:hover { background: rgba(99, 102, 241, .18); color: #fff; border-color: rgba(99, 102, 241, .42); }
.bigstep-ai-draft-actions button[data-draft-delete]:hover { background: rgba(239, 68, 68, .18); color: #fecaca; border-color: rgba(239, 68, 68, .42); }

/* Light mode */
:root[data-theme="light"] .bigstep-ai-drafts-panel { background: #fff; border-color: rgba(15, 23, 42, .12); color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-drafts-head { background: rgba(99, 102, 241, .04); border-bottom-color: rgba(15, 23, 42, .06); }
:root[data-theme="light"] .bigstep-ai-drafts-head strong { color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-drafts-save input { background: #f1f5f9; color: #0f172a; border-color: rgba(15, 23, 42, .12); }
:root[data-theme="light"] .bigstep-ai-drafts-empty { color: #94a3b8; }
:root[data-theme="light"] .bigstep-ai-draft-name { color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-draft-thumb { background: #f8fafc; border-color: rgba(15, 23, 42, .08); }
:root[data-theme="light"] .bigstep-ai-draft-actions button { background: #f1f5f9; border-color: rgba(15, 23, 42, .12); color: #64748b; }

@media (max-width: 640px) {
	.bigstep-ai-drafts-panel { width: calc(100vw - 32px); right: -8px; }
}


/* ── Polish: drafts save button + cart button ─────────── */
.bigstep-ai-drafts-save button {
	background: linear-gradient(180deg, #1ad6fd 0%, #1d62f0 100%) !important;
	box-shadow: 0 6px 18px rgba(29, 98, 240, .32) !important;
	letter-spacing: .01em;
}
.bigstep-ai-drafts-save button:hover {
	filter: brightness(1.08);
	box-shadow: 0 8px 22px rgba(29, 98, 240, .45) !important;
}

/* Cart button — cleaner cyan-blue, more presence */
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
	background: linear-gradient(180deg, #1ad6fd 0%, #1d62f0 100%) !important;
	background-image: linear-gradient(180deg, #1ad6fd 0%, #1d62f0 100%) !important;
	box-shadow: 0 8px 24px rgba(29, 98, 240, .38) !important;
	border-radius: 12px !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 22px !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
	color: #fff !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart]:hover,
.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 30px rgba(29, 98, 240, .52) !important;
	filter: brightness(1.06);
}


/* ── Re-sync drafts panel with editor theme (indigo/violet, subtle) ─────── */
.bigstep-ai-drafts-panel {
	background: var(--bs-surface, #0e1525) !important;
	border-color: var(--bs-border, #1c2640) !important;
	color: var(--bs-text, #e2e8f0) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(99, 102, 241, .06) !important;
}
.bigstep-ai-drafts-head {
	background: rgba(99, 102, 241, .04) !important;
	border-bottom-color: var(--bs-border, #1c2640) !important;
}
.bigstep-ai-drafts-head strong {
	color: var(--bs-text, #e2e8f0);
	font-size: 11px !important;
	letter-spacing: .14em;
}
/* Close X: subtle ghost icon, no bright fill */
.bigstep-ai-drafts-close {
	width: 22px !important;
	height: 22px !important;
	border-radius: 6px;
	background: transparent !important;
	color: var(--bs-muted, #64748b) !important;
}
.bigstep-ai-drafts-close:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #fff !important;
}
/* Save row */
.bigstep-ai-drafts-save {
	padding: 10px 12px !important;
	border-bottom-color: var(--bs-border, #1c2640) !important;
	background: rgba(8, 11, 22, .35);
}
.bigstep-ai-drafts-save input {
	background: var(--bs-bg, #07090f) !important;
	border-color: var(--bs-border, #1c2640) !important;
	color: var(--bs-text, #e2e8f0) !important;
	font-size: 12px !important;
	padding: 7px 10px !important;
	border-radius: 8px !important;
}
.bigstep-ai-drafts-save input:focus {
	outline: none;
	border-color: var(--bs-accent, #6366f1) !important;
	box-shadow: var(--bs-glow, 0 0 0 3px rgba(99, 102, 241, .22)) !important;
}
/* Save button — match editor's accent (indigo gradient) */
.bigstep-ai-drafts-save button {
	background: var(--bs-grd, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
	background-image: var(--bs-grd, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
	color: #fff !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	padding: 0 14px !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(99, 102, 241, .28) !important;
	letter-spacing: .01em;
}
.bigstep-ai-drafts-save button:hover {
	filter: brightness(1.08);
	box-shadow: 0 6px 16px rgba(99, 102, 241, .42) !important;
}
/* Item action buttons — subtle ghost, hover with accent */
.bigstep-ai-draft-actions button {
	width: 24px !important;
	height: 24px !important;
	border-radius: 6px !important;
	background: transparent !important;
	border: 1px solid var(--bs-border, #1c2640) !important;
	color: var(--bs-muted, #64748b) !important;
}
.bigstep-ai-draft-actions button:hover {
	background: rgba(99, 102, 241, .14) !important;
	border-color: var(--bs-accent, #6366f1) !important;
	color: #fff !important;
}
.bigstep-ai-draft-actions button[data-draft-delete]:hover {
	background: rgba(239, 68, 68, .14) !important;
	border-color: var(--bs-danger, #ef4444) !important;
	color: #fecaca !important;
}
/* Item row hover */
.bigstep-ai-draft-item:hover { background: rgba(99, 102, 241, .08) !important; }
.bigstep-ai-draft-thumb {
	background: var(--bs-bg, #07090f) !important;
	border-color: var(--bs-border, #1c2640) !important;
}
.bigstep-ai-draft-name { color: var(--bs-text, #e2e8f0) !important; font-size: 12.5px !important; }
.bigstep-ai-draft-date { color: var(--bs-muted, #64748b) !important; font-size: 10.5px !important; }
.bigstep-ai-drafts-empty { color: var(--bs-muted, #64748b) !important; font-size: 12px !important; }

/* Revert cart button to editor's indigo gradient (was cyan-blue before) */
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
	background: var(--bs-grd, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
	background-image: var(--bs-grd, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
	box-shadow: 0 6px 20px rgba(99, 102, 241, .32) !important;
	border-radius: 12px !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 20px !important;
	font-weight: 800 !important;
	color: #fff !important;
}
.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart]:hover,
.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 26px rgba(99, 102, 241, .48) !important;
	filter: brightness(1.06);
}


/* ── Reset drafts panel for sidebar tab context (override the old fixed dropdown styles) ── */
[data-tool-panel="drafts"][data-drafts-wrap] {
	position: static !important;
	width: var(--panel-w) !important;
	max-width: 100% !important;
	max-height: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	overflow: hidden auto !important;
	box-shadow: none !important;
}
[data-tool-panel="drafts"][data-drafts-wrap][hidden] { display: none !important; }
[data-tool-panel="drafts"] .bigstep-ai-tool-section { padding: 0; }
[data-tool-panel="drafts"] .bigstep-ai-section-title {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: none;
	color: var(--bs-text, #e2e8f0);
}
[data-tool-panel="drafts"] .bigstep-ai-section-hint {
	margin: 0 0 12px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--bs-muted, #64748b);
}
[data-tool-panel="drafts"] .bigstep-ai-drafts-save {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 12px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--bs-border, #1c2640) !important;
	background: transparent !important;
	margin-bottom: 8px;
}
[data-tool-panel="drafts"] .bigstep-ai-drafts-save input { width: 100% !important; }
[data-tool-panel="drafts"] .bigstep-ai-drafts-save button {
	width: 100% !important;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 12px !important;
}
[data-tool-panel="drafts"] .bigstep-ai-drafts-save button svg { flex: 0 0 auto; }
[data-tool-panel="drafts"] .bigstep-ai-drafts-list {
	max-height: 380px;
	padding: 4px 0;
}
[data-tool-panel="drafts"] .bigstep-ai-draft-item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 6px;
}
[data-tool-panel="drafts"] .bigstep-ai-draft-thumb { width: 40px; height: 40px; }
[data-tool-panel="drafts"] .bigstep-ai-draft-name { font-size: 12px; }
[data-tool-panel="drafts"] .bigstep-ai-draft-date { font-size: 10px; }


/* ── Drafts prompt modal (asks to open recent draft on editor entry) ─── */
.bigstep-ai-drafts-prompt {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .58);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: bigstepDraftsPromptFade .22s ease-out;
	font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, sans-serif;
}
@keyframes bigstepDraftsPromptFade { from { opacity: 0; } to { opacity: 1; } }
.bigstep-ai-drafts-prompt-card {
	width: min(420px, 100%);
	padding: 26px 24px 20px;
	border: 1px solid rgba(99, 102, 241, .26);
	border-radius: 16px;
	background: linear-gradient(180deg, #131a2e 0%, #0b1120 100%);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(99, 102, 241, .12);
	color: #e2e8f0;
	text-align: center;
	animation: bigstepDraftsPromptPop .26s cubic-bezier(.21, 1.02, .73, 1.06);
}
@keyframes bigstepDraftsPromptPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bigstep-ai-drafts-prompt-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: #fff;
	box-shadow: 0 12px 28px rgba(99, 102, 241, .42);
}
.bigstep-ai-drafts-prompt-card h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -.005em;
	color: #fff;
}
.bigstep-ai-drafts-prompt-card p {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #94a3b8;
}
.bigstep-ai-drafts-prompt-card p strong { color: #c7d2fe; font-weight: 800; }
.bigstep-ai-drafts-prompt-name {
	display: inline-block;
	max-width: 220px;
	vertical-align: bottom;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #e2e8f0;
	font-weight: 700;
}
.bigstep-ai-drafts-prompt-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.bigstep-ai-drafts-prompt-actions button {
	flex: 1 1 auto;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	background: rgba(255, 255, 255, .04);
	color: #e2e8f0;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
	font-family: inherit;
}
.bigstep-ai-drafts-prompt-actions button:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .26);
}
.bigstep-ai-drafts-prompt-actions button.primary {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(99, 102, 241, .38);
}
.bigstep-ai-drafts-prompt-actions button.primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(99, 102, 241, .52);
}
:root[data-theme="light"] .bigstep-ai-drafts-prompt { background: rgba(15, 23, 42, .42); }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-card { background: #fff; color: #0f172a; border-color: rgba(15, 23, 42, .12); }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-card h3 { color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-card p { color: #475569; }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-card p strong { color: #4f46e5; }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-name { color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-actions button { background: #f1f5f9; border-color: rgba(15, 23, 42, .12); color: #0f172a; }
:root[data-theme="light"] .bigstep-ai-drafts-prompt-actions button:hover { background: #e2e8f0; }


/* ── Side tabs (Mặt trước/Mặt sau) — desktop: vertical left of canvas; mobile: horizontal bottom ── */
.bigstep-ai-side-tabs {
	display: flex;
	gap: 10px;
	z-index: 650;
}
.bigstep-ai-side-tabs[hidden] { display: none !important; }
.bigstep-ai-side-tabs button[hidden] { display: none !important; }
.bigstep-ai-side-tabs button {
	height: auto !important;
	min-height: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--bs-border);
	border-radius: 12px;
	background: var(--bs-surface);
	color: var(--bs-muted);
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}
.bigstep-ai-side-tabs button:hover {
	border-color: var(--bs-accent);
	color: var(--bs-text);
	transform: translateY(-1px);
}
.bigstep-ai-side-tabs button.is-active {
	border-color: var(--bs-accent);
	color: var(--bs-text);
	background: rgba(99, 102, 241, .10);
	box-shadow: 0 6px 18px rgba(99, 102, 241, .28);
}
.bigstep-ai-side-tab__thumb {
	flex: none;
	min-height: 56px;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #0b1426 center / contain no-repeat;
	border: 1px solid rgba(255, 255, 255, .06);
}
.bigstep-ai-side-tabs button.is-active .bigstep-ai-side-tab__thumb {
	flex: none;
	min-height: 56px;
	border-color: var(--bs-accent);
	box-shadow: inset 0 0 12px rgba(99, 102, 241, .25);
}
.bigstep-ai-side-tab__label {
	display: block;
	line-height: 1.1;
}

/* Desktop: vertical column at left edge of canvas area */
@media (min-width: 761px) {
	.bigstep-ai-editor-canvas-area { position: relative; }
	.bigstep-ai-side-tabs {
		position: absolute;
		top: 50%;
		left: auto;
		right: 156px;
		transform: translateY(-50%);
		flex-direction: column;
		gap: 8px;
	}
	.bigstep-ai-side-tab__thumb {
	flex: none;
	min-height: 56px; width: 60px; height: 60px; }
}

/* Mobile: keep horizontal at bottom, smaller thumbs */
@media (max-width: 760px) {
	.bigstep-ai-side-tabs {
		justify-content: center;
		margin: 6px auto 0;
		flex-direction: row;
	}
	.bigstep-ai-side-tab__thumb {
	flex: none;
	min-height: 56px; width: 44px; height: 44px; }
	.bigstep-ai-side-tabs button {
	height: auto !important;
	min-height: 0 !important; padding: 6px; font-size: 10.5px; gap: 4px; }
}

/* Light mode */
:root[data-theme="light"] .bigstep-ai-side-tabs button {
	height: auto !important;
	min-height: 0 !important; background: #fff; }
:root[data-theme="light"] .bigstep-ai-side-tab__thumb {
	flex: none;
	min-height: 56px; background-color: #f1f5f9; }

/* Force side-tab button to fit its content */
.bigstep-ai-app .bigstep-ai-side-tabs button,
.bigstep-ai-app button.bigstep-ai-side-tab,
.bigstep-ai-editor-canvas-area .bigstep-ai-side-tabs button {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}






/* 3. Side tabs — push higher above editor's tall mobile toolbar (toolbar can be 80-100px tall with labels) */
@media (max-width: 760px) {
	.bigstep-ai-side-tabs {
		bottom: calc(var(--toolbar-m, 68px) + 24px) !important;
	}
}

/* Codex UI match fixes: restore mobile/layout polish after overwritten CSS. */
@media (max-width: 760px) {
	/* Keep the drafts tab as a bottom sheet inside the editor, not a floating desktop dropdown. */
	[data-tool-panel="drafts"][data-drafts-wrap] {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: var(--toolbar-m, 68px) !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: min(56dvh, 450px) !important;
		overflow-y: auto !important;
		background: var(--bs-surface, #0e1525) !important;
		border-top: 1px solid var(--bs-border, #1c2640) !important;
		border-right: 0 !important;
		z-index: 100 !important;
	}

	[data-tool-panel="drafts"][data-drafts-wrap][hidden] {
		display: none !important;
	}

	/* Mobile editor cart: keep the label visible as requested. */
	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
		flex: 0 0 94px !important;
		width: 94px !important;
		min-width: 94px !important;
		max-width: 94px !important;
		height: 38px !important;
		min-height: 38px !important;
		padding: 0 9px !important;
		gap: 5px !important;
		border-radius: 14px !important;
		white-space: nowrap !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span,
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] span {
		display: inline !important;
		min-width: 0 !important;
		overflow: hidden !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
		font-size: 11px !important;
		line-height: 1 !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] svg,
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] svg {
		width: 15px !important;
		height: 15px !important;
		flex: 0 0 15px !important;
	}

	/* Let the existing editor layout own the side selector; only keep it compact/readable. */
	.bigstep-ai-side-tabs {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		justify-content: center !important;
		margin: 6px auto 0 !important;
		flex-direction: row !important;
	}

	.bigstep-ai-side-tabs button {
		flex-direction: row !important;
		height: auto !important;
		min-height: 36px !important;
		padding: 6px 10px !important;
		border-radius: 12px !important;
		font-size: 11px !important;
		gap: 6px !important;
	}

	.bigstep-ai-side-tab__thumb {
		display: block !important;
		width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
	}

	.bigstep-ai-side-tab__label {
		font-size: 11px !important;
		font-weight: 700 !important;
	}

	/* Compact generator price area: keep price and CTA as readable separate blocks. */
	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-submit-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 10px 12px !important;
		margin-bottom: 0 !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label {
		display: flex !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label > span,
	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label small {
		overflow-wrap: anywhere !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-price-stack {
		flex: 0 0 auto !important;
		min-width: 96px !important;
		max-width: 44% !important;
		justify-items: end !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price .bigstep-ai-price-pill {
		display: grid !important;
		justify-items: end !important;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		gap: 2px !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge) {
		display: none !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price strong {
		max-width: 100% !important;
		font-size: 17px !important;
		line-height: 1.1 !important;
		text-align: right !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-gen-submit {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 52px !important;
		min-height: 52px !important;
		margin-top: 0 !important;
		white-space: nowrap !important;
	}

	/* Header markup is owned by the active theme; keep plugin CSS scoped to the
	   Bigstep app so it cannot restyle #bigstep-header or WordPress admin chrome. */
}

@media (max-width: 380px) {
	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price {
		gap: 8px !important;
		padding: 10px !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label > span {
		font-size: 12px !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price-label small {
		font-size: 10.5px !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-price-stack {
		min-width: 88px !important;
		max-width: 42% !important;
	}

	.bigstep-ai-app[data-editor-mode="compact"] .bigstep-ai-compact-price strong {
		font-size: 16px !important;
	}
}

/* Editor cart button: keep "Đặt hàng" readable instead of clipping inside hard mobile clamps. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
		flex: 0 0 112px !important;
		width: 112px !important;
		min-width: 112px !important;
		max-width: 112px !important;
		padding: 0 12px !important;
		overflow: visible !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span,
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] span {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: max-content !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 560px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
		max-width: 100% !important;
		overflow: hidden !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex: 0 0 clamp(112px, 34dvw, 128px) !important;
		width: clamp(112px, 34dvw, 128px) !important;
		min-width: 112px !important;
		max-width: 128px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
		max-width: 124px !important;
		font-size: 12px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
		flex-basis: 88px !important;
		width: 88px !important;
		min-width: 88px !important;
		max-width: 88px !important;
		padding: 0 8px !important;
		font-size: 11px !important;
		gap: 5px !important;
	}
}

@media (max-width: 380px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right {
		max-width: 100% !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex-basis: 102px !important;
		width: 102px !important;
		min-width: 102px !important;
		max-width: 102px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
		flex-basis: 78px !important;
		width: 78px !important;
		min-width: 78px !important;
		max-width: 78px !important;
	}
}

/* Mobile editor side switcher must float above the bottom toolbar. */

/* Editor topbar price guard: keep the main price readable when the desktop
   window is narrowed. Older mobile clamps set the price text too narrow, which
   clipped the first digit. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex: 0 0 128px !important;
		width: 128px !important;
		min-width: 128px !important;
		max-width: 128px !important;
		overflow: visible !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
		max-width: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 560px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex-basis: clamp(112px, 34dvw, 128px) !important;
		width: clamp(112px, 34dvw, 128px) !important;
		min-width: 112px !important;
		max-width: 128px !important;
		grid-template-areas: "now" !important;
		grid-template-columns: 1fr !important;
		justify-items: end !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
		display: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
		font-size: 12px !important;
	}
}

/* True EOF editor toolbar collision guard. */
.bigstep-ai-tour-hint {
	pointer-events: none !important;
}
.bigstep-ai-tour-hint button,
.bigstep-ai-tour-hint a,
.bigstep-ai-tour-hint [role="button"] {
	pointer-events: auto !important;
}

@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar.bigstep-ai-text-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar:not([hidden]) {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-editor-canvas-area {
		padding-bottom: calc(var(--toolbar-m, 68px) + 58px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-erase-popup {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		z-index: 740 !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-image-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-text-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-obj-toolbar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode [data-tool-panel]:not([hidden]) {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.bigstep-ai-drawing-notice {
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 745 !important;
	}
}

/* Final editor toolbar collision guard.
   Tour hint must not block toolbars; erase mode on mobile uses one floating
   control only, so the full image toolbar is hidden while erasing. */
.bigstep-ai-tour-hint {
	pointer-events: none !important;
}
.bigstep-ai-tour-hint button,
.bigstep-ai-tour-hint a,
.bigstep-ai-tour-hint [role="button"] {
	pointer-events: auto !important;
}

@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar:not([hidden]) {
		display: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-editor-canvas-area {
		padding-bottom: calc(var(--toolbar-m, 68px) + 58px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-erase-popup {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		z-index: 740 !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-image-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-text-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-obj-toolbar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode [data-tool-panel]:not([hidden]) {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.bigstep-ai-drawing-notice {
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 745 !important;
	}
}
@media (max-width: 760px) and (orientation: portrait) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs {
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		top: auto !important;
		bottom: calc(var(--toolbar-m, 68px) + 8px + env(safe-area-inset-bottom, 0px)) !important;
		transform: translateX(-50%) !important;
		z-index: 70 !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		width: auto !important;
		max-width: calc(100dvw - 20px) !important;
		margin: 0 !important;
		pointer-events: auto !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs[hidden] {
		display: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {
		padding-bottom: calc(var(--toolbar-m, 68px) + 66px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
		padding-bottom: 12px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button {
		min-height: 40px !important;
		padding: 5px 9px !important;
		gap: 5px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tab__thumb {
		width: 28px !important;
		height: 28px !important;
		min-height: 28px !important;
		border-radius: 7px !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tab__label {
		font-size: 10.5px !important;
		line-height: 1 !important;
	}
}

/* Final override: keep the product-page design CTA readable over theme button rules. */
html body .bigstep-product-options a.bigstep-product-options__design,
html body .bigstep-product-options a.bigstep-product-options__design:link,
html body .bigstep-product-options a.bigstep-product-options__design:visited,
html body .bigstep-product-options a.bigstep-product-options__design:hover,
html body .bigstep-product-options a.bigstep-product-options__design:focus,
html body .bigstep-product-options a.bigstep-product-options__design:active,
html body .bigstep-product-options a.bigstep-product-options__design span,
html body .bigstep-product-options a.bigstep-product-options__design:hover span,
html body .bigstep-product-options a.bigstep-product-options__design:focus span,
html body .bigstep-product-options a.bigstep-product-options__design svg,
html body .bigstep-product-options a.bigstep-product-options__design svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
}

html body .bigstep-product-options a.bigstep-product-options__design span {
  -webkit-text-fill-color: #ffffff !important;
  text-transform: none !important;
  font-weight: 900 !important;
}

/* Template catalog: keep the panel wheel-scrollable and load designs in batches. */
.bigstep-ai-app [data-tool-panel="library"] {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.bigstep-ai-app .bigstep-ai-template-load-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 12px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(96, 165, 250, .65) !important;
  border-radius: var(--r-md) !important;
  background: rgba(37, 99, 235, .16) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: var(--t-sm) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.bigstep-ai-app .bigstep-ai-template-load-more:hover {
  border-color: rgba(147, 197, 253, .9) !important;
  background: rgba(37, 99, 235, .28) !important;
}


/* ===== Fix toast close button + share modal hardening ===== */

/* Toast close button — to + dễ click + có visible border */
.bigstep-ai-toast-close {
	width: 28px !important;
	height: 28px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #cbd5e1 !important;
	background: rgba(255, 255, 255, .06) !important;
	border-radius: 8px !important;
	margin-left: auto !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .15s, color .15s !important;
}
.bigstep-ai-toast-close:hover {
	background: rgba(239, 68, 68, .25) !important;
	color: #fff !important;
}

/* Toast container giữ gap đủ giữa text và close button */
.bigstep-ai-toast {
	gap: 12px !important;
	padding-right: 10px !important;
	align-items: center !important;
}
.bigstep-ai-toast-text {
	padding-right: 4px !important;
}

/* Share modal — link "Mở landing page" disable nếu chưa có URL */
.bsai-share-meta-link:not([href]),
.bsai-share-meta-link[href=""],
.bsai-share-meta-link[href="#"] {
	pointer-events: none !important;
	opacity: .4 !important;
	cursor: not-allowed !important;
}

/* Share button trong topbar — đảm bảo display flex + center */
.bsai-share-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	flex: 0 0 36px !important;
	padding: 0 !important;
	overflow: hidden !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.bsai-share-trigger svg {
	width: 17px !important;
	height: 17px !important;
	flex: 0 0 17px !important;
	display: block !important;
}

@media (max-width: 560px) {
	body.bigstep-ai-editor-active .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger,
	body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

@media (max-width: 390px) {
	body.bigstep-ai-editor-active .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger,
	body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bsai-share-trigger {
		display: none !important;
	}
}

/* Modal share — đảm bảo trên cùng zindex và không bị editor topbar che */
.bsai-share-modal {
	z-index: 2147483647 !important;
}


/* ===== Push toast xuống dưới topbar editor để không đè nút "Đặt hàng"/giá ===== */
body.bigstep-ai-editor-active .bigstep-ai-toast-container,
body.bigstep-ai-standalone-editor .bigstep-ai-toast-container {
	top: calc(var(--topbar-h, 60px) + 12px) !important;
}


/* ===== Bigstep AI POD — Assisted Design instruction block ===== */
.bigstep-product-options__assisted {
	margin-top: 14px;
	padding: 18px 20px;
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(99, 102, 241, .14) 0%, rgba(12, 15, 26, .82) 60%);
	border: 1px solid rgba(99, 102, 241, .35);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
	color: #e8edf6;
	font-family: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.bigstep-product-options__assisted[hidden] { display: none !important; }

/* Keep assisted-design instructions readable on dark product-single themes. */
html body .bigstep-product-options__assisted,
html body .bigstep-product-options__assisted .bigstep-product-options__assisted-steps {
	color: #c5cad6 !important;
}
html body .bigstep-product-options__assisted .bigstep-product-options__assisted-head h4,
html body .bigstep-product-options__assisted .bigstep-product-options__assisted-steps strong {
	color: #f1f5f9 !important;
}
html body .bigstep-product-options__assisted :where(ol,li,p,span,a,strong,small) {
	color: #c5cad6 !important;
	-webkit-text-fill-color: #c5cad6 !important;
	opacity: 1 !important;
}
html body .bigstep-product-options__assisted :where(h4,strong) {
	color: #f1f5f9 !important;
	-webkit-text-fill-color: #f1f5f9 !important;
}
html body .bigstep-product-options__assisted li::marker {
	color: #c8ff00 !important;
}

.bigstep-product-options__assisted-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.bigstep-product-options__assisted-icon {
	font-size: 22px;
	line-height: 1;
}
.bigstep-product-options__assisted-head h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #f1f5f9;
	letter-spacing: .01em;
}

.bigstep-product-options__assisted-steps {
	margin: 0;
	padding-left: 22px;
	font-size: 13.5px;
	line-height: 1.65;
	color: #c5cad6;
}
.bigstep-product-options__assisted-steps li {
	margin-bottom: 6px;
}
.bigstep-product-options__assisted-steps li:last-child { margin-bottom: 0; }
.bigstep-product-options__assisted-steps strong {
	color: #f1f5f9;
	font-weight: 700;
}
.bigstep-product-options__assisted-steps a {
	color: #a5b4fc !important;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 1px dashed rgba(165, 180, 252, .4);
}
.bigstep-product-options__assisted-steps a:hover {
	color: #c4b5fd !important;
	border-bottom-color: #c4b5fd;
}

.bigstep-product-options__assisted-cta {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(99, 102, 241, .18);
}
.bigstep-product-options__assisted-zalo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: linear-gradient(135deg, #0068ff, #0084ff);
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	border-radius: 10px;
	text-decoration: none !important;
	transition: transform .15s, box-shadow .2s, filter .15s;
	box-shadow: 0 6px 18px rgba(0, 104, 255, .35);
}
.bigstep-product-options__assisted-zalo:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	box-shadow: 0 10px 26px rgba(0, 104, 255, .5);
	color: #fff !important;
}
.bigstep-product-options__assurance {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 16px 0 0;
	padding: 15px 16px;
	border: 1px solid rgba(52, 211, 153, .58);
	border-radius: 14px;
	background:
		radial-gradient(circle at 8% 0, rgba(52, 211, 153, .34), transparent 42%),
		linear-gradient(135deg, rgba(6, 95, 70, .70) 0%, rgba(5, 150, 105, .52) 42%, rgba(6, 95, 70, .56) 80%, rgba(37, 99, 235, .30) 100%);
	box-shadow: 0 16px 42px rgba(16, 185, 129, .16), inset 0 1px 0 rgba(255, 255, 255, .09);
	overflow: hidden;
}
.bigstep-product-options__assurance::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.bigstep-product-options__assurance-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #d1fae5;
	color: #047857;
	box-shadow: 0 0 0 5px rgba(16, 185, 129, .12), 0 10px 24px rgba(16, 185, 129, .22);
}
.bigstep-product-options__assurance-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.bigstep-product-options__assurance-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-top: 1px;
}
.bigstep-product-options__assurance-copy strong {
	display: block;
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
}
.bigstep-product-options__assurance-copy small {
	display: block;
	margin: 0;
	max-width: 520px;
	color: #d1fae5;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.38;
}
.bigstep-product-options__assurance--studio {
	gap: 9px;
	margin: 10px 0 0;
	padding: 9px 11px;
	border-radius: 11px;
	box-shadow: 0 10px 24px rgba(16, 185, 129, .13), inset 0 1px 0 rgba(255, 255, 255, .08);
	flex-shrink: 0;
}
.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-icon {
	flex-basis: 30px;
	width: 30px;
	height: 30px;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .12), 0 8px 18px rgba(16, 185, 129, .18);
}
.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-icon svg {
	width: 17px;
	height: 17px;
}
.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-copy {
	gap: 1px;
	padding-top: 0;
}
.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-copy strong {
	font-size: 13px;
	line-height: 1.12;
}
.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-copy small {
	font-size: 11px;
	font-weight: 750;
	line-height: 1.25;
}

@media (max-width: 540px) {
	.bigstep-product-options__assisted { padding: 14px 16px; }
	.bigstep-product-options__assisted-head h4 { font-size: 14px; }
	.bigstep-product-options__assisted-steps { font-size: 13px; }
	.bigstep-product-options__assurance {
		margin-top: 14px;
		padding: 13px;
	}
	.bigstep-product-options__assurance-icon {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}
	.bigstep-product-options__assurance-copy strong { font-size: 14px; }
	.bigstep-product-options__assurance-copy small { font-size: 12px; }
	.bigstep-product-options__assurance--studio {
		padding: 9px 10px;
	}
	.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-icon {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
	}
	.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-copy strong { font-size: 13px; }
	.bigstep-product-options__assurance--studio .bigstep-product-options__assurance-copy small { font-size: 11px; }
}

/* DTG color filter — force hide chips không hỗ trợ DTG ở compact + editor */
.bigstep-ai-app .bsai-dtg-hidden,
.bigstep-ai-app .bsai-dtg-hidden.bigstep-ai-swatch { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; }

body .bigstep-product-options .bigstep-product-options__color.bsai-dtg-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Drafts callout badge (20260602) ===
   Replaces the old auto-open popup. A small numeric badge sits on the
   "Bản nháp" sidebar tool when saved drafts exist; a one-shot pulse
   draws the eye on first load each session without blocking the canvas. */
.bigstep-ai-app [data-panel-toggle].has-saved-drafts {
	position: relative;
}
.bigstep-ai-app .bigstep-ai-tool-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: linear-gradient(135deg, #6366f1, #a855f7);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(99, 102, 241, .55), 0 0 0 2px rgba(15, 23, 42, .8);
	pointer-events: none;
}
@keyframes bigstep-ai-drafts-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55); }
	70%  { box-shadow: 0 0 0 12px rgba(168, 85, 247, 0); }
	100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}
.bigstep-ai-app [data-panel-toggle].is-drafts-pulse .bigstep-ai-tool-badge {
	animation: bigstep-ai-drafts-pulse 1.6s ease-out 2;
}
/* Hide the legacy popup entirely in case any cached JS still tries to
   inject it. The new flow doesn't rely on this class but keeping it
   muted prevents flash during a partial CDN/cache rollover. */
.bigstep-ai-drafts-prompt { display: none !important; }

/* === Info panel v2.0 stable badge + red copyright warning (20260602) ===
   v2.0 chuyển sang gradient xanh-tím dịu — không còn tone "thử nghiệm" như
   badge BETA cũ. Dòng warning đỏ là tag-line riêng cho copyright. */
.bigstep-ai-about-badge--stable {
	background: linear-gradient(135deg, #10b981, #6366f1);
	letter-spacing: .14em;
}
.bigstep-ai-about-copy--warn {
	margin-top: 6px;
	padding: 8px 10px;
	border: 1px solid rgba(248, 113, 113, .45);
	border-radius: 8px;
	background: rgba(127, 29, 29, .25);
	color: #fca5a5;
	font-weight: 700;
	font-size: 11.5px;
	line-height: 1.5;
}

/* ===================================================================
   LOCKED RULE — DO NOT REMOVE / DO NOT OVERRIDE (2026-06-03)
   AI loading modal popup (.bigstep-ai-loading) = MOBILE ONLY.
   Desktop (>=841px) NEVER shows the popup; loading is shown INLINE
   inside the preview frame (.bigstep-ai-preview-box.is-generating).
   High specificity + !important + end-of-file so edits cannot re-enable it.
   =================================================================== */
@media (min-width: 841px) {
	html body .bigstep-ai-app .bigstep-ai-loading,
	html body .bigstep-ai-loading {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
	/* BYPASS khoá cho EDITOR mode: khi đặt hàng / chuẩn bị file in, popup
	 * loading PHẢI hiện trên desktop vì editor /studio/ không có inline
	 * preview-box (chỉ generate compact mode mới có). `:not([hidden])` đảm
	 * bảo: setLoading(false) set hidden=true → rule không match → vẫn ẩn.
	 * Phải dùng `display:grid + place-items:center` (KHÔNG flex) — khớp rule
	 * gốc dòng 4017 để box loading nằm GIỮA màn hình, không rớt về góc trái. */
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-loading:not([hidden]) {
		display: grid !important;
		place-items: center !important;
		position: fixed !important;
		inset: 0 !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}

/* Homepage background giống landing */
body.home {
  background:
    radial-gradient(circle at 12% 8%, rgba(99,102,241,.18) 0, transparent 34vw),
    radial-gradient(circle at 88% 18%, rgba(168,85,247,.16) 0, transparent 32vw),
    radial-gradient(circle at 50% 78%, rgba(14,165,233,.10) 0, transparent 42vw),
    linear-gradient(180deg, #050810 0%, #080616 46%, #050810 100%) !important;
  background-attachment: fixed !important;
}
body.home #page,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .elementor,
body.home .elementor-section,
body.home .e-con {
  background-color: transparent !important;
}

/* Fix góc ảnh Instagram shortcode */
body.home a[href*="instagram.com/p/"],
body.home a[href*="instagram.com/p/"] > span,
body.home a[href*="instagram.com/p/"] > div {
  border-radius: 0 !important;
  overflow: hidden !important;
}
body.home a[href*="instagram.com/p/"] img {
  border-radius: 0 !important;
  clip-path: none !important;
  display: block !important;
}

/* AI Remix detail hero: while waiting, animate the selected source/style as a
   before-after crossfade under the progress overlay. */
.bigstep-ai-app .bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bigstep-ai-app .bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-fit {
  position: absolute;
  inset: 0;
}

.bigstep-ai-app .bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-fit-bg,
.bigstep-ai-app .bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-fit-img {
  width: 100%;
  height: 100%;
}

.bigstep-ai-app .bigstep-ai-remix-panel-hero.is-generating-compare .bigstep-ai-remix-cf-label {
  z-index: 4;
  left: 10px;
  right: auto;
  bottom: 10px;
}

.bigstep-ai-app .bigstep-ai-remix-hero-meta--busy {
  left: 10px;
  right: 10px;
  bottom: 46px;
  justify-content: center;
  pointer-events: none;
}

.bigstep-ai-app .bigstep-ai-remix-hero-meta--busy span {
  flex: 0 1 auto;
  text-align: center;
}


/* === Single product: purchase mode + uniform size+qty grid (20260603) === */
.bigstep-product-options__purchase-mode { margin-top: 6px; }
.bigstep-product-options__size-qty-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.bigstep-product-options__size-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid rgba(99, 102, 241, .18);
	border-radius: 10px;
	background: rgba(15, 23, 42, .04);
}
.bigstep-product-options__size-qty-label {
	font-weight: 800;
	font-size: 13px;
	color: #0f172a;
	min-width: 28px;
}
.bigstep-product-options__size-qty-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bigstep-product-options__size-qty-btn {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(99, 102, 241, .35);
	border-radius: 8px;
	background: rgba(99, 102, 241, .08);
	color: #4f46e5;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.bigstep-product-options__size-qty-btn:hover {
	background: rgba(99, 102, 241, .16);
	color: #312e81;
}
.bigstep-product-options__size-qty-input {
	width: 44px;
	height: 26px;
	padding: 0 4px;
	border: 1px solid rgba(99, 102, 241, .25);
	border-radius: 6px;
	background: #fff;
	color: #0f172a;
	font-weight: 800;
	font-size: 13px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.bigstep-product-options__size-qty-input::-webkit-inner-spin-button,
.bigstep-product-options__size-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bigstep-product-options__size-qty-summary {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(99, 102, 241, .08);
	border: 1px solid rgba(99, 102, 241, .2);
	color: #312e81;
	font-size: 13px;
	font-weight: 700;
}
.bigstep-product-options__size-qty-summary strong { color: #4f46e5; font-weight: 900; }

/* Override theme button rules trên size+qty controls (20260603-fix) */
.bigstep-product-options__size-qty-btn,
.bigstep-product-options [type=button].bigstep-product-options__size-qty-btn {
	width: 26px !important;
	min-width: 26px !important;
	max-width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	border: 1px solid rgba(99, 102, 241, .35) !important;
	border-radius: 8px !important;
	background: rgba(99, 102, 241, .08) !important;
	color: #4f46e5 !important;
	font-weight: 900 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
.bigstep-product-options__size-qty-btn:hover {
	background: rgba(99, 102, 241, .16) !important;
}
.bigstep-product-options__size-qty-input {
	width: 44px !important;
	min-width: 44px !important;
	height: 26px !important;
	padding: 0 4px !important;
	box-sizing: border-box !important;
}

/* Mobile editor zoom: collapsed label, stable +/- stepper after tap. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap canvas {
		touch-action: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
		display: none !important;
	}
}

/* Bulk discount CTA (qty >= 50) — shown inside .bigstep-ai-breakdown */
.bigstep-bulk-contact-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	margin-top: 6px;
	border-radius: 8px;
	background: linear-gradient(135deg, #1877f2, #2557d6);
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(24, 119, 242, .25);
	transition: transform .15s, box-shadow .2s, opacity .2s;
	align-self: flex-start;
	line-height: 1.3;
}
.bigstep-bulk-contact-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(24, 119, 242, .4);
	color: #fff !important;
	opacity: 1;
}
.bigstep-bulk-contact-cta svg { flex-shrink: 0; }
.bigstep-discount-msg { display: block; }

/* ── Upload qua QR từ điện thoại ─────────────────────────────────────── */
.bigstep-ai-tool--block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

/* Modal QR trên máy tính */
.bigstep-ai-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(4px);
}
.bigstep-ai-qr-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: #11161f;
  color: #f1f5f9;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.bigstep-ai-qr-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.bigstep-ai-qr-card p { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: #9aa6b8; }
.bigstep-ai-qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 12px;
  margin: 0 auto 16px;
  width: 220px;
  background: #fff;
  border-radius: 12px;
  font-size: 12px;
  color: #475569;
}
.bigstep-ai-qr-box img, .bigstep-ai-qr-box canvas { display: block; }
.bigstep-ai-qr-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #a5b4fc;
  margin-bottom: 14px;
}
.bigstep-ai-qr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(165, 180, 252, 0.25);
  border-top-color: #a5b4fc;
  border-radius: 50%;
  animation: bs-boot-spin 0.7s linear infinite;
}
.bigstep-ai-qr-link { font-size: 12px; color: #818cf8; text-decoration: underline; word-break: break-all; }
.bigstep-ai-qr-modal .bigstep-ai-qr-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.bigstep-ai-qr-modal .bigstep-ai-qr-close:hover { background: rgba(255, 255, 255, 0.16) !important; }

/* Overlay gửi ảnh trên điện thoại */
.bigstep-ai-phone-upload {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(125% 80% at 50% 0%, #18233f 0%, #0a0e18 55%, #070a11 100%);
  -webkit-tap-highlight-color: transparent;
}
.bigstep-ai-phone-upload-card {
  width: 100%;
  max-width: 380px;
  padding: 34px 26px 24px;
  text-align: center;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: bsPhoneIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bsPhoneIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.bigstep-ai-phone-upload-brand {
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bigstep-ai-phone-upload-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
  box-shadow: 0 12px 34px rgba(99, 102, 241, 0.45);
}
.bigstep-ai-phone-upload-card h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; }
.bigstep-ai-phone-upload-card p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.55; color: #9aa6b8; }
.bigstep-ai-phone-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.42);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bigstep-ai-phone-upload-btn:active { transform: scale(0.97); }
.bigstep-ai-phone-upload-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #e2e8f0;
  min-height: 22px;
}
.bigstep-ai-phone-upload-status.is-sending { color: #a5b4fc; }
.bigstep-ai-phone-upload-status.is-error { color: #f87171; }
.bigstep-ai-phone-upload-status.is-done { flex-direction: column; gap: 2px; }
.bigstep-ai-phone-upload-status strong { display: block; color: #4ade80; font-size: 18px; }
.bigstep-ai-phone-upload-dismiss {
  margin-top: 24px;
  border: none;
  background: none;
  color: #818cf8;
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
}

/* Nút "Tải font của bạn" trong panel Text */
.bigstep-ai-app .bigstep-ai-upload-font-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--bs-border-2, rgba(148,163,184,.4));
  border-radius: var(--r-md, 10px);
  background: var(--bs-surface-2, rgba(255,255,255,.03));
  color: var(--bs-text, #e2e8f0);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.bigstep-ai-app .bigstep-ai-upload-font-btn:hover {
  border-color: var(--bs-accent, #6366f1);
  background: rgba(99,102,241,.10);
}
.bigstep-ai-app .bigstep-ai-upload-font-btn svg { flex: 0 0 auto; }
.bigstep-ai-app .bigstep-ai-upload-font-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--bs-border, rgba(148,163,184,.22));
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.06);
  font-size: 10px;
  line-height: 1.4;
  color: var(--bs-muted, #94a3b8);
}

/* Keep the Text panel focused on adding text. Formatting lives in the floating text toolbar. */
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-font-family]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-font-size]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-color]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-stroke-color]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-stroke-mode]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-kerning]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-line-height]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-effect]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > label:has([data-text-curve]),
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-text-style-row {
  display: none !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-upload-font-btn {
  margin-top: 16px;
}

.bigstep-ai-text-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  background: rgba(15, 23, 42, .58);
}
.bigstep-ai-app .bigstep-ai-text-tabs button {
  min-height: 34px;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--bs-muted) !important;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
}
.bigstep-ai-app .bigstep-ai-text-tabs button:hover {
  background: rgba(99, 102, 241, .10) !important;
  color: var(--bs-text) !important;
}
.bigstep-ai-app .bigstep-ai-text-tabs button.is-active {
  background: var(--bs-grd) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, .22);
}
.bigstep-ai-text-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bigstep-ai-text-tab-panel[hidden] {
  display: none !important;
}
.bigstep-ai-font-picker-field {
  gap: 7px;
}
/* Label "Chọn font chữ..." đồng bộ 100% với heading section ("Template chữ"):
 * cùng size/màu/padding — xem .bigstep-ai-panel-section > strong. */
.bigstep-ai-font-picker-help {
  display: block;
  color: var(--bs-subtle);
  font-size: var(--t-xs);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: none;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--bs-border);
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] {
  gap: 10px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-panel-hero {
  min-height: 72px;
  padding: 14px 14px;
  gap: 10px;
  border-radius: 12px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-panel-hero .bigstep-ai-panel-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-panel-hero .bigstep-ai-panel-hero-text strong {
  font-size: 14px;
  line-height: 1.2;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] > .bigstep-ai-panel-hero .bigstep-ai-panel-hero-text span {
  font-size: 11.5px;
  line-height: 1.38;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
}
.bigstep-ai-app .bigstep-ai-text-tabs button {
  min-height: 33px;
  font-size: 11.5px;
  font-weight: 800;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tab-panel {
  gap: 10px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-quick-entry {
  padding: 0 0 10px;
  gap: 8px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-quick-row {
  gap: 7px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-quick-row input,
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-quick-row .bigstep-ai-button {
  height: 40px;
  border-radius: 10px;
  font-size: 12.5px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-panel-section {
  gap: 8px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-panel-section > strong {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .06em;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-template-grid {
  gap: 8px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-template-grid button.bigstep-ai-text-tpl-card {
  min-height: 76px;
  padding: 9px 6px 8px !important;
  border-radius: 10px;
  gap: 5px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tpl-sample--heading { font-size: 24px; }
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tpl-sample--title { font-size: 19px; }
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tpl-sample--body { font-size: 13px; font-weight: 600; }
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tpl-label {
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: .04em;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-font-picker-field {
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-font-picker-help {
  /* khớp với override heading section trong text panel (11px/.06em) */
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--bs-subtle);
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-font-picker__toggle,
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] select[data-font-family] {
  min-height: 40px;
  height: 40px;
  border-radius: 10px;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-upload-font-btn {
  min-height: 42px;
  margin-top: 0;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 800;
}
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-upload-font-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 1.45;
}

/* Modal cảnh báo bản quyền font */
.bigstep-ai-font-consent {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(4px);
}
.bigstep-ai-font-consent-card {
  width: 100%;
  max-width: 380px;
  padding: 24px 22px 18px;
  border-radius: 18px;
  background: #11161f;
  color: #f1f5f9;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.bigstep-ai-font-consent-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.bigstep-ai-font-consent-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: #c3ccda; }
.bigstep-ai-font-consent-card p strong { color: #f1f5f9; }
.bigstep-ai-font-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #e2e8f0;
  cursor: pointer;
  margin-bottom: 18px;
}
.bigstep-ai-font-consent-check input { margin-top: 2px; flex: 0 0 auto; }
.bigstep-ai-font-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.bigstep-ai-font-consent-actions button {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.bigstep-ai-font-consent-actions button.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}
.bigstep-ai-font-consent-actions button.is-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* AI panel tabs: keep the first row fully visible after points/hint injections. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-ai-tabs,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-ai-tabs] {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 0 0 10px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  flex: 0 0 auto !important;
}

.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-ai-tabs .bigstep-ai-upload-tab,
.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-ai-tabs] .bigstep-ai-upload-tab {
  flex: 1 0 auto !important;
  min-width: max-content !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-points-badge.is-under-tabs {
  margin: 0 0 14px !important;
  flex: 0 0 auto !important;
}

/* Final editor topbar price guard. Keep this at EOF so it wins over older
   mobile/header clamps that made the price lose its first digit. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex: 0 0 128px !important;
		width: 128px !important;
		min-width: 128px !important;
		max-width: 128px !important;
		overflow: visible !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
		max-width: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 560px) {
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill {
		flex-basis: clamp(112px, 34dvw, 128px) !important;
		width: clamp(112px, 34dvw, 128px) !important;
		min-width: 112px !important;
		max-width: 128px !important;
		grid-template-areas: "now" !important;
		grid-template-columns: 1fr !important;
		justify-items: end !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge {
		display: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
		font-size: 12px !important;
	}
}

/* True final editor toolbar collision guard. This must sit after every older
   mobile image-bar/tour override. */
.bigstep-ai-tour-hint {
	pointer-events: none !important;
}
.bigstep-ai-tour-hint button,
.bigstep-ai-tour-hint a,
.bigstep-ai-tour-hint [role="button"] {
	pointer-events: auto !important;
}

@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar.bigstep-ai-text-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-bar:not([hidden]) {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-editor-canvas-area {
		padding-bottom: calc(var(--toolbar-m, 68px) + 58px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-image-erase-popup {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		z-index: 740 !important;
	}
}

/* True final drawing collision guard. Kept separate at EOF so drawing mode
   cannot leave the Element/image/text panels stacked behind its toolbar. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-image-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-text-bar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-obj-toolbar:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode [data-tool-panel]:not([hidden]),
	.bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-empty,
	.bigstep-ai-app[data-editor-mode="editor"].is-image-erase-mode .bigstep-ai-empty {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.bigstep-ai-drawing-notice {
		bottom: calc(var(--toolbar-m, 68px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 745 !important;
	}
}

/* Mobile editor leave guard. Shows a custom Bigstep confirmation instead of
   letting accidental logo taps navigate away immediately. */
.bigstep-ai-mobile-leave-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483601;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(4, 7, 16, 0.68);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.bigstep-ai-mobile-leave-modal[hidden] {
	display: none !important;
}
.bigstep-ai-mobile-leave-card {
	width: min(100%, 340px);
	padding: 20px 18px 16px;
	border: 1px solid rgba(129, 140, 248, 0.45) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(22, 29, 52, 0.98), rgba(12, 17, 31, 0.98)) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
	color: #f8fafc !important;
	text-align: center !important;
}
.bigstep-ai-mobile-leave-icon {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 10px;
	border-radius: 999px;
	background: rgba(245, 158, 11, 0.16);
	color: #fbbf24;
	font-size: 18px;
	font-weight: 900;
}
.bigstep-ai-mobile-leave-card h3 {
	margin: 0 0 8px;
	color: #f8fafc !important;
	font-size: 18px !important;
	line-height: 1.2 !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
}
.bigstep-ai-mobile-leave-card p {
	margin: 0;
	color: #dbeafe !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}
.bigstep-ai-mobile-leave-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}
.bigstep-ai-mobile-leave-actions button {
	min-height: 44px !important;
	border-radius: 13px !important;
	border: 1px solid rgba(148, 163, 184, 0.24) !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	cursor: pointer !important;
}
.bigstep-ai-mobile-leave-stay {
	background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
	color: #fff !important;
	box-shadow: 0 12px 28px rgba(99, 102, 241, 0.35) !important;
}
.bigstep-ai-mobile-leave-exit {
	background: rgba(15, 23, 42, 0.88) !important;
	color: #cbd5e1 !important;
}
@media (min-width: 981px) {
	.bigstep-ai-mobile-leave-modal {
		display: none !important;
	}
}
.bigstep-ai-app .bigstep-ai-button:disabled,
.bigstep-ai-app .bigstep-ai-button.is-busy {
  cursor: wait;
  opacity: .82;
  transform: none !important;
  box-shadow: 0 0 0 1px rgba(148,163,184,.18), 0 10px 26px rgba(99,102,241,.22);
}
.bigstep-ai-app .bigstep-ai-button.is-busy {
  position: relative;
  overflow: hidden;
}
.bigstep-ai-app .bigstep-ai-button.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff;
  animation: bsai-spin .8s linear infinite;
}


/* ===== Bigstep Personalizer (Customize product single) ================== */
.bigstep-personalizer {
  margin: 18px 0;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(15, 18, 30, .92), rgba(10, 12, 22, .96));
  border: 1px solid rgba(99, 102, 241, .22);
}
.bigstep-personalizer__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.bigstep-personalizer__eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8b5cf6;
  font-weight: 700;
}
.bigstep-personalizer__head strong {
  color: #f3f5f9;
  font-size: 17px;
}
.bigstep-personalizer__stage {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.bigstep-personalizer__stage canvas {
  display: block;
  max-width: 100%;
}
.bigstep-personalizer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #9aa3b5;
  background: rgba(8, 11, 18, .65);
}
.bigstep-personalizer__loading[hidden] { display: none; }
.bigstep-personalizer__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.bigstep-personalizer__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bigstep-personalizer__row label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9aa3b5;
}
.bigstep-personalizer__row input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(255, 255, 255, .04);
  color: #f3f5f9;
  font-size: 15px;
}
.bigstep-personalizer__row input[type="text"]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.bigstep-personalizer__row input[type="file"] {
  color: #9aa3b5;
  font-size: 13px;
}
.bigstep-personalizer__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bigstep-personalizer__zoom span {
  font-size: 12px;
  color: #9aa3b5;
  flex-shrink: 0;
}
.bigstep-personalizer__zoom input[type="range"] {
  flex: 1 1 auto;
  accent-color: #6366f1;
}
.bigstep-personalizer__hint {
  margin: 0;
  font-size: 12px;
  color: #6b7487;
}

/* Personalizer v1.1: stage thay ảnh sản phẩm chính + swatch màu chữ */
.bigstep-personalizer__stage--gallery {
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(99, 102, 241, .22);
  background: rgba(255, 255, 255, .03);
}
.bigstep-personalizer__colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.bigstep-personalizer__swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, .4);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.bigstep-personalizer__swatch.is-active {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
.bigstep-personalizer__colors input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}


/* ===== Personalizer v1.2 — card UI + foot ============================== */
.bigstep-personalizer__sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: #9aa3b5;
  line-height: 1.5;
}
.bigstep-personalizer__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bsai-spin .8s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
}
.bigstep-personalizer__card {
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(148, 163, 184, .16);
}
.bigstep-personalizer__card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c3cad8;
  margin-bottom: 8px;
}
.bigstep-personalizer__text {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(255, 255, 255, .05);
  color: #f3f5f9;
  font-size: 15px;
}
.bigstep-personalizer__text:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.bigstep-personalizer__ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}
.bigstep-personalizer__ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.bigstep-personalizer__ctrl span {
  font-size: 11px;
  color: #9aa3b5;
  letter-spacing: .02em;
}
.bigstep-personalizer__ctrl input[type="color"] {
  width: 46px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.bigstep-personalizer__ctrl--wide {
  flex: 1 1 150px;
  min-width: 140px;
}
.bigstep-personalizer__ctrl--wide input[type="range"] {
  width: 100%;
  accent-color: #6366f1;
  margin-top: 8px;
}
.bigstep-personalizer__upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 10px;
  cursor: pointer;
  color: #9aa3b5;
  border: 1.5px dashed rgba(148, 163, 184, .35);
  background: rgba(255, 255, 255, .02);
  transition: border-color .15s, color .15s, background .15s;
  text-align: center;
}
.bigstep-personalizer__upload:hover {
  border-color: #6366f1;
  color: #c3cad8;
  background: rgba(99, 102, 241, .06);
}
.bigstep-personalizer__upload span { font-size: 14px; }
.bigstep-personalizer__img-ctrls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.bigstep-personalizer__img-ctrls[hidden] { display: none; }
.bigstep-personalizer__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}
.bigstep-personalizer__zoom span {
  font-size: 12px;
  color: #9aa3b5;
  flex-shrink: 0;
}
.bigstep-personalizer__zoom input[type="range"] {
  flex: 1 1 auto;
  accent-color: #6366f1;
}
.bigstep-personalizer__remove {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(239, 68, 68, .4);
  background: rgba(239, 68, 68, .1);
  color: #fca5a5;
}
.bigstep-personalizer__remove:hover { background: rgba(239, 68, 68, .2); }
.bigstep-personalizer__hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6b7487;
}
.bigstep-personalizer__hint[hidden] { display: none; }
.bigstep-personalizer__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .14);
}
.bigstep-personalizer__advanced {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #c7d2fe;
  text-decoration: none;
  border: 1px solid rgba(99, 102, 241, .4);
  background: rgba(99, 102, 241, .1);
  transition: background .15s, transform .12s;
}
.bigstep-personalizer__advanced:hover {
  background: rgba(99, 102, 241, .2);
  transform: translateY(-1px);
  color: #e0e7ff;
}
.bigstep-personalizer__foot-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7487;
  text-align: center;
}

/* ===== Personalizer v1.3 — color chip đẹp + dropzone kéo thả + đặt dưới ảnh */
.bigstep-personalizer__ctrl input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 42px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.bigstep-personalizer__ctrl input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bigstep-personalizer__ctrl input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: 9px;
}
.bigstep-personalizer__ctrl input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: 9px;
}
.bigstep-personalizer__upload.is-drag {
  border-color: #6366f1;
  background: rgba(99, 102, 241, .12);
  color: #c7d2fe;
}
/* Khi bảng được JS chuyển sang cột ảnh sản phẩm: bỏ khung ngoài để gọn */
.bigstep-personalizer--placed {
  padding: 0;
  background: none;
  border: none;
}
.bigstep-personalizer--placed .bigstep-personalizer__head { margin-top: 18px; }

/* ===== Author mode (admin tạo template trong /studio/) =================
 * Ẩn UI mua hàng không liên quan: pill giá, share, download mockup, undo/redo
 * còn lại. Nút "Đặt hàng" đã được JS thay thành "Lưu làm template" — không cần
 * ẩn. Giữ topbar tối giản. */
.bigstep-ai-author-mode .bigstep-ai-price-pill,
.bigstep-ai-author-mode .bsai-share-open,
.bigstep-ai-author-mode .bigstep-ai-download-mockup,
.bigstep-ai-author-mode .bigstep-ai-trash-button {
  display: none !important;
}
.bigstep-ai-author-mode #bs-tpl-save-trigger {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, .28);
}
.bigstep-ai-author-mode #bs-tpl-save-trigger:hover { opacity: .92; transform: translateY(-1px); }

/* Canva-like editor workspace: quiet dotted canvas background + minimal purple selection. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle, rgba(97, 120, 148, .34) 1px, transparent 1.25px) !important;
  background-size: 16px 16px !important;
  background-position: 0 0 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap {
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08) !important;
}
.bigstep-ai-crop-drag-overlay {
  border: 1.5px dashed #8b3dff !important;
  background: transparent !important;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, .34) !important;
}
.bigstep-ai-crop-drag-overlay.is-dragging,
.bigstep-ai-crop-drag-overlay.is-fixed-ratio {
  border-color: #8b3dff !important;
  background: rgba(139, 61, 255, .035) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle] {
  width: 14px !important;
  height: 14px !important;
  border: 1.5px dashed #8b3dff !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .18) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle]::after {
  display: none !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="n"] { top: -7px !important; left: 50% !important; transform: translateX(-50%) !important; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="s"] { bottom: -7px !important; left: 50% !important; transform: translateX(-50%) !important; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="e"] { right: -7px !important; top: 50% !important; transform: translateY(-50%) !important; }
.bigstep-ai-crop-drag-overlay [data-crop-handle="w"] { left: -7px !important; top: 50% !important; transform: translateY(-50%) !important; }

/* ===== Frame bar (thanh công cụ khung ảnh) ============================= */
.bigstep-ai-app .bigstep-ai-obj-toolbar-btn--accent {
  background: #1b2022 !important;
  color: #dce1de !important;
  border: 1px solid #394244 !important;
  box-shadow: none !important;
  font-weight: 700;
}
.bigstep-ai-app .bigstep-ai-obj-toolbar-btn--accent:hover {
  opacity: 1;
  background: #252d2e !important;
  color: #c8ff00 !important;
  border-color: #c8ff00 !important;
}
.bigstep-ai-app .bigstep-ai-frame-bar-zoom { min-width: 120px; }
.bigstep-ai-app .bigstep-ai-frame-bar-zoom input[type="range"] {
  width: 96px;
  accent-color: #c8ff00;
}
.bigstep-ai-app .bigstep-ai-frame-bar-hint {
  font-size: 12px;
  color: var(--bs-muted);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .bigstep-ai-app .bigstep-ai-frame-bar-hint { display: none; }
}

/* ===== Tiêu đề panel sidebar — chuẩn hoá đồng nhất ====================== */
/* User chỉ rõ "font đề mục menu không đồng nhất": panel-section <strong> dùng
 * subtle 700/.08em, drafts h3 800/.14em, AI panel dùng <label> 700/.05em.
 * Hợp nhất 1 spec: 11.5px / 800 / .12em / uppercase / sáng — tất cả tiêu đề
 * panel trông như nhau. Specificity .bigstep-ai-app + nested = cao đủ override. */
.bigstep-ai-app [data-tool-panel] > .bigstep-ai-panel-section > strong,
.bigstep-ai-app [data-tool-panel="drafts"] .bigstep-ai-section-title,
.bigstep-ai-app [data-tool-panel="ai"] > label:first-of-type,
.bigstep-ai-app [data-tool-panel="text"] > .bigstep-ai-panel-section > strong {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-text, #e2e8f0);
  border-bottom: 1px solid rgba(99, 102, 241, .18);
}
/* Panel AI: tiêu đề là <label> bao textarea — vẫn cần xếp textarea/range thẳng
 * hàng bên dưới label như trước (label thông thường là flex column). Sau khi
 * apply spec trên thì textarea con sẽ kế tiếp ngay bên dưới — OK. Nhưng phải
 * giữ font textarea/select bình thường (chỉ label text mới uppercase 800). */
.bigstep-ai-app [data-tool-panel="ai"] > label:first-of-type textarea,
.bigstep-ai-app [data-tool-panel="ai"] > label:first-of-type input,
.bigstep-ai-app [data-tool-panel="ai"] > label:first-of-type select {
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bs-text);
  margin-top: 4px;
}

/* The empty-canvas state doubles as the one-time editor tour prompt. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt {
  width: min(360px, calc(100% - 32px)) !important;
  padding: 16px !important;
  gap: 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(129, 140, 248, .65) !important;
  background: rgba(16, 22, 38, .96) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .48) !important;
  cursor: default !important;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt.is-visible {
  opacity: 1 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt:hover {
  opacity: 1 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt[hidden] {
  display: none !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt::before,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt::after {
  content: none !important;
  display: none !important;
}
.bigstep-ai-tour-prompt-head {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  text-align: left;
}
.bigstep-ai-tour-prompt-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  border: 1px solid rgba(9, 16, 13, .72);
  background: #c8ff00 !important;
}
.bigstep-ai-tour-prompt-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  color: #aeb9cc;
  font-size: 12px;
  line-height: 1.4;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-copy strong {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.bigstep-ai-tour-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 8px;
}
.bigstep-ai-app .bigstep-ai-tour-prompt-actions button {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .34) !important;
  color: #dbe4f3 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.bigstep-ai-app .bigstep-ai-tour-prompt-actions .bigstep-ai-tour-prompt-start {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7557ef, #08bbed) !important;
}
.bigstep-ai-app .bigstep-ai-tour-prompt-close {
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 1px solid #52617a !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #172033 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

/* Image-only action: first in the floating toolbar and explicit enough to scan. */
.bigstep-ai-app .bigstep-ai-selection-toolbar [data-selection-action="remove-bg"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 88px !important;
  padding: 0 9px !important;
  gap: 5px !important;
  white-space: nowrap;
}
.bigstep-ai-app .bigstep-ai-selection-toolbar [data-selection-action="remove-bg"][hidden] {
  display: none !important;
}
.bigstep-ai-selection-toolbar [data-selection-action="remove-bg"] span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 980px) {
  .bigstep-ai-app .bigstep-ai-selection-toolbar [data-selection-action="remove-bg"] {
    min-width: 112px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt {
    width: min(340px, calc(100% - 24px)) !important;
    padding: 14px !important;
  }
}

@media (max-width: 480px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-empty.bigstep-ai-tour-prompt {
    width: calc(100% - 12px) !important;
    padding: 12px 11px !important;
    gap: 12px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-head {
    gap: 8px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-icon {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-copy {
    gap: 1px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-copy strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tour-prompt-copy > span {
    white-space: nowrap !important;
  }
}

/* Mobile layer actions live beside Undo/Redo instead of covering image tools. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: calc(100vw - 18px) !important;
    padding: 5px 6px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--bs-border) !important;
    border-radius: 12px !important;
    background: var(--bs-surface) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .24) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions::-webkit-scrollbar {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions:not([hidden]) {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 0 0 5px !important;
    gap: 4px !important;
    border: 0 !important;
    border-left: 1px solid var(--bs-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--bs-border) !important;
    border-radius: 10px !important;
    background: var(--bs-surface-2) !important;
    background-image: none !important;
    color: var(--bs-muted) !important;
    box-shadow: none !important;
    font: inherit !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button span {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions svg {
    width: 16px !important;
    height: 16px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button:hover:not(:disabled),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button:active:not(:disabled),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button:focus-visible:not(:disabled) {
    border-color: var(--bs-border-2) !important;
    background: var(--bs-surface-3) !important;
    color: var(--bs-text) !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions button:disabled {
    border-color: var(--bs-border) !important;
    background: var(--bs-surface-2) !important;
    color: var(--bs-muted) !important;
    opacity: .42 !important;
  }
}


/* __qrButtonBuff: nút QR phone-transfer + skeleton modal */
.bigstep-ai-tool--block[data-phone-transfer]{
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	width:100%;padding:13px 18px;margin-top:10px;
	border:0;border-radius:12px;cursor:pointer;
	color:#fff!important;font-weight:800;font-size:14px;letter-spacing:.01em;
	background-image:linear-gradient(135deg,#6366f1 0%,#8b5cf6 55%,#a855f7 100%) !important;background-color:#6366f1 !important;
	box-shadow:0 10px 26px -10px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.18);
	transition:transform .18s ease, box-shadow .18s ease;
}
.bigstep-ai-tool--block[data-phone-transfer]>svg{width:20px;height:20px;flex:0 0 auto;}
.bigstep-ai-tool--block[data-phone-transfer]:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(168,85,247,.65), inset 0 1px 0 rgba(255,255,255,.22);}
.bigstep-ai-tool--block[data-phone-transfer]:active{transform:translateY(0);}
.bigstep-ai-tool--block[data-phone-transfer]::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none;animation:bigstep-qr-shine 4s ease-in-out infinite;}
@keyframes bigstep-qr-shine{0%,60%{left:-60%}90%,100%{left:140%}}
.bigstep-ai-qr-skeleton{width:220px;height:220px;border-radius:14px;background:linear-gradient(110deg,rgba(99,117,168,.15) 30%,rgba(139,92,246,.18) 50%,rgba(99,117,168,.15) 70%);background-size:200% 100%;animation:bigstep-qr-skel 1.2s linear infinite;}
@keyframes bigstep-qr-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* __textFxTilesCss: 11-tile preview cho hiệu ứng chữ */
.bigstep-ai-text-fx-section{margin-top:14px}
.bigstep-ai-text-fx-hint{margin:4px 0 10px;font-size:11.5px;line-height:1.45;color:#94a3b8}

.bigstep-ai-text-fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bigstep-ai-text-fx-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 8px;border:1px solid rgba(99,117,168,.22);border-radius:10px;background:rgba(99,117,168,.10)!important;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease;color:#fff}
.bigstep-ai-text-fx-card:hover{transform:translateY(-2px);border-color:rgba(140,160,210,.55);background:rgba(99,117,168,.20)!important}
.bigstep-ai-text-fx-card svg{display:block;width:100%;max-width:110px;height:30px}
.bigstep-ai-text-fx-card span{font-size:11px;font-weight:700;color:#cbd5e9;letter-spacing:.02em;line-height:1.1;text-align:center}
@media (max-width:380px){.bigstep-ai-text-fx-grid{grid-template-columns:1fr}}


/* __warpTilePreviewCss: ảnh preview cho warp tiles render từ canvas */
.bigstep-ai-text-fx-card img{display:block;width:100%;max-width:110px;height:auto;max-height:32px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}


/* __imgInTextBtnCss: nút cắt ảnh thành chữ */
.bigstep-ai-app .bigstep-ai-img-in-text-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px 16px;margin-top:6px;border:0;border-radius:10px;color:#fff!important;font-weight:800;font-size:13.5px;cursor:pointer;
	background-image:linear-gradient(135deg,#22d3ee 0%,#8b5cf6 55%,#f43f5e 100%)!important;
	background-color:#8b5cf6!important;
	box-shadow:0 10px 22px -10px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.18);
	transition:transform .18s ease, box-shadow .18s ease}
.bigstep-ai-app .bigstep-ai-img-in-text-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(244,63,94,.55), inset 0 1px 0 rgba(255,255,255,.22)}
.bigstep-ai-app .bigstep-ai-img-in-text-btn svg{flex:0 0 auto}


/* __alignToolbarCss: floating align toolbar khi multi-select */
.bigstep-ai-align-toolbar{position:absolute;display:inline-flex;gap:2px;padding:4px;border-radius:10px;background:rgba(13,18,35,.92);border:1px solid rgba(99,117,168,.35);backdrop-filter:blur(8px);box-shadow:0 12px 28px -10px rgba(0,0,0,.55);z-index:200;transform:translateX(-50%);pointer-events:auto}
.bigstep-ai-align-toolbar button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#cbd5e9;cursor:pointer;transition:background .15s ease,color .15s ease}
.bigstep-ai-align-toolbar button:hover{background:rgba(139,92,246,.22);color:#fff}
.bigstep-ai-align-toolbar button svg{width:18px;height:18px;display:block}
@media (max-width:980px){.bigstep-ai-align-toolbar{padding:5px;gap:3px}.bigstep-ai-align-toolbar button{width:36px;height:36px}}


/* __bsEditModalCss: modal sửa text + slider */
.bigstep-ai-edit-modal{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,23,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:bsEditIn .18s ease}
@keyframes bsEditIn{from{opacity:0}to{opacity:1}}
.bigstep-ai-edit-modal-card{width:min(420px,100%);background:#0e1428;border:1px solid rgba(99,117,168,.32);border-radius:16px;padding:18px 20px 16px;color:#e6edf7;font-family:"Plus Jakarta Sans",Inter,sans-serif;box-shadow:0 32px 80px -20px rgba(0,0,0,.7)}
.bigstep-ai-edit-modal-card h3{margin:0 0 12px;font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.bigstep-ai-edit-modal-card .bs-edit-row{display:block;margin:0 0 12px;font-size:12.5px;font-weight:700;color:#94a3b8}
.bigstep-ai-edit-modal-card .bs-edit-row>span{display:block;margin:0 0 5px;line-height:1.2}
.bigstep-ai-edit-modal-card .bs-edit-row>span b{color:#cbd5e9;font-weight:800}
.bigstep-ai-edit-modal-card input[type=text]{width:100%;padding:10px 12px;border:1px solid rgba(99,117,168,.35);border-radius:9px;background:rgba(10,14,29,.6);color:#fff;font-size:14px;font-weight:600;font-family:inherit;outline:none;transition:border-color .15s ease,background .15s ease}
.bigstep-ai-edit-modal-card input[type=text]:focus{border-color:#8b5cf6;background:rgba(10,14,29,.85)}
.bigstep-ai-edit-modal-card input[type=range]{width:100%;margin:2px 0}
.bigstep-ai-edit-modal-card .bs-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.bigstep-ai-edit-modal-card .bs-edit-actions button{padding:9px 18px;border:0;border-radius:9px;cursor:pointer;font-weight:800;font-size:13px;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.bigstep-ai-edit-modal-card .bs-edit-cancel{background:rgba(99,117,168,.18);color:#cbd5e9}
.bigstep-ai-edit-modal-card .bs-edit-cancel:hover{background:rgba(99,117,168,.28);color:#fff}
.bigstep-ai-edit-modal-card .bs-edit-ok{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:#fff!important;background-color:#6366f1!important;background-image:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%)!important;box-shadow:0 10px 22px -10px rgba(139,92,246,.6)}
.bigstep-ai-edit-modal-card .bs-edit-ok:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(168,85,247,.7)}
@media (max-width:480px){.bigstep-ai-edit-modal-card{padding:16px}}

/* Mobile native text editor: keeps iPhone caret/spacebar editing out of Fabric. */
.bigstep-ai-mobile-text-editing .bigstep-ai-app,
.bigstep-ai-mobile-text-editing .bigstep-ai-selection-toolbar,
.bigstep-ai-mobile-text-editing .bigstep-ai-mobile-object-actions,
.bigstep-ai-mobile-text-editing .bigstep-ai-canvas-actions{
	user-select:none!important;
	-webkit-user-select:none!important;
}
.bigstep-ai-mobile-text-sheet,
.bigstep-ai-mobile-text-sheet *{box-sizing:border-box}
.bigstep-ai-mobile-text-sheet{
	position:fixed;
	inset:0;
	z-index:2147483605;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	padding:12px;
	background:rgba(2,6,23,.58);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}
.bigstep-ai-mobile-text-card{
	width:min(560px,100%);
	max-height:min(78vh,620px);
	padding:14px;
	padding-bottom:max(14px,env(safe-area-inset-bottom,0px));
	border:1px solid rgba(129,140,248,.34);
	border-radius:18px 18px 14px 14px;
	background:#0e1428;
	color:#fff;
	box-shadow:0 28px 80px rgba(0,0,0,.55);
	font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
}
.bigstep-ai-mobile-text-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:10px;
}
.bigstep-ai-mobile-text-head strong{font-size:16px;font-weight:850;line-height:1.2}
.bigstep-ai-mobile-text-head button{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	border:1px solid rgba(129,140,248,.28);
	border-radius:12px;
	background:rgba(15,23,42,.72);
	color:#cbd5e1;
	font-size:24px;
	line-height:1;
	cursor:pointer;
}
.bigstep-ai-mobile-text-card textarea{
	display:block;
	width:100%;
	min-height:150px;
	max-height:38vh;
	padding:14px;
	border:1px solid rgba(129,140,248,.42);
	border-radius:14px;
	outline:none;
	resize:vertical;
	background:#070b16;
	color:#fff;
	font:650 18px/1.45 Inter,system-ui,sans-serif;
	caret-color:#a78bfa;
	user-select:text!important;
	-webkit-user-select:text!important;
	touch-action:manipulation;
}
.bigstep-ai-mobile-text-card textarea:focus{
	border-color:#a78bfa;
	box-shadow:0 0 0 3px rgba(139,92,246,.2);
}
.bigstep-ai-mobile-text-tools{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:10px;
	color:#aeb8d6;
	font-size:11.5px;
	line-height:1.35;
}
.bigstep-ai-mobile-text-tools button{
	display:grid;
	place-items:center;
	flex:0 0 38px;
	width:38px;
	height:34px;
	border:1px solid rgba(129,140,248,.3);
	border-radius:10px;
	background:rgba(15,23,42,.8);
	color:#fff;
	font-size:20px;
	font-weight:900;
	cursor:pointer;
}
.bigstep-ai-mobile-text-tools span{flex:1;min-width:0}
.bigstep-ai-mobile-text-actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:12px;
}
.bigstep-ai-mobile-text-actions button{
	min-height:44px;
	border:1px solid rgba(129,140,248,.28);
	border-radius:12px;
	background:rgba(99,117,168,.16);
	color:#dbe4ff;
	font-weight:850;
	font-size:13.5px;
	font-family:inherit;
	cursor:pointer;
}
.bigstep-ai-mobile-text-actions [data-mobile-text-apply]{
	border-color:transparent;
	background:linear-gradient(135deg,#6366f1,#a855f7);
	color:#fff;
}


/* __imgInTextInputCss: input chữ cắt ảnh */
.bigstep-ai-app .bigstep-ai-img-in-text-input{display:block;width:100%;padding:10px 12px;margin:6px 0 8px;border:1px solid rgba(99,117,168,.32)!important;border-radius:9px;background:rgba(10,14,29,.55)!important;background-image:none!important;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em;font-family:inherit;outline:none;transition:border-color .15s ease,background .15s ease}
.bigstep-ai-app .bigstep-ai-img-in-text-input:focus{border-color:#8b5cf6!important;background:rgba(10,14,29,.85)!important}
.bigstep-ai-app .bigstep-ai-img-in-text-input::placeholder{color:#6b7896;font-weight:500}


/* __clipFontSelCss: font selector trong section 'Ảnh trong chữ' + modal */
.bigstep-ai-app .bigstep-ai-img-in-text-fontlbl{display:flex;align-items:center;gap:8px;margin:4px 0 6px;font-size:11.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}
.bigstep-ai-app .bigstep-ai-img-in-text-fontsel{flex:1;padding:8px 10px;border:1px solid rgba(99,117,168,.32)!important;border-radius:8px;background:rgba(10,14,29,.55)!important;background-image:none!important;color:#fff;font-size:13px;font-weight:600;font-family:inherit;outline:none;cursor:pointer}
.bigstep-ai-app .bigstep-ai-img-in-text-fontsel:focus{border-color:#8b5cf6!important}
.bigstep-ai-edit-modal-card select[data-bs-font]{width:100%;padding:9px 11px;border:1px solid rgba(99,117,168,.35);border-radius:9px;background:rgba(10,14,29,.6);color:#fff;font-size:13.5px;font-weight:600;font-family:inherit;outline:none;cursor:pointer}
.bigstep-ai-edit-modal-card select[data-bs-font]:focus{border-color:#8b5cf6}


/* __imgPickerCss: modal chọn ảnh đa nguồn */
.bs-img-picker{width:min(560px,100%);max-height:88vh;overflow-y:auto}
.bs-img-pick-actions{display:flex;gap:8px;margin:8px 0 14px;flex-wrap:wrap}
.bs-img-pick-act{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(99,117,168,.32);border-radius:9px;color:#fff;cursor:pointer;font-weight:700;font-size:13px;font-family:inherit;
	background-image:linear-gradient(135deg,#22d3ee 0%,#8b5cf6 100%)!important;background-color:#8b5cf6!important;box-shadow:0 8px 18px -8px rgba(139,92,246,.5)}
.bs-img-pick-act:hover{transform:translateY(-1px)}
.bs-img-pick-section{margin:14px 0}
.bs-img-pick-section h4{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9aa7c2}
.bs-img-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.bs-img-pick-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:1px solid rgba(99,117,168,.28);border-radius:8px;background:#0a0e1d;cursor:pointer;overflow:hidden;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.bs-img-pick-thumb:hover{transform:translateY(-2px);border-color:#8b5cf6;box-shadow:0 10px 22px -10px rgba(139,92,246,.55)}
.bs-img-pick-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bs-img-pick-ai-badge{position:absolute;top:4px;right:4px;padding:2px 6px;border-radius:5px;font-size:9px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8b5cf6,#a855f7);letter-spacing:.04em}
.bs-img-pick-empty{margin:8px 0;font-size:12px;color:#6b7896;font-style:italic}


/* __popupHideForWarpCss: hide controls không apply cho warp/clip */
[data-text-popup].is-warp-clip-mode [data-text-effect],
[data-text-popup].is-warp-clip-mode [data-text-curve],
[data-text-popup].is-warp-clip-mode [data-text-curve-wrap],
[data-text-popup].is-warp-clip-mode [data-text-line-height]{display:none!important}
[data-text-popup].is-warp-clip-mode [data-text-effect],
[data-text-popup].is-warp-clip-mode [data-text-curve],
[data-text-popup].is-warp-clip-mode [data-text-line-height]{visibility:hidden}
/* Ẩn LABEL chứa các control trên qua :has — fallback dùng class .bs-hidden nếu :has không hỗ trợ */
[data-text-popup].is-warp-clip-mode label:has([data-text-effect]),
[data-text-popup].is-warp-clip-mode label:has([data-text-curve]),
[data-text-popup].is-warp-clip-mode label:has([data-text-line-height]){display:none!important}
/* Align buttons row: thường wrap trong 1 group → hide buttons + label kế bên */
[data-text-popup].is-warp-clip-mode [data-text-align]{display:none!important}



/* __kerningLockedCss: visual hint khi kerning bị khóa do effect */
.bs-kerning-locked{position:relative;opacity:.45;pointer-events:auto}
.bs-kerning-locked input[type=range]{cursor:not-allowed;pointer-events:none}
.bs-kerning-locked::after{content:'🔒 Tắt hiệu ứng để chỉnh';position:absolute;right:0;top:-2px;font-size:9.5px;color:#a78bfa;font-style:italic;letter-spacing:.02em}


/* __editorPillSpacingV1: fix chữ dính trong .bigstep-ai-price-pill mode editor.
   Plugin set line-height:1 + gap:1px → diacritics tiếng Việt đè nhau. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill{
  gap:4px 6px !important;
  min-height:60px !important;
  max-height:70px !important;
  padding:7px 11px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill > span:not(.bigstep-ai-discount-badge){
  font-size:10px !important;
  line-height:1.3 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill del{
  font-size:11px !important;
  line-height:1.25 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong{
  font-size:18px !important;
  line-height:1.2 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill .bigstep-ai-discount-badge{
  min-height:18px !important;
  padding:3px 6px !important;
  line-height:1.2 !important;
}


/* __editorBreakdownCardV1: style cho card 'Bảng tính giá' mới trong editor.
   Codex thêm DOM nhưng chưa style → các <span>/<strong>/<b> collapse inline. */
.bigstep-ai-breakdown-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  margin:0;
  border:1px solid rgba(129,140,248,.30);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(30,41,80,.55), rgba(17,24,44,.85));
  color:#cbd5e1;
  font-size:13px;
  line-height:1.4;
}

/* HEAD: title + subtitle, mỗi cái 1 dòng */
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(165,180,252,.18);
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-head strong{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#a5b4fc;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-head span{
  font-size:11.5px;
  font-weight:500;
  color:#94a3b8;
}

/* ROWS: mỗi row label-trái / amount-phải */
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-rows{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  line-height:1.35;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span{
  display:inline-flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span strong{
  font-size:12.5px;
  font-weight:600;
  color:#e2e8f0;
  word-break:break-word;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span small{
  font-size:10.5px;
  color:#94a3b8;
  font-weight:400;
  font-style:italic;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > b{
  flex-shrink:0;
  font-size:13px;
  font-weight:700;
  color:#f1f5f9;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row.is-muted{
  opacity:.7;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-row.is-muted > b{
  font-weight:500;
}

/* SUMMARY: phần dưới với Tạm tính / Giảm / Tổng */
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:10px;
  border-top:1px dashed rgba(165,180,252,.30);
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  line-height:1.35;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div > span{
  font-size:12.5px;
  font-weight:600;
  color:#cbd5e1;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div > b{
  font-size:13px;
  font-weight:700;
  color:#f1f5f9;
  font-variant-numeric:tabular-nums;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-discount > span{ color:#86efac; }
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-discount > b{ color:#86efac; }
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(165,180,252,.22);
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total > span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}
.bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total > b{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
  background:linear-gradient(135deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Bulk CTA bên trong */
.bigstep-ai-breakdown-card .bigstep-bulk-contact-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:8px 12px;
  border:1px solid rgba(165,180,252,.40);
  border-radius:8px;
  background:rgba(99,102,241,.18);
  color:#e0e7ff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
}
.bigstep-ai-breakdown-card .bigstep-bulk-contact-cta:hover{
  background:rgba(99,102,241,.28);
  border-color:rgba(165,180,252,.60);
}

/* __editorBreakdownCardV2:
   - Ẩn .bigstep-ai-product-panel-total (card 'Tổng tiền tạm tính' phía dưới)
     vì .bigstep-ai-breakdown-card đã show total đầy đủ rồi → tránh duplicate
   - Thêm note: ảnh hưởng giá khi user upload thiết kế */
.bigstep-ai-product-panel-total{
  display:none !important;
}


.bigstep-ai-breakdown-note{margin-top:2px;padding:8px 10px;border:1px dashed rgba(251,191,36,.40);border-radius:8px;background:rgba(251,191,36,.08);color:#fcd34d;font-size:11px;font-weight:600;line-height:1.4;font-style:italic;}

/* __editorBreakdownNoOuterFrameV1: .bigstep-ai-breakdown (parent của card)
   có border + bg + padding riêng → tạo viền lồng nhau. Strip để card mới
   chiếm full width và không nested. */
.bigstep-ai-breakdown{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

/* Graphite Lime price breakdown — dùng chung ở Printing Options và Studio. */
body .bigstep-ai-breakdown-card {
  gap: 0 !important;
  padding: 14px !important;
  border: 1px solid #34413c !important;
  border-radius: 14px !important;
  background: #0d1211 !important;
  color: #dce3df !important;
  box-shadow: none !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-head {
  gap: 3px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid #2a3531 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-head strong {
  color: #f4f7f5 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-head span {
  color: #8f9b96 !important;
  font-size: 11px !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-rows {
  gap: 0 !important;
  padding: 5px 0 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 48px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(84,101,94,.28) !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row:last-child {
  border-bottom: 0 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #eef2f0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span small {
  margin-top: 3px !important;
  color: #7f8c87 !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > b {
  color: #c8ff00 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row.is-muted {
  opacity: 1 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row.is-muted > b {
  color: #7f8c87 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary {
  gap: 7px !important;
  padding-top: 12px !important;
  border-top: 1px dashed #3b4944 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div > span {
  color: #aeb8b4 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div > b {
  color: #c8ff00 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total {
  margin-top: 2px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(200,255,0,.48) !important;
  border-radius: 10px !important;
  background: rgba(200,255,0,.07) !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total > span {
  color: #c8ff00 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-total > b {
  color: #c8ff00 !important;
  background: none !important;
  font-size: 18px !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #c8ff00 !important;
}

/* One decisive estimate row, shared by Product Single and Studio. */
body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-subtotal {
  margin-top: 2px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(33,212,194,.48) !important;
  border-radius: 10px !important;
  background: rgba(33,212,194,.08) !important;
}
body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-subtotal > span {
  color: #bafff8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
}
body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-subtotal > b {
  color: #21d4c2 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > b.is-detail {
  color: #7f8c87 !important;
}

body .bigstep-ai-breakdown-card .bigstep-ai-breakdown-note {
  margin: 3px 0 0 !important;
  padding: 9px 10px !important;
  border: 1px solid #2f3b37 !important;
  border-radius: 8px !important;
  background: #111715 !important;
  color: #7f8c87 !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

/* Bigstep dark dotted editor workspace. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
  background-color: #080b12 !important;
  background-image: radial-gradient(circle, rgba(148, 163, 184, .24) 1px, transparent 1.25px) !important;
  background-size: 16px 16px !important;
  background-position: 0 0 !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap {
  box-shadow: 0 20px 56px rgba(0, 0, 0, .34), 0 0 0 1px rgba(148, 163, 184, .10) !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll,
.bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-editor-main,
.bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
.bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
  background-color: #f8fafc !important;
  background-image: radial-gradient(circle, rgba(71, 85, 105, .24) 1px, transparent 1.25px) !important;
  background-size: 16px 16px !important;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap,
.bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-canvas-wrap {
  box-shadow: 0 18px 44px rgba(15, 23, 42, .09), 0 0 0 1px rgba(15, 23, 42, .06) !important;
}
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
    background-image: radial-gradient(circle, rgba(148, 163, 184, .15) .7px, transparent .95px) !important;
    background-size: 18px 18px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap {
    box-shadow: 0 14px 38px rgba(0, 0, 0, .28), 0 0 0 1px rgba(148, 163, 184, .08) !important;
  }
  :root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main,
  :root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
  :root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll,
  .bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-editor-main,
  .bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-editor-canvas-area,
  .bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-canvas-scroll {
    background-image: radial-gradient(circle, rgba(71, 85, 105, .16) .7px, transparent .95px) !important;
    background-size: 18px 18px !important;
  }
  :root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap,
  .bigstep-ai-app[data-theme="light"][data-editor-mode="editor"] .bigstep-ai-canvas-wrap {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .05) !important;
  }
}

/* Canva-like crop handles: aligned on the crop border, not inside the image. */
.bigstep-ai-crop-drag-overlay {
  border: 1.5px dashed #8b3dff !important;
  background: transparent !important;
  box-shadow: 0 0 0 9999px rgba(8, 11, 18, .18) !important;
}
.bigstep-ai-crop-drag-overlay.is-dragging,
.bigstep-ai-crop-drag-overlay.is-fixed-ratio {
  border-color: #8b3dff !important;
  background: rgba(139, 61, 255, .035) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle] {
  width: 14px !important;
  height: 14px !important;
  border: 1.5px dashed #8b3dff !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .18) !important;
  box-sizing: border-box !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle]::after {
  display: none !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="n"] {
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="s"] {
  bottom: 0 !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="e"] {
  right: 0 !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
}
.bigstep-ai-crop-drag-overlay [data-crop-handle="w"] {
  left: 0 !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}


/* __bigstepEmojiPanelV1: thư viện cảm xúc trong Element panel */
.bigstep-ai-emoji-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bigstep-ai-emoji-search-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.bigstep-ai-emoji-search{
  flex:1;
  padding:7px 10px;
  border:1px solid rgba(129,140,248,.30);
  border-radius:8px;
  background:rgba(15,23,42,.55);
  color:#e2e8f0;
  font-size:12.5px;
  outline:none;
}
.bigstep-ai-emoji-search::placeholder{ color:#64748b; }
.bigstep-ai-emoji-search:focus{ border-color:rgba(165,180,252,.65); background:rgba(15,23,42,.75); }
.bigstep-ai-emoji-skintone{ position:relative; flex-shrink:0; }
.bigstep-ai-emoji-skintone-btn{
  width:32px; height:32px;
  border:1px solid rgba(129,140,248,.30);
  border-radius:8px;
  background:rgba(15,23,42,.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:border-color .15s;
}
.bigstep-ai-emoji-skintone-btn:hover{ border-color:rgba(165,180,252,.65); }
.bigstep-ai-emoji-skintone-dot{
  display:block;
  width:16px; height:16px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
}
.bigstep-ai-emoji-skintone-panel{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  display:flex;
  gap:4px;
  padding:6px;
  background:#1a2238;
  border:1px solid rgba(165,180,252,.40);
  border-radius:8px;
  box-shadow:0 8px 22px -4px rgba(0,0,0,.5);
  z-index:20;
}
.bigstep-ai-emoji-skin-opt{
  width:24px; height:24px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  padding:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s;
}
.bigstep-ai-emoji-skin-opt > span{
  display:block;
  width:14px; height:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
}
.bigstep-ai-emoji-skin-opt:hover,
.bigstep-ai-emoji-skin-opt.is-active{ border-color:rgba(165,180,252,.65); background:rgba(99,102,241,.18); }

.bigstep-ai-emoji-categories{
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding:4px 2px 8px;
  border-bottom:1px solid rgba(129,140,248,.18);
  scrollbar-width:thin;
}
.bigstep-ai-emoji-categories::-webkit-scrollbar{ height:5px; }
.bigstep-ai-emoji-categories::-webkit-scrollbar-thumb{ background:rgba(129,140,248,.40); border-radius:3px; }
.bigstep-ai-emoji-cat{
  flex-shrink:0;
  width:34px; height:34px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s;
}
.bigstep-ai-emoji-cat img{ width:22px; height:22px; display:block; }
.bigstep-ai-emoji-cat:hover{ background:rgba(99,102,241,.15); }
.bigstep-ai-emoji-cat.is-active{
  background:rgba(99,102,241,.25);
  border-color:rgba(165,180,252,.55);
}

.bigstep-ai-emoji-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:4px;
  max-height:280px;
  overflow-y:auto;
  padding:4px 2px;
  scrollbar-width:thin;
}
.bigstep-ai-emoji-grid::-webkit-scrollbar{ width:6px; }
.bigstep-ai-emoji-grid::-webkit-scrollbar-thumb{ background:rgba(129,140,248,.40); border-radius:3px; }
.bigstep-ai-emoji-tile{
  aspect-ratio:1;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  padding:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, transform .12s, border-color .12s;
}
.bigstep-ai-emoji-tile img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.bigstep-ai-emoji-tile:hover{
  background:rgba(99,102,241,.18);
  border-color:rgba(165,180,252,.40);
  transform:scale(1.06);
}
.bigstep-ai-emoji-tile:active{ transform:scale(.96); }
.bigstep-ai-emoji-empty,
.bigstep-ai-emoji-loading{
  grid-column:1 / -1;
  text-align:center;
  padding:24px 8px;
  color:#94a3b8;
  font-size:12px;
  font-style:italic;
}
@media (max-width:480px){
  .bigstep-ai-emoji-grid{ grid-template-columns:repeat(5, 1fr); max-height:240px; }
  .bigstep-ai-emoji-cat{ width:32px; height:32px; }
}

/* __bigstepEmojiPanelV2: tile to hơn + gap rộng + 5 cột thay 6 → đỡ chật */
.bigstep-ai-emoji-grid{
  grid-template-columns:repeat(5, 1fr) !important;
  gap:6px !important;
  padding:6px 2px !important;
}
.bigstep-ai-emoji-tile{
  padding:6px !important;
  border-radius:10px !important;
  min-height:42px !important;
}
.bigstep-ai-emoji-tile img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
}
/* __bigstepEmojiPanelV3 (fix iOS): aspect-ratio trên grid item KHÔNG được hàng
   grid dự trữ đủ chiều cao (min-height nhỏ hơn) → emoji ĐÈ DỌC lên nhau ở mobile.
   Dùng chiều cao CỐ ĐỊNH → grid auto-rows luôn chừa đủ chỗ, hết chồng. */
.bigstep-ai-emoji-tile{
  aspect-ratio:auto !important;
  height:48px !important;
  min-height:48px !important;
}
@media (max-width:520px){
  .bigstep-ai-emoji-tile{ height:58px !important; min-height:58px !important; }
}
.bigstep-ai-emoji-categories{
  gap:6px !important;
  padding:6px 2px 10px !important;
}
.bigstep-ai-emoji-cat{
  width:38px !important;
  height:38px !important;
  padding:7px !important;
  border-radius:10px !important;
}
.bigstep-ai-emoji-cat img{ width:24px !important; height:24px !important; }

/* __mobileSideTabsHideWhenBarOpenV1
   Mobile: image-bar mở 320px-tall ở dưới đè lên .bigstep-ai-side-tabs
   (fixed bottom:76px). Ẩn side-tabs khi bất kỳ toolbar editing nào active. */
@media (max-width: 760px) and (orientation: portrait) {
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-image-bar:not([hidden])) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-text-bar:not([hidden]):not(.bigstep-ai-image-bar)) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-side-tabs {
    display: none !important;
  }
}
@media (max-width: 760px) {
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-image-bar:not([hidden])) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-text-bar:not([hidden]):not(.bigstep-ai-image-bar)) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-obj-toolbar:not([hidden])) .bigstep-ai-side-tabs {
    display: none !important;
  }
}

/* __mobileToolbarStackV2: dứt điểm overlap mobile các floating bars
   - Toast: nâng lên trên side-tabs (76 + 60 + 8 = 144px)
   - Tool-panel bottom sheet: ẩn side-tabs khi mở (cover toàn vùng dưới)
   - Drawing notice: ẩn side-tabs khi đang vẽ */
@media (max-width: 760px) {
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-tool-panel:not([hidden])) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-drawing-notice:not([hidden])) .bigstep-ai-side-tabs,
  .bigstep-ai-app[data-editor-mode=editor]:has(.bigstep-ai-mobile-object-actions:not([hidden])) .bigstep-ai-side-tabs {
    display: none !important;
  }
}
@media (max-width: 600px) {
  /* Toast container: nâng lên trên side-tabs nếu side-tabs còn visible */
  body .bigstep-ai-toast-container {
    bottom: calc(var(--toolbar-m, 68px) + 70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* __sideTabsSafeBottomV1: side tabs trên mobile — clear toolbar + safe-area-inset (iPhone notch) */
@media (max-width: 760px) {
	.bigstep-ai-side-tabs {
		position: fixed !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		bottom: calc(var(--toolbar-m, 68px) + env(safe-area-inset-bottom, 0px) + 28px) !important;
		z-index: 71 !important;
		pointer-events: auto !important;
	}
}
/* AI Search model stack on the public Bigstep AI Studio landing. */
.bs-land-ai-models {
  width: min(1180px, calc(100% - 28px));
  margin: 44px auto;
}
.bs-land-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bs-land-model-card {
  min-height: 170px;
  padding: 20px;
  border: 1px solid rgba(99, 102, 241, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(8, 13, 24, .76));
  box-shadow: 0 22px 70px rgba(2, 6, 23, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.bs-land-model-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 8px;
  color: #93c5fd;
  background: rgba(37, 99, 235, .12);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}
.bs-land-model-card h3 {
  margin: 16px 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.14;
}
.bs-land-model-card p {
  margin: 0;
  color: rgba(226, 232, 240, .78);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.6;
}
:root[data-theme="light"] .bs-land-model-card,
.bigstep-ai-app[data-theme="light"] .bs-land-model-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  border-color: rgba(99, 102, 241, .18);
  box-shadow: 0 20px 56px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
:root[data-theme="light"] .bs-land-model-card h3,
.bigstep-ai-app[data-theme="light"] .bs-land-model-card h3 {
  color: #0f172a;
}
:root[data-theme="light"] .bs-land-model-card p,
.bigstep-ai-app[data-theme="light"] .bs-land-model-card p {
  color: #475569;
}
@media (max-width: 1020px) {
  .bs-land-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  .bs-land-model-grid {
    grid-template-columns: 1fr;
  }
  .bs-land-model-card {
    min-height: 0;
  }
}

/* Tiny mobile editor mode: iPhone 6s/SE-class screens only.
   Activated by JS via .is-tiny-mobile-editor so larger phones such as
   iPhone 14 Pro Max keep the normal mobile editor layout. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor {
    --topbar-h: 56px;
    --toolbar-m: 58px;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    height: 21px !important;
    max-width: 82px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-price-pill {
    flex-basis: 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    padding: 0 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-price-pill strong {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-bigstep-ai-cart] {
    height: 34px !important;
    min-width: 82px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-canvas-area {
    padding: 6px 6px 0 !important;
    gap: 6px !important;
    padding-bottom: calc(var(--toolbar-m, 58px) + 4px) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {
    width: min(var(--bigstep-editor-size, 300px), calc(100dvh - var(--topbar-h, 56px) - var(--toolbar-m, 58px) - 76px), calc(100dvw - 10px)) !important;
    max-width: calc(100dvw - 10px) !important;
    border-radius: 10px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-canvas-scroll {
    padding: 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu {
    height: var(--toolbar-m, 58px) !important;
    padding: 3px 5px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 5px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 50px !important;
    padding: 4px 3px !important;
    gap: 2px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 18px !important;
    height: 18px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-panel {
    bottom: var(--toolbar-m, 58px) !important;
    max-height: min(44dvh, 300px) !important;
    padding: 18px 10px 10px !important;
    border-radius: 14px 14px 0 0 !important;
    overscroll-behavior: contain !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-panel::before,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before {
    top: 6px !important;
    width: 30px !important;
    height: 3px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-tool-panel] .bigstep-ai-tool-section,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-section {
    padding: 8px !important;
    gap: 8px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-panel-head,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-section-title {
    margin-bottom: 6px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-style-chips,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-editor-style-chips] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-style-chips button,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-editor-style-chips] button {
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-tool-panel="products"] .bigstep-ai-swatch-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-swatch {
    min-height: 32px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-tool-panel="layers"],
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-tool-panel="drafts"] {
    max-height: min(66dvh, 460px) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-layer-row {
    min-height: 38px !important;
    padding: 5px 7px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-canvas-actions {
    top: 6px !important;
    max-width: calc(100dvw - 12px) !important;
    gap: 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-canvas-actions .bigstep-ai-top-button,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-zoom-controls button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-zoom-controls {
    right: 8px !important;
    bottom: calc(var(--toolbar-m, 58px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: scale(.9) !important;
    transform-origin: right bottom !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-side-tabs {
    bottom: calc(var(--toolbar-m, 58px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-width: calc(100dvw - 12px) !important;
  }
}

/* Tiny mobile image toolbar: keep image controls usable without covering the canvas. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-canvas-area:has(.bigstep-ai-image-bar:not([hidden])) {
    padding-bottom: calc(var(--toolbar-m, 58px) + 94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar.bigstep-ai-text-bar:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar:not([hidden]) {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(var(--toolbar-m, 58px) + 6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 780 !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    max-height: 86px !important;
    min-height: 0 !important;
    padding: 6px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    touch-action: pan-x !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .38) !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar::before,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar::after {
    display: none !important;
    content: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar > .bigstep-ai-image-mode-tabs,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-mode-tabs {
    display: grid !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 46px) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-mode-tabs button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-section-title {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-mode-tabs button span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar > .bigstep-ai-image-edit-section:not([hidden]),
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-edit-section:not([hidden]) {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-image-menu,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-image-crop-controls,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-image-erase-controls {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-text-bar-label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-text-bar-select,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar select {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 20px 0 8px !important;
    font-size: 11px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar input[type="range"] {
    width: 72px !important;
    min-width: 72px !important;
    height: 28px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-tool:not(.bigstep-ai-image-reset-main) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-tool svg {
    width: 14px !important;
    height: 14px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-bar .bigstep-ai-tool:not(.bigstep-ai-image-reset-main) span {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-menu--quick .bigstep-ai-image-reset-main {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    justify-content: center !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-image-menu--quick .bigstep-ai-image-reset-main span {
    display: inline !important;
  }
}

/* Final mobile pinch zoom override. Keep the zoom UI off on mobile; canvas uses two-finger pinch. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-wrap canvas {
    touch-action: none !important;
  }
}

/* Final mobile bottom menu: fixed 8-slot dock with balanced labels. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    overflow: hidden !important;
    scroll-padding-inline: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 1px 4px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool::after {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    color: inherit !important;
    content: "" !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="product"]::after { content: "SP" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="library"]::after { content: "Thư viện" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="upload"]::after { content: "Up" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="text"]::after { content: "Text" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="ai"]::after { content: "AI" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="elements"]::after { content: "Icon" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="layers"]::after { content: "Lớp" !important; }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool[data-panel-toggle="drafts"]::after { content: "Nháp" !important; }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool + .bigstep-ai-tool {
    margin-left: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu {
    gap: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool::after {
    font-size: 9px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }
}

/* Final correction: keep original mobile menu text, only tighten size and spacing. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    overflow: hidden !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 3px !important;
    padding: 5px 1px 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-overflow: clip !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool::after {
    display: none !important;
    content: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    font-size: 8.5px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool svg {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }
}

/* __desktopImageInspectorV4Restore: restore the polished selected-image toolbar.
   Keep this near EOF so later editor/mobile guards do not flatten the panel. */
@media (min-width: 981px) {
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar {
    /* 318px → 252px: nội dung là các hàng dọc, panel cũ rộng quá mức cần (20260703) */
    width: 252px !important;
    max-width: 252px !important;
    /* Tab gộp (filter + màu + hòa trộn) dài hơn → không cho tràn viewport */
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    padding: 10px !important;
    gap: 9px !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 28% -10%, rgba(56,189,248,.16), transparent 34%),
      radial-gradient(circle at 110% 20%, rgba(139,92,246,.18), transparent 38%),
      linear-gradient(180deg, rgba(15,23,42,.98), rgba(7,11,22,.98)) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    box-shadow:
      0 28px 70px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
    color: #e5edf8 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden])::before {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 4px !important;
    margin: 0 auto 2px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.28) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-bar-head {
    padding: 3px 2px 10px !important;
    border-bottom: 1px solid rgba(148,163,184,.12) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-bar-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(34,211,238,.10) !important;
    border: 1px solid rgba(34,211,238,.20) !important;
    color: #67e8f9 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-bar-head strong {
    margin-top: 5px !important;
    color: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-bar-head small {
    max-width: 265px !important;
    color: #93a1b7 !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-actions-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #aab6c8 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-actions-label::after {
    content: "4 công cụ" !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs].bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    /* Mô tả nhỏ (small) đã bỏ khỏi markup → 1 hàng, nút gọn lại (20260703) */
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    background: rgba(15,23,42,.54) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    text-align: left !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view]::after {
    content: "" !important;
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;
    transform: translateY(-50%) rotate(45deg) !important;
    color: rgba(148,163,184,.42) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view]:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(125,211,252,.28) !important;
    background: rgba(30,41,59,.68) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] svg {
    grid-row: auto !important;
    width: 16px !important;
    height: 16px !important;
    padding: 5px !important;
    box-sizing: content-box !important;
    border-radius: 10px !important;
    background: rgba(148,163,184,.10) !important;
    color: #a8b6ca !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] span {
    color: #e5edf8 !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] small {
    display: block !important;
    max-width: 190px !important;
    color: #7f8ca3 !important;
    font-size: 10.5px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active {
    border-color: rgba(125,211,252,.45) !important;
    background:
      linear-gradient(135deg, rgba(37,99,235,.38), rgba(14,165,233,.20)),
      rgba(15,23,42,.74) !important;
    box-shadow: inset 3px 0 0 #38bdf8, inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(14,165,233,.12) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active::after {
    color: rgba(219,234,254,.82) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active svg {
    background: rgba(56,189,248,.18) !important;
    color: #e0f2fe !important;
  }

  /* CTA "AI Remix ảnh này" — cùng khung row với các tab nhưng accent tím AI (20260703) */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    column-gap: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(167,139,250,.34) !important;
    background:
      linear-gradient(135deg, rgba(124,58,237,.30), rgba(139,92,246,.12)),
      rgba(15,23,42,.6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(124,58,237,.14) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta]:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(196,181,253,.55) !important;
    background:
      linear-gradient(135deg, rgba(124,58,237,.42), rgba(139,92,246,.18)),
      rgba(15,23,42,.7) !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] svg {
    width: 16px !important;
    height: 16px !important;
    padding: 5px !important;
    box-sizing: content-box !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] span {
    color: #ede9fe !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    column-gap: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(94,234,212,.30) !important;
    background:
      linear-gradient(135deg, rgba(20,184,166,.26), rgba(14,165,233,.12)),
      rgba(15,23,42,.6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(14,165,233,.12) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta]:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(125,211,252,.55) !important;
    background:
      linear-gradient(135deg, rgba(20,184,166,.36), rgba(14,165,233,.18)),
      rgba(15,23,42,.7) !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta] svg {
    width: 16px !important;
    height: 16px !important;
    padding: 5px !important;
    box-sizing: content-box !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
    color: #fff !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta] span {
    color: #ccfbf1 !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-remix-cta-badge {
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(196,181,253,.18) !important;
    border: 1px solid rgba(196,181,253,.35) !important;
    color: #ddd6fe !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: .08em !important;
  }

  /* Sliders màu (gộp từ tab "Màu ảnh" cũ) nằm trong card — full width, accent cyan */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-text-bar-label--range input[type="range"] {
    width: 100% !important;
    accent-color: #38bdf8 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-edit-section:not([hidden]) {
    gap: 7px !important;
    padding-top: 2px !important;
  }

  /* Đồng bộ typography với panel text (FONT/CỠ/MÀU): uppercase kicker (20260703) */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-section-title {
    color: #aab6c8 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu {
    gap: 7px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Card label + select đồng bộ 1:1 với panel text: cùng padding 9x11/radius 14,
   * label uppercase .03em, select h32/radius 10/w800 (20260703) */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-text-bar-label {
    padding: 9px 11px !important;
    border-radius: 14px !important;
    background: rgba(2,6,23,.24) !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    color: #aab6c8 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    gap: 5px !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-text-bar-select,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu select {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: rgba(30,41,59,.88) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-field-help {
    color: #7e8aa0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-tool {
    min-height: 36px !important;
    border-radius: 10px !important;
    background: rgba(15,23,42,.48) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    color: #b8c4d8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
}
html[lang="en"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active::after {
	content: "Selected";
}

/* Final cascade lock for the unified progress component. */
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card {
  width: min(404px, calc(100vw - 32px)) !important;
  padding: 28px 26px 24px !important;
  gap: 10px !important;
  border: 1px solid rgba(129,140,248,.42) !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 50% 0, rgba(99,102,241,.18), transparent 42%), linear-gradient(180deg, rgba(17,24,39,.98), rgba(7,12,24,.98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 58px rgba(99,102,241,.16) !important;
}
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card::before,
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card::after { content:none !important; display:none !important; }
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-mark {
  display:grid !important; place-items:center !important; width:58px !important; height:58px !important;
  margin-bottom:2px !important; border:0 !important; border-radius:18px !important;
  background:conic-gradient(from 210deg,#22d3ee,#6366f1,#a855f7,#ec4899,#22d3ee) !important;
  box-shadow:0 16px 36px rgba(79,70,229,.30),0 0 30px rgba(34,211,238,.14) !important;
  animation:bsai-loader-float 1.8s ease-in-out infinite !important; overflow:visible !important;
}
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-mark::before,
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-mark::after { content:none !important; display:none !important; }
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card strong {
  color:#f8fafc !important; font-size:18px !important; font-weight:850 !important; letter-spacing:-.01em !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
}
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-track {
  width:100% !important; height:7px !important; padding:0 !important; border:0 !important;
  border-radius:999px !important; background:rgba(148,163,184,.13) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045) !important;
}
html body .bigstep-ai-app .bigstep-ai-loading .bsai-loader-track::after { content:none !important; display:none !important; }
html body .bigstep-ai-app .bigstep-ai-mockup-load-progress__box,
html body .bigstep-ai-app .bigstep-ai-remix-progress,
html body .bigstep-ai-app .bigstep-ai-remix-panel-overlay,
html body .bigstep-personalizer__loading,
html body .bsai-share-loading {
  border-color:rgba(129,140,248,.30) !important; border-radius:16px !important;
  background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(7,12,24,.96)) !important;
  color:#cbd5e1 !important; box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
html body .bigstep-ai-app .bigstep-ai-mockup-load-progress__bar,
html body .bigstep-ai-app .bigstep-ai-remix-progress-bar,
html body .bigstep-ai-app .bigstep-ai-remix-gen-bar {
  border:0 !important; border-radius:999px !important; background:rgba(148,163,184,.13) !important; overflow:hidden !important;
}
html body .bigstep-ai-app .bigstep-ai-mockup-load-progress__bar i,
html body .bigstep-ai-app .bigstep-ai-remix-progress-bar span,
html body .bigstep-ai-app .bigstep-ai-remix-gen-bar span {
  background:linear-gradient(90deg,#22d3ee,#6366f1 52%,#a855f7) !important;
  box-shadow:0 0 14px rgba(99,102,241,.45) !important;
}
.bigstep-ai-app button[aria-busy="true"],
.bigstep-ai-app button.is-generating {
  cursor:wait !important;
  opacity:.82;
}
.bigstep-ai-app button[aria-busy="true"]::before,
.bigstep-ai-app button.is-generating::before {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:8px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  vertical-align:-2px;
  animation:bs-spin .8s linear infinite;
}

/* ──────────────────────────────────────────────────────────────
 * 43. PANEL TEXT — đồng bộ visual với panel ảnh (desktop sidebar)
 *
 * Trước: trong sidebar phải, mỗi control (Font, Cỡ, Màu, Viền,
 * Kerning, Dòng, Hiệu ứng, Cường độ, B/I/Aa, align) nằm phẳng trên
 * background panel → thiếu hierarchy, khó scan.
 *
 * Sau: mỗi label/group được wrap trong "card" giống .bigstep-ai-image-menu
 * (background bs-surface-2, border, radius) — panel text trông
 * nổi và có cấu trúc ngang bằng panel ảnh.
 *
 * Chỉ áp dụng desktop (≥981px) trong editor mode. Mobile/horizontal
 * bar giữ nguyên layout hiện tại.
 * ────────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  /* PANEL-LEVEL background — copy nguyên seek-and-feel của image-bar (§15213).
   * 3 layer: radial cyan top-left + radial purple top-right + linear navy.
   * Selector dùng [data-text-popup] để loại trừ image-bar (cũng có class text-bar). */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) {
    width: 280px !important;
    max-width: 280px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 12px !important;
    align-content: start !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 28% -10%, rgba(56,189,248,.16), transparent 34%),
      radial-gradient(circle at 110% 20%, rgba(139,92,246,.18), transparent 38%),
      linear-gradient(180deg, rgba(15,23,42,.98), rgba(7,11,22,.98)) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    box-shadow:
      0 28px 70px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
    color: #e5edf8 !important;
  }
  /* Spacer pseudo handles from the base text bar; the real injected drag
     handle spans the full grid below. */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden])::before,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden])::after {
    display: none !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-panel-drag-handle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Card cho mỗi item — match image-menu items (background tối nhẹ, radius 14) */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-group,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label {
    padding: 9px 11px !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 14px !important;
    background: rgba(2,6,23,.24) !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
  /* Span full width: B/I/Aa + Align groups, Font, Viền, Hiệu ứng */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-group,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label:has([data-font-family]),
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label:has(.bigstep-ai-text-bar-stroke),
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label:has([data-text-effect]) {
    grid-column: 1 / -1 !important;
  }
  /* Group buttons trải đều — mỗi button flex:1 để fill chiều ngang, gap nhỏ */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: stretch !important;
    padding: 5px 6px !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-group > .bigstep-ai-tool {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  /* Label text — match image-menu label */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label {
    color: #aab6c8 !important;
    font-weight: 900 !important;
    font-size: 10.5px !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    gap: 5px !important;
  }
  /* Range labels khi ghép cặp */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label--range {
    gap: 6px !important;
  }
  /* Separator phẳng không còn cần */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-sep {
    display: none !important;
  }
  /* Select / input bên trong card — match image-bar inputs (background tối, border) */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) .bigstep-ai-text-bar-select,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) input[type="number"] {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: rgba(30,41,59,.88) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    color: #f8fafc !important;
    font-weight: 800 !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) input[type="range"] {
    accent-color: #38bdf8 !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-bar-label[hidden],
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > [data-text-curve-wrap][hidden],
  body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > [data-warp-intensity-wrap][hidden] {
    display: none !important;
  }
}

/* Tab Upload / AI Remix trong cùng 1 panel — AI Remix luôn hiện style list
 * ngay khi mở tab, không cần upload ảnh trước mới thấy. */
.bigstep-ai-upload-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
}
.bigstep-ai-ai-tabs {
  align-items: stretch;
}
.bigstep-ai-upload-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #9aa4c4;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bigstep-ai-upload-tab.is-active {
  background: var(--bs-accent, #6366f1);
  color: #fff;
}
.bigstep-ai-upload-tab-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #1a1020;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bigstep-ai-upload-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bigstep-ai-upload-tab-panel[hidden] { display: none; }

.bigstep-ai-library-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
}
.bigstep-ai-library-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #9aa4c4;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bigstep-ai-library-tab.is-active {
  background: var(--bs-accent, #6366f1);
  color: #fff;
}
.bigstep-ai-library-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bigstep-ai-library-tab-panel[hidden] { display: none; }

/* Panel hero head — heading dạng card (icon tile + title + subtitle) dùng chung
   cho panel Text và panel AI, tông indigo accent của editor. Bản tông cam cho
   AI Remix ở .bigstep-ai-remix-head ngay dưới. */
.bigstep-ai-panel-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(99,102,241,.26);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(139,92,246,.06));
}
.bigstep-ai-panel-hero-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  box-shadow: 0 6px 16px rgba(99,102,241,.35);
}
.bigstep-ai-panel-hero-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bigstep-ai-panel-hero-text strong {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.bigstep-ai-panel-hero-text span {
  font-size: 11.5px;
  color: #c7ccdd;
  line-height: 1.4;
}

.bigstep-ai-remix {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Hero head — cùng tông gradient cam với CTA "Thử AI Remix" để đồng bộ branding */
.bigstep-ai-remix-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(99,102,241,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(139,92,246,.07));
}
.bigstep-ai-remix-head-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #1a1020;
  box-shadow: 0 6px 16px rgba(99,102,241,.35);
}
.bigstep-ai-remix-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bigstep-ai-remix-head-text strong {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.bigstep-ai-remix-head-text span {
  font-size: 11.5px;
  color: #c7ccdd;
  line-height: 1.4;
}

.bigstep-ai-remix-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: fit-content;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(139,92,246,.10));
  color: #fff;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.bigstep-ai-remix-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.6);
}
.bigstep-ai-remix-cta > svg:first-child { flex-shrink: 0; color: #a5b4fc; }
.bigstep-ai-remix-cta > svg:last-child { flex-shrink: 0; color: #9aa4c4; }
.bigstep-ai-remix-cta-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bigstep-ai-remix-cta-text strong { font-size: 13px; color: #fff; }
.bigstep-ai-remix-cta-text small { font-size: 11px; color: #c7ccdd; line-height: 1.3; }

.bigstep-ai-remix-limit-note {
  margin: 0;
  padding: 7px 10px;
  border: 1px dashed rgba(99,117,168,.28);
  border-radius: 9px;
  background: rgba(99,117,168,.10);
  color: #9aa4c4;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.bigstep-ai-remix-limit-note strong { color: #fff; font-weight: 700; }

.bigstep-ai-points-badge {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
  z-index: 12;
}
.bigstep-ai-points-badge.is-under-tabs {
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  margin: -6px 0 14px;
  padding: 6px;
  border: 1px solid rgba(129,140,248,.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,23,42,.72), rgba(31,41,75,.52));
}
.bigstep-ai-points-badge.is-in-tabs {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  align-self: stretch;
  align-items: center;
}
.bigstep-ai-points-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(129,140,248,.38);
  border-radius: 999px;
  background: rgba(99,102,241,.14);
  color: #e8e7ff;
  font-weight: 850;
  cursor: pointer;
}
.bigstep-ai-points-badge.is-under-tabs .bigstep-ai-points-pill {
  width: 100%;
  justify-content: center;
  border-radius: 8px;
  background: rgba(99,102,241,.18);
}
.bigstep-ai-points-badge.is-in-tabs .bigstep-ai-points-pill {
  min-height: 100%;
  border-radius: 9px;
  background: rgba(10,16,28,.64);
}
.bigstep-ai-points-pill strong { color: #fff; font-size: 14px; }
.bigstep-ai-points-pill em { font-style: normal; color: #c4b5fd; font-size: 12px; }
.bigstep-ai-points-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(292px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(129,140,248,.28);
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
  color: #eef2ff;
}
.bigstep-ai-points-popover p {
  margin: 6px 0 10px;
  color: #aeb9d7;
  font-size: 12px;
  line-height: 1.45;
}
.bigstep-ai-points-popover button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}
.bigstep-ai-points-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.bigstep-ai-points-code-row input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(129,140,248,.30);
  border-radius: 8px;
  background: rgba(15,23,42,.86);
  color: #eef2ff;
  font-size: 12px;
  font-weight: 700;
  outline: none;
}
.bigstep-ai-points-code-row input:focus {
  border-color: rgba(167,139,250,.72);
  box-shadow: 0 0 0 2px rgba(99,102,241,.20);
}
.bigstep-ai-points-code-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 12px;
  border: 1px solid rgba(167,139,250,.54);
  box-shadow: 0 8px 18px rgba(99,102,241,.22);
  white-space: nowrap;
}
.bigstep-ai-points-code-row button:hover {
  filter: brightness(1.08);
}
.bigstep-ai-points-code-row button:disabled {
  cursor: wait;
  opacity: .65;
}
.bigstep-ai-points-popover [data-ai-points-code-message] {
  display: block;
  min-height: 16px;
  margin-top: 8px;
  color: #aeb9d7;
  font-size: 11px;
  line-height: 1.35;
}
.bigstep-ai-points-zalo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 8px;
  border: 1px solid rgba(14,165,233,.44);
  border-radius: 8px;
  background: rgba(14,165,233,.12);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}
.bigstep-ai-points-zalo:hover {
  border-color: rgba(56,189,248,.72);
  background: rgba(14,165,233,.20);
  color: #fff;
}
.bigstep-ai-points-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.bigstep-ai-points-share-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  background: rgba(99,102,241,.16);
}
.bigstep-ai-points-share-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.bigstep-ai-points-share-grid + button {
  width: 100%;
  margin-top: 8px;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(129,140,248,.30);
}
.bigstep-ai-points-share-hint {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 420px) {
  .bigstep-ai-ai-tabs {
    flex-wrap: nowrap;
  }
  .bigstep-ai-points-badge.is-in-tabs {
    width: 100%;
    margin-left: 0;
  }
  .bigstep-ai-points-badge.is-in-tabs .bigstep-ai-points-pill {
    width: 100%;
    justify-content: center;
    min-height: 34px;
  }
}

.bigstep-ai-remix-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 10px;
  border: 1px solid rgba(99,102,241,.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(12,18,32,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.bigstep-ai-remix-source:empty { display: none; }
.bigstep-ai-remix-source.is-empty {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  border-style: dashed;
  border-color: rgba(99,102,241,.34);
  background: rgba(10,16,28,.72);
}
/* Placeholder thumbnail khi chưa chọn ảnh — giữ layout hàng ngang đồng bộ với trạng thái đã có ảnh */
.bigstep-ai-remix-source.is-empty::before {
  content: '';
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  grid-column: 1;
  grid-row: 1;
  border-radius: 8px;
  border: 1px dashed rgba(129,140,248,.5);
  background: rgba(99,102,241,.10) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23818cf8' d='M5 21q-.825 0-1.412-.587Q3 19.825 3 19V5q0-.825.588-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm1-4h12l-3.75-5-3 4L9 13Z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.bigstep-ai-remix-source img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.bigstep-ai-remix-source-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: #dbe3f4;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-name {
  grid-column: 2;
  grid-row: 1;
  color: #9aa4c4;
  white-space: nowrap;
}
.bigstep-ai-app .bigstep-ai-remix-source-change {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(129,140,248,.55);
  border-radius: 9px;
  background: rgba(99,102,241,.14);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
/* Gradient + shadow phải !important vì reset "wipe theme paint" ở đầu file
   xóa background-image/box-shadow của mọi button bằng !important. */
.bigstep-ai-app .bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-change {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 42px;
  width: 100%;
  background-image: linear-gradient(135deg,#6366f1,#7c3aed) !important;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(99,102,241,.24) !important;
}
.bigstep-ai-app .bigstep-ai-remix-source-change:hover {
  border-color: var(--bs-accent);
  background: rgba(99,102,241,.22);
  transform: translateY(-1px);
}
.bigstep-ai-app .bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-change:hover {
  background-image: linear-gradient(135deg,#7477ff,#8b5cf6) !important;
}
@media (max-width: 640px) {
  .bigstep-ai-remix-source {
    align-items: stretch;
    gap: 8px;
    padding: 9px;
  }
}
.bigstep-ai-remix-empty {
  padding: 20px 10px;
  color: #9aa4c4;
  font-size: 12px;
  text-align: center;
}

/* AI Remix — style card trong editor sidebar.
 * Kế thừa tone .bigstep-ai-text-fx-card (border/bg tím nhạt, hover nổi). */
.bigstep-ai-remix-progress {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(99,102,241,.32);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(17,24,39,.80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.bigstep-ai-remix-progress[hidden] { display: none; }
.bigstep-ai-remix-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bigstep-ai-remix-progress-head strong {
  min-width: 0;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.bigstep-ai-remix-progress-head span {
  flex: 0 0 auto;
  color: #8b5cf6;
  font-size: 11px;
  font-weight: 800;
}
.bigstep-ai-remix-progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}
.bigstep-ai-remix-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6366f1,#8b5cf6);
  transition: width .28s ease;
}
.bigstep-ai-remix-progress p {
  margin: 0;
  color: #c7ccdd;
  font-size: 11.5px;
  line-height: 1.45;
}
.bigstep-ai-remix-progress ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bigstep-ai-remix-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #7f8aa8;
  font-size: 11.5px;
  line-height: 1.25;
}
.bigstep-ai-remix-progress li span {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(15,23,42,.7);
}
.bigstep-ai-remix-progress li em {
  min-width: 0;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bigstep-ai-remix-progress li.is-done { color: #b8f7d4; }
.bigstep-ai-remix-progress li.is-done span {
  border-color: rgba(74,222,128,.75);
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.bigstep-ai-remix-progress li.is-active {
  color: #fff;
  font-weight: 800;
}
.bigstep-ai-remix-progress li.is-active span {
  border-color: #8b5cf6;
  background: radial-gradient(circle at center,#8b5cf6 35%,rgba(139,92,246,.18) 42%);
  box-shadow: 0 0 0 4px rgba(139,92,246,.14);
}
.bigstep-ai-remix-card-btn:disabled,
.bigstep-ai-remix-source-change:disabled {
  cursor: wait !important;
  opacity: .62;
  transform: none !important;
}

.bigstep-ai-remix-detail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Panel style riêng cần chút không khí quanh mép (20260703) */
  padding: 2px 2px 8px;
}
.bigstep-ai-remix-detail[hidden] { display: none; }
.bigstep-ai-remix-panel-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(129,140,248,.32);
  border-radius: 8px;
  background: rgba(99,102,241,.10);
  color: #cfd6ee;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.bigstep-ai-remix-panel-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(99,117,168,.28);
  background: #f8fafc;
}
.bigstep-ai-remix-panel-hero > img {
  display: block;
  width: 100%;
  height: 100%;
}
.bigstep-ai-remix-panel-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bigstep-ai-remix-panel-title span {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #1a1020;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.bigstep-ai-remix-panel-title strong {
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}
.bigstep-ai-remix-panel-title p {
  margin: 0;
  color: #aeb8d6;
  font-size: 12px;
  line-height: 1.45;
}
.bigstep-ai-remix-panel-upload {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bigstep-ai-remix-panel-upload > label {
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
/* Dải thumbnail ảnh khách đã upload trước đó — chọn lại để tái dùng làm nguồn. */
.bigstep-ai-remix-recent[hidden] { display: none; }
.bigstep-ai-remix-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bigstep-ai-remix-recent-label {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 700;
}
.bigstep-ai-remix-recent-grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.bigstep-ai-remix-recent-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.bigstep-ai-remix-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bigstep-ai-remix-recent-thumb:hover { transform: translateY(-1px); }
.bigstep-ai-remix-recent-thumb.is-active { border-color: #8b3dff; }
.bigstep-ai-remix-recent-item { position: relative; flex: 0 0 auto; }
.bigstep-ai-remix-recent-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(10,14,26,.85);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.bigstep-ai-remix-recent-remove:hover { background: #ef4444; }
/* Ô chọn ảnh: compact dạng ngang (icon trái, chữ phải) — bản dọc cũ cao 150px+
 * chiếm quá nhiều chỗ so với vai trò phụ của nó (20260703). */
.bigstep-ai-remix-upload-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 11px;
  width: 100%;
  min-height: 0;
  padding: 11px 13px;
  border: 1px dashed rgba(129,140,248,.46);
  border-radius: 12px;
  background: rgba(99,102,241,.09);
  color: #fff;
  cursor: pointer;
}
.bigstep-ai-remix-upload-empty--compact {
  padding: 9px 11px;
  border-style: solid;
  background: rgba(14,22,39,.58);
}
.bigstep-ai-remix-panel-upload .bigstep-ai-remix-upload-empty:only-child {
  margin-top: -2px;
}
.bigstep-ai-remix-upload-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bigstep-ai-remix-upload-empty strong {
  display: block;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.25;
}
.bigstep-ai-remix-upload-empty em {
  display: block;
  margin-top: 2px;
  color: #9aa4c4;
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.2;
}
.bigstep-ai-remix-upload-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(129,140,248,.42);
  background: rgba(99,102,241,.15) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a5b4fc' d='M5 21q-.825 0-1.412-.587Q3 19.825 3 19V5q0-.825.588-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm1-4h12l-3.75-5-3 4L9 13Z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.bigstep-ai-remix-upload-preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(99,117,168,.24);
  background: rgba(17,24,39,.78);
}
/* Ảnh NGUỒN khách chọn chỉ là input phụ — thu nhỏ lại cho cân với hero.
 * Ảnh KẾT QUẢ AI (result-preview) vẫn full-width vì đó là nội dung chính (20260703). */
.bigstep-ai-remix-upload-preview:not(.bigstep-ai-remix-result-preview) {
  width: min(200px, 62%);
  margin: 0;
}
/* Đang generate: overlay tiến trình cần chỗ thở → nới lại full-width tạm thời. */
.bigstep-ai-remix-upload-preview:has([data-ai-remix-panel-progress]) {
  width: 100%;
}
.bigstep-ai-remix-upload-preview:not(.bigstep-ai-remix-result-preview) .bigstep-ai-remix-upload-meta {
  left: 5px;
  right: 5px;
  bottom: 5px;
  padding: 5px 6px;
  gap: 6px;
}
.bigstep-ai-remix-upload-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(7,10,18,.75);
}
.bigstep-ai-remix-upload-meta {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 9px;
  background: rgba(8,12,24,.78);
  backdrop-filter: blur(8px);
}
.bigstep-ai-remix-upload-meta span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bigstep-ai-remix-upload-meta button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: rgba(129,140,248,.22);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}
.bigstep-ai-remix-hero-meta,
.bigstep-ai-remix-hero-action {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(196,181,253,.28);
  background: rgba(8,12,24,.78);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bigstep-ai-remix-hero-meta {
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 10px;
}
.bigstep-ai-remix-hero-meta span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5f3ff;
  font-size: 11.5px;
  font-weight: 780;
}
.bigstep-ai-remix-hero-meta button,
.bigstep-ai-remix-hero-action {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.bigstep-ai-remix-hero-meta button {
  border: 0;
  background: rgba(129,140,248,.24);
  color: #fff;
}
.bigstep-ai-remix-hero-action {
  right: 8px;
  bottom: 8px;
}
/* Overlay "đang tạo" kiểu ChatGPT image: conic-gradient xoay + lưới mờ có mask
 * tròn + vệt aurora blur quét + 3 sparkle nhấp nháy. Tông trung tính/tím hợp
 * editor (glow sparkle dùng indigo #a5b4fc, không dùng cam). */
.bigstep-ai-remix-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(99,102,241,.22), transparent 38%),
    linear-gradient(180deg, rgba(3,7,18,.26), rgba(3,7,18,.58));
  backdrop-filter: blur(4px) saturate(1.18);
  -webkit-backdrop-filter: blur(4px) saturate(1.18);
}
.bigstep-ai-remix-panel-overlay::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(103,232,249,.20) 58deg,
    rgba(139,92,246,.36) 132deg,
    rgba(244,114,182,.18) 204deg,
    rgba(99,102,241,.34) 284deg,
    transparent 360deg);
  opacity: .96;
  filter: blur(12px);
  animation: bigstep-ai-remix-rotate 4.2s linear infinite;
  pointer-events: none;
}
.bigstep-ai-remix-panel-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 54%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 75%);
          mask-image: radial-gradient(circle at center, #000, transparent 75%);
  opacity: .54;
  animation: bigstep-ai-remix-grid-drift 7s linear infinite;
  pointer-events: none;
}
@keyframes bigstep-ai-remix-rotate { to { transform: rotate(360deg); } }
@keyframes bigstep-ai-remix-grid-drift {
  from { background-position: 0 0, 0 0, center; }
  to { background-position: 24px 24px, -24px 24px, center; }
}
.bigstep-ai-remix-aurora {
  position: absolute;
  inset: -40%;
  z-index: 1;
  background:
    linear-gradient(115deg, transparent 28%,
      rgba(103,232,249,.00) 36%, rgba(103,232,249,.36) 44%,
      rgba(196,181,253,.52) 51%, rgba(244,114,182,.20) 59%,
      transparent 72%),
    radial-gradient(circle at 26% 42%, rgba(34,211,238,.25), transparent 32%),
    radial-gradient(circle at 78% 58%, rgba(168,85,247,.34), transparent 34%);
  filter: blur(16px);
  opacity: 1;
  mix-blend-mode: screen;
  animation: bigstep-ai-remix-sweep 2.55s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bigstep-ai-remix-sweep {
  0%   { transform: translateX(-22%) translateY(-10%) rotate(0deg); }
  50%  { transform: translateX(18%) translateY(12%) rotate(8deg); }
  100% { transform: translateX(-22%) translateY(-10%) rotate(0deg); }
}
.bigstep-ai-remix-gen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 48%, rgba(9,13,28,.44), rgba(9,13,28,.18) 46%, transparent 72%);
}
.bigstep-ai-remix-sparkle {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(196,181,253,.55));
}
.bigstep-ai-remix-sparkle span {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff, #c4b5fd 48%, #67e8f9);
  box-shadow: 0 0 22px rgba(165,180,252,.95), 0 0 38px rgba(103,232,249,.28);
  transform: rotate(45deg);
  animation: bigstep-ai-remix-pop 1.35s ease-in-out infinite;
}
.bigstep-ai-remix-sparkle span::before,
.bigstep-ai-remix-sparkle span::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 220%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.bigstep-ai-remix-sparkle span::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.bigstep-ai-remix-sparkle span:nth-child(1) { top: 3px; left: 21px; animation-delay: 0s; }
.bigstep-ai-remix-sparkle span:nth-child(2) { bottom: 7px; left: 3px; width: 12px; height: 12px; animation-delay: .18s; }
.bigstep-ai-remix-sparkle span:nth-child(3) { bottom: 8px; right: 2px; width: 19px; height: 19px; animation-delay: .36s; }
@keyframes bigstep-ai-remix-pop {
  0%, 100% { transform: rotate(45deg) scale(.58); opacity: .38; }
  50%      { transform: rotate(45deg) scale(1.18); opacity: 1; }
}
.bigstep-ai-remix-gen-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.bigstep-ai-remix-gen-detail {
  margin: 4px 0 0;
  max-width: 240px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.74);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* Thanh tiến độ realtime trong overlay remix — % nội suy theo thời gian,
 * shimmer chạy trong bar cho cảm giác đang xử lý liên tục (20260703). */
.bigstep-ai-remix-gen-progress {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(78%, 230px);
  margin-top: 13px;
}
.bigstep-ai-remix-gen-progress::before {
  content: "";
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
  border-radius: 18px;
  border: 1px solid rgba(196,181,253,.22);
  background: rgba(9,13,28,.32);
  box-shadow: 0 0 34px rgba(99,102,241,.24), inset 0 1px 0 rgba(255,255,255,.08);
  animation: bigstep-ai-remix-pulse 1.8s ease-in-out infinite;
}
@keyframes bigstep-ai-remix-pulse {
  0%, 100% { opacity: .62; transform: scale(.985); }
  50% { opacity: 1; transform: scale(1.015); }
}
.bigstep-ai-remix-gen-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.bigstep-ai-remix-gen-bar > span {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #67e8f9, #8b5cf6 52%, #f0abfc);
  box-shadow: 0 0 14px rgba(139,92,246,.75), 0 0 24px rgba(103,232,249,.26);
  transition: width .3s ease;
}
.bigstep-ai-remix-gen-bar > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: bigstep-ai-remix-shimmer 1.3s linear infinite;
}
@keyframes bigstep-ai-remix-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.bigstep-ai-remix-gen-pct {
  color: #e9d5ff;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* Selector 3-class để thắng cả base .bigstep-ai-app .bigstep-ai-button (font-size
 * --t-sm) lẫn rule mobile min-height:44px — nếu không nút "Tạo ngay" vẫn bị bé. */
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  gap: 8px;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .01em;
  border-radius: 12px;
}
/* Vệt sáng quét ngang tạo cảm giác nút "sống". */
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  animation: bigstep-ai-remix-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bigstep-ai-remix-shine {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}
.bigstep-ai-remix-generate-icon,
.bigstep-ai-remix-generate-label { position: relative; z-index: 1; }
.bigstep-ai-remix-generate-icon {
  flex: 0 0 auto;
  animation: bigstep-ai-remix-twinkle 2s ease-in-out infinite;
}
@keyframes bigstep-ai-remix-twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: .9; }
  50%      { transform: scale(1.16) rotate(9deg); opacity: 1; }
}
/* Khi đang tạo: nút hết shine, icon xoay như spinner. */
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate.is-generating::before { animation: none; }
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate.is-generating .bigstep-ai-remix-generate-icon {
  animation: bigstep-ai-remix-spin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  /* Only kill decorative button/icon motion that conveys no state. Loading
     progress cues (aurora, sparkle, shimmer, pulse) must stay animated even
     under reduced-motion — a fully static "generating…" screen reads as
     broken/frozen. Slow them down instead of stopping. */
  .bigstep-ai-button.bigstep-ai-remix-generate::before,
  .bigstep-ai-remix-generate-icon { animation: none; }
  .bigstep-ai-remix-panel-overlay::before { animation-duration: 8s; }
  .bigstep-ai-remix-aurora { animation-duration: 5s; }
  .bigstep-ai-remix-sparkle span { animation-duration: 2.6s; }
}
/* Ô kết quả AI (hiện ngay chỗ overlay vừa load). Ảnh bấm được để chèn lại. */
.bigstep-ai-remix-result-preview {
  border-color: rgba(139,61,255,.55);
  box-shadow: 0 0 0 1px rgba(139,61,255,.35), 0 8px 22px rgba(139,61,255,.18);
}
.bigstep-ai-remix-result-preview .bigstep-ai-remix-result-img {
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.bigstep-ai-remix-result-preview .bigstep-ai-remix-result-img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}
.bigstep-ai-remix-result-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg,#8b3dff,#c56bff);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(139,61,255,.4);
}

.bigstep-ai-remix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bigstep-ai-remix-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(99,117,168,.22);
  border-radius: 10px;
  background: rgba(99,117,168,.10);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.bigstep-ai-remix-card:hover {
  transform: translateY(-2px);
  border-color: rgba(140,160,210,.55);
  background: rgba(99,117,168,.20);
}
.bigstep-ai-remix-card:focus-visible {
  outline: 2px solid rgba(139,92,246,.88);
  outline-offset: 3px;
}
.bigstep-ai-remix-card-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bs-surface-3, #1a1e2e);
}
.bigstep-ai-remix-card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
}
.bigstep-ai-remix-card > .bigstep-ai-remix-card-thumb {
  aspect-ratio: 4 / 5;
}
.bigstep-ai-remix-panel-hero.bigstep-ai-remix-card-thumb {
  aspect-ratio: 4 / 5;
}
.bigstep-ai-remix-panel-hero .bigstep-ai-remix-fit-bg {
  display: none;
}
.bigstep-ai-remix-panel-hero .bigstep-ai-remix-fit-img {
  object-fit: cover;
  padding: 0;
  filter: none;
}

.bigstep-ai-remix-fit {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #0b1220;
}
.bigstep-ai-remix-fit-bg,
.bigstep-ai-remix-fit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
}
.bigstep-ai-remix-fit-bg {
  object-fit: cover;
  filter: blur(14px) saturate(1.08) brightness(.72);
  transform: scale(1.12);
  opacity: .62;
}
.bigstep-ai-remix-fit-img {
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.bigstep-ai-remix-card > .bigstep-ai-remix-card-thumb .bigstep-ai-remix-fit-img {
  object-fit: cover;
  padding: 0;
  filter: none;
}

/* Preview AI Remix trong editor: tự crossfade Gốc → AI (lặp), không tương tác
 * nên KHÔNG đặt touch-action/cursor kéo — vuốt dọc trên mobile không bị vấp. */
.bigstep-ai-remix-cf {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bigstep-ai-remix-cf img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
/* Ảnh AI là lớp nền (luôn hiện); ảnh Gốc phủ lên và mờ dần để lộ AI. */
.bigstep-ai-remix-cf-before {
  animation: bigstep-ai-remix-cf-fade 3s ease-in-out infinite;
}
@keyframes bigstep-ai-remix-cf-fade {
  0%, 38%  { opacity: 1; }
  56%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}
.bigstep-ai-remix-cf-label {
  position: absolute;
  bottom: 6px;
  right: 6px;
  min-width: 30px;
  height: 17px;
  pointer-events: none;
}
.bigstep-ai-remix-cf-label i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(10,14,26,.72);
  color: #e6eaf6;
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
  line-height: 15px;
}
.bigstep-ai-remix-cf-label .is-before {
  animation: bigstep-ai-remix-cf-fade 3s ease-in-out infinite;
}
.bigstep-ai-remix-cf-label .is-after {
  animation: bigstep-ai-remix-cf-fade-inv 3s ease-in-out infinite;
}
@keyframes bigstep-ai-remix-cf-fade-inv {
  0%, 38%  { opacity: 0; }
  56%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}
/* Tôn trọng người tắt hiệu ứng: chỉ hiện ảnh AI, nhãn "AI". */
@media (prefers-reduced-motion: reduce) {
  .bigstep-ai-remix-cf-before,
  .bigstep-ai-remix-cf-label .is-before { animation: none; opacity: 0; }
  .bigstep-ai-remix-cf-label .is-after { animation: none; opacity: 1; }
}

.bigstep-ai-remix-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #1a1020;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bigstep-ai-remix-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.bigstep-ai-remix-card-desc {
  margin: 0;
  font-size: 11px;
  color: #9aa4c4;
  line-height: 1.4;
  flex: 1;
}
.bigstep-ai-remix-card-btn {
  width: 100%;
  font-size: 12px;
  padding: 8px 6px;
}

/* AI Remix color pass: keep the editor's dark utility surface, with a refined
   violet accent that feels more AI/creative than cyan. */
.bigstep-ai-app {
  --bs-remix-surface: rgba(14, 22, 39, .82);
  --bs-remix-surface-soft: rgba(25, 25, 55, .68);
  --bs-remix-line: rgba(129, 140, 248, .32);
  --bs-remix-line-hot: rgba(167, 139, 250, .58);
  --bs-remix-accent: #8b5cf6;
  --bs-remix-accent-2: #6366f1;
  --bs-remix-text: #f4f1ff;
  --bs-remix-muted: #b2accd;
}

.bigstep-ai-app .bigstep-ai-upload-tab[data-upload-tab="remix"].is-active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(124,58,237,.24) !important;
}
.bigstep-ai-app .bigstep-ai-upload-tab-badge {
  background: rgba(15,23,42,.80);
  color: #ddd6fe;
  border: 1px solid rgba(196,181,253,.36);
}
.bigstep-ai-remix-head {
  border-color: var(--bs-remix-line);
  background:
    radial-gradient(circle at 10% 0%, rgba(139,92,246,.15), transparent 44%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(20,18,43,.80));
}
.bigstep-ai-remix-head-icon {
  background: linear-gradient(135deg, #818cf8, #a855f7);
  color: #fff;
  box-shadow: 0 8px 20px rgba(139,92,246,.28);
}
.bigstep-ai-remix-head-text strong,
.bigstep-ai-remix-card-name,
.bigstep-ai-remix-panel-title strong {
  color: var(--bs-remix-text);
}
.bigstep-ai-remix-head-text span,
.bigstep-ai-remix-card-desc,
.bigstep-ai-remix-panel-title p {
  color: var(--bs-remix-muted);
}
.bigstep-ai-remix-limit-note {
  border-color: rgba(80,111,151,.32);
  background: rgba(14,22,39,.52);
  color: #9fb0c9;
}
.bigstep-ai-redesign-points-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(80,111,151,.32);
  border-radius: 9px;
  background: rgba(14,22,39,.52);
  color: #9fb0c9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.bigstep-ai-redesign-points-note.is-exhausted {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: #fecaca;
}
.bigstep-ai-remix-grid {
  gap: 12px;
}
.bigstep-ai-remix-card {
  border-color: var(--bs-remix-line);
  background:
    linear-gradient(180deg, rgba(20,30,51,.88), rgba(13,20,35,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.bigstep-ai-remix-card:hover {
  border-color: var(--bs-remix-line-hot);
  background:
    radial-gradient(circle at 50% -20%, rgba(139,92,246,.16), transparent 48%),
    linear-gradient(180deg, rgba(26,28,62,.94), rgba(14,22,39,.94));
  box-shadow: 0 12px 26px rgba(2,8,23,.30), 0 0 0 1px rgba(139,92,246,.10);
}
.bigstep-ai-remix-card-thumb,
.bigstep-ai-remix-panel-hero,
.bigstep-ai-remix-upload-preview {
  border-color: rgba(80,111,151,.34);
  background: #0b1220;
}
.bigstep-ai-remix-panel-hero {
  background: #f8fafc;
}
.bigstep-ai-remix-badge,
.bigstep-ai-remix-panel-title span,
.bigstep-ai-remix-result-badge {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.28);
  box-shadow: 0 5px 14px rgba(139,92,246,.30);
}
.bigstep-ai-remix-cf-label i,
.bigstep-ai-remix-ba-tag {
  background: rgba(7, 13, 24, .78);
  color: #dbeafe;
  border: 1px solid rgba(148,163,184,.20);
}
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-card-btn,
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate,
.bigstep-ai-app .bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-change {
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff;
  border-color: rgba(196,181,253,.20);
  box-shadow: 0 10px 22px rgba(124,58,237,.24) !important;
}
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-card-btn:hover,
.bigstep-ai-app .bigstep-ai-button.bigstep-ai-remix-generate:hover,
.bigstep-ai-app .bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-change:hover {
  background-image: linear-gradient(135deg, #7477ff, #a855f7) !important;
  box-shadow: 0 12px 28px rgba(124,58,237,.32) !important;
}
.bigstep-ai-remix-panel-back,
.bigstep-ai-app .bigstep-ai-remix-source-change,
.bigstep-ai-remix-upload-meta button {
  border-color: rgba(167,139,250,.32);
  background: rgba(139,92,246,.11);
  color: #ede9fe;
}
.bigstep-ai-remix-panel-back:hover,
.bigstep-ai-app .bigstep-ai-remix-source-change:hover,
.bigstep-ai-remix-upload-meta button:hover {
  border-color: rgba(167,139,250,.58);
  background: rgba(139,92,246,.18);
}
.bigstep-ai-remix-upload-empty,
.bigstep-ai-remix-source,
.bigstep-ai-remix-source.is-empty {
  border-color: rgba(80,111,151,.36);
  background: rgba(14,22,39,.66);
}
.bigstep-ai-remix-upload-icon,
.bigstep-ai-remix-source.is-empty::before {
  border-color: rgba(167,139,250,.38);
  background-color: rgba(139,92,246,.11);
}
.bigstep-ai-remix-recent-thumb.is-active,
.bigstep-ai-remix-result-preview {
  border-color: var(--bs-remix-accent);
  box-shadow: 0 0 0 1px rgba(139,92,246,.28), 0 8px 22px rgba(139,92,246,.14);
}
.bigstep-ai-remix-progress {
  border-color: rgba(139,92,246,.30);
  background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(14,22,39,.82));
}
.bigstep-ai-remix-progress-head span,
.bigstep-ai-remix-panel-overlay span {
  color: #c4b5fd;
}
.bigstep-ai-remix-progress-bar span,
.bigstep-ai-remix-panel-progress-bar i {
  background: linear-gradient(90deg, #6366f1, #a855f7);
}
.bigstep-ai-remix-progress li.is-active span {
  border-color: #a78bfa;
  background: radial-gradient(circle at center,#a78bfa 35%,rgba(167,139,250,.18) 42%);
  box-shadow: 0 0 0 4px rgba(167,139,250,.13);
}
@media (max-width: 480px) {
  .bigstep-ai-remix-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bigstep-ai-remix-card { padding: 8px; }
  .bigstep-ai-remix-card-btn { padding: 8px 4px; font-size: 11.5px; }
}

@media (min-width: 981px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right .bigstep-ai-price-pill {
    grid-template-areas:
      "label label"
      "now badge" !important;
    min-height: 46px !important;
    max-height: 52px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right .bigstep-ai-price-pill del[data-bigstep-ai-regular-price] {
    display: none !important;
  }
}

/* ── Fix spacing panel "Tạo ảnh AI" (20260703) ─────────────────────────────
 * Tab panel AI không có layout riêng → hero "Tạo nhanh bằng AI" dính sát
 * textarea, khối model picker dính vào style chips. Chuyển sang flex column
 * với gap thống nhất. Scope hẹp vào tab generate để không đụng tab Remix. */
.bigstep-ai-app .bigstep-ai-ai-tab-panel[data-ai-tab-panel="generate"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bigstep-ai-app .bigstep-ai-ai-tab-panel[data-ai-tab-panel="generate"][hidden] {
  display: none !important;
}
/* Label "Model tạo ảnh" đang to quá cỡ — đưa về đúng spec heading nhỏ
 * (11px/800/.06em, màu subtle) giống các đề mục panel khác. */
.bigstep-ai-app .bigstep-ai-editor-model-picker {
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-editor-model-picker .bigstep-ai-model-select-label {
  gap: 6px;
}
.bigstep-ai-app .bigstep-ai-editor-model-picker .bigstep-ai-form-label {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bs-subtle);
  white-space: normal;
}
/* Dòng mô tả model ("Flux Dev - cân bằng...") nhỏ lại + tách khỏi chips. */
.bigstep-ai-app .bigstep-ai-editor-model-picker .bigstep-ai-model-select-note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

/* Studio panel command buttons: keep full-width actions comfortably tappable. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel .bigstep-ai-panel-section > .bigstep-ai-button--primary,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel .bigstep-ai-panel-section > .bigstep-ai-tool--block,
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-add-qr],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-stock-search],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-varsity-add],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-draw-toggle],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-add-text-field],
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel [data-text-image-clip] {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.25;
  white-space: normal;
}

.bigstep-ai-app .bigstep-ai-product-detail-link {
  display: inline-flex !important;
  width: 100%;
  box-sizing: border-box;
}

.bigstep-ai-app .bigstep-ai-product-detail-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  margin-top: 4px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

.bigstep-ai-app .bigstep-ai-product-detail-chip:hover,
.bigstep-ai-app .bigstep-ai-product-detail-chip:focus-visible {
  border-color: rgba(124, 108, 255, .72);
  background: rgba(124, 108, 255, .18);
  color: #fff;
}

.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card {
  cursor: pointer;
}
.bigstep-ai-ai-tabs {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scrollbar-width: none;
}

.bigstep-ai-ai-tabs::-webkit-scrollbar {
	display: none;
}

.bigstep-ai-ai-tabs .bigstep-ai-upload-tab {
	min-width: 0;
	padding-inline: 6px;
	gap: 4px;
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
}

.bigstep-ai-ai-tabs .bigstep-ai-upload-tab-badge {
	flex: 0 0 auto;
	padding-inline: 4px;
	font-size: 8px;
}

.bigstep-ai-app .bigstep-ai-text-tabs button {
	white-space: nowrap !important;
	word-break: keep-all;
	overflow: hidden;
	text-overflow: clip;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs {
	grid-template-columns: 1fr 1.35fr .9fr .9fr;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs button {
	padding-inline: 5px !important;
	font-size: 10.5px;
	line-height: 1;
}

.bigstep-ai-ai-upload {
	margin: 10px 0;
	width: 100%;
	justify-content: center;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] {
	display: grid;
	gap: 10px;
	padding-bottom: 8px;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"][hidden] {
	display: none !important;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-panel-hero {
	margin-bottom: 0;
	padding: 14px;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-panel-hero-text span {
	font-size: 12px;
	line-height: 1.45;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-ai-color-hint {
	margin: 0;
	padding: 10px 12px;
	font-size: 11.5px;
	line-height: 1.45;
}

.bigstep-ai-redesign-preview {
	position: relative;
	display: grid;
	gap: 8px;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid rgba(136, 163, 255, .28);
	border-radius: 10px;
	background: rgba(10, 18, 34, .72);
	color: var(--bs-muted);
	font-size: 12px;
}

.bigstep-ai-redesign-preview img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

.bigstep-ai-style-chips--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 10px 0;
}

.bigstep-ai-redesign-mode-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.bigstep-ai-redesign-mode-grid button {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 8px;
	align-items: center;
	min-height: 58px;
	padding: 9px 10px;
	border: 1px solid rgba(129,140,248,.24);
	border-radius: 12px;
	background: rgba(15,23,42,.64);
	color: #dbe5ff;
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.bigstep-ai-redesign-mode-grid button > span {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: rgba(124,108,255,.18);
	color: #c4b5fd;
	font-size: 14px;
	font-weight: 900;
}

.bigstep-ai-redesign-mode-grid button strong {
	display: block;
	min-width: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bigstep-ai-redesign-mode-grid button small {
	display: block;
	min-width: 0;
	color: #9aa6c2;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bigstep-ai-redesign-mode-grid button:hover,
.bigstep-ai-redesign-mode-grid button.is-active {
	border-color: rgba(139,92,246,.72);
	background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18));
	transform: translateY(-1px);
}

.bigstep-ai-redesign-mode-grid button.is-active > span {
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #fff;
}

/* Extract has a longer label and is the terminal redesign mode. Keep it as
 * the full-width fifth action instead of leaving an orphan half-grid card. */
.bigstep-ai-redesign-mode-grid > .bigstep-ai-redesign-mode--extract {
	grid-column: 1 / -1;
}
.bigstep-ai-redesign-mode-grid > .bigstep-ai-redesign-mode--extract strong,
.bigstep-ai-redesign-mode-grid > .bigstep-ai-redesign-mode--extract small {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.bigstep-ai-typo-maker {
	border-color: rgba(139, 92, 246, .36);
	background: linear-gradient(135deg, rgba(37, 28, 79, .56), rgba(8, 16, 30, .82));
}

.bigstep-ai-typo-maker .bigstep-ai-text-quick-row {
	margin-top: 10px;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] {
  padding-inline: 12px !important;
}

.bigstep-ai-panel-utility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  margin: -2px 0 12px;
}

.bigstep-ai-panel-utility-row .bigstep-ai-points-badge.is-compact {
  margin: 0;
  min-width: 0;
  z-index: 18;
}

.bigstep-ai-panel-utility-row .bigstep-ai-points-pill,
.bigstep-ai-history-chip {
  min-height: 34px;
  border-radius: 9px;
}

.bigstep-ai-panel-utility-row .bigstep-ai-points-pill {
  width: 100%;
  justify-content: center;
  padding: 0 10px;
  background: rgba(99,102,241,.15);
}

.bigstep-ai-history-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(129,140,248,.34);
  background: rgba(15,23,42,.66);
  color: #dbe5ff;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.bigstep-ai-history-chip:hover {
  border-color: rgba(167,139,250,.58);
  background: rgba(99,102,241,.18);
  color: #fff;
}

.bigstep-ai-panel-utility-row .bigstep-ai-points-popover {
  left: 0;
  right: auto;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card {
  gap: 8px;
  padding: 8px;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card-name {
  min-height: 31px;
  display: flex;
  align-items: flex-start;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card-desc {
  display: none !important;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card-btn {
  margin-top: 0;
  background: rgba(99, 102, 241, .10) !important;
  background-image: none !important;
  border: 1px solid rgba(139, 92, 246, .34) !important;
  color: #c7d2fe !important;
  box-shadow: none !important;
}

.bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card:hover .bigstep-ai-remix-card-btn {
  background: rgba(124, 58, 237, .18) !important;
  background-image: none !important;
  border-color: rgba(167, 139, 250, .52) !important;
  color: #ede9fe !important;
  box-shadow: none !important;
}

.bigstep-ai-typo-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

.bigstep-ai-typo-style-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(99,117,168,.30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,30,51,.88), rgba(12,18,31,.92));
  color: #f8fbff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.bigstep-ai-typo-style-card:hover,
.bigstep-ai-typo-style-card.is-active {
  border-color: rgba(167,139,250,.70);
  background: radial-gradient(circle at 50% -18%, rgba(139,92,246,.24), transparent 56%), linear-gradient(180deg, rgba(28,32,70,.94), rgba(13,20,35,.96));
}

.bigstep-ai-typo-style-card:hover {
  transform: translateY(-1px);
}

.bigstep-ai-typo-style-card strong {
  overflow: hidden;
  color: #f7f5ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bigstep-ai-typo-style-preview {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: #101827;
}

.bigstep-ai-typo-style-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.bigstep-ai-typo-style-preview::before,
.bigstep-ai-typo-style-preview::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.bigstep-ai-typo-style-preview span {
  position: relative;
  z-index: 1;
  max-width: 92%;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: .92;
  text-align: center;
  text-transform: uppercase;
}

.bigstep-ai-typo-style-preview--street {
  background: linear-gradient(135deg, #111827 0%, #25215f 56%, #ea580c 130%);
}
.bigstep-ai-typo-style-preview--street span {
  transform: rotate(-5deg);
  color: #ffe45c;
  text-shadow: 2px 2px 0 #111827, -1px -1px 0 #ef4444;
}
.bigstep-ai-typo-style-preview--street::before {
  width: 72%;
  height: 34%;
  border-radius: 999px;
  background: rgba(239,68,68,.72);
  transform: rotate(-9deg);
}

.bigstep-ai-typo-style-preview--retro {
  background: linear-gradient(135deg, #f8e8b7, #be7c39);
}
.bigstep-ai-typo-style-preview--retro span {
  color: #3f2a1d;
  font-family: Georgia, serif;
  text-transform: none;
  text-shadow: 0 2px 0 rgba(255,255,255,.45);
}

.bigstep-ai-typo-style-preview--y2k {
  background: radial-gradient(circle at 30% 20%, #f0abfc, transparent 35%), linear-gradient(135deg, #06b6d4, #7c3aed);
}
.bigstep-ai-typo-style-preview--y2k span {
  color: #fff;
  letter-spacing: .04em;
  text-shadow: 0 0 9px rgba(255,255,255,.8), 2px 2px 0 #0f172a;
}

.bigstep-ai-typo-style-preview--mascot {
  background: linear-gradient(135deg, #fef08a, #fb7185);
}
.bigstep-ai-typo-style-preview--mascot span {
  color: #111827;
  transform: rotate(2deg);
  text-shadow: 2px 2px 0 #fff;
}

.bigstep-ai-typo-style-preview--sport {
  background: linear-gradient(135deg, #052e16, #16a34a 60%, #facc15);
}
.bigstep-ai-typo-style-preview--sport span {
  transform: skewX(-9deg);
  color: #fefce8;
  text-shadow: 3px 0 0 #111827;
}

.bigstep-ai-typo-style-preview--minimal {
  background: #f8fafc;
}
.bigstep-ai-typo-style-preview--minimal span {
  color: #111827;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

/* AI Typo maker: align cards with AI Remix cards and keep labels readable. */
.bigstep-ai-typo-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.bigstep-ai-typo-input-row [data-typo-text] {
  min-width: 0 !important;
}

.bigstep-ai-varsity-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 4px;
}

.bigstep-ai-varsity-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.bigstep-ai-varsity-field--wide,
.bigstep-ai-varsity-generate {
  grid-column: 1 / -1;
}

.bigstep-ai-varsity-field > span {
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
}

.bigstep-ai-varsity-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(99,117,168,.32);
  border-radius: 10px;
  background: rgba(15,23,42,.56);
  color: #fff;
  padding: 0 11px;
  box-sizing: border-box;
}

.bigstep-ai-varsity-field input:focus {
  border-color: #8b5cf6;
  outline: 2px solid rgba(139,92,246,.16);
  outline-offset: 0;
}

.bigstep-ai-varsity-generate {
  width: 100% !important;
  min-height: 44px;
}

.bigstep-ai-typo-custom {
  margin: 9px 0 0;
  border: 1px solid rgba(99,117,168,.25);
  border-radius: 10px;
  background: rgba(15,23,42,.42);
  overflow: hidden;
}

.bigstep-ai-typo-custom summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.bigstep-ai-typo-custom summary::-webkit-details-marker {
  display: none;
}

.bigstep-ai-typo-custom summary::after {
  content: "+";
  margin-left: auto;
  color: #a78bfa;
  font-size: 16px;
  line-height: 1;
}

.bigstep-ai-typo-custom[open] summary::after {
  content: "-";
}

.bigstep-ai-typo-custom textarea {
  display: block;
  width: calc(100% - 16px);
  min-height: 76px;
  margin: 0 8px 8px;
  resize: vertical;
  border: 1px solid rgba(99,117,168,.24);
  border-radius: 9px;
  background: rgba(20,30,51,.78);
  color: #eef2ff;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  padding: 9px 10px;
  box-sizing: border-box;
}

.bigstep-ai-typo-style-grid {
  gap: 12px 10px !important;
}

.bigstep-ai-typo-style-grid > .bigstep-ai-typo-style-card:not([data-typo-admin-style]) {
  display: none !important;
}

.bigstep-ai-typo-style-grid[hidden],
.bigstep-ai-typo-detail[hidden] {
  display: none !important;
}

.bigstep-ai-typo-detail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 2px 8px;
}

.bigstep-ai-typo-panel-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99,117,168,.30);
  border-radius: 10px;
  background: #f8fafc;
}

.bigstep-ai-typo-panel-hero .bigstep-ai-typo-detail-preview {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.bigstep-ai-typo-panel-hero .bigstep-ai-typo-detail-preview img {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

.bigstep-ai-typo-panel-title {
  margin-top: -2px;
}

.bigstep-ai-typo-panel-back {
  margin-bottom: -2px;
}

.bigstep-ai-typo-style-card {
  gap: 8px !important;
  padding: 8px !important;
  border-color: rgba(99,117,168,.40) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(20,31,54,.92), rgba(10,17,31,.96)) !important;
}

.bigstep-ai-typo-style-card.is-active {
  border-color: rgba(139,92,246,.95) !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.32), 0 14px 28px rgba(12,8,28,.22) !important;
}

.bigstep-ai-typo-style-card strong {
  display: block !important;
  min-height: 30px !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

.bigstep-ai-typo-style-preview {
  aspect-ratio: 4 / 5 !important;
  border-radius: 8px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: #101827 !important;
}

.bigstep-ai-typo-style-preview img {
  position: absolute !important;
  inset: 0 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

.bigstep-ai-typo-panel-hero .bigstep-ai-typo-detail-preview img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.bigstep-ai-typo-style-preview em {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 390px) {
  .bigstep-ai-typo-input-row {
    grid-template-columns: 1fr !important;
  }

  .bigstep-ai-typo-input-row [data-typo-generate] {
    width: 100% !important;
  }

  .bigstep-ai-varsity-fields {
    grid-template-columns: 1fr;
  }

  .bigstep-ai-varsity-field,
  .bigstep-ai-varsity-field--wide,
  .bigstep-ai-varsity-generate {
    grid-column: 1;
  }
}

@media (max-width: 380px) {
  .bigstep-ai-panel-utility-row {
    grid-template-columns: 1fr;
  }
  .bigstep-ai-history-chip {
    width: 100%;
  }
}

/* Final mobile image edit panel alignment. Keep the three action tabs inside
   the bottom sheet so they cannot overlap or drift offscreen on iPhone widths. */
@media (max-width: 980px) {
  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(var(--mobile-nav-h, 78px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow-x: hidden !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar > [data-image-edit-tabs].bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 46px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    translate: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button svg {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]) .bigstep-ai-image-remix-cta-badge {
    display: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar > .bigstep-ai-image-edit-section:not([hidden]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Text panel AI Typo promotion. */
.bigstep-ai-app .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #e9d5ff !important;
  border-color: rgba(167,139,250,.28) !important;
  background: radial-gradient(circle at 50% -25%, rgba(168,85,247,.22), rgba(15,23,42,.08) 64%) !important;
}

.bigstep-ai-app .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.bigstep-ai-app .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai em {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 12px rgba(168,85,247,.34);
}

.bigstep-ai-app .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai:hover,
.bigstep-ai-app .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai.is-active {
  border-color: rgba(196,181,253,.5) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.92), rgba(168,85,247,.92)) !important;
  color: #fff !important;
}

.bigstep-ai-text-typo-cta {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(167,139,250,.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgba(168,85,247,.28), transparent 42%),
    linear-gradient(135deg, rgba(36,31,74,.86), rgba(15,23,42,.92));
  color: #f8f7ff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(99,102,241,.14);
}

.bigstep-ai-text-typo-cta:hover {
  border-color: rgba(196,181,253,.58);
  background:
    radial-gradient(circle at 8% 0%, rgba(168,85,247,.36), transparent 44%),
    linear-gradient(135deg, rgba(52,42,105,.94), rgba(16,24,43,.96));
}

.bigstep-ai-text-typo-cta > svg {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 10px 22px rgba(124,58,237,.28);
}

.bigstep-ai-text-typo-cta span {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.bigstep-ai-text-typo-cta strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.bigstep-ai-text-typo-cta small {
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.bigstep-ai-text-typo-cta i {
  flex: 0 0 auto;
  color: #ddd6fe;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

/* Text panel tab simplification: move shape presets into Basic and keep
   Text / AI Typo / Image-in-text readable on narrow desktop and mobile widths. */
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs {
  grid-template-columns: minmax(0, .86fr) minmax(0, .98fr) minmax(0, 1.16fr) !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs [data-text-panel-tab="shape"] {
  display: none !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs button {
  min-width: 0 !important;
  padding-inline: 6px !important;
  font-size: 10.6px !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai {
  gap: 4px !important;
  padding-inline: 5px !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai span {
  white-space: nowrap !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai em {
  padding-inline: 4px !important;
  font-size: 7.5px !important;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-font-picker-field {
  order: 1;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-text-quick-entry {
  order: 2;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-panel-section {
  order: 3;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-upload-font-btn {
  order: 5;
  margin-top: 2px;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-upload-font-note {
  order: 6;
}

.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] [data-text-panel-tab-panel="basic"] .bigstep-ai-text-typo-cta {
  order: 7;
}

.bigstep-ai-text-fx-section--inline {
  margin-top: 0 !important;
}

.bigstep-ai-text-fx-section--inline .bigstep-ai-text-fx-hint {
  display: none !important;
}

@media (max-width: 520px) {
  .bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs {
    grid-template-columns: minmax(0, .82fr) minmax(0, .96fr) minmax(0, 1.22fr) !important;
  }

  .bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs button {
    font-size: 9.8px !important;
    padding-inline: 4px !important;
  }

  .bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai em {
    display: none !important;
  }
}

/* Mobile image edit sheet: one compact bottom sheet for every phone size.
   This must sit late in the cascade because older mobile/tiny rules and the
   AI Remix CTA styling are very specific. */
@media (max-width: 980px) {
  body .bigstep-ai-app[data-editor-mode="editor"]:has([data-tool-panel]:not([hidden])) [data-image-bar]:not([hidden]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--toolbar-m, 68px) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 780 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(30dvh, 238px) !important;
    margin: 0 !important;
    padding: 10px 8px 8px !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: normal !important;
    touch-action: pan-y !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 -16px 34px rgba(2, 6, 23, .48) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-sheet-handle {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: block !important;
    flex: 0 0 18px !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: -10px 0 -8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    touch-action: none !important;
    cursor: ns-resize !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-sheet-handle::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(130,145,141,.78) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar].is-mobile-image-sheet-dragging {
    animation: none !important;
    transition: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs].bigstep-ai-image-mode-tabs,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar > [data-image-edit-tabs].bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 46px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta],
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta],
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    border-radius: 11px !important;
    grid-template-columns: none !important;
    overflow: hidden !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta],
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] {
    justify-content: flex-start !important;
    border-width: 1px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(2,6,23,.20) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta] {
    border-color: rgba(94,234,212,.42) !important;
    background:
      linear-gradient(135deg, rgba(20,184,166,.34), rgba(14,165,233,.18)),
      rgba(15,23,42,.76) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] {
    border-color: rgba(196,181,253,.45) !important;
    background:
      linear-gradient(135deg, rgba(124,58,237,.38), rgba(168,85,247,.18)),
      rgba(15,23,42,.76) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] {
    border-color: rgba(148,163,184,.18) !important;
    background: rgba(15,23,42,.54) !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-remix-cta-badge,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) .bigstep-ai-image-remix-cta-badge {
    display: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button span,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta] span,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta] span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-redesign-cta] span {
    color: #ccfbf1 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-remix-cta] span {
    color: #ede9fe !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta] svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta] svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button svg {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-edit-section:not([hidden]) {
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-text-bar-label {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu .bigstep-ai-text-bar-select,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu select {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) .bigstep-ai-image-menu input[type="range"] {
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   Editor sidebar Màu sắc: card thumbnail + tên (khớp Woo single
   product) để phân biệt phôi phối màu (không tách swatch solo).
   Quick-color popover trên canvas vẫn giữ dot compact vì chật.
   ──────────────────────────────────────────────────────────────── */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-block .bigstep-ai-swatch-grid--color {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  min-height: 52px;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb:hover {
  border-color: rgba(99,102,241,.55);
  background: rgba(99,102,241,.08);
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb.is-active {
  border-color: var(--bs-accent, #6366f1) !important;
  background: rgba(99,102,241,.14) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.35);
}
.bigstep-ai-swatch-color-media {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  overflow: hidden;
}
.bigstep-ai-swatch-color-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bigstep-ai-swatch-color-solid {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 2px 6px rgba(15,23,42,.15);
}
.bigstep-ai-swatch-color-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb {
  border-color: rgba(15,23,42,.10);
  background: #fff;
}
:root[data-theme="light"] .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb.is-active {
  background: rgba(99,102,241,.10) !important;
}
@media (max-width: 720px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-field-block .bigstep-ai-swatch-grid--color {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   Single product — Chip Công nghệ in (pill nhỏ + SVG icon + tên).
   Bấm chip: chọn công nghệ + xổ balloon phía dưới hiện mô tả chi
   tiết. Ẩn mặc định để panel gọn — khách quan tâm mới bấm xem.
   ──────────────────────────────────────────────────────────────── */
.bigstep-product-options__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bigstep-product-options__method-item { position: relative; }
/* Chú ý specificity: theme "Trending Woo" set button {height:48px; padding:0 35px;
   line-height:48px; display:inline-block} — cần !important + selector đôi để
   card không bị ép chiều cao/padding của theme. */
/* Inactive chip: viền/nền neutral, chữ mờ hơn — khách nhìn biết ngay đây là
   lựa chọn phụ. Chỉ active chip mới hiện accent color + halo để phân biệt. */
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__method {
  --bs-method-accent: #6366f1;
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 12px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.72) !important;
  cursor: pointer;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: left;
  box-shadow: none !important;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__method:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__method.is-active {
  border-color: var(--bs-method-accent) !important;
  background: color-mix(in srgb, var(--bs-method-accent) 26%, rgba(255,255,255,.03)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-method-accent) 32%, transparent),
              0 6px 16px color-mix(in srgb, var(--bs-method-accent) 25%, transparent) !important;
}
.bigstep-product-options__method-icon {
  display: inline-grid;
  place-items: center;
  color: rgba(255,255,255,.55);
  line-height: 1;
  transition: color .15s ease;
}
.bigstep-product-options__method.is-active .bigstep-product-options__method-icon {
  color: color-mix(in srgb, var(--bs-method-accent) 45%, #fff);
}
.bigstep-product-options__method-key {
  font-weight: 800;
  color: rgba(255,255,255,.75);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.bigstep-product-options__method.is-active .bigstep-product-options__method-key {
  color: color-mix(in srgb, var(--bs-method-accent) 55%, #fff);
}
body .bigstep-product-options .bigstep-product-options__method-name {
  color: rgba(255,255,255,.82);
  font-weight: 500;
  text-transform: none;
  font-size: 12.5px;
}
.bigstep-product-options__method-caret {
  color: rgba(255,255,255,.55);
  transition: transform .15s ease;
}
.bigstep-product-options__method[aria-expanded="true"] .bigstep-product-options__method-caret {
  transform: rotate(180deg);
}

/* Balloon xổ dưới chip khi khách bấm */
.bigstep-product-options__method-balloon {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: min(300px, 78vw);
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  line-height: 1.5;
}
.bigstep-product-options__method-balloon[hidden] { display: none; }
.bigstep-product-options__method-balloon strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: color-mix(in srgb, var(--bs-method-accent, #6366f1) 55%, #fff);
}
.bigstep-product-options__method-balloon p {
  margin: 0;
  color: rgba(255,255,255,.78);
}
.bigstep-product-options__method-balloon-arrow {
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.10);
  border-left: 1px solid rgba(255,255,255,.10);
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .bigstep-product-options__method-balloon { left: -10px; }
}

/* Ẩn badge công nghệ in cũ (plugin bs-printing-tech) vì đã tích hợp
   nội dung vào card ở panel Tùy chọn sản phẩm — tránh hiển thị hai lần
   trên cùng trang. Nếu admin muốn hiện lại, disable dòng dưới hoặc bỏ
   plugin bs-printing-tech. */
body:has(.bigstep-product-options__method) .bs-v19-wrap {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────
   Nén khoảng cách panel Tùy chọn sản phẩm + Hướng dẫn size để mobile
   đỡ phải kéo dài. Giữ khí nhưng cắt padding thừa 3–6px mỗi nơi.
   NOTE về specificity: child theme (bigstep-child.css) đã set
   `body.single-product.bigstep-woo-redesign:not(.bigstep-plugin-surface)
    .bigstep-product-options { padding: 18px !important }` — cần selector
   ≥ (0,4,1) mới override. Trick: double class .foo.foo bump specificity
   nhẹ, không lệ thuộc :not() nếu theme sau này đổi.
   ──────────────────────────────────────────────────────────────── */
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options.bigstep-product-options {
  gap: 8px !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__head.bigstep-product-options__head {
  gap: 10px !important;
  padding-bottom: 10px !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__head strong.bigstep-product-options__head-title,
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__head strong {
  font-size: 18px !important;
  line-height: 1.25 !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__eyebrow.bigstep-product-options__eyebrow {
  margin-bottom: 2px !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__section.bigstep-product-options__section {
  gap: 5px !important;
}

/* Uniform mode — layout khớp studio: 3 cột grid [size][color][qty],
   row có border + bg card, khớp .bigstep-ai-size-qty-row bên editor. */
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-row {
  display: grid !important;
  grid-template-columns: minmax(38px, 48px) minmax(90px, 1fr) minmax(60px, 78px) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.03) !important;
  min-height: 42px !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.9) !important;
  text-align: left !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-color {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1.2 !important;
  padding: 2px 28px 2px 10px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-color:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22) !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-color option {
  background: #0f172a;
  color: #fff;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-input {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  -moz-appearance: textfield;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-input::-webkit-outer-spin-button,
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-input:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22) !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__size-qty-summary {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.75) !important;
}

/* Order mode segment (Không in gì hết / Bạn tự thiết kế / Bigstep thiết kế hộ):
   dark surface theme cần accent rõ hơn để phân biệt active với inactive.
   Dùng cùng indigo #6366f1 với method chip cho nhất quán. */
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__segment {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.88) !important;
  transition: border-color .15s ease, background .15s ease, transform .1s ease !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__segment:not(.is-active):hover {
  border-color: rgba(129,140,248,.55) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__segment.is-active {
  border-color: #6366f1 !important;
  background: rgba(99,102,241,.18) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22) !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options .bigstep-product-options__segment svg {
  color: color-mix(in srgb, #6366f1 55%, #fff) !important;
}

/* Size guide details — bảng size dày, thu gọn padding cell + panel */
body.single-product .bigstep-size-advice {
  margin: 8px 0 10px !important;
}
body .bigstep-size-advice__panel {
  margin-top: 6px !important;
  padding: 10px 12px !important;
}
body .bigstep-size-advice__panel table { margin: 4px 0 !important; }
body .bigstep-size-advice__panel th,
body .bigstep-size-advice__panel td {
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}
body.single-product .bigstep-size-advice__panel th:first-child,
body.single-product .bigstep-size-advice__panel td:first-child,
body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel th:first-child,
body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel td:first-child {
  width: 72px !important;
  min-width: 72px !important;
  text-align: center !important;
}
body.single-product .bigstep-size-advice__panel th:first-child,
body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel th:first-child {
  background: linear-gradient(135deg, rgba(99,102,241,.38), rgba(14,165,233,.22)) !important;
  color: #fff !important;
}
body.single-product .bigstep-size-advice__panel td:first-child,
body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel td:first-child {
  background: rgba(99,102,241,.18) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}
body.single-product .bigstep-size-advice__panel tbody tr:hover td:first-child,
body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel tbody tr:hover td:first-child {
  background: rgba(99,102,241,.28) !important;
}
body .bigstep-size-advice__panel .bigstep-size-advice__tip {
  margin-top: 6px !important;
  padding: 8px 10px !important;
}
body .bigstep-size-advice__panel .bigstep-size-advice__note {
  margin-top: 4px !important;
}

/* ────────────────────────────────────────────────────────────────
   "Bắt đầu thiết kế" CTA — nút quan trọng nhất trong panel single
   product. Nút "Thêm vào giỏ hàng" của theme dùng indigo→violet
   trùng với nút design cũ → khách nhìn 2 nút ngang tầm, không biết
   ưu tiên vào đâu. Đổi sang gradient coral→hot-pink→magenta để pop
   khỏi tone tím của theme, thêm bounce/glow attract click.
   Specificity: theme (0,4,1) → cần (0,5,1) với double class.
   ──────────────────────────────────────────────────────────────── */
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design,
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design:link,
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design:visited {
  background: linear-gradient(135deg, #ff6b35 0%, #ff4d6d 55%, #d946ef 100%) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  box-shadow:
    0 12px 32px rgba(255,77,109,.45),
    0 4px 12px rgba(217,70,239,.30),
    0 0 0 1px rgba(255,255,255,.20) inset !important;
  color: #fff !important;
  animation: none !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design:hover,
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design:focus {
  background: linear-gradient(135deg, #ff7a45 0%, #ff5477 55%, #e256f0 100%) !important;
  box-shadow:
    0 18px 42px rgba(255,77,109,.55),
    0 6px 16px rgba(217,70,239,.40),
    0 0 0 1px rgba(255,255,255,.32) inset !important;
  transform: translateY(-2px) scale(1.01) !important;
}
body.single-product.bigstep-woo-redesign.woocommerce .bigstep-product-options a.bigstep-product-options__design.bigstep-product-options__design::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,77,109,.50), rgba(217,70,239,.32) 42%, transparent 70%) !important;
}

/* Mobile size guide: keep the table horizontal, compact enough to fit screen. */
@media (max-width: 767px) {
  body.single-product .bigstep-size-advice__panel,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
  }
  body.single-product .bigstep-size-advice__panel .bigstep-size-advice__scroll,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  body.single-product .bigstep-size-advice__panel table,
  body .bigstep-ai-size-guide-advice table {
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  body.single-product .bigstep-size-advice__panel th,
  body .bigstep-ai-size-guide-advice th,
  body.single-product .bigstep-size-advice__panel td,
  body .bigstep-ai-size-guide-advice td {
    min-width: 0 !important;
    padding: 5px 3px !important;
    border-bottom: 1px solid rgba(148,163,184,.12) !important;
    color: #dbe4ff !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.single-product .bigstep-size-advice__panel th,
  body .bigstep-ai-size-guide-advice th {
    font-size: 9px !important;
    font-weight: 850 !important;
  }
  body.single-product .bigstep-size-advice__panel th:first-child,
  body.single-product .bigstep-size-advice__panel td:first-child,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel th:first-child,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel td:first-child {
    width: 15% !important;
    min-width: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  body.single-product .bigstep-size-advice__panel p,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__panel p {
    margin-bottom: 7px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.single-product .bigstep-size-advice__panel .bigstep-size-advice__tip,
  body.single-product .bigstep-size-advice__panel .bigstep-size-advice__note,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__tip,
  body .bigstep-ai-size-guide-advice .bigstep-size-advice__note {
    padding: 7px 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

/* Mobile editor: after inserting an item, keep the active panel half-open so the canvas has room for editing. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel.is-mobile-insert-half,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel.is-mobile-insert-half {
    max-height: min(42dvh, 340px) !important;
    transition: max-height .18s ease, box-shadow .18s ease;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel.is-mobile-insert-half::before,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel.is-mobile-insert-half::before {
    background: color-mix(in srgb, var(--bs-accent) 45%, var(--bs-border-2));
  }
}

@media (max-width: 380px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel.is-mobile-insert-half,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel.is-mobile-insert-half {
    max-height: min(38dvh, 280px) !important;
  }
}

@media (min-width: 981px) {
  .bigstep-ai-image-sheet-handle { display: none !important; }
}

/* Mobile freehand mode owns the floating space above the bottom toolbar.
   Bind this directly to the editor state instead of relying on :has() for
   transient panels: the drawing notice is appended to <body>, and mobile
   browsers can otherwise leave the front/back switch visible underneath it. */
@media (max-width: 760px) {
  body .bigstep-ai-app[data-editor-mode="editor"].is-drawing-mode .bigstep-ai-side-tabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Keep the animated hero loader, but never render the legacy percentage card
   or its step-by-step ratio list. */
.bigstep-ai-app [data-ai-remix-progress],
.bigstep-ai-app .bigstep-ai-remix-progress {
  display: none !important;
}

/* Mobile image panel: make "Chinh anh" and "Tay xoa" read as real touch buttons. */
@media (max-width: 980px) {
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs].bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(129, 140, 248, .34) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #dbe4ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(2,6,23,.24) !important;
    text-align: center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view]::after,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] small {
    display: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] svg {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    padding: 0 !important;
    background: transparent !important;
    color: currentColor !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view] span {
    display: block !important;
    min-width: 0 !important;
    color: currentColor !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active {
    border-color: rgba(99, 102, 241, .76) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.78), rgba(139,92,246,.64)) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.28), 0 12px 26px rgba(99,102,241,.28) !important;
  }
}

/* Mobile editor chrome: quick color + 3D get their own row instead of
   colliding with the layer action toolbar. The T action only exists for text. */
@media (max-width: 980px) {
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color {
    position: relative !important;
    inset: auto !important;
    align-self: flex-end !important;
    margin: 0 8px 0 0 !important;
    min-height: 38px;
    z-index: 26 !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-object-actions [data-mobile-object-action="edit-text"][hidden] {
    display: none !important;
  }
}

/* Mobile side switch: equal-width touch targets and compact labels prevent the
 * optional sleeve/label tabs from overflowing narrow iPhone viewports. */
@media (max-width: 760px) {
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs {
		box-sizing: border-box !important;
		display: flex !important;
		width: calc(100dvw - 12px) !important;
		max-width: 390px !important;
		gap: 4px !important;
		padding: 4px !important;
		overflow: hidden !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button:not([hidden]) {
		box-sizing: border-box !important;
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 52px !important;
		padding: 4px 1px 3px !important;
		gap: 2px !important;
		overflow: hidden !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb {
		width: 27px !important;
		height: 27px !important;
		min-width: 27px !important;
		min-height: 27px !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		font-size: 0 !important;
		line-height: 1 !important;
		text-align: center !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label::after {
		display: block;
		font-size: 9px;
		font-weight: 850;
		line-height: 11px;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="front"] .bigstep-ai-side-tab__label::after { content: "Trước"; }
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="back"] .bigstep-ai-side-tab__label::after { content: "Sau"; }
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="left_sleeve"] .bigstep-ai-side-tab__label::after { content: "T.Trái"; }
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="right_sleeve"] .bigstep-ai-side-tab__label::after { content: "T.Phải"; }
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="label"] .bigstep-ai-side-tab__label::after { content: "Label"; }
}

/* Mobile editor chrome: Màu + 3D share the Undo/Redo bar. They stay on its
   first row when there is room; selected-layer tools take priority and push
   this compact pair to a clean second row instead of covering the canvas. */
@media (max-width: 980px) {
	/* Independent top-right controls: aligned with Undo/Redo, never merged into
	   its toolbar. Layer actions expand that toolbar, so only then drop Màu/3D. */
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color {
		position: absolute !important;
		top: var(--bsai3d-mobile-actions-top, 10px) !important;
		right: 8px !important;
		left: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		z-index: 26 !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions:has(.bigstep-ai-mobile-object-actions:not([hidden])) + .bigstep-ai-quick-color {
		top: calc(var(--bsai3d-mobile-actions-top, 10px) + 44px) !important;
	}
	/* During object editing, keep the canvas chrome focused on the active tool. */
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area:has(.bigstep-ai-text-bar:not([hidden]), .bigstep-ai-obj-toolbar:not([hidden]), [data-image-bar]:not([hidden])) > .bigstep-ai-quick-color {
		display: none !important;
	}
}

/* P0 mobile accessibility contract: visible topbar actions are at least 44px,
   compact phones never overlap controls, and the eight-tool dock can scroll. */
@media (max-width: 980px) {
  body.bigstep-ai-editor-active .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle,
  body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right > .bigstep-ai-theme-toggle {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    margin-left: 0 !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-bigstep-ai-cart],
  body .bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

@media (max-width: 390px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar {
    grid-template-columns: minmax(72px, 1fr) auto !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    gap: 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 116px !important;
    overflow: visible !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    margin-left: 4px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    max-width: 70px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu {
    display: grid !important;
    grid-template-columns: repeat(8, 48px) !important;
    justify-content: start !important;
    gap: 3px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu::-webkit-scrollbar {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool,
  .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 50px !important;
    min-height: 50px !important;
    scroll-snap-align: start !important;
  }
}

@media (max-width: 340px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left {
    max-width: 106px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-basis: 32px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar .bigstep-ai-brand-logo {
    max-width: 68px !important;
  }
}

/* Mobile editor price: VND totals gain separators as they reach the millions.
   Scale only long totals so the header remains one row without clipping the
   leading digit or shrinking the order button. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong {
    min-width: 0 !important;
    max-width: 100% !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong.is-price-long {
    font-size: 11px !important;
    letter-spacing: -0.025em !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong.is-price-very-long {
    font-size: 9.5px !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 390px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong.is-price-long {
    font-size: 10.25px !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong.is-price-very-long {
    font-size: 9.25px !important;
  }
}

/* Mobile header: the legacy desktop spacing rule makes the price pill 60px
   tall, while the compact Studio header is 56px. Keep the single-line mobile
   price inside the header instead of letting overflow crop both edges. */
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-left .bigstep-ai-editor-info-mobile {
    display: none !important;
  }

  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right .bigstep-ai-price-pill {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 4px !important;
    align-self: center !important;
  }
}
.bigstep-ai-photobooth-launch{
	display:flex;width:100%;align-items:center;gap:12px;margin:12px 0;padding:13px 14px;
	border:1px solid rgba(139,92,246,.48);border-radius:14px;
	background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(236,72,153,.09));
	color:#f8f7ff;text-align:left;cursor:pointer;transition:.2s ease;
}
.bigstep-ai-photobooth-launch:hover{border-color:#9b72f5;transform:translateY(-1px);box-shadow:0 10px 28px rgba(91,44,176,.2)}
.bigstep-ai-photobooth-launch__icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 8px 20px rgba(124,58,237,.35)}
.bigstep-ai-photobooth-launch>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}
.bigstep-ai-photobooth-launch strong{font:800 13px/1.2 "Plus Jakarta Sans",sans-serif}
.bigstep-ai-photobooth-launch small{color:#aeb6cb;font:500 10.5px/1.4 "Plus Jakarta Sans",sans-serif}
.bigstep-ai-photobooth-launch>b{font-size:20px}
.bigstep-ai-photobooth-launch{max-width:100%;min-width:0;overflow:hidden}
.bigstep-ai-photobooth-launch>span:nth-child(2){overflow:hidden}
.bigstep-ai-photobooth-launch strong,.bigstep-ai-photobooth-launch small{display:block;max-width:100%;overflow-wrap:anywhere}
.bigstep-ai-photobooth-launch>b{flex:0 0 auto}
body.bigstep-ai-photobooth-open{overflow:hidden!important}
.bigstep-ai-photobooth-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;background:rgba(3,5,14,.82);backdrop-filter:blur(14px)}
.bigstep-ai-photobooth-dialog{position:relative;display:flex;flex-direction:column;width:min(1480px,calc(100vw - 36px));height:min(920px,calc(100dvh - 36px));overflow:hidden;border:1px solid #343c60;border-radius:22px;background:#080b18;box-shadow:0 35px 100px rgba(0,0,0,.65)}
.bigstep-ai-photobooth-dialog>header{display:flex;flex:0 0 62px;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #2d3452;background:#101427;color:#fff}
.bigstep-ai-photobooth-dialog>header>div{display:flex;flex-direction:column;gap:2px}
.bigstep-ai-photobooth-dialog>header strong{font:800 16px/1.2 "Plus Jakarta Sans",sans-serif}
.bigstep-ai-photobooth-dialog>header span{color:#9ca6bf;font:500 11px/1.3 "Plus Jakarta Sans",sans-serif}
.bigstep-ai-photobooth-dialog>header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #39415f;border-radius:11px;background:#171c31;color:#fff;font-size:25px;cursor:pointer}
.bigstep-ai-photobooth-dialog iframe{position:relative;z-index:2;display:block;flex:1;width:100%;min-height:0;border:0;background:#070918;opacity:0;transition:opacity .2s}
.bigstep-ai-photobooth-modal.is-loaded iframe{opacity:1}
.bigstep-ai-photobooth-loading{position:absolute;inset:62px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;color:#aeb6cb;font:700 12px "Plus Jakarta Sans",sans-serif}
.bigstep-ai-photobooth-loading i{width:20px;height:20px;border:2px solid #403858;border-top-color:#a56cff;border-radius:50%;animation:bigstep-photobooth-spin .8s linear infinite}
@keyframes bigstep-photobooth-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
	.bigstep-ai-photobooth-modal{padding:0}
	.bigstep-ai-photobooth-dialog{width:100vw;height:100dvh;border:0;border-radius:0}
	.bigstep-ai-photobooth-dialog>header{flex-basis:56px;padding:0 12px}
	.bigstep-ai-photobooth-dialog>header span{display:none}
	.bigstep-ai-photobooth-loading{inset:56px 0 0}
}

.bigstep-ai-canvas-wrap{position:relative}
.bigstep-studio-promos{position:fixed;z-index:65;top:136px;right:24px;bottom:auto;left:auto;width:min(340px,calc(100vw - 128px));font-family:"Plus Jakarta Sans",sans-serif;filter:drop-shadow(0 18px 30px rgba(0,0,0,.42));animation:bigstep-studio-promo-in .52s cubic-bezier(.2,1.7,.45,1)}
.bigstep-studio-promos.is-leaving{pointer-events:none;animation:bigstep-studio-promo-out .26s ease forwards}
.bigstep-studio-promos__card{position:relative;height:178px;overflow:hidden;border:1px solid rgba(167,139,250,.62);border-radius:17px;background:#080d20;color:#fff;isolation:isolate;touch-action:pan-y;cursor:pointer}
.bigstep-studio-promos__card::after{position:absolute;z-index:4;top:-60%;left:-45%;width:32%;height:220%;content:"";background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(18deg);animation:bigstep-studio-promo-shine 2.7s ease-in-out infinite;pointer-events:none}
.bigstep-studio-promos__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.bigstep-studio-promos__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,24,.98) 0%,rgba(5,9,24,.9) 37%,rgba(5,9,24,.2) 74%,rgba(5,9,24,.06) 100%)}
.bigstep-studio-promos__close{position:absolute;z-index:7;top:10px;right:10px;display:grid!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;place-items:center;border:1px solid rgba(255,255,255,.32)!important;border-radius:50%!important;background:rgba(7,10,25,.72)!important;color:transparent!important;font-size:0!important;line-height:0!important;cursor:pointer;backdrop-filter:blur(7px);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.bigstep-studio-promos__close::before,.bigstep-studio-promos__close::after{position:absolute;top:50%;left:50%;width:13px;height:2px;border-radius:2px;background:#fff;content:"";transform:translate(-50%,-50%) rotate(45deg)}
.bigstep-studio-promos__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.bigstep-studio-promos__close:hover{background:rgba(32,37,58,.92)!important;border-color:rgba(255,255,255,.55)!important}
.bigstep-studio-promos__content{position:absolute;z-index:3;inset:18px 46% 17px 17px;display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.bigstep-studio-promos__content>span{color:#c4a5ff;font-size:8px;font-weight:850;letter-spacing:.13em}.bigstep-studio-promos__content>strong{margin-top:5px;font-size:17px;line-height:1.12;letter-spacing:-.025em}.bigstep-studio-promos__content>p{display:-webkit-box;overflow:hidden;margin:6px 0 0;color:#bdc5d8;font-size:9.5px;line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.bigstep-studio-promos__content>button{display:flex;align-items:center;gap:8px;margin-top:auto;padding:8px 11px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:linear-gradient(135deg,#743ce0,#ac4ddb);color:#fff;font-size:9px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(107,52,211,.34)}.bigstep-studio-promos__content>button b{font-size:13px}
.bigstep-studio-promos__dots{position:absolute;z-index:6;right:12px;bottom:10px;display:flex;gap:5px}.bigstep-studio-promos__dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:.2s}.bigstep-studio-promos__dots button.is-active{width:16px;border-radius:4px;background:#fff}
.bigstep-studio-promos__card.is-slide-next>img{animation:bigstep-studio-promo-image-next .42s ease}.bigstep-studio-promos__card.is-slide-prev>img{animation:bigstep-studio-promo-image-prev .42s ease}.bigstep-studio-promos__card.is-slide-next .bigstep-studio-promos__content,.bigstep-studio-promos__card.is-slide-prev .bigstep-studio-promos__content{animation:bigstep-studio-promo-copy .38s ease}
@keyframes bigstep-studio-promo-in{0%{opacity:0;transform:translateY(24px) scale(.88)}62%{opacity:1;transform:translateY(-7px) scale(1.025)}100%{transform:none}}
@keyframes bigstep-studio-promo-out{to{opacity:0;transform:translateY(15px) scale(.94)}}
@keyframes bigstep-studio-promo-shine{0%,52%{left:-45%}100%{left:125%}}
@keyframes bigstep-studio-promo-image-next{from{opacity:.35;transform:translateX(16px) scale(1.05)}to{opacity:1;transform:none}}
@keyframes bigstep-studio-promo-image-prev{from{opacity:.35;transform:translateX(-16px) scale(1.05)}to{opacity:1;transform:none}}
@keyframes bigstep-studio-promo-copy{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:760px){.bigstep-studio-promos{position:fixed;top:auto;right:10px;bottom:calc(var(--toolbar-m,68px) + 76px + env(safe-area-inset-bottom,0px));left:10px;width:auto}.bigstep-studio-promos__card{height:154px}.bigstep-studio-promos__content{inset:15px 43% 14px 14px}.bigstep-studio-promos__content>strong{font-size:15px}.bigstep-studio-promos__content>p{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.bigstep-studio-promos,.bigstep-studio-promos *{animation:none!important;transition:none!important}}

body.bigstep-native-photobooth-open{overflow:hidden!important}

/* Android in-app browser parity (Messenger, Facebook, Zalo).
 * Chromium WebView may auto-inflate text on narrow pages even though the
 * canvas itself keeps the correct CSS width. That makes the fixed-width
 * mobile header and dock look oversized while iOS remains normal. */
@media (max-width: 980px) {
	body.bigstep-ai-standalone-editor,
	body.bigstep-ai-standalone-editor .bigstep-ai-app,
	body.bigstep-ai-editor-active .bigstep-ai-app {
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
	}

	/* Reinforce the two compact chrome regions because some Android WebViews
	 * apply text autosizing again at independently scrolling/fixed containers. */
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-topbar *,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu *,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs--bottom *,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions *,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-quick-color * {
		-webkit-text-size-adjust: none !important;
		text-size-adjust: none !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-right,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill,
	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] {
		min-width: 0 !important;
	}

	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart] span,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-price-pill strong,
	.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
		white-space: nowrap !important;
	}

	body.bigstep-ai-standalone-editor {
		overflow-x: hidden !important;
	}
}
.bigstep-native-photobooth{position:fixed;inset:62px 0 0 72px;z-index:2147483000;display:grid;place-items:center;padding:14px 18px 18px;background:rgba(3,5,14,.86);backdrop-filter:blur(15px);font-family:"Plus Jakarta Sans",sans-serif;color:#f8f7ff}
.bigstep-native-photobooth *{box-sizing:border-box}
.bigstep-native-photobooth button{font-family:inherit}
.bigstep-native-photobooth__dialog{display:flex;flex-direction:column;width:min(1260px,calc(100% - 20px));height:min(850px,calc(100% - 8px));overflow:hidden;border:1px solid #343c60;border-radius:24px;background:#090d1d;box-shadow:0 35px 100px rgba(0,0,0,.7)}
.bigstep-native-photobooth__header{display:grid;grid-template-columns:180px 1fr 44px;align-items:center;gap:20px;min-height:70px;padding:0 22px;border-bottom:1px solid #2d3452;background:#11162a}
.bigstep-native-photobooth__header>div:first-child{display:flex;flex-direction:column}.bigstep-native-photobooth__header>div:first-child span{color:#9f7aea;font-size:9px;font-weight:800;letter-spacing:.12em}.bigstep-native-photobooth__header>div:first-child strong{font-size:18px}
.bigstep-native-photobooth__header>button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #3a4262;border-radius:12px;background:#171d34;color:#fff;font-size:25px;cursor:pointer}
.bigstep-native-photobooth__steps{display:flex;align-items:center;justify-content:center;gap:10px}.bigstep-native-photobooth__steps span{display:flex;align-items:center;gap:6px;color:#75809c;font-size:10px;font-weight:700}.bigstep-native-photobooth__steps i{display:grid;place-items:center;width:23px;height:23px;border:1px solid #3a4262;border-radius:50%;font-style:normal}.bigstep-native-photobooth__steps .is-active{color:#fff}.bigstep-native-photobooth__steps .is-active i,.bigstep-native-photobooth__steps .is-done i{border-color:#9b5de5;background:#7c3aed;color:#fff}
.bigstep-native-photobooth main{display:flex;min-height:0;flex:1;flex-direction:column;overflow:auto;padding:26px 34px;scrollbar-width:thin;scrollbar-color:#596381 #11162a}.bigstep-native-photobooth main::-webkit-scrollbar{width:8px;height:8px}.bigstep-native-photobooth main::-webkit-scrollbar-track{background:#11162a}.bigstep-native-photobooth main::-webkit-scrollbar-thumb{border:2px solid #11162a;border-radius:9px;background:#596381}.bigstep-native-photobooth main::-webkit-scrollbar-thumb:hover{background:#7c67a8}.bigstep-native-photobooth__intro{max-width:740px}.bigstep-native-photobooth__intro>span,.bigstep-native-photobooth__controls>span,.bigstep-native-photobooth__result>div>span{color:#a78bfa;font-size:10px;font-weight:800;letter-spacing:.12em}.bigstep-native-photobooth h2{margin:7px 0 6px;color:#fff;font-size:27px;line-height:1.2}.bigstep-native-photobooth p{margin:0;color:#9ba5be;font-size:12px}
.bigstep-native-photobooth__select-head{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:18px}.bigstep-native-photobooth__tabs{display:flex;flex:0 0 auto;width:max-content;margin:0;padding:4px;border:1px solid #343d5c;border-radius:13px;background:#0d1224}.bigstep-native-photobooth__tabs button{min-width:130px;padding:10px 15px;border:0;border-radius:9px;background:transparent;color:#9aa4bd;font-weight:700;cursor:pointer}.bigstep-native-photobooth__tabs button.is-active{background:#633aa0;color:#fff}
.bigstep-native-photobooth__choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:0;flex:1}.bigstep-native-photobooth__choice{display:flex;min-height:0;flex-direction:column;overflow:hidden;padding:10px;border:1px solid #303957;border-radius:16px;background:#11172c;color:#fff;text-align:left;cursor:pointer}.bigstep-native-photobooth__choice.is-active{border-color:#bf5af2;box-shadow:0 0 0 2px rgba(191,90,242,.17)}.bigstep-native-photobooth__choice>img,.bigstep-native-photobooth__layout-icon{width:100%;min-height:0;height:100%;object-fit:contain;border-radius:10px;background:radial-gradient(circle at 50% 40%,#252d4b,#090d1d)}.bigstep-native-photobooth__choice>span{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:11px 3px 2px}.bigstep-native-photobooth__choice strong{font-size:12px}.bigstep-native-photobooth__choice small{color:#929db7;font-size:9px}
.bigstep-native-photobooth__layout-icon{position:relative;overflow:hidden}.bigstep-native-photobooth__layout-icon b{position:absolute;border:4px solid #fff;background:linear-gradient(135deg,#6ed9ed,#c36bdd);box-shadow:0 8px 16px #0008}.bigstep-native-photobooth__layout-icon.is-single b:first-child{inset:15px 31%;transform:rotate(-2deg)}.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(1){inset:24px 45% 15px 18%;transform:rotate(-8deg)}.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(2){inset:16px 20% 23px 44%;transform:rotate(7deg)}.bigstep-native-photobooth__layout-icon.is-collage3 b{width:32%;height:78%;top:13%}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(1){left:8%;transform:rotate(-8deg)}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(2){left:34%}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(3){left:61%;transform:rotate(8deg)}.bigstep-native-photobooth__layout-icon.is-strip4 b{top:27%;width:21%;height:55%}.bigstep-native-photobooth__layout-icon.is-strip4 b:nth-child(1){left:3%}.bigstep-native-photobooth__layout-icon.is-strip4 b:nth-child(2){left:27%}.bigstep-native-photobooth__layout-icon.is-strip4 b:nth-child(3){left:51%}.bigstep-native-photobooth__layout-icon.is-strip4 b:nth-child(4){left:75%}
.bigstep-native-photobooth footer{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #252d49}.bigstep-native-photobooth footer>span{margin:0 auto;color:#9ba5be;font-size:11px}.bigstep-native-photobooth footer button,.bigstep-native-photobooth__capture-actions>button{min-height:42px;padding:0 18px;border:1px solid #414b6c;border-radius:11px;background:#151b32;color:#fff;font-weight:750;cursor:pointer}.bigstep-native-photobooth footer button.is-primary{border-color:#9f67ed;background:linear-gradient(135deg,#6d3ae0,#a04ee6);box-shadow:0 9px 24px rgba(111,57,220,.28)}.bigstep-native-photobooth button:disabled{cursor:not-allowed;opacity:.4}.bigstep-native-photobooth__pager{display:flex;align-items:center;gap:8px}.bigstep-native-photobooth__pager button{min-width:42px;padding:0}.bigstep-native-photobooth__pager span{min-width:52px;color:#aeb7cd;font-size:11px;text-align:center}.bigstep-native-photobooth__selected{display:flex;min-width:0;flex:1;align-items:center;gap:8px;padding-left:12px}.bigstep-native-photobooth__selected span{color:#77829c;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.bigstep-native-photobooth__selected strong{overflow:hidden;color:#fff;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.bigstep-native-photobooth__source-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}.bigstep-native-photobooth__source-grid>button{display:grid;grid-template-columns:58px 1fr;gap:2px 16px;min-height:190px;align-content:center;padding:28px;border:1px solid #35405f;border-radius:18px;background:#12182e;color:#fff;text-align:left;cursor:pointer;transition:.2s}.bigstep-native-photobooth__source-grid>button:hover{border-color:#9e67e8;transform:translateY(-2px)}.bigstep-native-photobooth__source-grid i{grid-row:1/4;display:grid;place-items:center;width:58px;height:58px;border-radius:15px;background:linear-gradient(135deg,#7c3aed,#58d5ef);font-size:28px;font-style:normal}.bigstep-native-photobooth__source-grid strong{font-size:17px}.bigstep-native-photobooth__source-grid small{color:#9ba5be}.bigstep-native-photobooth__source-grid b{margin-top:12px;color:#c9a8ff;font-size:11px}
.bigstep-native-photobooth__work{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.7fr);gap:20px;min-height:0;flex:1}.bigstep-native-photobooth__capture,.bigstep-native-photobooth__controls{padding:16px;border:1px solid #303a59;border-radius:18px;background:#10162b}.bigstep-native-photobooth__camera{position:relative;height:min(48vh,430px);overflow:hidden;border-radius:13px;background:#050712}.bigstep-native-photobooth__camera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.bigstep-native-photobooth__camera-status{position:absolute;inset:0;display:grid;place-items:center;color:#aeb7cc;font-size:12px}.bigstep-native-photobooth__camera.is-upload{height:min(43vh,380px)}.bigstep-native-photobooth__upload-preview,.bigstep-native-photobooth__upload-preview img{width:100%;height:100%;object-fit:contain}.bigstep-native-photobooth__upload-preview{display:grid;place-items:center;color:#8d97af}
.bigstep-native-photobooth__slot-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.bigstep-native-photobooth__slot-list button{position:relative;height:66px;overflow:hidden;border:1px solid #343d5c;border-radius:9px;background:#0a0e1d;color:#8d97af}.bigstep-native-photobooth__slot-list img{width:100%;height:100%;object-fit:cover}.bigstep-native-photobooth__slot-list i{display:block;font-style:normal;font-weight:800}.bigstep-native-photobooth__slot-list span{font-size:8px}.bigstep-native-photobooth__capture-actions{display:flex;justify-content:center;padding-top:10px}.bigstep-native-photobooth__shutter{display:grid!important;width:60px!important;min-height:60px!important;padding:0!important;place-items:center;border:5px solid #fff!important;border-radius:50%!important;background:#7142d9!important}.bigstep-native-photobooth__shutter i{width:36px;height:36px;border:2px solid #fff;border-radius:50%;background:#ff4ca1}
.bigstep-native-photobooth__controls h2{font-size:20px}.bigstep-native-photobooth__filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.bigstep-native-photobooth__filters button{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #323c5b;border-radius:11px;background:#0b1021;color:#fff;font-weight:700;cursor:pointer}.bigstep-native-photobooth__filters button.is-active{border-color:#bc63eb;background:#24153a}.bigstep-native-photobooth__filters i{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#f7b7a3,#6177c7)}
.bigstep-native-photobooth__control-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px;padding:4px;border:1px solid #343d5c;border-radius:12px;background:#0b1021}
.bigstep-native-photobooth__control-tabs button{min-width:0;padding:9px 4px;border:0;border-radius:8px;background:transparent;color:#929db7;font-size:9px;font-weight:800;cursor:pointer}
.bigstep-native-photobooth__control-tabs button.is-active{background:#633aa0;color:#fff}
.bigstep-native-photobooth__countdown{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(4,6,16,.2);color:#fff;font-size:clamp(72px,12vw,150px);font-weight:900;text-shadow:0 8px 30px #000;animation:bigstepPbCount .7s ease both}
.bigstep-native-photobooth__countdown[hidden]{display:none}
@keyframes bigstepPbCount{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.bigstep-native-photobooth__live-effects{position:absolute;inset:0;z-index:2;pointer-events:none}
.bigstep-native-photobooth__live-effects:before,.bigstep-native-photobooth__live-effects:after{position:absolute;display:block;text-align:center;filter:drop-shadow(0 5px 10px #0007)}
.bigstep-native-photobooth__live-effects.is-ar-halo:before{content:"";top:9%;left:35%;width:30%;height:8%;border:7px solid #ffe679;border-radius:50%;box-shadow:0 0 22px #ffd84f}
.bigstep-native-photobooth__live-effects.is-ar-ears:before{content:"▲     ▲";top:5%;left:0;width:100%;color:#ff92c8;font-size:clamp(48px,7vw,88px);letter-spacing:.45em}
.bigstep-native-photobooth__live-effects.is-ar-hearts:before{content:"♥  ♥";top:10%;left:0;width:100%;color:#ff74ad;font-size:clamp(40px,6vw,72px)}
.bigstep-native-photobooth__live-effects.is-sticker-sparkle:after{content:"✦                         ✧\\A\\A\\A\\A✧                         ✦";inset:5% 4%;color:#fff4ad;font-size:clamp(30px,4vw,55px);white-space:pre}
.bigstep-native-photobooth__live-effects.is-sticker-vintage:after{content:"REC  ●    " attr(data-date);right:5%;bottom:5%;color:#fff;font:800 15px/1 monospace}
.bigstep-native-photobooth__live-effects.is-sticker-love:after{content:"LOVE BOOTH ♡";right:0;bottom:5%;left:0;color:#fff;font-size:clamp(22px,3vw,42px);font-weight:900;letter-spacing:.08em}
.bigstep-native-photobooth__camera.is-direct-flash video{filter:brightness(1.13) contrast(1.14) saturate(.9)!important}
.bigstep-native-photobooth__camera.is-high-angle video{transform:scaleX(-1) translateY(-5%) scale(1.12)}
.bigstep-native-photobooth__camera.is-wide-angle video{transform:scaleX(-1) scaleX(1.15) scaleY(.94)}
.bigstep-native-photobooth__camera.is-editorial-bw video{filter:grayscale(1) contrast(1.18)!important}
.bigstep-native-photobooth__result{display:grid;grid-template-columns:.65fr 1.2fr;align-items:center;gap:40px;min-height:0;flex:1}.bigstep-native-photobooth__result figure{display:grid;min-height:0;height:100%;place-items:center;margin:0;padding:20px;border:1px solid #303a59;border-radius:18px;background:radial-gradient(circle,#202946,#080b18)}.bigstep-native-photobooth__result img{max-width:100%;max-height:540px;object-fit:contain;filter:drop-shadow(0 18px 25px #0008)}
.bigstep-native-photobooth__loading{grid-column:1/-1;padding:70px;text-align:center;color:#9ba5be}
.bigstep-native-photobooth__layout-icon.is-single b:first-child{inset:auto;top:25%;left:21%;width:58%;height:50%;transform:rotate(-2deg)}
.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(1),.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(2){inset:auto;top:28%;width:52%;height:43%}.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(1){left:10%;transform:rotate(-8deg)}.bigstep-native-photobooth__layout-icon.is-overlap2 b:nth-child(2){right:9%;transform:rotate(7deg)}
.bigstep-native-photobooth__layout-icon.is-collage3 b{top:31%;width:45%;height:38%}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(1){left:6%;transform:rotate(-8deg)}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(2){left:28%;transform:rotate(0)}.bigstep-native-photobooth__layout-icon.is-collage3 b:nth-child(3){left:50%;transform:rotate(8deg)}
.bigstep-native-photobooth__layout-icon.is-strip4 b{top:41%;width:21%;height:18%}

/* Photobooth: real-ratio samples and inline upload review */
.bigstep-native-photobooth__choice > .bigstep-native-photobooth__layout-sample{
	width:100%;
	height:auto;
	min-height:0;
	aspect-ratio:var(--preview-ratio);
	margin:auto;
}
.bigstep-native-photobooth__layout-sample{
	position:relative;
	display:block;
	overflow:visible;
	max-width:100%;
	max-height:100%;
	border-radius:10px;
	background:radial-gradient(circle at 50% 42%,#252d4b,#090d1d 76%);
}
.bigstep-native-photobooth__layout-sample > span{
	position:absolute;
	display:block;
	overflow:hidden;
	border:5px solid #fff;
	border-bottom-width:15px;
	background:#fff;
	box-shadow:0 12px 25px rgba(0,0,0,.34);
}
.bigstep-native-photobooth__layout-sample img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 36%;
}
.bigstep-native-photobooth__layout-sample.is-single > span{inset:6% 19% 6%;transform:rotate(-1.5deg)}
.bigstep-native-photobooth__layout-sample.is-overlap2 .photo-1{left:7%;top:16%;width:51%;height:69%;transform:rotate(-7deg)}
.bigstep-native-photobooth__layout-sample.is-overlap2 .photo-2{right:7%;top:11%;width:51%;height:69%;transform:rotate(6deg)}
.bigstep-native-photobooth__layout-sample.is-collage3 > span{top:20%;width:39%;height:64%}
.bigstep-native-photobooth__layout-sample.is-collage3 .photo-1{left:3%;transform:rotate(-8deg)}
.bigstep-native-photobooth__layout-sample.is-collage3 .photo-2{left:30.5%;top:12%;transform:rotate(0)}
.bigstep-native-photobooth__layout-sample.is-collage3 .photo-3{right:3%;transform:rotate(8deg)}
.bigstep-native-photobooth__layout-sample.is-strip4 > span{top:16%;width:23%;height:67%;border-width:3px;border-bottom-width:10px}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-1{left:1%;transform:rotate(-3deg)}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-2{left:25.5%;transform:rotate(1deg)}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-3{left:50.5%;transform:rotate(-1deg)}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-4{right:1%;transform:rotate(3deg)}
.bigstep-native-photobooth__source-preview-media > .bigstep-native-photobooth__layout-sample{
	width:min(94%,420px);
	height:auto;
	aspect-ratio:var(--preview-ratio);
}
.bigstep-native-photobooth__upload-inline{
	display:grid;
	grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
	gap:18px;
	flex:1;
	min-height:0;
	margin-top:18px;
}
.bigstep-native-photobooth__upload-inline-preview{
	display:grid;
	min-height:0;
	place-items:center;
	overflow:hidden;
	padding:18px;
	border:1px solid #35405f;
	border-radius:18px;
	background:radial-gradient(circle at 50% 40%,#1d2542,#080b18 74%);
}
.bigstep-native-photobooth__upload-inline-preview > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.bigstep-native-photobooth__upload-inline-preview > .bigstep-native-photobooth__layout-sample{
	width:min(100%,680px);
	height:auto;
	aspect-ratio:var(--preview-ratio);
}
.bigstep-native-photobooth__upload-inline-panel{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-height:0;
	padding:18px;
	border:1px solid #35405f;
	border-radius:18px;
	background:#10162b;
}
.bigstep-native-photobooth__upload-inline-panel > div:first-child{display:flex;flex-direction:column;gap:4px}
.bigstep-native-photobooth__upload-inline-panel > div:first-child span,.bigstep-native-photobooth__upload-filters>span{color:#a78bfa;font-size:9px;font-weight:850;letter-spacing:.1em}
.bigstep-native-photobooth__upload-inline-panel > div:first-child strong{font-size:18px}
.bigstep-native-photobooth__upload-inline-panel small,.bigstep-native-photobooth__upload-inline-panel p{color:#9ba5be}
.bigstep-native-photobooth__upload-inline-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bigstep-native-photobooth__upload-inline-slots [data-pb-slot]{aspect-ratio:1/1;min-height:0}
.bigstep-native-photobooth__upload-inline-slots [data-pb-slot] img{
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
	background:#080c19;
}
.bigstep-native-photobooth__upload-inline-panel>button{min-height:42px;border:1px solid #566181;border-radius:10px;background:#171e36;color:#fff;font-weight:800;cursor:pointer}
.bigstep-native-photobooth__upload-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:auto}
.bigstep-native-photobooth__upload-filters>span{grid-column:1/-1}
.bigstep-native-photobooth__upload-filters button{min-height:36px;border:1px solid #3b4668;border-radius:9px;background:#11172c;color:#fff;font-size:10px;font-weight:750;cursor:pointer}
.bigstep-native-photobooth__upload-filters button.is-active{border-color:#bf5af2;background:#43205b}

@media(max-width:760px){
	.bigstep-native-photobooth__choice > .bigstep-native-photobooth__layout-sample{min-height:270px}
	.bigstep-native-photobooth__upload-inline{display:flex;flex-direction:column}
	.bigstep-native-photobooth__upload-inline-preview{min-height:42vh}
	.bigstep-native-photobooth__upload-inline-preview > .bigstep-native-photobooth__layout-sample{width:min(100%,500px)}
	.bigstep-native-photobooth__upload-inline-panel{flex:0 0 auto}
	.bigstep-native-photobooth__upload-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.bigstep-native-photobooth__source-layout{display:grid;grid-template-columns:minmax(460px,.9fr) minmax(560px,1.1fr);gap:18px;min-height:0;flex:1;margin-top:22px}.bigstep-native-photobooth__source-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;gap:16px;min-height:0;padding:16px;border:1px solid #35405f;border-radius:18px;background:#10162b}.bigstep-native-photobooth__source-preview-media{grid-row:1;grid-column:1/-1;display:grid;min-height:0;place-items:center;overflow:hidden;border:1px solid #303957;border-radius:13px;background:radial-gradient(circle,#202946,#080b18)}.bigstep-native-photobooth__source-preview-media>img{width:100%;height:100%;object-fit:contain}.bigstep-native-photobooth__source-preview-media>.bigstep-native-photobooth__layout-icon{width:100%;height:100%;min-height:280px}.bigstep-native-photobooth__source-preview-copy{display:flex;align-self:end;flex-direction:column;gap:5px}.bigstep-native-photobooth__source-preview-copy span{color:#a78bfa;font-size:9px;font-weight:850;letter-spacing:.1em}.bigstep-native-photobooth__source-preview-copy strong{color:#fff;font-size:18px}.bigstep-native-photobooth__source-preview-copy small{color:#9ba5be}.bigstep-native-photobooth__source-preview>button{align-self:center;width:max-content;min-height:38px;padding:0 14px;border:1px solid #414b6c;border-radius:10px;background:#151b32;color:#fff;font-weight:750;cursor:pointer}.bigstep-native-photobooth__source-layout .bigstep-native-photobooth__source-grid{grid-template-columns:1fr;margin-top:0}.bigstep-native-photobooth__source-layout .bigstep-native-photobooth__source-grid>button{min-height:0}
.bigstep-native-photobooth__upload-preview img{display:block!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
.bigstep-native-photobooth__camera-status.is-error{display:flex;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center}.bigstep-native-photobooth__camera-status.is-error>i{display:grid;width:40px;height:40px;place-items:center;border:1px solid #8b5cf6;border-radius:50%;color:#c4a5ff;font-style:normal;font-weight:900}.bigstep-native-photobooth__camera-status.is-error>strong{color:#fff;font-size:17px}.bigstep-native-photobooth__camera-status.is-error>p{max-width:360px}.bigstep-native-photobooth__camera-status.is-error>button{min-height:40px;margin-top:5px;padding:0 15px;border:1px solid #9f67ed;border-radius:10px;background:linear-gradient(135deg,#6d3ae0,#a04ee6);color:#fff;font-weight:800;cursor:pointer}

/* Native Photobooth editor: square shot slots and real effect thumbnails. */
.bigstep-native-photobooth__slot-list{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.bigstep-native-photobooth__slot-list button{
	flex:0 0 92px;
	width:92px;
	height:auto;
	aspect-ratio:1/1;
}
.bigstep-native-photobooth__filters i{
	position:relative;
	flex:0 0 48px;
	width:48px;
	height:48px;
	overflow:hidden;
	border-radius:10px;
	background-color:#151a2d;
	background-position:center 34%;
	background-size:cover;
	background-repeat:no-repeat;
}
.bigstep-native-photobooth__filters i.is-mode-thumb::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-direct-flash{
	filter:brightness(1.1) contrast(1.16) saturate(.92);
}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-direct-flash::after{
	background:radial-gradient(circle at 47% 38%,rgba(244,248,255,.3),rgba(219,228,255,.06) 43%,rgba(6,8,15,.25));
}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-high-angle{
	background-position:center 22%;
	transform:perspective(140px) rotateX(-7deg) scale(1.08);
	transform-origin:center top;
}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-wide-angle{
	transform:scaleX(1.13) scaleY(.94);
}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-editorial-bw{
	filter:grayscale(1) contrast(1.25) brightness(1.04);
}
.bigstep-native-photobooth__filters i.is-ar-thumb::after,
.bigstep-native-photobooth__filters i.is-sticker-thumb::after{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	pointer-events:none;
	text-align:center;
	text-shadow:0 2px 7px rgba(0,0,0,.75);
}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-halo::after{
	content:"";
	inset:7px 10px auto;
	height:8px;
	border:3px solid #ffe679;
	border-radius:50%;
	box-shadow:0 0 8px #ffd84f;
}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-ears::after{
	content:"▲  ▲";
	place-items:start center;
	padding-top:2px;
	color:#ff92c8;
	font-size:17px;
	letter-spacing:4px;
}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-hearts::after{
	content:"♥  ♥";
	place-items:start center;
	padding-top:4px;
	color:#ff74ad;
	font-size:14px;
}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-sparkle::after{
	content:"✦        ✧\A\A✧        ✦";
	padding:4px;
	color:#fff4ad;
	font-size:11px;
	white-space:pre;
}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-vintage::after{
	content:"REC ●";
	place-items:end end;
	padding:0 4px 5px 0;
	color:#fff;
	font:800 8px/1 monospace;
}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-love::after{
	content:"LOVE\A BOOTH ♡";
	place-items:end center;
	padding-bottom:4px;
	color:#fff;
	font-size:8px;
	font-weight:900;
	line-height:1.1;
	letter-spacing:.05em;
	white-space:pre;
}
@media(max-width:760px){
	.bigstep-native-photobooth__slot-list button{
		flex-basis:76px;
		width:76px;
	}
}

/* Mobile cart CTA: keep the purple glow inside the rounded button. The topbar
 * clips overflowing paint, which otherwise leaves a hard purple seam at the
 * right edge of narrow viewports. */
@media (max-width: 980px) {
	.bigstep-ai-app[data-editor-mode="editor"] [data-bigstep-ai-cart],
	.bigstep-ai-app[data-editor-mode="editor"] button[data-bigstep-ai-cart] {
		overflow: hidden !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .2),
			inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
	}
}
@media(max-width:760px){
	.bigstep-native-photobooth{top:58px;left:0;padding:0}.bigstep-native-photobooth__dialog{width:100%;height:100%;border:0;border-radius:0}.bigstep-native-photobooth__header{grid-template-columns:1fr 42px;min-height:58px;padding:0 12px}.bigstep-native-photobooth__steps{display:none}.bigstep-native-photobooth main{padding:16px 15px}.bigstep-native-photobooth h2{font-size:21px}.bigstep-native-photobooth__select-head{display:block;margin-bottom:12px}.bigstep-native-photobooth__tabs{width:100%;margin-top:13px}.bigstep-native-photobooth__tabs button{min-width:0;flex:1}.bigstep-native-photobooth__choices{grid-template-columns:1fr 1fr;gap:9px;min-height:390px}.bigstep-native-photobooth__choice{min-height:0}.bigstep-native-photobooth__choice>img,.bigstep-native-photobooth__layout-icon{height:100%;min-height:270px}.bigstep-native-photobooth__source-layout{display:flex;flex-direction:column}.bigstep-native-photobooth__source-preview{grid-template-columns:120px 1fr;min-height:220px}.bigstep-native-photobooth__source-preview-media>.bigstep-native-photobooth__layout-icon{min-height:180px}.bigstep-native-photobooth__source-grid{grid-template-columns:1fr;gap:10px}.bigstep-native-photobooth__source-grid>button{min-height:130px;padding:18px}.bigstep-native-photobooth__work{display:flex;flex-direction:column}.bigstep-native-photobooth__camera,.bigstep-native-photobooth__camera.is-upload{height:33vh}.bigstep-native-photobooth__filters{grid-template-columns:repeat(3,1fr)}.bigstep-native-photobooth__filters button{flex-direction:column;font-size:9px}.bigstep-native-photobooth__control-tabs{position:sticky;top:0;z-index:2}.bigstep-native-photobooth__result{display:flex;flex-direction:column}.bigstep-native-photobooth__result figure{width:100%;min-height:300px}.bigstep-native-photobooth footer{position:sticky;bottom:-16px;z-index:4;margin-top:10px;padding:10px 0;background:#090d1d}.bigstep-native-photobooth footer button{padding:0 12px;font-size:10px}.bigstep-native-photobooth__selected{display:none}.bigstep-native-photobooth__pager{margin-right:auto}
	.bigstep-ai-photobooth-launch{gap:9px;padding:11px}
	.bigstep-ai-photobooth-launch__icon{flex-basis:38px;width:38px;height:38px}
	.bigstep-ai-photobooth-launch strong{font-size:11px}
	.bigstep-ai-photobooth-launch small{font-size:9px}
}

/* Mobile upload CTAs: generic tool-panel button sizing must not collapse these
   two rich cards into a 24px strip. */
@media(max-width:760px){
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:auto!important;
    min-height:64px!important;
    max-height:none!important;
    padding:10px 12px!important;
    gap:10px!important;
    overflow:hidden!important;
    line-height:normal!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch__icon{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch>span:nth-child(2),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta-text{
    display:flex!important;
    min-width:0!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch strong,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta strong{
    display:block!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch small,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta small{
    display:block!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:hidden!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch>b,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta>svg:last-child{
    flex:0 0 auto!important;
  }
}

/* Keep the uploaded composition on a full-size stage. The stage owns its
   height; it must never inherit the leftover/shrunk grid-row height. */
.bigstep-native-photobooth__upload-inline{
	flex:0 0 auto!important;
	align-items:start;
	grid-template-columns:minmax(0,1fr) 320px;
}
.bigstep-native-photobooth__upload-inline-preview{
	position:relative;
	width:100%;
	height:clamp(440px,58vh,570px);
	min-height:440px;
	align-self:start;
}
.bigstep-native-photobooth__upload-inline-preview>img{
	position:absolute;
	inset:18px;
	width:calc(100% - 36px);
	height:calc(100% - 36px);
	max-width:none;
	max-height:none;
	object-fit:contain;
	object-position:center;
}
.bigstep-native-photobooth__upload-inline-slots [data-pb-slot]{
	position:relative;
	display:grid;
	width:100%;
	place-items:center;
	overflow:hidden;
	padding:0;
	border:1px solid #3a4565;
	border-radius:10px;
	background:#090d1d;
	color:#99a3ba;
	cursor:pointer;
}
.bigstep-native-photobooth__upload-inline-slots [data-pb-slot] img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
	background:#080c19;
}

@media(max-width:760px){
	.bigstep-native-photobooth__upload-inline{display:flex;align-items:stretch}
	.bigstep-native-photobooth__upload-inline-preview{
		flex:0 0 auto;
		height:clamp(390px,54vh,520px);
		min-height:390px;
	}
}
/* Native Photobooth mobile workflow: preserve image ratio and keep every control reachable. */
@media(max-width:760px){
	body.bigstep-native-photobooth-open{
		overscroll-behavior:none;
	}
	.bigstep-native-photobooth main{
		padding:14px 12px 18px;
		scroll-padding-bottom:18px;
	}
	.bigstep-native-photobooth__work{
		display:flex;
		flex:0 0 auto;
		flex-direction:column;
		gap:12px;
		min-height:auto;
	}
	.bigstep-native-photobooth__capture,
	.bigstep-native-photobooth__controls{
		padding:12px;
		border-radius:15px;
		overflow:visible;
	}
	.bigstep-native-photobooth__camera,
	.bigstep-native-photobooth__camera.is-upload{
		width:100%;
		height:auto;
		min-height:0;
		aspect-ratio:4/5;
		background:#050712;
	}
	.bigstep-native-photobooth__camera video,
	.bigstep-native-photobooth__upload-preview,
	.bigstep-native-photobooth__upload-preview img{
		width:100%;
		height:100%;
		object-fit:contain;
		object-position:center;
	}
	.bigstep-native-photobooth__camera-status{
		padding:22px 18px;
		text-align:center;
	}
	.bigstep-native-photobooth__slot-list{
		margin-top:10px;
		gap:8px;
	}
	.bigstep-native-photobooth__slot-list button{
		flex:0 0 76px;
		width:76px;
		height:76px;
		aspect-ratio:1;
	}
	.bigstep-native-photobooth__capture-actions{
		padding-top:9px;
	}
	.bigstep-native-photobooth__controls h2{
		margin-bottom:4px;
	}
	.bigstep-native-photobooth__control-tabs{
		position:static;
		margin-top:12px;
	}
	.bigstep-native-photobooth__filters{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:8px;
		margin-top:12px;
	}
	.bigstep-native-photobooth__filters button{
		min-width:0;
		min-height:66px;
		flex-direction:row;
		align-items:center;
		gap:9px;
		padding:8px;
		font-size:10px;
		text-align:left;
	}
	.bigstep-native-photobooth__filters i{
		flex:0 0 48px;
		width:48px;
		height:48px;
	}
	.bigstep-native-photobooth footer{
		position:static;
		min-height:66px;
		margin:14px 0 0;
		padding:10px 0;
		background:#090d1d;
	}
	.bigstep-native-photobooth footer button{
		min-height:44px;
		padding:0 12px;
	}
	.bigstep-native-photobooth__upload-inline{
		gap:12px;
	}
	.bigstep-native-photobooth__upload-inline-preview{
		width:100%;
		min-height:0;
		aspect-ratio:var(--composition-ratio,4/5);
		padding:10px;
	}
	.bigstep-native-photobooth__upload-inline-preview>img,
	.bigstep-native-photobooth__upload-inline-preview>.bigstep-native-photobooth__layout-sample{
		width:100%;
		height:100%;
		max-height:none;
		object-fit:contain;
	}
	.bigstep-native-photobooth__upload-inline-panel{
		padding:14px;
	}
	.bigstep-native-photobooth__result{
		gap:16px;
	}
	.bigstep-native-photobooth__result figure{
		width:100%;
		height:auto;
		min-height:0;
		aspect-ratio:var(--result-ratio,4/5);
		padding:12px;
	}
	.bigstep-native-photobooth__result figure img{
		width:100%;
		height:100%;
		max-height:none;
		object-fit:contain;
	}
}
/* Native Photobooth mobile spacing and sample-ratio authority. */
@media(max-width:760px){
	.bigstep-native-photobooth__dialog{
		background:#090d1d;
	}
	.bigstep-native-photobooth main{
		gap:0;
		padding:12px 12px 18px;
	}
	.bigstep-native-photobooth__intro{
		max-width:none;
		padding:0 2px;
	}
	.bigstep-native-photobooth__intro>span{
		font-size:9px;
	}
	.bigstep-native-photobooth h2{
		margin:6px 0 5px;
		font-size:22px;
		line-height:1.16;
	}
	.bigstep-native-photobooth p{
		font-size:11px;
		line-height:1.45;
	}
	.bigstep-native-photobooth__select-head{
		display:block;
		margin-bottom:10px;
	}
	.bigstep-native-photobooth__tabs{
		width:100%;
		margin-top:11px;
		padding:3px;
	}
	.bigstep-native-photobooth__tabs button{
		min-width:0;
		min-height:40px;
		padding:8px 6px;
	}
	.bigstep-native-photobooth__choices{
		flex:0 0 auto;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:9px;
		min-height:0;
		align-items:start;
		align-content:start;
	}
	.bigstep-native-photobooth__choice{
		min-height:0;
		padding:8px;
		border-radius:14px;
		overflow:hidden;
	}
	.bigstep-native-photobooth__choice>img,
	.bigstep-native-photobooth__choice>.bigstep-native-photobooth__layout-icon,
	.bigstep-native-photobooth__choice>.bigstep-native-photobooth__layout-sample{
		display:block;
		width:100%;
		height:auto;
		min-height:0;
		aspect-ratio:4/3;
		object-fit:contain;
	}
	.bigstep-native-photobooth__choice>img{
		aspect-ratio:1/1;
	}
	.bigstep-native-photobooth__choice>span{
		min-height:42px;
		padding:9px 2px 1px;
		gap:4px;
	}
	.bigstep-native-photobooth__choice strong{
		font-size:11px;
		line-height:1.25;
	}
	.bigstep-native-photobooth__choice small{
		flex:0 0 auto;
		font-size:8px;
	}
	.bigstep-native-photobooth__layout-sample>span{
		border-width:3px;
		border-bottom-width:9px;
	}
	.bigstep-native-photobooth__layout-sample.is-strip4>span{
		border-width:2px;
		border-bottom-width:6px;
	}
	.bigstep-native-photobooth footer{
		gap:8px;
		min-height:62px;
		margin-top:12px;
		padding:9px 0 0;
	}
	.bigstep-native-photobooth footer>span{
		font-size:10px;
		white-space:nowrap;
	}
	.bigstep-native-photobooth footer button{
		min-height:42px;
		padding:0 11px;
	}
	.bigstep-native-photobooth__source-layout{
		flex:0 0 auto;
		gap:10px;
		min-height:auto;
		margin-top:12px;
	}
	.bigstep-native-photobooth__source-preview{
		grid-template-columns:minmax(0,1fr) auto;
		grid-template-rows:auto auto;
		gap:10px;
		min-height:0;
		padding:11px;
		border-radius:15px;
	}
	.bigstep-native-photobooth__source-preview-media{
		grid-column:1/-1;
		grid-row:1;
		width:100%;
		min-height:0;
		aspect-ratio:4/3;
		padding:8px;
	}
	.bigstep-native-photobooth__source-preview-media>.bigstep-native-photobooth__layout-sample{
		width:100%;
		height:100%;
		aspect-ratio:4/3;
	}
	.bigstep-native-photobooth__source-preview-copy{
		gap:3px;
	}
	.bigstep-native-photobooth__source-preview-copy strong{
		font-size:16px;
	}
	.bigstep-native-photobooth__source-preview>button{
		min-height:38px;
		padding:0 12px;
	}
	.bigstep-native-photobooth__source-grid{
		gap:9px;
	}
	.bigstep-native-photobooth__source-grid>button{
		min-height:116px;
		padding:16px;
	}
	.bigstep-native-photobooth__upload-inline{
		gap:10px;
		margin-top:12px;
	}
	.bigstep-native-photobooth__upload-inline-preview{
		min-height:0;
		padding:9px;
		border-radius:15px;
	}
	.bigstep-native-photobooth__upload-inline-panel{
		gap:11px;
		padding:12px;
		border-radius:15px;
	}
	.bigstep-native-photobooth__upload-inline-slots{
		gap:7px;
	}
	.bigstep-native-photobooth__upload-filters{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:7px;
	}
	.bigstep-native-photobooth__capture,
	.bigstep-native-photobooth__controls{
		padding:11px;
	}
	.bigstep-native-photobooth__camera,
	.bigstep-native-photobooth__camera.is-upload{
		border-radius:11px;
	}
	.bigstep-native-photobooth__control-tabs{
		margin-top:11px;
	}
	.bigstep-native-photobooth__filters{
		margin-top:10px;
	}
	.bigstep-native-photobooth__result{
		gap:12px;
	}
	.bigstep-native-photobooth__result figure{
		padding:10px;
		border-radius:15px;
	}
}
/* Photobooth camera controls, true angle previews and expanded sticker pack */
.bigstep-native-photobooth__switch-camera{position:absolute;top:12px;right:12px;z-index:5;display:flex;min-height:42px;align-items:center;gap:7px;padding:0 12px;border:1px solid #ffffff52;border-radius:999px;background:#080b18d4;color:#fff;backdrop-filter:blur(10px);cursor:pointer}
.bigstep-native-photobooth__switch-camera span{font-size:21px;line-height:1}
.bigstep-native-photobooth__switch-camera b{font-size:10px}
.bigstep-native-photobooth__camera.is-facing-user video{transform:scaleX(-1)}
.bigstep-native-photobooth__camera.is-facing-environment video{transform:none}
.bigstep-native-photobooth__camera.is-close-angle.is-facing-user video{transform:scaleX(-1) scale(1.22)}
.bigstep-native-photobooth__camera.is-close-angle.is-facing-environment video{transform:scale(1.22)}
.bigstep-native-photobooth__camera.is-high-angle video{object-position:center 28%}
.bigstep-native-photobooth__camera.is-high-angle.is-facing-user video{transform:scaleX(-1) scale(1.1)}
.bigstep-native-photobooth__camera.is-high-angle.is-facing-environment video{transform:scale(1.1)}
.bigstep-native-photobooth__camera.is-wide-angle video{object-fit:contain;background:#050712}
.bigstep-native-photobooth__live-effects.is-sticker-hearts:after{content:"♥  ♡\A\A\A\A♡  ♥";inset:5%;color:#ff70aa;font-size:clamp(30px,5vw,58px);white-space:pre}
.bigstep-native-photobooth__live-effects.is-sticker-crown:after{content:"♛";top:4%;left:0;width:100%;color:#ffe477;font-size:clamp(55px,8vw,96px)}
.bigstep-native-photobooth__live-effects.is-sticker-butterfly:after{content:"🦋\A\A\A        🦋";inset:7%;font-size:clamp(28px,5vw,55px);white-space:pre;text-align:left}
.bigstep-native-photobooth__live-effects.is-sticker-flower:after{content:"🌸  🌼\A\A\A\A🌼  🌸";inset:4%;font-size:clamp(28px,5vw,52px);white-space:pre}
.bigstep-native-photobooth__live-effects.is-sticker-stars:after{content:"★   ☆\A\A\A\A☆   ★";inset:5%;color:#fff0a3;font-size:clamp(30px,5vw,58px);white-space:pre}
.bigstep-native-photobooth__filters i.is-mode-thumb.is-close-angle{transform:scale(1.22)}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-hearts::after{content:"♥  ♡\A♡  ♥";padding:5px;color:#ff70aa;font-size:12px;white-space:pre}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-crown::after{content:"♛";color:#ffe477;font-size:25px}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-butterfly::after{content:"🦋  🦋";font-size:13px}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-flower::after{content:"🌸 🌼";font-size:13px}
.bigstep-native-photobooth__filters i.is-sticker-thumb.is-sticker-stars::after{content:"★ ☆\A☆ ★";color:#fff0a3;font-size:11px;white-space:pre}
.bigstep-native-photobooth__filters i.is-ar-thumb{position:relative;overflow:hidden;background-position:center 34%}
.bigstep-native-photobooth__filters i.is-ar-thumb::after{position:absolute;z-index:1;display:block;box-sizing:border-box;margin:0;padding:0;line-height:1;pointer-events:none;text-align:center;text-shadow:0 1px 4px #000}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-halo::after{content:"";top:3px;left:50%;width:26px;height:7px;transform:translateX(-50%);border:2px solid #ffe77d;border-radius:50%;box-shadow:0 0 5px #ffd84f}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-ears::after{content:"◢  ◣";top:0;left:50%;width:42px;transform:translateX(-50%);color:#ff9fc8;font-size:16px;letter-spacing:0;text-shadow:0 0 0 #2d2031,0 1px 4px #000}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-hearts::after{content:"♥   ♥";top:4px;left:50%;width:45px;transform:translateX(-50%);color:#ff70ad;font-size:11px}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-crown::after{content:"♛";top:-1px;left:50%;width:32px;transform:translateX(-50%);color:#ffd85f;font-size:25px;text-shadow:0 1px 0 #fff3a1,0 2px 5px #000}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-glasses::after{content:"♥ ♥";top:21px;left:50%;width:32px;transform:translateX(-50%);color:#ff4f9a;font-size:11px;font-weight:800;letter-spacing:1px}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-roundglasses::after{content:"○–○";top:20px;left:50%;width:34px;transform:translateX(-50%);color:#e5d6ff;font-size:13px;font-weight:900}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-sunglasses::after{content:"▬–▬";top:21px;left:50%;width:34px;transform:translateX(-50%);color:#17131c;font-size:11px;font-weight:900;text-shadow:0 1px 2px #fff8}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-blush::after{content:"●    ●";top:30px;left:50%;width:34px;transform:translateX(-50%);color:#ff7aa8aa;font-size:9px;filter:blur(2px)}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-bunny::after{content:"◯  ◯";top:-3px;left:50%;width:38px;transform:translateX(-50%) scaleY(1.55);color:#ffc1da;font-size:15px;font-weight:800}
.bigstep-native-photobooth__filters i.is-ar-thumb.is-ar-stars::after{content:"✦      ✧";top:5px;left:50%;width:46px;transform:translateX(-50%);color:#ffe477;font-size:11px}
.pb-fx--ar-crown{position:absolute;left:50%;top:6%;transform:translateX(-50%);color:#ffd85f;font-size:clamp(58px,10vw,112px);line-height:1}
.pb-fx--ar-glasses{position:absolute;left:50%;top:38%;transform:translateX(-50%);color:#ff4f9a;font-size:clamp(32px,6vw,70px);font-weight:800;white-space:nowrap}
.pb-fx--ar-roundglasses,.pb-fx--ar-sunglasses{position:absolute;inset:0}.pb-fx--ar-roundglasses i,.pb-fx--ar-sunglasses i{position:absolute;top:40%;width:20%;height:15%;border:clamp(3px,.7vw,7px) solid #e5d6ff}.pb-fx--ar-roundglasses i{border-radius:50%;background:#a684ff1f}.pb-fx--ar-sunglasses i{height:11%;border-color:#17131c;border-radius:25%;background:#17131cd6}.pb-fx--ar-roundglasses i:first-child,.pb-fx--ar-sunglasses i:first-child{left:28%}.pb-fx--ar-roundglasses i:last-child,.pb-fx--ar-sunglasses i:last-child{right:28%}
.pb-fx--ar-blush{position:absolute;inset:0}.pb-fx--ar-blush i{position:absolute;top:56%;width:13%;height:6%;border-radius:50%;background:#ff699d77;filter:blur(clamp(5px,1vw,13px))}.pb-fx--ar-blush i:first-child{left:27%}.pb-fx--ar-blush i:last-child{right:27%}
.pb-fx--ar-bunny{position:absolute;inset:0}.pb-fx--ar-bunny i{position:absolute;top:5%;width:12%;height:30%;border:4px solid #ff9fc8;border-radius:50%;background:#fff}.pb-fx--ar-bunny i:first-child{left:34%;transform:rotate(-8deg)}.pb-fx--ar-bunny i:last-child{right:34%;transform:rotate(8deg)}
.pb-fx--ar-stars{position:absolute;left:50%;top:10%;transform:translateX(-50%);color:#ffe477;font-size:clamp(30px,6vw,68px);white-space:nowrap}
@media(max-width:760px){
	.bigstep-native-photobooth__switch-camera{top:10px;right:10px;min-height:44px;padding:0 11px}
	.bigstep-native-photobooth__switch-camera b{font-size:9px}
}
/* Photobooth as a movable modeless Studio window: canvas remains visible. */
body.bigstep-native-photobooth-open{overflow:auto!important}
.bigstep-native-photobooth{
	background:transparent!important;
	-webkit-backdrop-filter:none!important;
	backdrop-filter:none!important;
	pointer-events:none;
}
.bigstep-native-photobooth__dialog{
	pointer-events:auto;
	box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.035) inset;
}
@media(min-width:761px){
	.bigstep-native-photobooth__dialog{
		width:min(1180px,calc(100% - 44px));
		height:min(780px,calc(100% - 60px));
	}
}
.bigstep-native-photobooth__header{
	cursor:grab;
	touch-action:none;
	user-select:none;
}
.bigstep-native-photobooth__dialog.is-dragging .bigstep-native-photobooth__header{cursor:grabbing}
.bigstep-native-photobooth__header>button{
	justify-self:end;
	align-self:center;
	flex:0 0 40px;
	margin:0!important;
	padding:0!important;
	line-height:1!important;
	text-indent:0;
	transform:none!important;
}
.bigstep-native-photobooth__layout-sample.is-strip4>span{
	top:16%!important;
	height:67%!important;
	transform:none!important;
}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-1{left:1%!important}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-2{left:25.5%!important}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-3{left:50.5%!important}
.bigstep-native-photobooth__layout-sample.is-strip4 .photo-4{right:1%!important}
@media(max-width:760px){
	.bigstep-native-photobooth{inset:58px 0 0!important;padding:8px!important;place-items:start center!important}
	.bigstep-native-photobooth__dialog{
		width:calc(100% - 4px)!important;
		height:calc(100% - 12px)!important;
		border:1px solid #343c60!important;
		border-radius:18px!important;
	}
	.bigstep-native-photobooth__header{grid-template-columns:minmax(0,1fr) 44px!important;padding:0 10px 0 14px!important}
	.bigstep-native-photobooth__header>button{width:40px!important;height:40px!important;border-radius:11px!important}
}
/* Reliable live AR/sticker layer and compact camera switch. */
.bigstep-native-photobooth__switch-camera{
	display:grid!important;
	width:44px!important;
	height:44px!important;
	min-height:44px!important;
	padding:0!important;
	place-items:center;
	border:1px solid rgba(255,255,255,.55)!important;
	border-radius:50%!important;
	background:rgba(8,11,24,.78)!important;
	box-shadow:0 7px 22px rgba(0,0,0,.35);
	-webkit-backdrop-filter:none!important;
	backdrop-filter:none!important;
}
.bigstep-native-photobooth__switch-camera svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bigstep-native-photobooth__switch-camera:hover{border-color:#c9a8ff!important;background:#5d35a2!important}
.bigstep-native-photobooth__live-effects{isolation:isolate;overflow:hidden}
.bigstep-native-photobooth__live-effects:before,.bigstep-native-photobooth__live-effects:after{content:none!important}
.bigstep-native-photobooth__live-effects .pb-fx{position:absolute;z-index:1;display:block;pointer-events:none;filter:drop-shadow(0 5px 10px rgba(0,0,0,.45))}
.bigstep-native-photobooth__live-effects .pb-fx i{position:absolute;display:block;font-style:normal}
.pb-fx--halo{top:9%;left:34%;width:32%;height:9%;border:7px solid #ffe679;border-radius:50%;box-shadow:0 0 24px #ffd84f,0 0 8px #fff inset;transform:rotate(-3deg)}
.pb-fx--ears{inset:0}.pb-fx--ears i{top:5%;width:0;height:0;border-right:38px solid transparent;border-bottom:78px solid #ff92c8;border-left:38px solid transparent}.pb-fx--ears i:first-child{left:25%;transform:rotate(-12deg)}.pb-fx--ears i:last-child{right:25%;transform:rotate(12deg)}
.pb-fx--ar-hearts{inset:0}.pb-fx--ar-hearts i{color:#ff74ad;font-size:clamp(34px,6vw,68px)}.pb-fx--ar-hearts i:nth-child(1){top:7%;left:20%;transform:rotate(-15deg)}.pb-fx--ar-hearts i:nth-child(2){top:13%;right:18%;transform:rotate(13deg)}.pb-fx--ar-hearts i:nth-child(3){top:27%;right:9%;font-size:clamp(22px,4vw,45px)}
.pb-fx--sparkle,.pb-fx--sticker-hearts,.pb-fx--flower,.pb-fx--stars{inset:0}.pb-fx--sparkle i,.pb-fx--sticker-hearts i,.pb-fx--flower i,.pb-fx--stars i{font-size:clamp(30px,5vw,58px)}.pb-fx--sparkle i:nth-child(1),.pb-fx--sticker-hearts i:nth-child(1),.pb-fx--flower i:nth-child(1),.pb-fx--stars i:nth-child(1){top:5%;left:5%}.pb-fx--sparkle i:nth-child(2),.pb-fx--sticker-hearts i:nth-child(2),.pb-fx--flower i:nth-child(2),.pb-fx--stars i:nth-child(2){top:7%;right:5%}.pb-fx--sparkle i:nth-child(3),.pb-fx--sticker-hearts i:nth-child(3),.pb-fx--flower i:nth-child(3),.pb-fx--stars i:nth-child(3){bottom:6%;left:6%}.pb-fx--sparkle i:nth-child(4),.pb-fx--sticker-hearts i:nth-child(4),.pb-fx--flower i:nth-child(4),.pb-fx--stars i:nth-child(4){right:6%;bottom:5%}
.pb-fx--sparkle i,.pb-fx--stars i{color:#fff0a3}.pb-fx--sticker-hearts i{color:#ff70aa}
.pb-fx--crown{top:2%;left:0;width:100%;color:#ffe477;font-size:clamp(62px,9vw,108px);text-align:center}
.pb-fx--butterfly{inset:0}.pb-fx--butterfly i{font-size:clamp(35px,6vw,68px)}.pb-fx--butterfly i:first-child{top:8%;left:7%;transform:rotate(-15deg)}.pb-fx--butterfly i:last-child{right:7%;bottom:12%;transform:rotate(14deg)}
.pb-fx--vintage{right:5%;bottom:5%;color:#fff;font:800 15px/1 monospace}.pb-fx--vintage i{position:static!important;display:inline-block!important;width:9px;height:9px;margin-left:4px;border-radius:50%;background:#ff4055;box-shadow:0 0 8px #ff4055}
.pb-fx--love{right:0;bottom:5%;left:0;color:#fff;font-size:clamp(22px,3vw,42px);font-weight:900;letter-spacing:.08em;text-align:center}
/* Preview geometry now mirrors the exported PNG, including true Polaroid borders. */
.bigstep-native-photobooth__layout-sample>span{
	border:0!important;
	background:#fff!important;
}
.bigstep-native-photobooth__layout-sample>span>img{
	position:absolute!important;
	display:block;
	max-width:none!important;
	object-fit:cover!important;
	object-position:center 50%;
}
@media(max-width:760px){
	.bigstep-native-photobooth__choice>.bigstep-native-photobooth__layout-sample,
	.bigstep-native-photobooth__source-preview-media>.bigstep-native-photobooth__layout-sample,
	.bigstep-native-photobooth__upload-inline-preview>.bigstep-native-photobooth__layout-sample{
		height:auto!important;
		aspect-ratio:var(--preview-ratio)!important;
	}
}
/* Per-slot upload/delete actions and ratio-aware crop editor. */
.bigstep-native-photobooth__slot{position:relative;min-width:0}
.bigstep-native-photobooth__slot>[data-pb-slot]{position:relative;width:100%;height:100%;cursor:pointer}
.bigstep-native-photobooth__slot>[data-pb-slot]>b{
	position:absolute;
	right:5px;
	bottom:5px;
	left:5px;
	padding:5px 4px;
	border-radius:6px;
	background:rgba(4,7,18,.82);
	color:#fff;
	font-size:8px;
	line-height:1;
	text-align:center;
	opacity:0;
	transition:opacity .18s ease;
}
.bigstep-native-photobooth__slot>[data-pb-slot]:hover>b,
.bigstep-native-photobooth__slot:not(.has-image)>[data-pb-slot]>b{opacity:1}
.bigstep-native-photobooth__slot-delete{
	position:absolute!important;
	top:5px!important;
	right:5px!important;
	z-index:4!important;
	display:grid!important;
	width:26px!important;
	height:26px!important;
	min-height:26px!important;
	padding:0!important;
	place-items:center!important;
	border:1px solid rgba(255,255,255,.55)!important;
	border-radius:50%!important;
	background:rgba(180,28,61,.92)!important;
	color:#fff!important;
	font-size:18px!important;
	line-height:1!important;
	cursor:pointer;
}
.bigstep-native-photobooth__upload-inline-slots .bigstep-native-photobooth__slot{aspect-ratio:4/3}
.bigstep-native-photobooth__upload-inline-slots .bigstep-native-photobooth__slot>[data-pb-slot]{min-height:0;aspect-ratio:4/3}

/* Keep rich Upload panel CTAs as full cards on narrow Studio side panels. */
@media (max-width:760px){
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta{
    position:relative!important; display:flex!important; flex:0 0 auto!important;
    width:100%!important; height:72px!important; min-height:72px!important; max-height:none!important;
    box-sizing:border-box!important; margin:12px 0!important; padding:10px 12px!important;
    align-items:center!important; gap:10px!important; white-space:normal!important; overflow:hidden!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch__icon{
    display:grid!important; flex:0 0 42px!important; width:42px!important; height:42px!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch>span:nth-child(2),
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta-text{
    display:flex!important; flex:1 1 auto!important; min-width:0!important; overflow:hidden!important;
    flex-direction:column!important; justify-content:center!important; gap:3px!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch strong,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta strong{
    display:block!important; font-size:12px!important; line-height:1.2!important; white-space:normal!important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-photobooth-launch small,
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] .bigstep-ai-remix-cta small{
    display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden!important; font-size:10px!important; line-height:1.25!important; white-space:normal!important;
  }
}

/* Component boundary: these two buttons are deliberately opt-out of the
   generic compact tool-button rules used elsewhere in the mobile editor. */
@media (max-width:760px){
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta{
    display:flex!important; position:relative!important; flex:0 0 74px!important;
    align-items:center!important; justify-content:flex-start!important; width:100%!important;
    min-width:0!important; height:74px!important; min-height:74px!important; max-height:74px!important;
    box-sizing:border-box!important; margin:12px 0!important; padding:10px 12px!important;
    gap:10px!important; overflow:hidden!important; white-space:normal!important; text-align:left!important;
    transform:none!important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta .bigstep-ai-photobooth-launch__icon{
    display:grid!important; flex:0 0 42px!important; width:42px!important; height:42px!important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta > span:nth-child(2),
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta .bigstep-ai-remix-cta-text{
    display:flex!important; flex:1 1 auto!important; min-width:0!important; flex-direction:column!important;
    justify-content:center!important; gap:3px!important; overflow:hidden!important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta strong,
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta small{
    display:block!important; max-width:100%!important; margin:0!important; overflow:hidden!important; white-space:normal!important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta strong{font-size:12px!important;line-height:1.2!important}
  body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta small{font-size:10px!important;line-height:1.25!important}
}

/* Upload has two information-rich actions. They are cards, not compact tool
   buttons: preserve their layout in the desktop sidebar as well as mobile. */
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta{
  position:relative!important;
  display:flex!important;
  flex:0 0 74px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  height:74px!important;
  min-height:74px!important;
  max-height:74px!important;
  box-sizing:border-box!important;
  margin:12px 0!important;
  padding:10px 12px!important;
  gap:10px!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-align:left!important;
  transform:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta .bigstep-ai-photobooth-launch__icon{
  display:grid!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta > span:nth-child(2),
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta .bigstep-ai-remix-cta-text{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:3px!important;
  overflow:hidden!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta strong,
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta small{
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:normal!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta strong{font-size:12px!important;line-height:1.2!important}
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="upload"] > button.bigstep-ai-upload-rich-cta small{font-size:10px!important;line-height:1.25!important}
.bigstep-native-photobooth__slot-list .bigstep-native-photobooth__slot{flex:0 0 92px;width:92px;aspect-ratio:1}
.bigstep-native-photobooth__slot-list .bigstep-native-photobooth__slot>[data-pb-slot]{width:100%;height:100%;aspect-ratio:1}
.bigstep-native-photobooth__cropper{
	position:fixed;
	inset:0;
	z-index:2147483646;
	display:grid;
	padding:20px;
	place-items:center;
	background:rgba(3,5,14,.68);
	pointer-events:auto;
}
.bigstep-native-photobooth__cropper>section{
	display:flex;
	width:min(560px,calc(100vw - 24px));
	max-height:calc(100dvh - 24px);
	flex-direction:column;
	gap:12px;
	overflow:auto;
	padding:16px;
	border:1px solid #485374;
	border-radius:18px;
	background:#10162b;
	box-shadow:0 25px 80px rgba(0,0,0,.7);
}
.bigstep-native-photobooth__cropper header{display:flex;align-items:center;justify-content:space-between;gap:15px}
.bigstep-native-photobooth__cropper header>div{display:flex;flex-direction:column}
.bigstep-native-photobooth__cropper header span{color:#a78bfa;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.bigstep-native-photobooth__cropper header strong{font-size:16px}
.bigstep-native-photobooth__cropper header>button{display:grid;width:38px;height:38px;padding:0;place-items:center;border:1px solid #485374;border-radius:10px;background:#171e36;color:#fff;font-size:22px;cursor:pointer}
.bigstep-native-photobooth__crop-stage{display:grid;min-height:260px;max-height:46vh;padding:12px;place-items:center;overflow:hidden;border-radius:13px;background:repeating-conic-gradient(#151b2f 0 25%,#0b1020 0 50%) 50%/18px 18px}
.bigstep-native-photobooth__crop-stage canvas{display:block;max-width:100%;max-height:43vh;border:2px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.bigstep-native-photobooth__cropper label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;color:#aeb7cd;font-size:10px;font-weight:750}
.bigstep-native-photobooth__cropper input[type=range]{width:100%;accent-color:#8b5cf6}
.bigstep-native-photobooth__cropper footer{position:static!important;display:flex!important;margin:0!important;padding:10px 0 0!important;background:transparent!important}
@media(max-width:760px){
	.bigstep-native-photobooth__slot-list .bigstep-native-photobooth__slot{flex-basis:76px;width:76px}
	.bigstep-native-photobooth__slot>[data-pb-slot]>b{opacity:1}
	.bigstep-native-photobooth__cropper{padding:8px}
	.bigstep-native-photobooth__cropper>section{padding:13px;border-radius:15px}
	.bigstep-native-photobooth__crop-stage{min-height:210px;max-height:40vh}
	.bigstep-native-photobooth__crop-stage canvas{max-height:37vh}
}
/* Full-HD 24-inch desktop fit: every Photobooth step stays in one viewport. */
@media(min-width:1180px) and (min-height:720px){
	.bigstep-native-photobooth__dialog{
		width:min(1500px,calc(100% - 48px))!important;
		height:min(900px,calc(100% - 12px))!important;
	}
	.bigstep-native-photobooth main{
		overflow:hidden!important;
		padding:22px 28px!important;
	}
	.bigstep-native-photobooth__select-head{margin-bottom:14px}
	.bigstep-native-photobooth__choices,
	.bigstep-native-photobooth__source-layout,
	.bigstep-native-photobooth__work,
	.bigstep-native-photobooth__result,
	.bigstep-native-photobooth__upload-inline{
		min-height:0!important;
	}
	.bigstep-native-photobooth__upload-inline{
		height:auto!important;
		margin-top:12px!important;
		overflow:hidden;
	}
	.bigstep-native-photobooth__upload-inline-preview{
		height:100%!important;
		min-height:0!important;
		max-height:none!important;
	}
	.bigstep-native-photobooth__upload-inline-preview>img{
		max-width:100%;
		max-height:100%;
	}
	.bigstep-native-photobooth__upload-inline-panel{
		overflow:hidden;
		gap:11px;
		padding:15px;
	}
	.bigstep-native-photobooth__source-layout{margin-top:16px}
	.bigstep-native-photobooth__source-preview,
	.bigstep-native-photobooth__capture,
	.bigstep-native-photobooth__controls,
	.bigstep-native-photobooth__result figure{min-height:0;overflow:hidden}
	.bigstep-native-photobooth__result figure{position:relative}
	.bigstep-native-photobooth__result figure img{
		position:absolute!important;
		inset:20px!important;
		width:calc(100% - 40px)!important;
		height:calc(100% - 40px)!important;
		max-width:100%!important;
		max-height:100%!important;
		object-fit:contain!important;
	}
	.bigstep-native-photobooth__camera{height:min(46vh,440px)}
	.bigstep-native-photobooth footer{margin-top:10px;padding-top:10px}
	.bigstep-native-photobooth__cropper>section{max-height:calc(100dvh - 32px);overflow:hidden}
	.bigstep-native-photobooth__crop-stage{min-height:230px;max-height:43vh}
}
/* Pixel-perfect close controls, direct-manipulation crop and clear slot actions. */
.bigstep-native-photobooth [data-pb-close],
.bigstep-native-photobooth [data-pb-crop-cancel][aria-label="Đóng"],
.bigstep-native-photobooth__slot-delete{
	display:grid!important;
	padding:0!important;
	place-items:center!important;
	line-height:0!important;
	text-indent:0!important;
}
.bigstep-native-photobooth [data-pb-close] svg,
.bigstep-native-photobooth [data-pb-crop-cancel][aria-label="Đóng"] svg{
	display:block;
	width:20px;
	height:20px;
	overflow:visible;
	fill:none;
	stroke:currentColor;
	stroke-width:2.4;
	stroke-linecap:round;
	pointer-events:none;
}
.bigstep-native-photobooth__slot-delete svg{
	display:block;
	width:14px;
	height:14px;
	fill:none;
	stroke:#fff;
	stroke-width:2.6;
	stroke-linecap:round;
	pointer-events:none;
}
.bigstep-native-photobooth__slot:not(.has-image)>[data-pb-slot]{
	display:flex!important;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	padding:10px 6px!important;
}
.bigstep-native-photobooth__slot:not(.has-image)>[data-pb-slot]>i{line-height:1}
.bigstep-native-photobooth__slot:not(.has-image)>[data-pb-slot]>span{
	display:block;
	position:static;
	line-height:1.2;
}
.bigstep-native-photobooth__slot:not(.has-image)>[data-pb-slot]>b{
	position:static!important;
	right:auto!important;
	bottom:auto!important;
	left:auto!important;
	display:block;
	margin-top:3px;
	padding:0!important;
	background:transparent!important;
	color:#c9a8ff;
	font-size:9px;
	line-height:1.2;
	opacity:1!important;
}
.bigstep-native-photobooth__slot.has-image>[data-pb-slot]>b{bottom:6px}
.bigstep-native-photobooth__crop-stage{position:relative}
.bigstep-native-photobooth__crop-stage canvas{
	cursor:grab;
	touch-action:none;
	user-select:none;
}
.bigstep-native-photobooth__crop-stage canvas.is-dragging{cursor:grabbing}
.bigstep-native-photobooth__crop-stage>p{
	position:absolute;
	right:18px;
	bottom:16px;
	left:18px;
	margin:0!important;
	padding:7px 10px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:8px;
	background:rgba(3,5,14,.76);
	color:#fff!important;
	font-size:9px!important;
	line-height:1.3;
	text-align:center;
	pointer-events:none;
}
/* Photoshop-style crop workspace: fixed crop frame over a movable image. */
.bigstep-native-photobooth__crop-stage{
	grid-template-rows:minmax(0,1fr) auto;
	gap:8px;
}
.bigstep-native-photobooth__crop-stage canvas{
	width:auto;
	height:auto;
	max-width:100%;
	max-height:calc(43vh - 34px);
	border:0!important;
	outline:1px solid rgba(255,255,255,.16);
}
.bigstep-native-photobooth__crop-stage>p{
	position:static!important;
	right:auto!important;
	bottom:auto!important;
	left:auto!important;
	width:100%;
	margin:0!important;
	padding:5px 8px!important;
	background:transparent!important;
	border:0!important;
	color:#aeb7cd!important;
}
@media(max-width:760px){
	.bigstep-native-photobooth__crop-stage canvas{max-height:calc(37vh - 30px)}
}
.bigstep-native-photobooth__ar-canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.bigstep-native-photobooth__camera>.canvas-container{position:absolute!important;inset:0!important;z-index:4!important;width:100%!important;height:100%!important}
.bigstep-native-photobooth__camera>.canvas-container canvas{width:100%!important;height:100%!important}
.bigstep-native-photobooth__sticker-toolbar{position:absolute;left:12px;bottom:12px;z-index:6;display:flex;gap:7px;align-items:center}
.bigstep-native-photobooth__sticker-toolbar[hidden]{display:none}
.bigstep-native-photobooth__sticker-toolbar button{display:grid;min-width:38px;min-height:36px;place-items:center;padding:0 10px;border:1px solid #ffffff4a;border-radius:10px;background:#080b18dc;color:#fff;font-size:12px;font-weight:800;backdrop-filter:blur(8px);cursor:pointer}
.bigstep-native-photobooth__sticker-toolbar button:disabled{opacity:.38;cursor:not-allowed}
.bigstep-native-photobooth__filters .is-sticker-thumb{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#080b18!important;filter:none!important}
@media(max-width:767px){.bigstep-native-photobooth__sticker-toolbar{left:8px;bottom:8px}.bigstep-native-photobooth__sticker-toolbar button{min-height:34px;padding:0 8px}}

/* Keep the live camera, AR canvas and captured source on the same 4:5 ratio. */
.bigstep-native-photobooth__camera,
.bigstep-native-photobooth__camera.is-upload{
	width:min(100%,440px);
	height:auto;
	aspect-ratio:4/5;
	margin-inline:auto;
}
.bigstep-native-photobooth__camera video,
.bigstep-native-photobooth__camera canvas,
.bigstep-native-photobooth__camera>.canvas-container{
	aspect-ratio:4/5;
}
@media(max-width:760px){
	.bigstep-native-photobooth__camera,
	.bigstep-native-photobooth__camera.is-upload{
		width:min(100%,380px);
		height:auto;
		aspect-ratio:4/5;
	}
}

/* Hands-free V-sign shutter. */
.bigstep-native-photobooth__gesture-toggle{
	position:absolute;
	top:12px;
	left:12px;
	z-index:7;
	display:grid;
	width:42px;
	height:42px;
	place-items:center;
	padding:0;
	border:1px solid #ffffff52;
	border-radius:50%;
	background:#080b18d4;
	color:#fff;
	font-size:20px;
	line-height:1;
	backdrop-filter:blur(10px);
	cursor:pointer;
}
.bigstep-native-photobooth__gesture-toggle.is-active{
	border-color:#b995ff;
	background:linear-gradient(135deg,#6734d8,#9d55ef);
	box-shadow:0 0 0 3px #8b5cf62e,0 6px 18px #0006;
}
.bigstep-native-photobooth__gesture-status{
	position:absolute;
	top:62px;
	left:12px;
	z-index:7;
	max-width:190px;
	padding:6px 9px;
	border:1px solid #ffffff2b;
	border-radius:999px;
	background:#080b18c9;
	color:#fff;
	font-size:10px;
	font-weight:800;
	line-height:1.2;
	backdrop-filter:blur(8px);
	pointer-events:none;
}
.bigstep-native-photobooth__gesture-status[hidden]{display:none}
@media(max-width:760px){
	.bigstep-native-photobooth__gesture-toggle{top:10px;left:10px;width:40px;height:40px}
	.bigstep-native-photobooth__gesture-status{top:58px;left:10px}
}

/* Compact upload filters: two-row thumbnail rail without a visible scrollbar. */
.bigstep-native-photobooth__upload-filters{
	display:block;
	min-width:0;
	margin-top:auto;
}
.bigstep-native-photobooth__upload-filters>span{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:7px;
}
.bigstep-native-photobooth__upload-filters>span small{
	color:#7f8aa5;
	font-size:8px;
	font-weight:700;
	letter-spacing:0;
	text-transform:none;
}
.bigstep-native-photobooth__upload-filter-track{
	display:grid;
	grid-auto-columns:74px;
	grid-auto-flow:column;
	grid-template-rows:repeat(2,64px);
	gap:7px;
	max-width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	padding:1px 1px 7px;
	scroll-snap-type:x proximity;
	scrollbar-width:thin;
	scrollbar-color:#8050cc #171e36;
	-webkit-overflow-scrolling:touch;
	touch-action:pan-x!important;
	overscroll-behavior-x:contain;
}
.bigstep-native-photobooth__upload-filter-track::-webkit-scrollbar{height:7px}
.bigstep-native-photobooth__upload-filter-track::-webkit-scrollbar-track{
	border-radius:999px;
	background:#171e36;
}
.bigstep-native-photobooth__upload-filter-track::-webkit-scrollbar-thumb{
	border-radius:999px;
	background:#8050cc;
}
.bigstep-native-photobooth__upload-filter-track::-webkit-scrollbar-thumb:hover{background:#a56aef}
.bigstep-native-photobooth__upload-filter-track button{
	display:flex;
	min-width:0;
	min-height:64px;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	padding:5px;
	scroll-snap-align:start;
}
.bigstep-native-photobooth__upload-filter-track i{
	display:block;
	flex:0 0 34px;
	width:34px;
	height:34px;
	border-radius:8px;
	background-position:center 32%;
	background-size:cover;
	box-shadow:inset 0 0 0 1px #ffffff24;
}
.bigstep-native-photobooth__upload-filter-track b{
	display:block;
	overflow:hidden;
	width:100%;
	font-size:8px;
	line-height:1.1;
	text-align:center;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.bigstep-native-photobooth__upload-filter-track button.is-active{
	border-color:#c778ff;
	background:#43205b;
	box-shadow:0 0 0 1px #c778ff55;
}
@media(max-width:760px){
	.bigstep-native-photobooth__upload-filter-track{
		grid-auto-columns:72px;
		grid-template-rows:60px;
	}
	.bigstep-native-photobooth__upload-filter-track button{min-height:60px}
	.bigstep-native-photobooth__upload-filter-track i{
		flex-basis:32px;
		width:32px;
		height:32px;
	}
}

/* Mobile camera: remove letterboxing and keep filters within thumb reach. */
@media(max-width:760px){
	.bigstep-native-photobooth__capture{padding:8px}
	.bigstep-native-photobooth__camera,
	.bigstep-native-photobooth__camera.is-upload{
		width:100%;
		max-width:100%;
		height:auto;
		max-height:none;
		aspect-ratio:var(--camera-ratio,4/5);
		margin-inline:auto;
	}
	.bigstep-native-photobooth__camera video,
	.bigstep-native-photobooth__camera canvas,
	.bigstep-native-photobooth__camera>.canvas-container{
		width:100%!important;
		height:100%!important;
		aspect-ratio:var(--camera-ratio,4/5);
		object-fit:cover!important;
		object-position:center!important;
	}
	.bigstep-native-photobooth__slot-list{
		display:flex;
		overflow-x:auto;
		padding-bottom:2px;
		scrollbar-width:none;
	}
	.bigstep-native-photobooth__slot-list::-webkit-scrollbar,
	.bigstep-native-photobooth__filters::-webkit-scrollbar{display:none}
	.bigstep-native-photobooth__slot-list button{
		flex:0 0 64px;
		width:64px;
		height:64px;
	}
	.bigstep-native-photobooth__capture-actions{padding-top:6px}
	.bigstep-native-photobooth__shutter{
		width:54px!important;
		min-height:54px!important;
		border-width:4px!important;
	}
	.bigstep-native-photobooth__shutter i{width:32px;height:32px}
	.bigstep-native-photobooth__controls{padding:10px}
	.bigstep-native-photobooth__filters{
		display:flex;
		grid-template-columns:none;
		gap:8px;
		overflow-x:auto;
		margin-top:9px;
		padding:1px 1px 5px;
		scroll-snap-type:x proximity;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}
	.bigstep-native-photobooth__filters button{
		flex:0 0 88px;
		min-width:88px;
		min-height:62px;
		flex-direction:column;
		justify-content:center;
		gap:5px;
		padding:6px;
		text-align:center;
		scroll-snap-align:start;
	}
	.bigstep-native-photobooth__filters i{
		flex:0 0 38px;
		width:38px;
		height:38px;
	}
	.bigstep-native-photobooth__controls>span,
	.bigstep-native-photobooth__controls>p{display:none}
	.bigstep-native-photobooth__controls h2{
		margin:0 0 6px;
		font-size:15px;
		line-height:1.2;
	}
	.bigstep-native-photobooth__control-tabs{
		position:static;
		margin-top:0;
		padding:3px;
	}
	.bigstep-native-photobooth__control-tabs button{
		min-height:34px;
		padding:6px 3px;
	}
	.bigstep-native-photobooth__filters button{
		flex-basis:78px;
		min-width:78px;
		min-height:58px;
	}
	.bigstep-native-photobooth__filters i{
		flex-basis:34px;
		width:34px;
		height:34px;
	}
}

/* Mobile Photobooth v14: portrait capture, true-ratio frame cards and a
   non-overlapping result stage. */
@media(max-width:760px){
	.bigstep-native-photobooth main[data-pb-step="1"][data-pb-tab="frame"] .bigstep-native-photobooth__choices{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
		align-items:stretch;
	}
	.bigstep-native-photobooth main[data-pb-step="1"][data-pb-tab="frame"] .bigstep-native-photobooth__choice{
		height:min(48vh,430px);
		min-height:300px;
	}
	.bigstep-native-photobooth main[data-pb-step="1"][data-pb-tab="frame"] .bigstep-native-photobooth__choice>img{
		flex:1 1 auto;
		width:100%;
		height:calc(100% - 44px);
		min-height:0;
		aspect-ratio:var(--choice-ratio,3/4);
		object-fit:contain;
		background:radial-gradient(circle at 50% 40%,#252d4b,#090d1d);
	}
	.bigstep-native-photobooth main[data-pb-step="4"]{
		display:grid;
		grid-template-rows:minmax(0,1fr) auto;
		overflow:hidden;
		padding-bottom:10px;
	}
	.bigstep-native-photobooth main[data-pb-step="4"] .bigstep-native-photobooth__result{
		display:grid;
		grid-template-rows:auto minmax(0,1fr);
		align-items:stretch;
		gap:10px;
		min-height:0;
		overflow:hidden;
	}
	.bigstep-native-photobooth main[data-pb-step="4"] .bigstep-native-photobooth__result>div{
		flex:0 0 auto;
	}
	.bigstep-native-photobooth main[data-pb-step="4"] .bigstep-native-photobooth__result>div p{
		display:none;
	}
	.bigstep-native-photobooth main[data-pb-step="4"] .bigstep-native-photobooth__result figure{
		position:relative;
		width:100%;
		height:100%;
		min-height:0;
		aspect-ratio:auto;
		overflow:hidden;
		padding:10px;
	}
	.bigstep-native-photobooth main[data-pb-step="4"] .bigstep-native-photobooth__result figure img{
		position:absolute;
		inset:10px;
		width:calc(100% - 20px);
		height:calc(100% - 20px);
		max-width:none;
		max-height:none;
		object-fit:contain;
		object-position:center;
	}
	.bigstep-native-photobooth main[data-pb-step="4"]>footer{
		position:static!important;
		z-index:1;
		flex:0 0 auto;
		margin:8px 0 0!important;
		padding:8px 0 0!important;
	}

	/* Keep the completed composition large and centered on mobile. */
	.bigstep-native-photobooth__result{
		display:grid!important;
		grid-template-columns:1fr!important;
		grid-template-rows:auto minmax(0,1fr)!important;
		gap:12px!important;
		min-height:0!important;
		overflow:hidden!important;
	}
	.bigstep-native-photobooth__result>div:first-child{
		min-width:0;
	}
	.bigstep-native-photobooth__result>div:first-child p{
		display:none!important;
	}
	.bigstep-native-photobooth__result figure{
		position:relative!important;
		width:100%!important;
		height:100%!important;
		min-height:0!important;
		aspect-ratio:auto!important;
		overflow:hidden!important;
		padding:8px!important;
	}
	.bigstep-native-photobooth__result figure img{
		position:absolute!important;
		inset:8px!important;
		width:calc(100% - 16px)!important;
		height:calc(100% - 16px)!important;
		max-width:none!important;
		max-height:none!important;
		object-fit:contain!important;
		object-position:center!important;
	}
}
/* AI Hub merchandise workflow cards */
[data-merch-hub-mount] { padding: 2px 0 18px; }
[data-merch-hub-mount].is-style-active { padding-bottom:0; }
[data-ai-tab-panel="generate"] .bigstep-ai-style-chips { display:none; }
[data-ai-tab-panel="generate"] .bigstep-ai-panel-hero { margin-top:4px; }
.bigstep-merch-hub-hero { padding: 14px 14px 10px; border-radius: 18px; background: radial-gradient(circle at 90% 0%, rgba(124,58,237,.28), transparent 45%), linear-gradient(135deg,#15142b,#111827 60%,#0d111b); color: #f8fafc; border: 1px solid rgba(167,139,250,.28); }
.bigstep-merch-hub-hero span { color:#c4b5fd; font-size:9px; letter-spacing:.14em; font-weight:800; }
.bigstep-merch-hub-hero h3 { margin:5px 0 3px; font-size:18px; line-height:1.15; }
.bigstep-merch-hub-hero p { margin:0; color:#b8bfd0; font-size:11px; line-height:1.45; }
.bigstep-merch-hub-search { display:flex; align-items:center; gap:7px; margin:12px 0 9px; padding:0 10px; border:1px solid #30364a; border-radius:11px; background:#0c1120; color:#9aa4bb; }
.bigstep-merch-hub-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#f8fafc; padding:9px 0; font-size:12px; }
.bigstep-merch-hub-filters { display:flex; gap:6px; overflow:auto; scrollbar-width:none; padding-bottom:7px; }
.bigstep-merch-hub-filters button { flex:0 0 auto; border:1px solid #343a52; background:#12182a; color:#aeb6c9; border-radius:999px; padding:6px 10px; font-size:10px; cursor:pointer; }
.bigstep-merch-hub-filters button.is-active { color:#fff; border-color:#8b5cf6; background:#5b3ab7; }
.bigstep-merch-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.bigstep-merch-hub-card { padding:0; overflow:hidden; text-align:left; border:1px solid #2c3348; border-radius:14px; background:#111624; color:#fff; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.bigstep-merch-hub-card:hover { transform:translateY(-2px); border-color:var(--hub-accent); box-shadow:0 8px 22px rgba(0,0,0,.25); }
.bigstep-merch-hub-art { display:block; aspect-ratio:1/1; height:auto; min-height:0; position:relative; overflow:hidden; background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--hub-accent) 65%,#fff),transparent 30%), linear-gradient(135deg,#171827,#080b14); }
.bigstep-merch-hub-art { background-image:url('/wp-content/plugins/bigstep-ai/assets/images/ai-hub-merch-sprite.png'); background-size:400% 300%; background-position:var(--thumb-x) var(--thumb-y); background-repeat:no-repeat; }
.bigstep-merch-hub-art:before,.bigstep-merch-hub-art:after,.bigstep-merch-hub-art b { display:none; }
.bigstep-merch-hub-art:before,.bigstep-merch-hub-art:after { content:""; position:absolute; width:90px; height:90px; border:1px solid color-mix(in srgb,var(--hub-accent) 65%,transparent); border-radius:50%; transform:rotate(24deg); opacity:.65; }
.bigstep-merch-hub-art:before { right:-25px; top:-35px; }
.bigstep-merch-hub-art:after { left:-42px; bottom:-55px; }
.bigstep-merch-hub-art i { position:absolute; z-index:2; left:12px; bottom:8px; font-style:normal; font-weight:900; font-size:24px; letter-spacing:-.08em; color:#fff; text-shadow:2px 2px 0 var(--hub-accent),4px 4px 0 rgba(0,0,0,.4); }
.bigstep-merch-hub-art i { display:none; }
.bigstep-merch-hub-art b { position:absolute; z-index:1; width:10px; height:10px; border-radius:2px; background:var(--hub-accent); right:19px; top:18px; transform:rotate(35deg); box-shadow:-20px 26px 0 color-mix(in srgb,var(--hub-accent) 55%,#fff); }
.bigstep-merch-hub-art b+ b { right:42px; top:39px; width:6px; height:6px; }
.bigstep-merch-hub-card > span:last-child { display:block; padding:9px 10px 10px; }
.bigstep-merch-hub-card em { display:block; color:var(--hub-accent); font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.bigstep-merch-hub-card strong { display:block; margin-top:3px; font-size:12px; line-height:1.2; }
.bigstep-merch-hub-card small { display:block; margin-top:4px; color:#9fa8bd; font-size:9px; line-height:1.35; }
.bigstep-merch-hub-tip { margin:12px 2px 0; color:#8f99af; font-size:10px; line-height:1.4; }
.bigstep-merch-style-screen { padding:4px 2px 0; }
.bigstep-merch-style-back { border:0; background:transparent; color:#aeb7ca; padding:5px 0 12px; font-size:11px; cursor:pointer; }
.bigstep-merch-style-head { display:flex; gap:9px; align-items:center; padding:9px 10px; border:1px solid color-mix(in srgb,var(--hub-accent,#8b5cf6) 45%,#30364a); border-radius:13px; background:linear-gradient(135deg,#17142b,#111827); color:#fff; }
.bigstep-merch-style-head > span { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; overflow:hidden; border-radius:10px; color:#fff; background-color:var(--hub-accent,#8b5cf6); background-repeat:no-repeat; font-size:12px; font-weight:900; box-shadow:0 6px 14px color-mix(in srgb,var(--hub-accent,#8b5cf6) 30%,transparent); }
.bigstep-merch-style-head em { color:#c4b5fd; font-size:9px; text-transform:uppercase; font-style:normal; font-weight:800; letter-spacing:.1em; }
.bigstep-merch-style-head h3 { margin:2px 0 0; font-size:15px; line-height:1.2; }
.bigstep-merch-style-head p { display:none; }
.bigstep-merch-guide { margin:8px 0; padding:8px 10px; border-radius:10px; background:#141a2a; border:1px solid #30364a; }
.bigstep-merch-guide strong { color:#fff; font-size:11px; }
.bigstep-merch-guide p { display:-webkit-box; overflow:hidden; margin:4px 0 0; color:#c7cede; font-size:10px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.bigstep-merch-guide small { display:none; }
.bigstep-merch-style-field { display:block; margin:10px 0; color:#dfe4ef; font-size:11px; font-weight:700; }
.bigstep-merch-style-field small { color:#8993a8; font-weight:400; }
.bigstep-merch-style-field textarea,.bigstep-merch-style-field input { display:block; width:100%; box-sizing:border-box; margin-top:6px; border:1px solid #343b53; border-radius:10px; background:#0b1020; color:#f8fafc; padding:10px; font-size:12px; outline:0; resize:vertical; }
.bigstep-merch-style-field textarea:focus,.bigstep-merch-style-field input:focus { border-color:#8b5cf6; box-shadow:0 0 0 2px rgba(139,92,246,.16); }
.bigstep-merch-style-step { margin:13px 0; color:#dfe4ef; font-size:11px; }
.bigstep-merch-style-step > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.bigstep-merch-style-step > div[data-merch-style-variants] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.bigstep-merch-style-step button { overflow:hidden; padding:0; text-align:left; border:1px solid #39425b; border-radius:12px; background:#12182a; color:#aeb7ca; cursor:pointer; }
.bigstep-merch-style-step button.is-active { border-color:#a78bfa; color:#fff; background:#31205f; box-shadow:0 0 0 1px rgba(167,139,250,.2); }
.bigstep-merch-variant-art { display:block; aspect-ratio:4/5; position:relative; overflow:hidden; background-image:var(--variant-image); background-size:cover; background-position:center; background-repeat:no-repeat; filter:none; }
.bigstep-merch-variant-art:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,11,20,.28)); }
.bigstep-merch-variant-art i { position:absolute; z-index:1; left:7px; bottom:5px; color:#fff; font-size:16px; font-style:normal; font-weight:900; text-shadow:1px 1px 0 #000; }
.bigstep-merch-style-step button strong,.bigstep-merch-style-step button small { display:block; padding:6px 8px 0; }
.bigstep-merch-style-step button small { padding-top:2px; padding-bottom:8px; color:#8f99af; font-size:9px; }
.bigstep-merch-style-generate { width:100%; justify-content:center; margin-top:8px; }
.bigstep-merch-style-screen > .bigstep-merch-color-tip { margin:10px 0 8px; padding:8px 10px; border-radius:10px; font-size:10px; line-height:1.4; color:#b9c2d5; background:#111827; border:1px solid #30364a; }
.bigstep-merch-style-generate { display:flex!important; align-items:center!important; width:100%!important; min-height:46px!important; margin:12px 0 0!important; padding:12px 18px!important; justify-content:center!important; border-radius:12px!important; background:linear-gradient(135deg,#7654ff 0%,#9b6cff 100%)!important; border:1px solid #c4b5fd!important; color:#fff!important; font-size:13px!important; font-weight:800!important; letter-spacing:.1px; opacity:1!important; box-shadow:0 8px 22px rgba(108,75,235,.48), inset 0 1px 0 rgba(255,255,255,.22)!important; position:relative; z-index:6; }
.bigstep-merch-style-generate:hover { background:linear-gradient(135deg,#8668ff 0%,#aa7dff 100%)!important; transform:translateY(-1px); box-shadow:0 10px 26px rgba(108,75,235,.6), inset 0 1px 0 rgba(255,255,255,.28)!important; }
[data-ai-tab-panel="generate"] > .bigstep-ai-limit-badge { margin:0; padding:2px 0; }
[data-ai-tab-panel="generate"] .bigstep-ai-editor-ai-prompt-field,[data-ai-tab-panel="generate"] .bigstep-ai-editor-model-picker,[data-ai-tab-panel="generate"] .bigstep-ai-style-chips,[data-ai-tab-panel="generate"] [data-editor-ai-generate] { display:none; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-ai-tab-panel="generate"] button.bigstep-ai-tool.bigstep-ai-tool--primary.bigstep-merch-style-generate[data-merch-style-generate] { display:flex!important; min-height:48px!important; padding:13px 18px!important; border:1px solid #c4b5fd!important; border-radius:12px!important; background-color:#7c4dff!important; background-image:linear-gradient(135deg,#6d4aff 0%,#9f67ff 55%,#ec4899 135%)!important; color:#fff!important; font-size:13px!important; font-weight:850!important; text-shadow:0 1px 2px rgba(0,0,0,.32)!important; opacity:1!important; box-shadow:0 9px 24px rgba(109,74,255,.55),inset 0 1px 0 rgba(255,255,255,.28)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-ai-tab-panel="generate"] button.bigstep-ai-tool.bigstep-ai-tool--primary.bigstep-merch-style-generate[data-merch-style-generate]:hover { background-color:#8b5cf6!important; background-image:linear-gradient(135deg,#7c5cff 0%,#ac75ff 55%,#f05aa2 135%)!important; transform:translateY(-1px); }

/* AI tabs graphite-lime audit (2026-08-11)
   Visual-only override: no layout, DOM or interaction changes. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] {
  --bs-ai-lime:#c8ff00;
  --bs-ai-lime-hover:#d4ff3d;
  --bs-ai-ink:#080a0b;
  --bs-ai-graphite:#101513;
  --bs-ai-surface:#151b1a;
  --bs-ai-surface-2:#1a211f;
  --bs-ai-line:#30383a;
  --bs-ai-text:#f2f5f1;
  --bs-ai-muted:#aeb7b2;
}

/* AI Hub: replace the remaining violet/indigo workflow surfaces. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-hero {
  border-color:rgba(200,255,0,.24)!important;
  background:radial-gradient(circle at 90% 0%,rgba(200,255,0,.12),transparent 45%),linear-gradient(135deg,#151b1a,#101513 60%,#0b0f0e)!important;
  color:var(--bs-ai-text)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-hero span { color:var(--bs-ai-lime)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-filters button.is-active {
  color:var(--bs-ai-ink)!important;
  border-color:var(--bs-ai-lime)!important;
  background:var(--bs-ai-lime)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-head {
  border-color:rgba(200,255,0,.34)!important;
  background:linear-gradient(135deg,#1a2318,#101513)!important;
  color:var(--bs-ai-text)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-head > span {
  background-color:#222b20!important;
  color:var(--bs-ai-lime)!important;
  box-shadow:0 6px 14px rgba(200,255,0,.12)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-head em { color:var(--bs-ai-lime)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-guide,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-screen > .bigstep-merch-color-tip {
  border-color:var(--bs-ai-line)!important;
  background:var(--bs-ai-surface)!important;
  color:var(--bs-ai-muted)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-guide p { color:var(--bs-ai-muted)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-field textarea,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-field input {
  border-color:var(--bs-ai-line)!important;
  background:#0d1210!important;
  color:var(--bs-ai-text)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-field textarea:focus,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-field input:focus {
  border-color:var(--bs-ai-lime)!important;
  box-shadow:0 0 0 2px rgba(200,255,0,.14)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-step button {
  border-color:var(--bs-ai-line)!important;
  background:var(--bs-ai-surface)!important;
  color:var(--bs-ai-muted)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-step button.is-active {
  border-color:rgba(200,255,0,.52)!important;
  background:#1a2318!important;
  color:var(--bs-ai-text)!important;
  box-shadow:0 0 0 1px rgba(200,255,0,.12)!important;
}

/* The AI artwork button changes paint only; its existing position and flow stay intact. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button.bigstep-merch-style-generate[data-merch-style-generate] {
  border-color:var(--bs-ai-lime)!important;
  background-color:var(--bs-ai-lime)!important;
  background-image:none!important;
  color:var(--bs-ai-ink)!important;
  text-shadow:none!important;
  box-shadow:0 8px 22px rgba(200,255,0,.16),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button.bigstep-merch-style-generate[data-merch-style-generate]:hover {
  border-color:var(--bs-ai-lime-hover)!important;
  background-color:var(--bs-ai-lime-hover)!important;
  background-image:none!important;
  box-shadow:0 10px 25px rgba(200,255,0,.22),inset 0 1px 0 rgba(255,255,255,.3)!important;
}

/* AI Remix: cards, badges, upload, progress and controls use graphite-lime. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-list,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-detail {
  --bs-remix-surface:rgba(21,27,26,.88);
  --bs-remix-surface-soft:rgba(26,33,31,.76);
  --bs-remix-line:rgba(48,56,58,.95);
  --bs-remix-line-hot:rgba(200,255,0,.5);
  --bs-remix-accent:#c8ff00;
  --bs-remix-accent-2:#a8d600;
  --bs-remix-text:#f2f5f1;
  --bs-remix-muted:#aeb7b2;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card {
  border-color:var(--bs-ai-line)!important;
  background:linear-gradient(180deg,#171d1b,#111615)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-card:hover {
  border-color:rgba(200,255,0,.5)!important;
  background:radial-gradient(circle at 50% -20%,rgba(200,255,0,.1),transparent 48%),linear-gradient(180deg,#1a211f,#121715)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.3),0 0 0 1px rgba(200,255,0,.08)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-badge,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-panel-title span,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-result-badge {
  background:var(--bs-ai-lime)!important;
  color:var(--bs-ai-ink)!important;
  text-shadow:none!important;
  box-shadow:0 5px 14px rgba(200,255,0,.16)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-panel-back,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source-change,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-meta button {
  border-color:var(--bs-ai-line)!important;
  background:var(--bs-ai-surface-2)!important;
  color:var(--bs-ai-text)!important;
  background-image:none!important;
  box-shadow:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-panel-back:hover,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source-change:hover,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-meta button:hover {
  border-color:rgba(200,255,0,.5)!important;
  background:#1a2318!important;
  color:var(--bs-ai-lime)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-empty,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source.is-empty,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-preview {
  border-color:var(--bs-ai-line)!important;
  background:var(--bs-ai-surface)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-icon,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source.is-empty::before {
  border-color:rgba(200,255,0,.4)!important;
  background-color:#1a2318!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-icon {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8ff00' d='M5 21q-.825 0-1.412-.587Q3 19.825 3 19V5q0-.825.588-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm1-4h12l-3.75-5-3 4L9 13Z'/%3E%3C/svg%3E")!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-hero-meta,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-hero-action,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-upload-meta {
  border-color:rgba(200,255,0,.26)!important;
  background:rgba(13,18,16,.86)!important;
  color:var(--bs-ai-text)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-hero-meta span { color:var(--bs-ai-text)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-recent-thumb.is-active,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-result-preview {
  border-color:var(--bs-ai-lime)!important;
  box-shadow:0 0 0 1px rgba(200,255,0,.24),0 8px 22px rgba(200,255,0,.1)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-progress {
  border-color:rgba(200,255,0,.3)!important;
  background:linear-gradient(180deg,rgba(200,255,0,.08),rgba(16,21,19,.9))!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-progress-head span,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-panel-overlay span { color:var(--bs-ai-lime)!important; }
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-progress-bar span,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-panel-progress-bar i {
  background:linear-gradient(90deg,#9dcc00,var(--bs-ai-lime))!important;
  box-shadow:0 0 14px rgba(200,255,0,.25)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-progress li.is-active span {
  border-color:var(--bs-ai-lime)!important;
  background:radial-gradient(circle at center,var(--bs-ai-lime) 35%,rgba(200,255,0,.16) 42%)!important;
  box-shadow:0 0 0 4px rgba(200,255,0,.11)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-button.bigstep-ai-remix-card-btn,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-button.bigstep-ai-remix-generate:not(:disabled),
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-source.is-empty .bigstep-ai-remix-source-change:not(:disabled) {
  border-color:var(--bs-ai-lime)!important;
  background-color:var(--bs-ai-lime)!important;
  background-image:none!important;
  color:var(--bs-ai-ink)!important;
  box-shadow:0 8px 22px rgba(200,255,0,.16)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-button.bigstep-ai-remix-card-btn:hover,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-button.bigstep-ai-remix-generate:not(:disabled):hover {
  background-color:var(--bs-ai-lime-hover)!important;
  background-image:none!important;
}

/* Redesign: enabled create button is a lime primary; disabled remains graphite. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button[data-redesign-generate]:not(:disabled) {
  border:1px solid var(--bs-ai-lime)!important;
  background-color:var(--bs-ai-lime)!important;
  background-image:none!important;
  color:var(--bs-ai-ink)!important;
  box-shadow:0 8px 22px rgba(200,255,0,.16)!important;
  opacity:1!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button[data-redesign-generate]:not(:disabled):hover {
  border-color:var(--bs-ai-lime-hover)!important;
  background-color:var(--bs-ai-lime-hover)!important;
  background-image:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button[data-redesign-generate]:disabled {
  border:1px solid var(--bs-ai-line)!important;
  background:#14191a!important;
  color:#78817d!important;
  box-shadow:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] button.bigstep-ai-generate-btn[data-redesign-generate]:not(:disabled) {
  border-color:#c8ff00!important;
}
/* Close the real canvas seam: the menu is 78px wide while the first editor
   grid column was 82px. Keep the panel's own content padding intact. */
@media (min-width: 761px) {
  html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main {
    grid-template-columns: 78px var(--panel-w) minmax(0, 1fr) !important;
  }

  html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
  html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-tools > .bigstep-ai-tool-panel {
    padding-left: 14px !important;
  }
}

/* Graphite-lime polish pass for the remaining Studio legacy accents. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__scroll table {
  border-color: #30383a !important;
  background: #111516 !important;
  color: #dce1de !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__scroll :where(th,td) {
  border-color: #30383a !important;
  color: #dce1de !important;
  -webkit-text-fill-color: #dce1de !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__scroll thead th,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__scroll tbody td:first-child {
  background: #1a2318 !important;
  background-image: none !important;
  color: #f5f6f1 !important;
  -webkit-text-fill-color: #f5f6f1 !important;
  font-weight: 800 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__tip {
  border-color: rgba(200,255,0,.3) !important;
  background: rgba(200,255,0,.08) !important;
  background-image: none !important;
  color: #d7ff45 !important;
  -webkit-text-fill-color: #d7ff45 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal .bigstep-size-advice__note {
  border-color: #30383a !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #a0a8a4 !important;
  -webkit-text-fill-color: #a0a8a4 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal [data-size-guide-close] {
  border-color: #30383a !important;
  background: #171c1d !important;
  color: #dce1de !important;
  -webkit-text-fill-color: #dce1de !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-size-guide-modal [data-size-guide-close]:is(:hover,:focus-visible) {
  border-color: rgba(200,255,0,.55) !important;
  background: #1a2318 !important;
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] label:has(input[name="order_mode"]:checked) {
  color: #f5f6f1 !important;
  -webkit-text-fill-color: #f5f6f1 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-size-guide-open {
  border-color: #30383a !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #dce1de !important;
  -webkit-text-fill-color: #dce1de !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-size-guide-open:is(:hover,:focus-visible) {
  border-color: rgba(200,255,0,.55) !important;
  background: #1a2318 !important;
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card:not(.is-active) {
  border-color: #30383a !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #dce1de !important;
  -webkit-text-fill-color: #dce1de !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card:not(.is-active)::before {
  border-color: #394244 !important;
  background: #111516 !important;
  color: #a0a8a4 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card:not(.is-active) .bigstep-ai-swatch-method-icon {
  border-color: #394244 !important;
  background: #202627 !important;
  background-image: none !important;
  color: #dce1de !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="product"] .bigstep-ai-swatch--method-card:not(.is-active) .bigstep-ai-swatch-method-icon :where(svg,path,rect) {
  color: #dce1de !important;
  fill: currentColor !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-points-pill > :where(span,strong) {
  color: #f5f6f1 !important;
  -webkit-text-fill-color: #f5f6f1 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-points-pill > em {
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-panel-section:has([data-editor-history-grid]) > .bigstep-ai-panel-head {
  border-color: #30383a !important;
  background: #14191a !important;
  background-image: none !important;
  color: #f5f6f1 !important;
  -webkit-text-fill-color: #f5f6f1 !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-panel-section:has([data-editor-history-grid]) > .bigstep-ai-panel-head button {
  border-color: #394244 !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #a0a8a4 !important;
  -webkit-text-fill-color: #a0a8a4 !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] .bigstep-ai-panel-section:has([data-editor-history-grid]) > .bigstep-ai-panel-head button:is(:hover,:focus-visible) {
  border-color: rgba(200,255,0,.55) !important;
  background: #1a2318 !important;
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
}

/* Draft cart ordering: one safe, explicit CTA per saved design. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-item {
  grid-template-columns: 40px minmax(0,1fr) !important;
  padding: 8px !important;
  border: 1px solid #30383a !important;
  border-radius: 10px !important;
  background: #121718 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-item:hover {
  border-color: rgba(200,255,0,.38) !important;
  background: #151b18 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 30px 30px !important;
  gap: 6px !important;
  width: 100% !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-actions button {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  border-color: #394244 !important;
  background: #171c1d !important;
  color: #aeb7b2 !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-actions .bigstep-ai-draft-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-color: #c8ff00 !important;
  background: #c8ff00 !important;
  color: #080a0b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-actions .bigstep-ai-draft-cart:is(:hover,:focus-visible) {
  border-color: #dcff61 !important;
  background: #dcff61 !important;
  color: #080a0b !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-actions .bigstep-ai-draft-cart:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-draft-item.is-added-to-cart .bigstep-ai-draft-cart {
  border-color: rgba(200,255,0,.48) !important;
  background: #1a2318 !important;
  color: #c8ff00 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 10px !important;
  padding: 9px 12px !important;
  border: 1px solid #c8ff00 !important;
  border-radius: 10px !important;
  background: #c8ff00 !important;
  color: #080a0b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk[hidden],
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk-note[hidden] {
  display: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk:is(:hover,:focus-visible) {
  border-color: #dcff61 !important;
  background: #dcff61 !important;
  color: #080a0b !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk-note {
  margin: 7px 2px 0 !important;
  color: #8f9b96 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-storage-note {
  margin: 0 0 10px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(200,255,0,.22) !important;
  border-radius: 9px !important;
  background: rgba(200,255,0,.055) !important;
  color: #aeb9b3 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}
/* Graphite Lime progress lock — replaces the remaining indigo/cyan loader
   paint without changing progress timing or order/export behaviour. */
html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card {
  border-color: rgba(200,255,0,.30) !important;
  background: radial-gradient(circle at 50% 0,rgba(200,255,0,.075),transparent 43%),linear-gradient(180deg,#151a1b 0%,#0c1011 100%) !important;
  color: #f5f6f1 !important;
  box-shadow: 0 30px 84px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-mark {
  border: 1px solid rgba(200,255,0,.38) !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #c8ff00 !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.34) !important;
}

html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-card :where(p,.bsai-loader-meta) {
  color: #aeb7b2 !important;
}

html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-track {
  background: #252c2e !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-track > span {
  background: linear-gradient(90deg,#c8ff00,#91c93a) !important;
  box-shadow: 0 0 12px rgba(200,255,0,.18) !important;
}

html body.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-loading .bsai-loader-meta b {
  color: #c8ff00 !important;
}

/* Draft panel final contrast + safe cart navigation. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] [data-draft-save] {
  border: 1px solid #c8ff00 !important;
  background: #c8ff00 !important;
  background-image: none !important;
  color: #080a0b !important;
  -webkit-text-fill-color: #080a0b !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] [data-draft-save] :is(svg,path) {
  color: #080a0b !important;
  fill: currentColor !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app .bigstep-ai-tool-badge {
  border: 1px solid rgba(8,10,11,.72) !important;
  background: #c8ff00 !important;
  background-image: none !important;
  color: #080a0b !important;
  -webkit-text-fill-color: #080a0b !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.42),0 0 0 2px #111516 !important;
}

@keyframes bigstep-ai-drafts-pulse-lime {
  0% { box-shadow: 0 0 0 0 rgba(200,255,0,.45); }
  70% { box-shadow: 0 0 0 11px rgba(200,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,255,0,0); }
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app [data-panel-toggle].is-drafts-pulse .bigstep-ai-tool-badge {
  animation: bigstep-ai-drafts-pulse-lime 1.6s ease-out 2 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk {
  border-color: rgba(200,255,0,.58) !important;
  background: #171c1d !important;
  background-image: none !important;
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
  box-shadow: none !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="drafts"] .bigstep-ai-drafts-bulk:is(:hover,:focus-visible) {
  border-color: #c8ff00 !important;
  background: #1a2318 !important;
  color: #dfff65 !important;
  -webkit-text-fill-color: #dfff65 !important;
}
/* RC98 AI Redesign: compact before/after visual example. */
.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-redesign-showcase {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 12px 0 14px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(200, 255, 0, .28);
  border-radius: 14px;
  background: #0b0f0e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-redesign-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-redesign-showcase__label {
  position: absolute;
  top: 9px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(8, 11, 10, .82);
  color: #f5f6f1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-redesign-showcase__label--before { left: 9px; }
.bigstep-ai-ai-tab-panel[data-ai-tab-panel="redesign"] .bigstep-ai-redesign-showcase__label--after {
  right: 9px;
  border-color: rgba(200, 255, 0, .55);
  color: #c8ff00;
}
/* RC99 Redesign: remove legacy violet badge and reveal PNG transparency. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-loading.is-loading-ai .bigstep-ai-loading-style-badge,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-loading .bigstep-ai-loading-style-badge {
  border: 1px solid rgba(200, 255, 0, .52) !important;
  background: linear-gradient(180deg, rgba(28, 34, 31, .96), rgba(12, 16, 14, .96)) !important;
  color: #c8ff00 !important;
  -webkit-text-fill-color: #c8ff00 !important;
  box-shadow: 0 0 0 1px rgba(200, 255, 0, .06), 0 8px 24px rgba(0, 0, 0, .28) !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-redesign-preview {
  border-color: rgba(200, 255, 0, .28) !important;
  background: #0c1110 !important;
}

html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-redesign-preview img {
  background-color: #111716 !important;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .075) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .075) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .075) 75%) !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
  background-size: 16px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055) !important;
}
/* Drafts: explain the multi-design ordering workflow. */
.bigstep-ai-tool-panel[data-tool-panel="drafts"] .bigstep-ai-drafts-order-guide {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 4px;
  padding: 10px 11px;
  border: 1px solid rgba(200, 255, 0, .28);
  border-radius: 11px;
  background: rgba(200, 255, 0, .055);
  color: #aeb5b2;
}

.bigstep-ai-tool-panel[data-tool-panel="drafts"] .bigstep-ai-drafts-order-guide svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #c8ff00;
}

.bigstep-ai-tool-panel[data-tool-panel="drafts"] .bigstep-ai-drafts-order-guide p {
  margin: 0;
  color: inherit;
  font-size: 11.5px;
  line-height: 1.48;
}

.bigstep-ai-tool-panel[data-tool-panel="drafts"] .bigstep-ai-drafts-order-guide strong {
  color: #f5f6f1;
  font-weight: 800;
}

/* Template library graphite-lime audit (2026-08-13). */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app [data-tool-panel="library"] {
  --bs-library-lime:#c8ff00; --bs-library-bg:#0b0f0e; --bs-library-surface:#111715;
  --bs-library-line:#303a36; --bs-library-text:#f4f7f3; --bs-library-muted:#aab5af;
  background:var(--bs-library-bg)!important;
  color:var(--bs-library-text)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-sticky-head,.bigstep-ai-artwork-sticky-head) {
  background:var(--bs-library-bg)!important;
  box-shadow:0 12px 22px rgba(0,0,0,.34)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-sticky-head,.bigstep-ai-artwork-sticky-head)::after {
  background:linear-gradient(180deg,rgba(11,15,14,.96),rgba(11,15,14,0))!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-library-tabs,.bigstep-ai-template-tabs) {
  border-color:var(--bs-library-line)!important;
  background:var(--bs-library-surface)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-library-tab,.bigstep-ai-template-tab).is-active {
  border-color:rgba(200,255,0,.26)!important;
  background:#182116!important;
  color:var(--bs-library-lime)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-folder-card,.bigstep-ai-artwork-folder-card) {
  border-color:rgba(170,181,175,.2)!important;
  background:var(--bs-library-surface)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-folder-card,.bigstep-ai-artwork-folder-card):hover {
  border-color:rgba(200,255,0,.5)!important;
  background:#182116!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-folder-meta,.bigstep-ai-artwork-folder-meta) small {
  color:var(--bs-library-muted)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-floating-actions,.bigstep-ai-artwork-floating-actions) button {
  border-color:var(--bs-library-line)!important;
  background:rgba(17,23,21,.94)!important;
  color:var(--bs-library-text)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.3)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-floating-actions,.bigstep-ai-artwork-floating-actions) button:hover {
  border-color:var(--bs-library-lime)!important;
  background:#1b2419!important;
  color:var(--bs-library-lime)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] .bigstep-ai-artwork-ai-actions button {
  border-color:var(--bs-library-line)!important;
  background:var(--bs-library-surface)!important;
  color:var(--bs-library-text)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] .bigstep-ai-artwork-ai-actions button:hover {
  border-color:var(--bs-library-lime)!important;
  background:#1b2419!important;
  color:var(--bs-library-lime)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] :is(.bigstep-ai-template-favorite-hint,.bigstep-ai-artwork-favorite-hint) {
  border-color:rgba(200,255,0,.28)!important;
  background:rgba(200,255,0,.055)!important;
  color:#dce5df!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] .bigstep-ai-template-load-more {
  border-color:rgba(200,255,0,.55)!important;
  background:rgba(200,255,0,.08)!important;
  color:var(--bs-library-lime)!important;
  -webkit-text-fill-color:var(--bs-library-lime)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme [data-tool-panel="library"] .bigstep-ai-template-load-more:hover {
  border-color:var(--bs-library-lime)!important;
  background:rgba(200,255,0,.15)!important;
}

/* Library category title bars: remove the last legacy navy/violet surface. */
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="library"] :is([data-artwork-design-section],[data-template-design-section]) > :is(.bigstep-ai-artwork-sticky-head,.bigstep-ai-template-sticky-head) {
	background:#0b0f0e!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="library"] :is([data-artwork-design-section],[data-template-design-section]) .bigstep-ai-panel-head {
	min-height:47px!important;
	margin:0!important;
	padding:12px 13px!important;
	border:1px solid #2d3733!important;
	border-radius:0!important;
	background:#111715!important;
	background-image:none!important;
	box-shadow:none!important;
	backdrop-filter:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="library"] :is([data-artwork-design-section],[data-template-design-section]) .bigstep-ai-panel-head strong {
	color:#f4f7f3!important;
	-webkit-text-fill-color:#f4f7f3!important;
}

/* Browser upload history: graphite surface and a centered SVG remove action. */
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] .bigstep-ai-panel-section:has([data-upload-history-grid]) {
	padding:12px!important;
	border:1px solid #2e3935!important;
	border-radius:12px!important;
	background:#0f1412!important;
	background-image:none!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] .bigstep-ai-panel-section:has([data-upload-history-grid]) > .bigstep-ai-panel-head {
	padding-bottom:10px!important;
	border-bottom:1px solid #303a36!important;
	background:transparent!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] [data-upload-history-grid] .bigstep-ai-asset-thumb {
	border-color:#34403b!important;
	background-color:#141a18!important;
	box-shadow:0 7px 18px rgba(0,0,0,.26)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] [data-upload-history-grid] .bigstep-ai-asset-thumb:is(:hover,:focus-visible) {
	border-color:#c8ff00!important;
	box-shadow:0 0 0 1px rgba(200,255,0,.18),0 9px 22px rgba(0,0,0,.32)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] [data-upload-history-grid] .bigstep-ai-asset-remove {
	top:7px!important;
	right:7px!important;
	display:grid!important;
	width:28px!important;
	height:28px!important;
	min-width:28px!important;
	min-height:28px!important;
	max-width:28px!important;
	max-height:28px!important;
	padding:0!important;
	place-items:center!important;
	border:1px solid rgba(255,255,255,.78)!important;
	border-radius:999px!important;
	background:#f05259!important;
	color:#fff!important;
	box-shadow:0 5px 14px rgba(240,82,89,.38),0 0 0 2px rgba(10,14,13,.34)!important;
	line-height:0!important;
	transform:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] [data-upload-history-grid] .bigstep-ai-asset-remove svg {
	display:block!important;
	width:14px!important;
	height:14px!important;
	margin:0!important;
	pointer-events:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="upload"] [data-upload-history-grid] .bigstep-ai-asset-remove:is(:hover,:focus-visible) {
	border-color:#fff!important;
	background:#ff636b!important;
	box-shadow:0 7px 18px rgba(240,82,89,.52),0 0 0 3px rgba(240,82,89,.18)!important;
	transform:scale(1.06)!important;
}

/* Shirt label 6x8 cm add-on. */
html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar {
	bottom:28px!important;
	margin:0!important;
}

/* Label templates are a real editor panel, not a floating row of anonymous buttons. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar {
	box-sizing:border-box!important;
	flex-direction:column!important;
	align-items:stretch!important;
	gap:10px!important;
	width:min(720px,calc(100% - 28px))!important;
	max-width:720px!important;
	padding:12px!important;
	border-color:#46514d!important;
	border-radius:18px!important;
	background:linear-gradient(180deg,#161c1a 0%,#0d1211 100%)!important;
	box-shadow:0 22px 64px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.045)!important;
}
.bigstep-ai-label-template-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:0 2px}.bigstep-ai-label-template-head>span{padding:0!important;border:0!important;color:#f5f8f2!important;font-size:13px!important;font-weight:950!important}.bigstep-ai-label-template-head>small{color:#8f9a95;font-size:10px;font-weight:700}.bigstep-ai-label-template-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.bigstep-ai-label-template-grid>button{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;min-width:0!important;padding:7px!important;border-color:#35413d!important;background:#111715!important;text-align:left!important}.bigstep-ai-label-template-grid>button:hover{transform:translateY(-1px)}.bigstep-ai-label-template-grid>button>i{box-sizing:border-box;display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;width:100%;height:70px;overflow:hidden;border:1px solid #3c4844;border-radius:8px;background:#090d0c;color:#f5f8f2;font-size:14px;font-style:normal;font-weight:950;line-height:1}.bigstep-ai-label-template-grid>button>i b{position:absolute;right:6px;bottom:5px;display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:#c8ff00;color:#0a0e0c;font-size:10px}.bigstep-ai-label-template-grid>button>i small{display:block;margin-top:7px;color:#aeb8b2;font-size:6px;font-weight:850;line-height:1.35;letter-spacing:.08em;text-align:center}.bigstep-ai-label-template-grid>button>i[data-label-preview="y2k"]{border-color:#c8ff00;color:#c8ff00;font-size:19px;text-shadow:1px 1px #fff}.bigstep-ai-label-template-grid>button>i[data-label-preview="utility"]{align-items:flex-start;padding:10px;color:#c8ff00;font-size:30px}.bigstep-ai-label-template-grid>button>i[data-label-preview="utility"] small{position:absolute;right:7px;color:#e9eee9;text-align:left}.bigstep-ai-label-template-grid>button>i[data-label-preview="tag"]{color:#c8ff00;font-size:15px;transform:none}.bigstep-ai-label-template-grid>button>i[data-label-preview="tag"]::after{position:absolute;width:70%;height:2px;background:#f5f8f2;content:"";transform:rotate(-6deg)}.bigstep-ai-label-template-grid>button>span{display:flex!important;align-items:center;justify-content:space-between;gap:4px;padding:0!important;border:0!important;color:#edf2ed!important;font-size:9px!important;font-weight:850!important}.bigstep-ai-label-template-grid>button>span small{padding:2px 4px;border-radius:999px;background:#c8ff00;color:#0b100e;font-size:7px;font-weight:950;text-transform:uppercase}.bigstep-ai-label-sheet-handle{display:none!important}
@media(max-width:760px){
	html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar{position:fixed!important;z-index:790!important;right:6px!important;bottom:calc(var(--toolbar-m,68px) + env(safe-area-inset-bottom,0px))!important;left:6px!important;width:auto!important;max-width:none!important;height:276px;max-height:calc(100dvh - var(--toolbar-m,68px) - 70px);margin:0!important;padding:24px 10px 10px!important;overflow:hidden!important;border-radius:20px 20px 0 0!important;transform:none!important;transition:height .18s ease,transform .18s ease!important}
	html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar.is-label-sheet-dragging{transition:none!important;user-select:none!important}
	.bigstep-ai-label-sheet-handle{position:absolute!important;top:0!important;left:0!important;z-index:4!important;display:block!important;width:100%!important;height:24px!important;min-height:24px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;touch-action:none!important;cursor:ns-resize!important}
	.bigstep-ai-label-sheet-handle::before{position:absolute;top:8px;left:50%;width:44px;height:4px;border-radius:999px;background:#74817c;content:"";transform:translateX(-50%)}
	.bigstep-ai-label-template-head{padding:1px 3px 8px}.bigstep-ai-label-template-head>small{display:none}.bigstep-ai-label-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow-y:auto;padding:0 2px 8px;scrollbar-width:none}.bigstep-ai-label-template-grid::-webkit-scrollbar{display:none}.bigstep-ai-label-template-grid>button{display:grid!important;grid-template-columns:82px 1fr!important;align-items:center!important;gap:9px!important;min-height:82px!important}.bigstep-ai-label-template-grid>button>i{height:66px}.bigstep-ai-label-template-grid>button>span{align-items:flex-start;flex-direction:column;font-size:10px!important}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-grid{display:none!important}
}
@media(max-width:760px){
	html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar {
		bottom:16px!important;
	}
}

.bsai-label-card{margin:14px 0;padding:13px;border:1px solid #394244;border-radius:14px;background:#111516;display:grid;gap:10px}.bsai-label-card.is-active{border-color:#c8ff00;background:rgba(200,255,0,.06)}.bsai-label-choice{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;cursor:pointer;color:#f5f6f1}.bsai-label-choice input{position:absolute;opacity:0;pointer-events:none}.bsai-label-check{width:22px;height:22px;border:1px solid #667071;border-radius:7px;background:#171c1d;position:relative}.bsai-label-choice input:checked+.bsai-label-check{border-color:#c8ff00;background:#c8ff00}.bsai-label-choice input:checked+.bsai-label-check:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#080a0b;font-weight:950;font-size:14px}.bsai-label-choice strong,.bsai-label-choice small{display:block}.bsai-label-choice strong{font-size:13px}.bsai-label-choice small{margin-top:3px;color:#aab4b0;font-size:11px}.bsai-label-edit{min-height:36px!important;padding:8px 12px!important;border:1px solid rgba(200,255,0,.38)!important;border-radius:9px!important;background:#171c1d!important;color:#c8ff00!important;font-size:12px!important;font-weight:850!important}.bsai-label-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px}.bsai-label-modal[hidden]{display:none!important}.bsai-label-backdrop{position:absolute;inset:0;background:rgba(4,7,7,.86);backdrop-filter:blur(8px)}.bsai-label-dialog{position:relative;width:min(920px,calc(100vw - 24px));max-height:calc(100vh - 28px);overflow:auto;border:1px solid #394244;border-radius:20px;background:#0c1010;color:#f5f6f1;box-shadow:0 30px 90px rgba(0,0,0,.62)}.bsai-label-dialog>header{display:flex;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid #303839}.bsai-label-dialog>header span{color:#c8ff00;font-size:11px;font-weight:900;letter-spacing:.12em}.bsai-label-dialog h3{margin:5px 0 3px;font-size:24px}.bsai-label-dialog p{margin:0;color:#9da8a4;font-size:12px}.bsai-label-dialog>header>button{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border:1px solid #394244!important;border-radius:10px!important;background:#171c1d!important;color:#f5f6f1!important;font-size:24px!important}.bsai-label-workspace{display:grid;grid-template-columns:230px 1fr;min-height:590px}.bsai-label-workspace aside{padding:20px;border-right:1px solid #303839;display:flex;flex-direction:column;gap:9px}.bsai-label-workspace aside>strong{margin-bottom:5px}.bsai-label-workspace aside button,.bsai-label-upload{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:9px 12px;border:1px solid #394244;border-radius:10px;background:#171c1d;color:#f5f6f1;font-size:12px;font-weight:800;cursor:pointer}.bsai-label-workspace aside button:hover,.bsai-label-upload:hover{border-color:#c8ff00;color:#c8ff00}.bsai-label-upload input{display:none}.bsai-label-workspace aside hr{width:100%;border:0;border-top:1px solid #303839}.bsai-label-workspace aside input[type=text]{height:42px;padding:0 12px;border:1px solid #394244;border-radius:10px;background:#111516;color:#fff;font-size:12px}.bsai-label-workspace main{position:relative;display:flex;align-items:center;justify-content:center;padding:54px;background-image:radial-gradient(#293130 1px,transparent 1px);background-size:18px 18px}.bsai-label-canvas-wrap{line-height:0;border:2px solid #c8ff00;box-shadow:0 18px 48px rgba(0,0,0,.45)}.bsai-label-ruler{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px}.bsai-label-ruler b,.bsai-label-height{color:#c8ff00;font-size:13px}.bsai-label-ruler span{color:#9da8a4;font-size:11px}.bsai-label-height{position:absolute;right:25px;top:50%;transform:translateY(-50%) rotate(90deg)}.bsai-label-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 24px;border-top:1px solid #303839;color:#9da8a4;font-size:12px}.bsai-label-dialog>footer button{min-height:42px!important;padding:10px 20px!important;border:1px solid #c8ff00!important;border-radius:10px!important;background:#c8ff00!important;color:#080a0b!important;font-weight:900!important}.bsai-label-open{overflow:hidden!important}@media(max-width:720px){.bsai-label-modal{padding:6px}.bsai-label-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}.bsai-label-dialog>header{padding:16px}.bsai-label-workspace{grid-template-columns:1fr}.bsai-label-workspace aside{border-right:0;border-bottom:1px solid #303839;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.bsai-label-workspace aside>strong,.bsai-label-workspace aside hr,.bsai-label-workspace aside input{grid-column:1/-1}.bsai-label-workspace main{padding:48px 10px 26px;overflow:auto}.bsai-label-canvas-wrap{transform:scale(.72);transform-origin:center;margin:-64px -52px}.bsai-label-dialog>footer{padding:12px 14px;flex-direction:column;align-items:stretch}.bsai-label-dialog>footer button{width:100%}}
/* Mobile Studio dock must remain entirely inside the touch viewport.
 * A later compact-layout rule previously forced eight 48px columns (405px
 * including gaps/padding), clipping the final menu items on 390/360px phones. */
@media (max-width: 980px) {
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu,
	body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu {
		box-sizing: border-box !important;
		z-index: 800 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
		justify-content: stretch !important;
		overflow-x: hidden !important;
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool,
	body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		flex: none !important;
		touch-action: manipulation !important;
		pointer-events: auto !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool > *,
	body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-grid--menu .bigstep-ai-tool > * {
		pointer-events: none !important;
	}
}

/* Final cascade guard for the compact mobile print-side switch. */
@media (max-width: 760px) {
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs {
		box-sizing: border-box !important;
		display: flex !important;
		width: calc(100dvw - 12px) !important;
		max-width: 390px !important;
		gap: 4px !important;
		padding: 4px !important;
		overflow: hidden !important;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button:not([hidden]) {
		box-sizing: border-box !important;
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 52px !important;
		padding: 4px 1px 3px !important;
		gap: 2px !important;
		overflow: hidden !important;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb {
		width: 27px !important;
		height: 27px !important;
		min-width: 27px !important;
		min-height: 27px !important;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		font-size: 0 !important;
		line-height: 1 !important;
		text-align: center !important;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label::after {
		display: block;
		font-size: 9px;
		font-weight: 850;
		line-height: 11px;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="front"] .bigstep-ai-side-tab__label::after { content: "Trước"; }
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="back"] .bigstep-ai-side-tab__label::after { content: "Sau"; }
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="left_sleeve"] .bigstep-ai-side-tab__label::after { content: "T.Trái"; }
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="right_sleeve"] .bigstep-ai-side-tab__label::after { content: "T.Phải"; }
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[data-side="label"] .bigstep-ai-side-tab__label::after { content: "Label"; }

	/* One/two-sided products use compact centered pills. Three or more sides
	 * retain the equal-width distribution that keeps five tabs tidy. */
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs:is([data-visible-count="1"],[data-visible-count="2"]) {
		width: auto !important;
		max-width: calc(100dvw - 12px) !important;
		justify-content: center !important;
	}
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs:is([data-visible-count="1"],[data-visible-count="2"]) button:not([hidden]) {
		flex: 0 0 72px !important;
		width: 72px !important;
		min-width: 72px !important;
		max-width: 72px !important;
	}

	/* Preserve semantic hidden states used while an editing toolbar or an
	 * unsupported product surface is active; the generic flex rule must not
	 * resurrect a hidden container. */
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs[hidden],
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button[hidden] {
		display: none !important;
	}
}

/* Product single / mobile: present the optional sleeve and label positions as
   one compact three-cell control instead of three loose checkbox rows. */
@media (max-width: 767px) {
	body.single-product .bigstep-product-options .bigstep-product-options__sleeves {
		min-width: 0 !important;
	}
	body.single-product .bigstep-product-options .bigstep-product-options__extra-print {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 6px !important;
		border: 1px solid #2b3733 !important;
		border-radius: 12px !important;
		background: #0b100f !important;
	}
	body.single-product .bigstep-product-options .bigstep-product-options__extra-print-card {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 62px !important;
		padding: 7px 3px !important;
		flex-direction: column !important;
		gap: 5px !important;
		border-radius: 9px !important;
		touch-action: manipulation;
	}
	body.single-product .bigstep-product-options .bigstep-product-options__extra-print-check {
		flex-basis: 18px !important;
		width: 18px !important;
		height: 18px !important;
	}
	body.single-product .bigstep-product-options .bigstep-product-options__extra-print-card > span:last-child {
		width: 100% !important;
		justify-content: center !important;
	}
	body.single-product .bigstep-product-options .bigstep-product-options__extra-print-card strong {
		display: block !important;
		max-width: 100% !important;
		color: #dce5e1 !important;
		font-size: 10px !important;
		line-height: 1.15 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: normal !important;
	}
}

/* Keep text-shape samples visually identical between the desktop sidebar and
   the mobile sheet. Mobile used to stretch each card while leaving its preview
   capped at 110px, which made the same warp look much smaller and looser. */
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-fx-card {
	min-height: 68px !important;
}
.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-fx-card :is(svg, img) {
	flex: 0 0 32px !important;
	width: 110px !important;
	height: 32px !important;
	max-width: 110px !important;
	max-height: 32px !important;
	object-fit: contain !important;
}
@media (max-width: 980px) {
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-fx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: min(100%, 315px) !important;
		margin-inline: auto !important;
		gap: 8px !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-fx-card {
		width: 100% !important;
		min-width: 0 !important;
		padding: 10px 8px 8px !important;
	}
}

/* EOF graphite-lime lock for mobile image/drawing overlays. */
body .bigstep-ai-drawing-notice,
body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-image-erase-popup {
	border-color: rgba(200,255,0,.42) !important;
	background: linear-gradient(180deg, rgba(17,23,22,.98), rgba(9,14,13,.98)) !important;
	color: #f4f7f2 !important;
	box-shadow: 0 18px 48px rgba(0,0,0,.52), inset 0 0 0 1px rgba(200,255,0,.04) !important;
}
body .bigstep-ai-drawing-notice__icon { background: rgba(200,255,0,.12) !important; color: #c8ff00 !important; }
body .bigstep-ai-drawing-notice__color span { box-shadow: 0 0 0 2px rgba(200,255,0,.22) !important; }
body .bigstep-ai-drawing-notice__width input,
body .bigstep-ai-image-erase-popup__range input { accent-color: #c8ff00 !important; }
body .bigstep-ai-drawing-notice__brush,
body .bigstep-ai-drawing-notice__clear { border-color: #36413e !important; background: #171d1c !important; color: #e7ede9 !important; box-shadow: none !important; }
body .bigstep-ai-drawing-notice__exit,
body .bigstep-ai-image-erase-popup__exit,
body .bigstep-ai-image-erase-popup__exit:hover { border-color: #c8ff00 !important; background: #c8ff00 !important; color: #080a0b !important; box-shadow: 0 8px 22px rgba(200,255,0,.16) !important; }
@media (max-width: 980px) {
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active {
		border-color: #c8ff00 !important;
		background: linear-gradient(135deg, rgba(200,255,0,.14), rgba(200,255,0,.07)), #151b19 !important;
		color: #eaffaa !important;
		box-shadow: inset 0 0 0 1px rgba(200,255,0,.16), 0 12px 26px rgba(0,0,0,.30) !important;
	}
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active svg { background: rgba(200,255,0,.10) !important; color: #c8ff00 !important; box-shadow: none !important; }
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden])::before,
	body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden])::after { border-color: #303a37 !important; box-shadow: 0 -16px 34px rgba(0,0,0,.48) !important; }
}

/* Final wishlist state lock (also beats the global lime pressed-button rule). */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"]
  [data-tool-panel="library"] .bigstep-ai-artwork-card.is-favorite
  button.bigstep-ai-artwork-favorite[aria-pressed="true"] {
	border-color:#ff4d5e!important;
	background:#111715!important;
	color:#ff4d5e!important;
	-webkit-text-fill-color:#ff4d5e!important;
	box-shadow:0 8px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(255,77,94,.14)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"]
  [data-tool-panel="library"] .bigstep-ai-artwork-card.is-favorite
  button.bigstep-ai-artwork-favorite[aria-pressed="true"] > span[aria-hidden="true"] {
	color:#ff4d5e!important;
	-webkit-text-fill-color:#ff4d5e!important;
}

/* AI Hub final graphite-lime pass: remove legacy indigo/violet copy and cards. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-hero p,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-card small,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-style-step button small {
	color:#aeb7b2!important;
	-webkit-text-fill-color:#aeb7b2!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-search {
	border-color:#30383a!important;
	background:#0d1210!important;
	color:#aeb7b2!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-filters button:not(.is-active) {
	border-color:#30383a!important;
	background:#151b1a!important;
	color:#aeb7b2!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-card {
	border-color:#30383a!important;
	background:#151b1a!important;
	color:#f2f5f1!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-merch-hub-tip {
	margin:16px 2px 8px!important;
	color:#aeb7b2!important;
	-webkit-text-fill-color:#aeb7b2!important;
}


/* Clip painted backgrounds to rounded corners on Safari/iOS and Chromium. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-points-pill,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-font-picker__toggle,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-font-picker__panel {
	overflow:hidden!important;
	background-clip:padding-box!important;
	isolation:isolate;
	-webkit-mask-image:-webkit-radial-gradient(white,black);
}

/* The active font picker is rendered in the floating text bar, outside the text panel. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] button.bigstep-ai-font-picker__toggle[data-font-picker-toggle],
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-font-picker__panel[data-font-picker-panel] {
	overflow:hidden!important;
	background-clip:padding-box!important;
	isolation:isolate!important;
	-webkit-mask-image:-webkit-radial-gradient(white,black)!important;
}

/* Studio information v5.4 — compact tabbed reference. */
.bigstep-ai-info-shell {
	--info-line:#30383a;
	--info-surface:#151b1a;
	--info-muted:#aeb7b2;
	padding:12px;
	color:#f2f5f1;
}
.bigstep-ai-info-head {
	padding:14px;
	border:1px solid rgba(200,255,0,.26);
	border-radius:14px;
	background:radial-gradient(circle at 100% 0,rgba(200,255,0,.12),transparent 46%),#101513;
}
.bigstep-ai-info-head > div { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.bigstep-ai-info-head span { color:#c8ff00;font-size:11px;font-weight:900;letter-spacing:.1em; }
.bigstep-ai-info-head strong { display:grid;place-items:center;min-width:42px;height:26px;padding:0 9px;border-radius:999px;background:#c8ff00;color:#080a0b;font-size:12px; }
.bigstep-ai-info-head p { margin:8px 0 0;color:var(--info-muted);font-size:11px;line-height:1.5; }
.bigstep-ai-info-tabs {
	position:sticky;
	top:0;
	z-index:5;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:5px;
	margin:10px 0 12px;
	padding:5px;
	border:1px solid var(--info-line);
	border-radius:12px;
	background:rgba(13,17,18,.96);
	backdrop-filter:blur(12px);
}
.bigstep-ai-info-tabs button {
	min-width:0;
	min-height:34px;
	padding:7px 5px;
	border:0;
	border-radius:8px;
	background:transparent;
	color:var(--info-muted);
	font-size:10px;
	font-weight:800;
	cursor:pointer;
}
.bigstep-ai-info-tabs button[aria-selected="true"] { background:#c8ff00;color:#080a0b;box-shadow:0 6px 16px rgba(200,255,0,.12); }
.bigstep-ai-info-page[hidden] { display:none!important; }
.bigstep-ai-info-page h3 { margin:0 0 9px;color:#f2f5f1;font-size:12px;letter-spacing:.02em; }
.bigstep-ai-info-feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.bigstep-ai-info-feature {
	dis:flex;
	gap:8px;
	min-width:0;
	padding:10px;
	border:1px solid var(--info-line);
	border-radius:11px;
	background:var(--info-surface);
}
.bigstep-ai-info-feature > span { flex:0 0 auto;color:#c8ff00;font:800 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.bigstep-ai-info-feature strong { display:block;color:#f2f5f1;font-size:10.5px;line-height:1.3; }
.bigstep-ai-info-feature p { margin:4px 0 0;color:var(--info-muted);font-size:9px;line-height:1.45; }
.bigstep-ai-info-shortcut-table,.bigstep-ai-info-credit { overflow:hidden;margin:0;border:1px solid var(--info-line);border-radius:12px;background:var(--info-surface); }
.bigstep-ai-info-shortcut { display:grid;grid-template-columns:minmax(118px,.85fr) minmax(0,1.15fr);align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--info-line); }
.bigstep-ai-info-shortcut:last-child { border-bottom:0; }
.bigstep-ai-info-shortcut kbd { width:max-content;max-width:100%;padding:4px 7px;border:1px solid #414b48;border-bottom-width:2px;border-radius:6px;background:#0c100f;color:#c8ff00;font:800 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:normal; }
.bigstep-ai-info-shortcut span { color:#dce3df;font-size:9.5px;line-height:1.35; }
.bigstep-ai-info-note { margin:9px 2px 0;color:var(--info-muted);font-size:9px;line-height:1.45; }
.bigstep-ai-info-credit > div { display:grid;grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr);gap:10px;padding:10px;border-bottom:1px solid var(--info-line); }
.bigstep-ai-info-credit > div:last-child { border-bottom:0; }
.bigstep-ai-info-credit dt { color:var(--info-muted);font-size:9px;font-weight:700; }
.bigstep-ai-info-credit dd { margin:0;color:#f2f5f1;font-size:9.5px;font-weight:700;line-height:1.4; }
.bigstep-ai-info-contact-title { display:block;margin:13px 0 7px;color:#f2f5f1;font-size:11px; }
.bigstep-ai-info-links { display:grid;gap:6px; }
.bigstep-ai-info-links a { display:flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid var(--info-line);border-radius:9px;background:var(--info-surface);color:#dce3df;text-decoration:none;font-size:9.5px;font-weight:750; }
.bigstep-ai-info-links a:hover { border-color:rgba(200,255,0,.55);color:#c8ff00; }
@media (max-width:520px) {
	.bigstep-ai-info-shell { padding:10px; }
	.bigstep-ai-info-feature-grid { grid-template-columns:1fr; }
	.bigstep-ai-info-feature { padding:9px 10px; }
	.bigstep-ai-info-shortcut { grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr); }
}

/* AI Remix final color lock. The detail panel is rendered dynamically, so
 * target its data hooks directly and beat legacy violet utility rules. */
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-detail {
	--bs-remix-accent:#c8ff00!important;
	--bs-remix-accent-2:#a8d600!important;
	--bs-remix-text:#f2f5f1!important;
	--bs-remix-muted:#aeb7b2!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-detail :is(
	.bigstep-ai-remix-head-text span,
	.bigstep-ai-remix-panel-title p,
	.bigstep-ai-remix-card-desc,
	.bigstep-ai-remix-upload-text em,
	.bigstep-ai-remix-limit-note
) {
	color:#aeb7b2!important;
	-webkit-text-fill-color:#aeb7b2!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	.bigstep-ai-remix-hero-meta button[data-remix-change-source] {
	border:1px solid #c8ff00!important;
	background:#c8ff00!important;
	background-image:none!important;
	color:#080a0b!important;
	-webkit-text-fill-color:#080a0b!important;
	text-shadow:none!important;
	box-shadow:0 7px 18px rgba(200,255,0,.18)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	.bigstep-ai-remix-hero-meta button[data-remix-change-source]:hover {
	border-color:#d4ff3d!important;
	background:#d4ff3d!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	button.bigstep-ai-remix-generate[data-remix-generate],
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	button.bigstep-ai-remix-generate[data-remix-generate]:disabled {
	border:1px solid #c8ff00!important;
	background:#c8ff00!important;
	background-color:#c8ff00!important;
	background-image:none!important;
	color:#080a0b!important;
	-webkit-text-fill-color:#080a0b!important;
	text-shadow:none!important;
	box-shadow:0 8px 22px rgba(200,255,0,.16)!important;
	opacity:1!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	button.bigstep-ai-remix-generate[data-remix-generate]:disabled {
	cursor:not-allowed!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"]
	button.bigstep-ai-remix-generate[data-remix-generate]:not(:disabled):hover {
	border-color:#d4ff3d!important;
	background:#d4ff3d!important;
	background-color:#d4ff3d!important;
}

/* AI tab rail: keep touch scrolling without exposing a native horizontal
 * scrollbar as a white line at the top of the panel. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel[data-tool-panel="ai"] {
	overflow-x:hidden!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-ai-tabs] {
	max-width:100%!important;
	scrollbar-width:none!important;
	-ms-overflow-style:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-ai-tabs]::-webkit-scrollbar {
	display:none!important;
	width:0!important;
	height:0!important;
}

/* The panel grip belongs to the touch bottom-sheet only. A narrow desktop
 * window still matches the responsive breakpoint, so distinguish by pointer. */
@media (hover:hover) and (pointer:fine) {
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel::before,
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before {
		content:none!important;
		display:none!important;
	}
}
@media (hover:none) and (pointer:coarse) and (max-width:980px) {
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel::before,
	html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before {
		content:""!important;
		display:block!important;
	}
}

/* Mobile bottom-sheet grip: use the real drag button as the single grip.
 * It must stay pinned to the panel's top edge while the panel body scrolls.
 * The legacy panel ::before grip is disabled to avoid a drifting duplicate. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-sheet-handle {
        display:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel::before,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel::before {
        content:none!important;
        display:none!important;
}
@media (max-width:980px) {
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel {
                padding-top:10px!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-sheet-handle {
                position:sticky!important;
                top:0!important;
                z-index:40!important;
                display:block!important;
                width:100%!important;
                min-width:0!important;
                max-width:none!important;
                height:20px!important;
                min-height:20px!important;
                margin:-20px 0 0!important;
                padding:0!important;
                border:0!important;
                border-radius:0!important;
                background:transparent!important;
                box-shadow:none!important;
                opacity:1!important;
                cursor:ns-resize!important;
                touch-action:none!important;
                -webkit-tap-highlight-color:transparent!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-panel.is-mobile-sheet-dragging,
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel.is-mobile-sheet-dragging {
                animation:none!important;
                transition:none!important;
                user-select:none!important;
                -webkit-user-select:none!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-sheet-handle::before {
                content:""!important;
                position:absolute!important;
                top:5px!important;
                left:50%!important;
                width:44px!important;
                height:4px!important;
                border-radius:999px!important;
                background:rgba(130,145,141,.72)!important;
                transform:translateX(-50%)!important;
                box-shadow:0 1px 0 rgba(255,255,255,.06)!important;
                opacity:1!important;
                pointer-events:none!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-mobile-sheet-handle {
                width:100%!important;
                height:16px!important;
                min-height:16px!important;
                margin:-16px 0 0!important;
                border-radius:0!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-editor-sidebar.bigstep-ai-tool-panel,
        html body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-tool-panel {
                padding-top:8px!important;
        }
        html body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor .bigstep-ai-mobile-sheet-handle::before {
                top:4px!important;
                width:36px!important;
                height:4px!important;
        }
}
@media (min-width:981px) {
        html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-mobile-sheet-handle {
                display:none!important;
        }
}

/* Desktop Studio tool rail v2: lift it clearly above the dotted canvas without
 * introducing a heavy neon glow. */
@media (min-width:981px) {
        html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu {
                border:1px solid #4a5557!important;
                border-radius:18px!important;
                background:
                        linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%),
                        linear-gradient(180deg,#171c1d 0%,#111516 100%)!important;
                box-shadow:
                        0 22px 55px rgba(0,0,0,.58),
                        0 6px 18px rgba(0,0,0,.34),
                        inset 0 1px 0 rgba(255,255,255,.075)!important;
        }
        html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool {
                color:#d7ddda!important;
                transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
        }
        html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool:is(:hover,:focus-visible) {
                border-color:#52605d!important;
                background:#202627!important;
                color:#fff!important;
                transform:translateY(-1px)!important;
        }
        html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-tool-grid--menu .bigstep-ai-tool.is-active {
                border-color:rgba(200,255,0,.48)!important;
                background:linear-gradient(135deg,rgba(200,255,0,.16),rgba(200,255,0,.065))!important;
                color:#e7ff91!important;
                box-shadow:inset 3px 0 0 #c8ff00,0 7px 16px rgba(0,0,0,.22)!important;
        }
}

/* Final mobile text-sheet grip lock: keep this after every legacy text-bar
 * rule so the real drag control cannot be repainted or clipped. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-sheet-handle {
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    order:-999!important;
    grid-column:1 / -1!important;
    display:block!important;
    width:100%!important;
    height:16px!important;
    min-height:16px!important;
    margin:-4px 0 -4px!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    opacity:1!important;
    touch-action:none!important;
    cursor:ns-resize!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-sheet-handle::before {
    content:""!important;
    position:absolute!important;
    top:5px!important;
    left:50%!important;
    display:block!important;
    width:40px!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(130,145,141,.9)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.06)!important;
    transform:translateX(-50%)!important;
    pointer-events:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not(:has(> .bigstep-ai-text-sheet-handle))::before {
    content:""!important;
    display:block!important;
    grid-column:1 / -1!important;
    width:40px!important;
    height:4px!important;
    margin:1px auto 3px!important;
    border-radius:999px!important;
    background:rgba(130,145,141,.9)!important;
  }
}

/* AI Typo templates live inside the Text panel, so the AI-panel graphite
 * overrides do not reach them. Lock the entire template flow to graphite/lime. */
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-card {
  border-color:#34403d!important;
  background:linear-gradient(180deg,#171d1c,#101514)!important;
  color:#eef3f0!important;
  box-shadow:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-card:hover,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-card.is-active {
  border-color:rgba(200,255,0,.58)!important;
  background:radial-gradient(circle at 50% -18%,rgba(200,255,0,.11),transparent 55%),linear-gradient(180deg,#1b221f,#111614)!important;
  box-shadow:0 0 0 1px rgba(200,255,0,.08),0 12px 28px rgba(0,0,0,.28)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-card strong,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-title strong {
  color:#f2f6f3!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-preview {
  border-color:#34403d!important;
  background:#0c1110!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-style-preview em,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-title > span {
  background:#c8ff00!important;
  background-image:none!important;
  color:#090c0b!important;
  text-shadow:none!important;
  box-shadow:0 5px 14px rgba(200,255,0,.14)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-back {
  border-color:#34403d!important;
  background:#171d1c!important;
  background-image:none!important;
  color:#e7ede9!important;
  box-shadow:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-back:hover,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-back:focus-visible {
  border-color:rgba(200,255,0,.5)!important;
  background:#1b241b!important;
  color:#dfff69!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-panel-title p,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-varsity-field > span {
  color:#b7c1bd!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-varsity-field input,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom textarea {
  border-color:#34403d!important;
  background:#171d1c!important;
  color:#f1f5f2!important;
  box-shadow:none!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-varsity-field input::placeholder,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom textarea::placeholder {
  color:#77827e!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-varsity-field input:focus,
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom textarea:focus {
  border-color:#c8ff00!important;
  outline:2px solid rgba(200,255,0,.13)!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom {
  border-color:#34403d!important;
  background:#111715!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom summary {
  color:#dbe3df!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-typo-custom summary::after {
  color:#c8ff00!important;
}
body .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="text"] .bigstep-ai-varsity-generate {
  border-color:#c8ff00!important;
  background:#c8ff00!important;
  background-image:none!important;
  color:#080b0a!important;
  box-shadow:0 8px 20px rgba(200,255,0,.12)!important;
}

/* Print-side thumbnails: lime belongs to the selected frame, while the sleeve
 * letters and label glyph stay white in both normal and active states. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb--sleeve,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb--label,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button.is-active .bigstep-ai-side-tab__thumb--sleeve,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button.is-active .bigstep-ai-side-tab__thumb--label {
  color:#fff!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb--label svg {
  color:#fff!important;
  fill:currentColor!important;
}

/* Group isolation feedback in the Layers tree. */
html body .bigstep-ai-app[data-editor-mode="editor"].is-group-isolation .bigstep-ai-layer-folder.is-editing {
  border-color:rgba(200,255,0,.52)!important;
  background:rgba(200,255,0,.08)!important;
  color:#eaffaa!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"].is-group-isolation .bigstep-ai-layer-row.is-group-editing {
  box-shadow:inset 2px 0 0 rgba(200,255,0,.38)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-layer-row.is-group-editing.is-active {
  border-color:#c8ff00!important;
  background:rgba(200,255,0,.12)!important;
}

/* Final mobile grip geometry — overlays the sheet edge without a spacer row. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) > .bigstep-ai-image-sheet-handle,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) > .bigstep-ai-text-sheet-handle {
    position:absolute!important;top:0!important;left:0!important;z-index:60!important;
    display:block!important;width:100%!important;height:28px!important;min-height:28px!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;background-image:none!important;box-shadow:none!important;touch-action:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar] > .bigstep-ai-image-sheet-handle::before,
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup] > .bigstep-ai-text-sheet-handle::before {top:7px!important;width:42px!important;height:4px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]) {position:fixed!important;padding-top:18px!important}
}
@media (max-width:760px) {
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar:not([hidden]) {
    position:fixed!important;z-index:790!important;right:6px!important;left:6px!important;
    bottom:calc(var(--toolbar-m,68px) + env(safe-area-inset-bottom,0px))!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:auto!important;max-width:none!important;height:276px!important;min-height:0!important;
    margin:0!important;padding:24px 10px 10px!important;gap:10px!important;
    overflow:hidden!important;border-radius:20px 20px 0 0!important;transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar .bigstep-ai-label-template-head {width:auto!important;flex:0 0 auto!important}
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar .bigstep-ai-label-template-grid {width:auto!important;min-height:0!important;flex:1 1 auto!important}
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar.is-label-sheet-collapsed {height:34px!important;min-height:34px!important;padding:0!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-head,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-grid {display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-sheet-handle {top:0!important;height:30px!important;min-height:30px!important}
}

/* Final v3 mobile sheet presentation. */
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]),html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]){padding-top:32px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]>.bigstep-ai-image-sheet-handle::before,html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]>.bigstep-ai-text-sheet-handle::before{top:10px!important;background:#7f8c87!important}
}
@media (max-width:760px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area>.bigstep-ai-label-template-bar .bigstep-ai-label-template-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start!important;gap:10px!important;padding:0 1px 10px!important}
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-grid>button{display:flex!important;grid-template-columns:none!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;min-height:126px!important;padding:8px 5px 7px!important;border:1px solid #313c38!important;border-radius:13px!important;background:#111614!important;box-shadow:none!important;text-align:center!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button:is(:hover,:focus-visible,.is-active){border-color:#c8ff00!important;background:#172016!important;transform:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i{width:62px!important;height:82px!important;min-height:82px!important;margin:0 auto!important;border:1px solid #48534f!important;border-radius:7px!important;background:#080c0b!important;color:#f3f6f2!important;box-shadow:0 7px 16px rgba(0,0,0,.28)!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="y2k"]{border-color:#66716d!important;color:#f3f6f2!important;font-size:14px!important;text-shadow:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="utility"]{align-items:flex-start!important;padding:7px!important;color:#f3f6f2!important;font-size:23px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="tag"]{color:#f3f6f2!important;font-size:11px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview="tag"]::after{width:72%!important;height:1px!important;background:#c8ff00!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span{display:block!important;width:100%!important;color:#e9eeea!important;font-size:9px!important;line-height:1.2!important;text-align:center!important;white-space:normal!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>span small{display:none!important}

  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="varsity"]{font-family:Georgia,serif!important;font-size:24px!important;color:#f3f6f2!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="tech"]{align-items:flex-start!important;padding:8px!important;border-radius:2px!important;color:#c8ff00!important;font-size:15px!important;letter-spacing:.06em!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="woven"]{border-width:2px!important;border-radius:0!important;color:#c8ff00!important;font-family:Georgia,serif!important;font-size:34px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="stamp"]{width:72px!important;height:72px!important;min-height:72px!important;margin-top:5px!important;border:2px solid #c8ff00!important;border-radius:50%!important;font-size:28px!important}

  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-head,
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-label-template-bar.is-label-sheet-collapsed .bigstep-ai-label-template-grid{display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="utility"]{align-items:center!important;justify-content:center!important;padding:7px!important;font-size:24px!important;text-align:center!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="utility"] small{position:static!important;right:auto!important;margin-top:7px!important;color:#aeb8b2!important;text-align:center!important;font-size:5px!important;line-height:1.4!important}
}

/* Final label thumbnail normalization — must remain after legacy overrides. */
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview]{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;padding:7px!important;
  font-family:Montserrat,Arial,sans-serif!important;font-style:normal!important;
  font-weight:900!important;line-height:1.05!important;text-align:center!important;transform:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-label-template-grid>button>i[data-label-preview] small{
  position:static!important;display:block!important;max-width:100%!important;margin:7px 0 0!important;
  color:#c8d0cb!important;font-family:Montserrat,Arial,sans-serif!important;font-size:7px!important;
  font-weight:800!important;line-height:1.25!important;letter-spacing:.02em!important;
  text-align:center!important;white-space:normal!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="varsity"],
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="woven"]{font-family:Montserrat,Arial,sans-serif!important}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="utility"],
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="tech"]{align-items:center!important;justify-content:center!important;text-align:center!important}
html body .bigstep-ai-app[data-editor-mode="editor"] [data-label-preview="stamp"]{
  width:62px!important;height:82px!important;min-height:82px!important;margin:0 auto!important;border-radius:50%!important;
}

/* Product picker — definitive graphite/lime theme.
 * Keep this at EOF: frontend-next.css is not enqueued in production and the
 * legacy picker rules above still reference the old indigo design tokens. */
html body.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker {
  border:1px solid #2f3936!important;
  background:#0b100f!important;
  background-image:none!important;
  color:#eef3f0!important;
  box-shadow:10px 0 34px rgba(0,0,0,.48)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head {
  border-color:#2f3936!important;
  background:#111716!important;
  background-image:none!important;
  color:#f3f6f4!important;
  box-shadow:0 1px 0 rgba(255,255,255,.02)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button.bigstep-ai-product-card {
  border:1px solid transparent!important;
  background:#111715!important;
  background-image:none!important;
  color:#edf2ef!important;
  box-shadow:0 1px 0 rgba(255,255,255,.018)!important;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card:is(:hover,:focus-within,.is-active) {
  border-color:rgba(200,255,0,.48)!important;
  background:#172016!important;
  background-image:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card:hover {
  transform:translateX(2px)!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta strong {
  color:#f2f5f3!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta em,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta em strong {
  color:#c8ff00!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-detail-chip,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-detail-chip:visited {
  min-height:26px!important;
  padding:0 10px!important;
  border:1px solid #3a4642!important;
  background:#171d1c!important;
  background-image:none!important;
  color:#dbe3df!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-detail-chip:is(:hover,:focus-visible) {
  border-color:#c8ff00!important;
  background:#c8ff00!important;
  background-image:none!important;
  color:#080b0a!important;
  outline:none!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card.is-active::after {
  background:#c8ff00!important;
  color:#080b0a!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker [data-product-picker-close],
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button[data-product-picker-close] {
  border-color:#34403c!important;
  background:#171d1c!important;
  background-image:none!important;
  color:#aeb9b4!important;
}
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker [data-product-picker-close]:hover,
html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button[data-product-picker-close]:hover {
  border-color:#c8ff00!important;
  background:#1a211f!important;
  color:#c8ff00!important;
}

/* Product picker uses the same real mobile bottom-sheet language as image,
 * text and label panels. Desktop keeps its efficient vertical dock. */
.bigstep-ai-product-picker-handle {
  display:none;
}
@media (max-width:980px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker {
    z-index:795!important;
    top:auto!important;
    right:6px!important;
    bottom:calc(var(--toolbar-m,68px) + env(safe-area-inset-bottom,0px))!important;
    left:6px!important;
    display:flex!important;
    flex-direction:column!important;
    width:auto!important;
    height:min(68dvh,680px)!important;
    max-height:calc(100dvh - var(--topbar-h,64px) - var(--toolbar-m,68px) - 14px)!important;
    padding:30px 10px 10px!important;
    overflow:hidden!important;
    border:1px solid #34403c!important;
    border-radius:22px 22px 0 0!important;
    box-shadow:0 -16px 44px rgba(0,0,0,.5)!important;
    transition:transform .18s cubic-bezier(.2,.8,.2,1)!important;
    will-change:transform;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker[hidden] {
    display:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker.is-product-picker-dragging {
    transition:none!important;
    user-select:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker-handle {
    position:absolute!important;
    top:0!important;
    left:0!important;
    z-index:4!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:9px 0 0!important;
    border:0!important;
    border-radius:22px 22px 0 0!important;
    background:transparent!important;
    box-shadow:none!important;
    touch-action:none!important;
    cursor:grab!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker-handle:active {
    cursor:grabbing!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker-handle > span {
    display:block!important;
    width:44px!important;
    height:4px!important;
    border-radius:999px!important;
    background:#7f8c87!important;
    pointer-events:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head {
    flex:0 0 auto!important;
    min-height:48px!important;
    padding:7px 8px 10px!important;
    border-radius:12px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card-grid {
    flex:1 1 auto!important;
    min-height:0!important;
    margin-top:8px!important;
    padding:0 1px 8px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* Label palette desktop placement v2: always above the side switcher and,
 * until the user drags it, parked to the left of the centered mockup. */
@media (min-width:981px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area>.bigstep-ai-label-template-bar.bigstep-ai-label-template-bar:not([hidden]) {
    z-index:1200!important;
  }
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area>.bigstep-ai-label-template-bar.bigstep-ai-label-template-bar:not([hidden]):not(.is-custom-position) {
    top:74px!important;
    right:auto!important;
    bottom:auto!important;
    left:max(18px,calc(50% - 460px))!important;
  }
}
@media (min-width:981px) and (max-width:1599px) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app.bigstep-ai-app[data-editor-mode="editor"].is-label-side-active .bigstep-ai-editor-canvas-area>.bigstep-ai-label-template-bar.bigstep-ai-label-template-bar:not([hidden]):not(.is-custom-position) {
    left:max(12px,calc(50% - 600px))!important;
  }
}

/* Mobile label sheet: once a template is inserted the collapsed grip remains
 * above the bottom toolbar. Lift the print-side switch enough that its upper
 * edge and tap target are never covered by that grip. */
@media (max-width:760px) {
  html body .bigstep-ai-app[data-editor-mode="editor"].is-label-side-active:has(.bigstep-ai-label-template-bar.is-label-sheet-collapsed:not([hidden])) .bigstep-ai-side-tabs {
    position:relative!important;
    top:-8px!important;
    z-index:795!important;
  }
}

/* Tablet portrait final layout: stable stage, icon-only history and right rail. */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"],
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"] {
    display:inline-grid!important;place-items:center!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;gap:0!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"]>span,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"]>span {display:none!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"]>svg,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"]>svg {display:block!important;width:18px!important;height:18px!important;margin:0!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {padding-right:96px!important;min-width:0!important;overflow:hidden!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-scroll {min-width:0!important;min-height:0!important;width:100%!important;padding:8px 0!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area>.bigstep-ai-side-tabs,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs.bigstep-ai-side-tabs--bottom {
    position:fixed!important;top:128px!important;right:10px!important;bottom:auto!important;left:auto!important;z-index:74!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:78px!important;max-width:78px!important;margin:0!important;padding:5px!important;gap:5px!important;border:1px solid var(--bs-border)!important;border-radius:14px!important;background:rgba(13,19,18,.95)!important;box-shadow:0 10px 28px rgba(0,0,0,.38)!important;transform:none!important;backdrop-filter:blur(10px)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs>button {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:66px!important;min-width:66px!important;height:58px!important;min-height:58px!important;margin:0!important;padding:4px!important;gap:3px!important;border-radius:10px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button.is-active .bigstep-ai-side-tab__thumb {width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;border-radius:7px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label {display:block!important;width:100%!important;overflow:hidden!important;font-size:9px!important;line-height:10px!important;text-align:center!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html body .bigstep-studio-promos {display:none!important}
}
@media (min-width:768px) and (max-width:980px) and (orientation:portrait) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-main {position:relative!important;display:block!important;width:100dvw!important;max-width:100dvw!important;min-width:0!important;height:calc(100dvh - var(--topbar-h,56px))!important;overflow:hidden!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {position:absolute!important;inset:0 0 var(--toolbar-m,68px) 0!important;grid-column:1!important;grid-row:1!important;display:flex!important;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;box-sizing:border-box!important;transform:none!important}
}
@media (min-width:981px) and (max-width:1180px) and (orientation:portrait) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area {padding:64px 96px 104px 12px!important}
  html body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-canvas-zoomed-in) .bigstep-ai-canvas-wrap {width:min(var(--bigstep-editor-size,600px),calc(100vw - var(--sidebar-w,64px) - var(--panel-w,300px) - 132px),calc(100dvh - var(--topbar-h,60px) - 184px))!important;max-width:calc(100vw - var(--sidebar-w,64px) - var(--panel-w,300px) - 132px)!important;min-width:0!important;margin:auto!important}
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls {right:92px!important}
}

/* Tablet landscape history controls: icon-only across common iPad/Android sizes. */
@media (min-width: 768px) and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"],
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"] {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"] > span,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"] > span {
    display: none !important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="undo"] > svg,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-canvas-actions .bigstep-ai-top-button[data-tool="redo"] > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
  }
}
/* Mobile text gradient controls: keep both colors, direction and preset in one compact row. */
.bigstep-ai-text-gradient__controls[hidden] { display: none !important; }
.bigstep-ai-text-gradient__controls {
  display: grid;
  grid-template-columns: 30px 12px 30px 44px minmax(96px, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bigstep-ai-text-gradient__controls input[type="color"] {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 2px !important;
  border: 1px solid var(--bs-border-2, #3b4648) !important;
  border-radius: 8px !important;
  background: var(--bs-surface-3, #171c1d) !important;
}
@media (max-width: 980px) {
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-gradient {
    width: 100%;
    min-width: 0;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-gradient__controls {
    width: 100%;
    grid-template-columns: 34px 12px 34px 42px minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-gradient__controls input[type="color"] {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-gradient-preset-select {
    min-width: 0 !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-gradient-preset-select > span {
    display: none !important;
  }
  .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-gradient-preset-select select {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

/* 2026-10-04 product panel desktop correction — must remain last. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch-grid--color {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.bigstep-ai-swatch--color-thumb.is-active {
  border-color: #21d4c2 !important;
  background: rgba(33,212,194,.11) !important;
  background-image: none !important;
  color: #bafff8 !important;
  box-shadow: inset 0 0 0 1px rgba(33,212,194,.14) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-head { display:none !important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  display:grid !important;
  grid-template-columns:minmax(108px,1fr) minmax(128px,1.12fr) !important;
  gap:9px 10px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:10px !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-variant {
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-control {
  display:grid !important;
  grid-template-columns:30px minmax(42px,1fr) 30px !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  display:grid !important;
  gap:3px !important;
  min-width:0 !important;
  padding-top:8px !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-head {
  display:grid !important;
  grid-template-columns:minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-row {
  grid-template-columns:minmax(96px,1.05fr) minmax(116px,1.15fr) minmax(72px,.75fr) minmax(82px,.85fr) !important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"].is-panel-wide [data-tool-panel="product"] .bigstep-ai-size-qty-money {
  padding-top:0 !important;
  border-top:0 !important;
}


/* Product panel teal state — outrank the graphite/lime theme layer. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.is-active,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-radio-row label:has(input:checked),
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active {
  border-color:#21d4c2!important;
  background:rgba(33,212,194,.11)!important;
  background-image:none!important;
  color:#bafff8!important;
  -webkit-text-fill-color:#bafff8!important;
  box-shadow:inset 0 0 0 1px rgba(33,212,194,.14)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.is-active::before,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active::before {
  border-color:#21d4c2!important;
  color:#21d4c2!important;
  background:rgba(33,212,194,.12)!important;
}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch.is-active::after,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-swatch--method-card.is-active::after {
  color:#21d4c2!important;
  -webkit-text-fill-color:#21d4c2!important;
}

/* Keep the compact AI badge legible in both dark and active lime tab states. */
.bigstep-ai-app .bigstep-ai-tool-panel[data-tool-panel="text"] .bigstep-ai-text-tabs .bigstep-ai-text-tab-ai em {
  background:#111711!important;
  color:#c6ff00!important;
  -webkit-text-fill-color:#c6ff00!important;
}

/* Draft share CTA and Library catalog controls: restore intentional spacing
   after the graphite/lime button reset. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share {
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 18px!important;
  align-items:center!important;
  column-gap:10px!important;
  width:100%!important;
  min-height:58px!important;
  padding:9px 12px!important;
  border:1px solid rgba(198,255,0,.38)!important;
  border-radius:12px!important;
  background:rgba(198,255,0,.06)!important;
  color:#f4f7f4!important;
  text-align:left!important;
  box-sizing:border-box!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share-icon {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  background:#c6ff00!important;
  color:#101510!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share-copy {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  min-width:0!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share-copy strong {
  color:#f4f7f4!important;
  font-size:12px!important;
  line-height:1.25!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share-copy small {
  color:#9aa59e!important;
  font-size:10px!important;
  line-height:1.3!important;
  white-space:normal!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-drafts-share-arrow {
  display:block!important;
  justify-self:end!important;
  flex:none!important;
}

html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] :is(.bigstep-ai-template-floating-actions,.bigstep-ai-artwork-floating-actions) button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:38px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] :is(.bigstep-ai-template-floating-actions,.bigstep-ai-artwork-floating-actions) button span[aria-hidden="true"] {
  margin:0!important;
  flex:0 0 auto!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] :is([data-template-scroll-top],[data-artwork-scroll-top]) {
  padding:0!important;
  width:38px!important;
  min-width:38px!important;
}

/* Product switches and price card use the calmer teal product accent. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option:has(input:checked) {
  border-color:rgba(33,212,194,.72)!important;
  background:rgba(33,212,194,.075)!important;
  color:#dffffb!important;
  box-shadow:inset 0 0 0 1px rgba(33,212,194,.08)!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option:has(input:checked) :is(strong,small) {
  color:#dffffb!important;
  -webkit-text-fill-color:#dffffb!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-extra-print-option input:checked + .bigstep-ai-extra-print-option__check {
  border-color:#21d4c2!important;
  background:#21d4c2!important;
}

html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card {
  border-color:rgba(33,212,194,.28)!important;
  background:linear-gradient(180deg,#111918 0%,#0d1312 100%)!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-head {
  border-bottom-color:rgba(33,212,194,.18)!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-head strong {
  color:#75eee3!important;
  -webkit-text-fill-color:#75eee3!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > span strong {
  color:#eef5f2!important;
  -webkit-text-fill-color:#eef5f2!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-row > b {
  color:#75eee3!important;
  -webkit-text-fill-color:#75eee3!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-subtotal {
  border-color:rgba(33,212,194,.48)!important;
  background:rgba(33,212,194,.09)!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-summary > div.is-subtotal > :is(span,b) {
  color:#75eee3!important;
  -webkit-text-fill-color:#75eee3!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="product"] .bigstep-ai-breakdown-card .bigstep-ai-breakdown-note {
  border-color:rgba(33,212,194,.22)!important;
  background:rgba(33,212,194,.045)!important;
  color:#9baba6!important;
}

.bigstep-ai-app .bigstep-ai-ai-color-hint > span[aria-hidden="true"] {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#c6ff00!important;
}
.bigstep-ai-app .bigstep-ai-ai-color-hint > span[aria-hidden="true"] svg {
  display:block!important;
}

/* AI Remix quota note — remove the remaining legacy blue/violet surface. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-limit-note {
  border-color:rgba(33,212,194,.30)!important;
  background:rgba(33,212,194,.055)!important;
  color:#9baba6!important;
  -webkit-text-fill-color:#9baba6!important;
}
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] .bigstep-ai-remix-limit-note strong {
  color:#75eee3!important;
  -webkit-text-fill-color:#75eee3!important;
}

/* Info panel readability refresh. */
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-head span { font-size:13px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-head p { font-size:13px!important;line-height:1.55!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-tabs button { min-height:38px!important;font-size:12px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-page h3 { font-size:14px!important;margin-bottom:11px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-feature { display:flex!important;padding:12px!important;gap:9px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-feature > span { font-size:10px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-feature strong { font-size:12.5px!important;line-height:1.35!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-feature p { font-size:11px!important;line-height:1.5!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-shortcut { padding:11px 12px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-shortcut kbd { font-size:10.5px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-shortcut span,
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-note { font-size:11.5px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-credit > div { padding:12px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-credit dt { font-size:11px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-credit dd { font-size:12px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-contact-title { font-size:13px!important; }
html body.bigstep-ai-standalone-editor .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="info"] .bigstep-ai-info-links a { min-height:40px!important;font-size:11.5px!important; }

/* Portrait mobile/tablet: all enabled print sides stay inside the viewport. */
@media (max-width:1180px) and (orientation:portrait) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs:not([hidden]) {
    max-height:calc(100dvh - var(--topbar-h,56px) - var(--toolbar-m,68px) - 28px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs:not([hidden])::-webkit-scrollbar {
    display:none!important;
    width:0!important;
    height:0!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs:not([hidden]) > button:not([hidden]) {
    flex-shrink:0!important;
  }
}

/* Tablet canvas: compact face selector below the top action row. */
@media(min-width:600px) and (max-width:1180px){
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs > button[hidden]{display:none!important}
}
@media(min-width:981px) and (max-width:1180px){
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls{position:absolute!important;top:auto!important;right:auto!important;left:50%!important;bottom:20px!important;transform:translateX(-50%)!important;display:flex!important;flex-direction:row!important;width:auto!important;height:44px!important;padding:5px 8px!important;gap:8px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls input{writing-mode:horizontal-tb!important;direction:ltr!important;width:90px!important;height:20px!important;transform:none!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-zoom-controls [data-zoom-label]{writing-mode:horizontal-tb!important;transform:none!important}
}
@media(min-width:600px) and (max-width:1180px){
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area > .bigstep-ai-side-tabs:not([hidden]){position:fixed!important;top:124px!important;right:8px!important;bottom:auto!important;left:auto!important;width:60px!important;max-width:60px!important;max-height:calc(100dvh - 220px)!important;display:flex!important;flex-direction:column!important;gap:4px!important;padding:4px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;transform:none!important;border-radius:12px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs > button:not([hidden]){box-sizing:border-box!important;flex:0 0 46px!important;width:50px!important;min-width:50px!important;height:46px!important;min-height:46px!important;padding:3px!important;gap:2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border-radius:8px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs button .bigstep-ai-side-tab__thumb{width:26px!important;min-width:26px!important;height:26px!important;min-height:26px!important;border-radius:5px!important;font-size:15px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__label{font-size:8px!important;line-height:10px!important;white-space:nowrap!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-side-tabs .bigstep-ai-side-tab__thumb svg{width:17px!important;height:17px!important}
}

/* Tablet landscape: the promo occupies the upper-right stage. Keep the
 * print-side rail immediately below it instead of covering the banner. */
@media (min-width:768px) and (max-width:1180px) and (orientation:landscape) {
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-editor-canvas-area > .bigstep-ai-side-tabs:not([hidden]) {
    top:326px!important;
    max-height:calc(100dvh - 342px)!important;
  }
}

/* Studio menu audit: preserve touch targets and complete submenu labels. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-panel-utility-row{display:flex!important;align-items:stretch!important;flex-wrap:wrap!important;gap:8px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-panel-utility-row .bigstep-ai-history-chip{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:38px!important;height:auto!important;padding:9px 12px!important;line-height:18px!important;flex-shrink:0!important;box-sizing:border-box!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-panel-utility-row .bigstep-ai-points-pill{min-height:38px!important;box-sizing:border-box!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel] :is([data-clear-upload-history],[data-clear-ai-history]){min-height:34px!important;padding:7px 10px!important;line-height:18px!important;white-space:normal!important;flex-shrink:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-element-section="draw"] :is([data-draw-clear],[data-draw-clear-all]){display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;height:auto!important;padding:9px 12px!important;line-height:18px!important;white-space:normal!important;box-sizing:border-box!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-mode]{height:auto!important;min-height:72px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="ai"] [data-mode] :is(strong,small){white-space:normal!important;text-overflow:clip!important;overflow:visible!important;line-height:1.4!important;overflow-wrap:break-word!important}

/* Draft card layout: explicit size choices and four actions. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-item{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:12px!important;padding:12px!important;align-items:start!important;min-width:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-meta{min-width:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-name{white-space:normal!important;overflow-wrap:anywhere!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-order-option{grid-column:1/-1!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important;font-size:12px!important;color:#b8c1bc!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-size-options{display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] [data-draft-size-choice]{appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:auto!important;min-width:40px!important;height:36px!important;margin:0!important;padding:8px 12px!important;border:1px solid #3b4541!important;border-radius:8px!important;background:#171d1b!important;color:#e7ede9!important;-webkit-text-fill-color:#e7ede9!important;font:inherit!important;line-height:18px!important;box-shadow:none!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] [data-draft-size-choice][aria-pressed="true"]{border-color:#c8ff00!important;background:#c8ff00!important;color:#111610!important;-webkit-text-fill-color:#111610!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-actions{display:grid!important;grid-column:1/-1!important;grid-template-columns:minmax(0,1fr) 36px 36px!important;gap:8px!important;width:100%!important;min-width:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-actions button{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:100%!important;min-width:0!important;height:auto!important;min-height:36px!important;margin:0!important;padding:8px!important;border-radius:8px!important;font-size:12px!important;line-height:1.4!important;white-space:normal!important;color:#dce4df!important;-webkit-text-fill-color:#dce4df!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-actions button svg{flex-shrink:0!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-actions [data-draft-apply-product]{grid-column:1/-1!important;background:#1b2320!important;border:1px solid #3b4541!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-draft-actions .bigstep-ai-draft-cart{color:#111610!important;-webkit-text-fill-color:#111610!important;background:#c8ff00!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-drafts-save-actions{display:flex!important;flex-direction:column!important;gap:8px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-drafts-save-actions button:not([hidden]){display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:100%!important;min-height:38px!important;margin:0!important;padding:9px 12px!important;line-height:1.4!important;border-radius:8px!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] [data-draft-save-new]{background:#202823!important;background-image:none!important;border:1px solid #50632e!important;color:#dafa9a!important;-webkit-text-fill-color:#dafa9a!important;box-shadow:none!important}
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] [data-tool-panel="drafts"] .bigstep-ai-drafts-save-actions [hidden]{display:none!important}

/* Mobile AI TYPO badge contrast: keep the small AI chip legible in every tab state. */
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-tabs button.bigstep-ai-text-tab-ai em,
html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-text-tabs button.bigstep-ai-text-tab-ai.is-active em {
  background:#111516!important;
  background-image:none!important;
  color:#c8ff00!important;
  -webkit-text-fill-color:#c8ff00!important;
  opacity:1!important;
}

/* Desktop product catalog polish: quiet hierarchy, generous product imagery
 * and a compact drawer that feels native to the Studio shell. */
@media (min-width:981px) {
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker {
    top:80px!important;
    bottom:14px!important;
    left:calc(var(--sidebar-w,82px) + 22px)!important;
    width:var(--panel-w,360px)!important;
    height:auto!important;
    max-height:none!important;
    padding:0!important;
    border:1px solid rgba(139,157,149,.28)!important;
    border-radius:20px!important;
    background:rgba(11,16,15,.97)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.045)!important;
    backdrop-filter:blur(18px)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head {
    position:relative!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    left:0!important;
    display:flex!important;
    align-items:center!important;
    min-height:56px!important;
    margin:0!important;
    padding:9px 10px!important;
    border:0!important;
    border-bottom:1px solid rgba(139,157,149,.18)!important;
    border-radius:20px 20px 0 0!important;
    background:linear-gradient(180deg,rgba(27,35,32,.98),rgba(16,23,21,.96))!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head>strong {
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    color:#f5f8f6!important;
    font-size:14px!important;
    font-weight:750!important;
    letter-spacing:-.015em!important;
    line-height:1.2!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-panel-head>strong::after {
    content:'Chọn mẫu để bắt đầu thiết kế'!important;
    color:#8e9a95!important;
    font-size:9.5px!important;
    font-weight:550!important;
    letter-spacing:.02em!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker [data-product-picker-close] {
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    margin-left:auto!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#aeb8b3!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker [data-product-picker-close]:hover {
    border-color:rgba(200,255,0,.55)!important;
    background:rgba(200,255,0,.08)!important;
    color:#c8ff00!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card-grid {
    margin:0!important;
    padding:10px!important;
    gap:8px!important;
    scrollbar-color:#4b5752 transparent!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker button.bigstep-ai-product-card {
    position:relative!important;
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    min-height:98px!important;
    padding:10px!important;
    border:1px solid rgba(139,157,149,.13)!important;
    border-radius:15px!important;
    background:rgba(20,27,25,.86)!important;
    box-shadow:none!important;
    transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card:hover {
    border-color:rgba(200,255,0,.34)!important;
    background:#18211e!important;
    transform:none!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card.is-active {
    border-color:rgba(200,255,0,.72)!important;
    background:linear-gradient(110deg,rgba(200,255,0,.09),rgba(20,28,25,.96) 48%)!important;
    box-shadow:inset 3px 0 #c8ff00!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-card.is-active::after {
    top:9px!important;
    right:9px!important;
    width:22px!important;
    height:22px!important;
    border-radius:8px!important;
    box-shadow:0 5px 14px rgba(0,0,0,.28)!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-thumb {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.1)!important;
    border-radius:12px!important;
    background:#f0f2ed!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-thumb img {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:6px!important;
    min-width:0!important;
    padding-right:2px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>strong {
    display:-webkit-box!important;
    overflow:hidden!important;
    color:#eef3f0!important;
    font-size:12.5px!important;
    font-weight:690!important;
    line-height:1.35!important;
    letter-spacing:-.01em!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>em {
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin:0!important;
    font-style:normal!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>em del {
    color:#727e78!important;
    font-size:10px!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>em>strong {
    color:#c8ff00!important;
    font-size:14px!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>em>span {
    padding:2px 6px!important;
    border-radius:999px!important;
    background:rgba(37,211,134,.12)!important;
    color:#55dfa0!important;
    font-size:9px!important;
    font-weight:750!important;
  }
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-detail-chip,
  html body .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-detail-chip:visited {
    min-height:24px!important;
    padding:0 9px!important;
    border-color:rgba(139,157,149,.22)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.025)!important;
    color:#aeb8b3!important;
    font-size:9.5px!important;
    font-weight:650!important;
  }
  html body.bigstep-ai-standalone-editor.bigstep-graphite-lime-theme .bigstep-ai-app[data-editor-mode="editor"] .bigstep-ai-product-picker .bigstep-ai-product-meta>strong {
    color:#eef3f0!important;
    -webkit-text-fill-color:#eef3f0!important;
  }
}
/* 2026-11-05 mobile: tach tay nam bang chinh anh khoi nut dau tien, giu nguyen tay nam (khong bo). */
/* 2026-11-14: sua 5/11 — padding-top:48px cu (selector (0,4,2)) khong thang noi rule dong 21295 (padding:10px, selector (0,7,1)) nen tay nam 28px de len hang nut dau tien 18px. Tang specificity len (0,7,2)/(0,6,2) de no thang that; giu nguyen 48px (khe tay nam-nut = 20px). */
@media (max-width:980px){html body .bigstep-ai-app[data-editor-mode="editor"]:not(.is-tiny-mobile-editor) [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar{padding-top:48px!important}}
@media (max-width:980px){html body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar{padding-top:48px!important}}
@media (max-width:980px){html body .bigstep-ai-app[data-editor-mode="editor"] [data-text-popup]:not([hidden]){padding-top:48px!important}}

/* AI Remix — style trang tri mat (party_face / crown_face): chon so mat 1-4,
 * moi mat 1 o tai anh rieng + 1 o nhap ten rieng. */
.bigstep-ai-remix-face-count { display: grid; gap: 8px; }
.bigstep-ai-remix-face-count > span { color: #fff; font-size: 12px; font-weight: 850; }
.bigstep-ai-app .bigstep-ai-remix-face-count-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bigstep-ai-app .bigstep-ai-remix-face-count-btns button { min-height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.06); color: #c7c7cd; padding: 9px 4px; font-size: 12px; font-weight: 700; cursor: pointer; }
.bigstep-ai-app .bigstep-ai-remix-face-count-btns button.is-active { background: #c0f25d; border-color: #c0f25d; color: #080a0b; }
.bigstep-ai-remix-face-count p { margin: 0; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.5; }
.bigstep-ai-remix-face-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bigstep-ai-remix-face-slot { display: grid; gap: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); padding: 10px; }
.bigstep-ai-remix-face-upload { position: relative; display: grid; place-items: center; min-height: 120px; border: 1px dashed rgba(255,255,255,.25); border-radius: 10px; cursor: pointer; overflow: hidden; background: rgba(0,0,0,.25); }
.bigstep-ai-remix-face-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bigstep-ai-remix-face-thumb { display: grid; place-items: center; gap: 2px; color: #c7c7cd; font-size: 12px; font-weight: 650; }
.bigstep-ai-remix-face-thumb i { font-style: normal; font-size: 22px; color: #c0f25d; }
.bigstep-ai-remix-face-thumb em { font-style: normal; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 400; }
.bigstep-ai-remix-face-upload img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.bigstep-ai-remix-face-upload.has-image img { display: block; }
.bigstep-ai-remix-face-name { display: grid; gap: 5px; font-size: 12px; font-weight: 650; color: #fff; }
.bigstep-ai-remix-face-name input { width: 100%; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); color: #fff; border-radius: 9px; padding: 9px 10px; outline: none; box-sizing: border-box; }
.bigstep-ai-remix-face-name input:focus { border-color: #c0f25d; }
@media (max-width: 760px) { .bigstep-ai-remix-face-slots { grid-template-columns: 1fr; } }

.bigstep-ai-remix-direction { display: grid; gap: 7px; margin: 14px 0; color: #e7e9e9; font-size: 13px; font-weight: 700; }
.bigstep-ai-remix-direction textarea { box-sizing: border-box; width: 100%; min-height: 70px; padding: 11px 12px; border: 1px solid #49504e; border-radius: 10px; background: #161c1b; color: #fff; font: inherit; font-weight: 400; line-height: 1.45; resize: vertical; }
.bigstep-ai-remix-direction textarea:focus { outline: 2px solid #c6fa62; outline-offset: 2px; }
.bigstep-ai-remix-direction small { color: #aeb6b2; font-size: 11px; font-weight: 400; line-height: 1.4; }
/* Image-bar action cluster redesign (mobile, 20261114 s8) — user: cụm nút
   "nhìn lỗi quá". Gốc: 4 nút 4 màu (teal/violet/lime/indigo) nằm trong 1 card
   bo tròn thừa, icon xám không khớp chữ, icon "Chỉnh ảnh" trùng họ sparkles
   với "AI Remix" và có mảng vuông lime sau icon (svg background), 2 nút AI
   cao 46px còn 2 tab cao 48px. Sửa: bỏ card (nền trong suốt, không viền),
   4 nút thống nhất graphite #171c1d + viền #394244 + cao 48px, icon lime
   #c0f25d 18px không chip, lime chỉ còn ở tab active (phẳng, nhẹ).
   Desktop không đụng. Giữ nguyên tay nắm kéo + khe 48px/20px (s6/s7). */
@media (max-width: 980px) {
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs].bigstep-ai-image-mode-tabs,
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]).bigstep-ai-image-bar.bigstep-ai-text-bar > [data-image-edit-tabs].bigstep-ai-image-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 48px) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta],
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta],
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    border: 1px solid #394244 !important;
    border-radius: 12px !important;
    background: #171c1d !important;
    background-image: none !important;
    color: #f5f6f1 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta] svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta] svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button svg {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    color: #c0f25d !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button span,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-remix-cta] span,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-redesign-cta] span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-tabs] > button::after {
    display: none !important;
  }

  /* Active tab: lime, nhưng phẳng và nhẹ — không còn viền #c8ff00 chói +
     gradient xanh lá + mảng vuông sau icon. */
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-view].is-active {
    border-color: #c0f25d !important;
    background: rgba(192, 242, 93, .12) !important;
    background-image: none !important;
    color: #eaffaa !important;
    box-shadow: none !important;
  }
  body .bigstep-ai-app[data-editor-mode="editor"] [data-image-bar]:not([hidden]) [data-image-edit-view].is-active svg,
  body .bigstep-ai-app[data-editor-mode="editor"].is-tiny-mobile-editor [data-image-bar]:not([hidden]) [data-image-edit-view].is-active svg {
    background: transparent !important;
    background-image: none !important;
    color: #c0f25d !important;
    box-shadow: none !important;
  }
}