/* The original designer keeps its authoring engine while sharing Artizia's UI language. */
html[data-artizia-studio] body.imp-designer.az-designer-active {
  --azd-bg: #f8f7ff;
  --azd-surface: #fff;
  --azd-subtle: #f1edff;
  --azd-border: #ded9f1;
  --azd-ink: #14122b;
  --azd-muted: #514b68;
  --azd-blue: #0048fd;
  --azd-violet: #5701ef;
  --imp-bg: var(--azd-bg);
  --imp-surface: var(--azd-surface);
  --imp-surface-2: var(--azd-subtle);
  --imp-border: var(--azd-border);
  --imp-fg: var(--azd-ink);
  --imp-fg-2: var(--azd-muted);
  --imp-accent: var(--azd-blue);
  --imp-gold: var(--azd-violet);
  --imp-font: ArtiziaStudioOutfit, ArtiziaStudioAlexandria, Arial, sans-serif;
  --imp-header-h: 64px;
  --imp-shell-top: 64px;
  background: var(--azd-bg) !important;
  color: var(--azd-ink);
  font-family: var(--imp-font);
}
html[data-artizia-studio] body.imp-designer.az-designer-active[data-az-designer-lang="ar"] {
  --imp-font: ArtiziaStudioAlexandria, Arial, sans-serif;
}
/* The shared 12-family palette replaces the old hue ramp in designer mode too. */
html[data-artizia-studio] body.imp-designer.az-designer-active .bg-hue {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active #site-header .site-header {
  height: 64px !important;
  box-sizing: border-box;
  gap: 16px;
  padding-inline: 16px;
  background: var(--azd-surface) !important;
  border-color: var(--azd-border) !important;
  color: var(--azd-ink);
  font-family: var(--imp-font);
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active #site-header .header-breadcrumb,
html[data-artizia-studio] body.az-designer-active #site-header .cart-pill {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active #site-header .site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}
html[data-artizia-studio] body.az-designer-active #site-header .az-studio-wordmark {
  width: auto;
  max-width: 150px;
  height: 30px;
  object-fit: contain;
}
html[data-artizia-studio] body.az-designer-active[data-az-designer-lang="ar"] #site-header .az-studio-wordmark-en,
html[data-artizia-studio] body.az-designer-active[data-az-designer-lang="en"] #site-header .az-studio-wordmark-ar {
  display: none;
}
html[data-artizia-studio] body.az-designer-active #site-header .az-designer-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin-inline-end: auto;
  line-height: 1.25;
}
html[data-artizia-studio] body.az-designer-active #site-header .az-designer-role {
  font-size: 14px;
  font-weight: 700;
  color: var(--azd-ink);
  white-space: nowrap;
}
html[data-artizia-studio] body.az-designer-active #site-header .az-designer-product {
  display: block;
  max-width: 230px;
  overflow: hidden;
  color: var(--azd-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-artizia-studio] body.az-designer-active #site-header .az-designer-product[hidden] { display: none; }
html[data-artizia-studio] body.az-designer-active #site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
html[data-artizia-studio] body.az-designer-active #site-header #az-studio-shortcuts {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
html[data-artizia-studio] body.az-designer-active #site-header :is(#az-studio-shortcuts button,.settings-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  padding: 8px 12px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 12px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 600 13px/1.25 var(--imp-font) !important;
  cursor: pointer;
}
html[data-artizia-studio] body.az-designer-active #site-header .settings-dropdown {
  z-index: 310;
  max-height: min(75dvh, 500px);
  overflow-y: auto;
  border: 1px solid var(--azd-border);
  border-radius: 16px;
  background: var(--azd-surface);
  color: var(--azd-ink);
  font-family: var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active #site-header .settings-dropdown :is(button,.country-option) {
  min-height: 44px;
}
html[data-artizia-studio] body.az-designer-active #imp-presets {
  scroll-margin-block-start: 108px;
}

html[data-artizia-studio] body.az-designer-active :is(.controls-panel,#imp-doorbar,#imp-layer-rail,#mode-toggle,#imp-dbar,#imp-locks,#imp-dm,#imp-assets,#imp-presets,#testing-panel,#tag-meta-editor,#imp-modal,#imp-cust-ov,#dtpl-embed,#as-embed,#imp-lib-card,.imp-share-card) {
  --imp-bg: var(--azd-bg);
  --imp-surface: var(--azd-surface);
  --imp-surface-2: var(--azd-subtle);
  --imp-border: var(--azd-border);
  --imp-fg: var(--azd-ink);
  --imp-fg-2: var(--azd-muted);
  --imp-accent: var(--azd-blue);
  --imp-gold: var(--azd-violet);
  color: var(--azd-ink);
  font-family: var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active :is(.preview-panel,.canvas-stage,#tag-mockup) {
  background: #fff !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel {
  background: var(--azd-surface) !important;
  border-color: var(--azd-border) !important;
  scroll-padding-block: 72px;
}
html[data-artizia-studio] body.az-designer-active[data-az-designer-lang="ar"] :is(.controls-panel,#imp-dbar,#imp-locks,#imp-dm,#imp-assets,#imp-presets,#testing-panel,#icon-preset-ov) {
  direction: rtl;
  font-family: ArtiziaStudioAlexandria, Arial, sans-serif !important;
}
html[data-artizia-studio] body.az-designer-active[data-az-designer-lang="en"] :is(.controls-panel,#imp-dbar,#imp-locks,#imp-dm,#imp-assets,#imp-presets,#testing-panel,#icon-preset-ov) {
  direction: ltr;
}
html[data-artizia-studio] body.az-designer-active #imp-doorbar {
  background: var(--azd-bg) !important;
  border-color: var(--azd-border) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active #imp-doorbar .imp-dbtn {
  appearance: none;
  min-height: 60px !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--azd-ink) !important;
  font: 600 12px/1.25 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-doorbar .imp-dbtn:is(.is-on,[aria-pressed="true"]) {
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-doorbar .imp-dbtn-ic {
  color: currentColor !important;
}
html[data-artizia-studio] body.az-designer-active.az-designer-tools-only #bag-artwork-section > :not(#imp-tools-section) {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active.az-designer-tools-only #imp-tools-section {
  margin: 0 !important;
  border: 0 !important;
}
html[data-artizia-studio] body.az-designer-active.az-designer-tools-only #imp-tools-toggle {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active.az-designer-tools-only #imp-tools-panel {
  display: block !important;
}
html[data-artizia-studio] body.az-designer-active .az-designer-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-block: 8px 16px;
  padding-inline: 16px;
  border: 1px solid var(--azd-blue);
  border-radius: 12px;
  color: var(--azd-blue);
  font: 700 14px/1.3 var(--imp-font);
  text-decoration: none;
}
html[data-artizia-studio] body.az-designer-active .az-designer-preview-link:focus-visible {
  outline: 3px solid var(--azd-blue);
  outline-offset: 3px;
}
html[data-artizia-studio] body.az-designer-active.az-designer-tools-only #imp-doorbar .imp-dbtn:not(#az-designer-tool) {
  background: transparent !important;
  color: var(--azd-ink) !important;
  border-color: var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-doorbar #az-designer-tool:is(.is-on,[aria-pressed="true"]) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-layer-rail .az-delete-all {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: calc(100% - 12px);
  min-height: 44px;
  margin: 6px;
  padding: 7px 5px;
  border: 1px solid var(--azd-border);
  border-radius: 12px;
  background: var(--azd-subtle);
  color: var(--azd-violet);
  font: 600 11px/1.3 var(--imp-font);
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
html[data-artizia-studio] body.az-designer-active #imp-layer-rail .az-delete-all:disabled {
  opacity: .45;
  cursor: default;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptabs,.lyr-sectabs,.lyr-coltabs) {
  max-width: 100%;
  overflow-x: auto;
  scroll-padding-inline: 12px;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptab,.lyr-sectab,.lyr-coltab) {
  min-height: 44px !important;
  box-sizing: border-box;
  border-radius: 999px !important;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptab,.lyr-sectab,.lyr-coltab):is(.on,[aria-selected="true"]) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
/* The legacy layer editor paints coloured side rails and a black travelling
   tab marker. Keep the selected artwork colour inside its swatch, while the
   controls use the same neutral card and violet selection as the customer UI. */
html[data-artizia-studio] body.az-designer-active .controls-panel .layer-row.expanded {
  min-width: 0;
  margin-block: 8px 16px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 16px !important;
  background: var(--azd-surface) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .layer-row.expanded > .layer-head {
  border-radius: 16px 16px 0 0 !important;
  background: var(--azd-surface) !important;
  box-shadow: 0 1px 0 var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .layer-row.expanded > .layer-body,
html[data-artizia-studio] body.az-designer-active .controls-panel .lyr-seccircles-host,
html[data-artizia-studio] body.az-designer-active .controls-panel .lyr-secpane {
  min-width: 0;
  background: var(--azd-surface) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .layer-row.expanded > .layer-body {
  padding: 8px 14px 16px !important;
  border-top: 0 !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel [id^="bg-pick-"] {
  min-inline-size: 0;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptabs,.lyr-sectabs,.lyr-coltabs) {
  gap: 8px;
  margin-block: 0 12px;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptabs,.lyr-sectabs,.lyr-coltabs)::-webkit-scrollbar {
  display: none;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptab,.lyr-sectab,.lyr-coltab) {
  border: 1px solid var(--azd-border) !important;
  background: var(--azd-surface) !important;
  color: var(--azd-muted) !important;
  white-space: nowrap;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bg-toptab,.lyr-sectab,.lyr-coltab):is(.on,[aria-selected="true"]) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-toptabs > .tabpill {
  box-sizing: border-box;
  border: 1px solid var(--azd-violet);
  background: var(--azd-subtle) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-toptabs.has-travel .bg-toptab.on {
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-toptabs.has-travel.tabpill-flying .bg-toptab.on {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-sw-row {
  max-width: 100%;
  min-width: 0;
  scroll-padding-inline: 8px;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-sw:is(.on,.sel) {
  border-color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bg-sw.on::after {
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 5px var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bgi-type,.bgi-area,.bgi-ar-chip).on {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel :is(.bgi-type,.bgi-area).on .bgi-type-lbl,
html[data-artizia-studio] body.az-designer-active .controls-panel .bgi-area.on .bgi-area-lbl {
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bgi-upload {
  min-height: 44px;
  border-color: var(--azd-border);
  border-radius: 12px;
  background: var(--azd-bg);
  color: var(--azd-ink);
}
html[data-artizia-studio] body.az-designer-active .controls-panel .bgi-upload:hover {
  border-color: var(--azd-blue);
  color: var(--azd-blue);
}
html[data-artizia-studio] body.az-designer-active .az-designer-layer-options {
  margin-block: 18px 8px;
  border: 1px solid var(--azd-border);
  border-radius: 14px;
  background: var(--azd-surface);
}
html[data-artizia-studio] body.az-designer-active .az-designer-layer-options > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--azd-ink);
  font: 700 13px/1.4 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active .az-designer-layer-options > :not(summary) {
  margin-inline: 12px;
}
html[data-artizia-studio] body.az-designer-active .az-designer-layer-options > .secui {
  margin-block-end: 14px;
}
html[data-artizia-studio] body.az-designer-active #imp-tools-section {
  min-width: 0;
  margin-block-start: 16px;
  border-color: var(--azd-border);
}
html[data-artizia-studio] body.az-designer-active #imp-tools-toggle {
  min-height: 48px;
  color: var(--azd-ink);
  font: 700 15px/1.4 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active #imp-tools-toggle .imp-tools-wrench {
  background: var(--azd-subtle);
  color: var(--azd-violet);
}
html[data-artizia-studio] body.az-designer-active #imp-tools-panel {
  min-width: 0;
  max-width: 100%;
  padding-block-end: 24px;
  overflow-x: hidden;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--azd-border);
  border-radius: 16px;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar .dtag {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  color: var(--azd-muted);
  font: 700 12px/1.4 var(--imp-font);
  letter-spacing: 0;
  text-transform: none;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar :is(.az-designer-action,#mega-presets-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  padding: 8px 12px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 12px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 600 13px/1.4 var(--imp-font) !important;
  text-align: center;
  white-space: normal;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar :is(.az-designer-action,#mega-presets-btn):hover,
html[data-artizia-studio] body.az-designer-active #imp-dbar :is(.az-designer-action,#mega-presets-btn).is-open {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar button[onclick*="IMPRINT_saveProduct"] {
  border-color: var(--azd-blue) !important;
  background: var(--azd-blue) !important;
  color: #fff !important;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar .az-designer-icon {
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar .az-designer-icon svg {
  display: block;
  width: 19px;
  height: 19px;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  color: var(--azd-muted);
  font: 600 12px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-dbar select {
  min-height: 44px;
  padding: 7px 10px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 10px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 600 13px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-locks,#imp-dm,#imp-presets,#testing-panel,#tag-meta-editor) {
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--azd-border) !important;
  border-radius: 16px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-locks,#imp-dm,#imp-presets,#testing-panel) h4 {
  color: var(--azd-ink);
  font: 700 16px/1.4 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active :is(#imp-locks,#imp-dm) .lk-sec,
html[data-artizia-studio] body.az-designer-active #imp-dm .imp-sec-hd {
  color: var(--azd-muted);
  font: 700 12px/1.5 var(--imp-font);
  letter-spacing: 0;
  text-transform: none;
}
html[data-artizia-studio] body.az-designer-active #imp-dm .imp-sec {
  border: 1px solid var(--azd-border);
  border-radius: 12px;
  background: var(--azd-bg) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-ctxbar {
  border: 1px solid var(--azd-border);
  border-radius: 12px;
  background: var(--azd-bg) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-locks label {
  min-height: 44px;
  gap: 10px;
  color: var(--azd-ink);
  font: 500 13px/1.5 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active #imp-locks input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--azd-blue);
}
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-a-up,
html[data-artizia-studio] body.az-designer-active :is(#imp-locks,#imp-dm,#imp-ctxbar,#imp-tools-panel) :is(button:not([type="file"]),select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) {
  min-height: 44px !important;
  box-sizing: border-box;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-locks,#imp-dm,#imp-ctxbar) :is(button,select,input,textarea) {
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-a-up {
  padding: 8px 12px;
  border: 1px solid var(--azd-border);
  border-radius: 12px;
  background: var(--azd-surface);
  color: var(--azd-ink);
}
html[data-artizia-studio] body.az-designer-active #imp-assets :is(.imp-ph button,.imp-mk-del,.imp-slot-x),
html[data-artizia-studio] body.az-designer-active #imp-locks :is(.lk-price-rec,.lk-price-del) {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-slot-wrap {
  margin-inline-end: 12px;
  margin-block-end: 8px;
}
html[data-artizia-studio] body.az-designer-active :is(#mode-toggle,#imp-doorbar) button {
  min-width: 44px !important;
  min-height: 44px !important;
  border-color: var(--azd-border) !important;
  color: var(--azd-ink) !important;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#mode-toggle,#imp-doorbar) button:is(.on,.is-on,[aria-pressed="true"]) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active .secui {
  margin-block: 14px;
  padding: 12px;
  border: 1px solid var(--azd-border);
  border-radius: 14px;
  background: var(--azd-bg);
}
html[data-artizia-studio] body.az-designer-active .secui-cap {
  color: var(--azd-ink);
  font-size: 12px;
  letter-spacing: 0;
}
html[data-artizia-studio] body.az-designer-active .secui-hint,
html[data-artizia-studio] body.az-designer-active .secui-legend {
  color: var(--azd-muted);
  font-size: 11px;
  line-height: 1.5;
}
html[data-artizia-studio] body.az-designer-active :is(.sec-chip,.secui-mode,.secro-ar) {
  min-height: 44px !important;
  box-sizing: border-box;
  border: 1px solid var(--azd-border);
  background: var(--azd-surface);
  color: var(--azd-ink);
  font: 600 12px/1.35 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active .sec-chip {
  padding: 8px 12px;
  white-space: normal;
  text-align: start;
}
html[data-artizia-studio] body.az-designer-active .secui-mode.on,
html[data-artizia-studio] body.az-designer-active .sec-chip.lock {
  border-color: var(--azd-violet);
  background: var(--azd-subtle);
  color: var(--azd-violet);
}
html[data-artizia-studio] body.az-designer-active .secro-list {
  background: var(--azd-subtle);
  border-color: var(--azd-border);
}
html[data-artizia-studio] body.az-designer-active .secro {
  background: var(--azd-surface);
  border-color: var(--azd-border);
  box-shadow: none;
}
html[data-artizia-studio] body.az-designer-active .secro-ar {
  min-width: 44px !important;
  border-radius: 12px;
}
html[data-artizia-studio] body.az-designer-active #icon-preset-ov > div {
  border: 1px solid var(--azd-border);
  border-radius: 20px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink);
  box-shadow: 0 16px 50px rgba(20, 18, 43, .12) !important;
  font-family: var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active #icon-preset-ov button {
  min-width: 44px;
  min-height: 44px;
  border-color: var(--azd-border) !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-modal,#imp-cust-ov,#dtpl-embed,#as-embed) > div {
  border-color: var(--azd-border);
  border-radius: 20px;
  background: var(--azd-surface);
  color: var(--azd-ink);
  font-family: var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active :is(#imp-layer-rail,#imp-tools-panel,.controls-panel,#site-header) :is(button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 3px;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-live-price-pill,#corner-price) {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  gap: 8px;
  padding-block: 8px !important;
  border-bottom: 1px solid var(--azd-border) !important;
  background: var(--azd-surface) !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar .cstep-pager {
  padding: 8px 12px !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar .cstep-sub {
  color: var(--azd-muted) !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar #imp-sheet-editor-title {
  display: none !important;
  position: static !important;
  inset: auto !important;
  grid-area: 1 / 1;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  transform: none !important;
  justify-content: flex-start !important;
  text-align: start !important;
  box-sizing: border-box;
  padding: 0 !important;
  color: var(--azd-ink) !important;
}
html[data-artizia-studio] body.az-designer-active.imp-editor-open #sheet-topbar #imp-sheet-editor-title {
  display: flex !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar .az-edit-actions {
  display: flex !important;
  justify-content: stretch;
  gap: 8px;
}
@media (min-width: 900px) {
  html[data-artizia-studio] body.az-designer-active #sheet-topbar .cstep-pager {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  html[data-artizia-studio] body.az-designer-active #sheet-topbar .az-edit-actions {
    position: static !important;
    inset: auto !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
  }
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar .az-edit-actions button {
  flex: 1 1 0;
  min-width: 0 !important;
}
html[data-artizia-studio] body.az-designer-active #sheet-topbar .az-sheet-expand {
  display: none !important;
}
html[data-artizia-studio] body.az-designer-active #dtpl-savebar {
  width: min(460px, calc(100% - 24px));
  box-sizing: border-box;
  justify-content: space-between;
  border: 1px solid var(--azd-border) !important;
  border-radius: 16px !important;
  padding: 8px 10px 8px 16px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  box-shadow: 0 8px 28px rgba(20, 18, 43, .12) !important;
  font: 600 13px/1.35 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #dtpl-savebar button {
  min-height: 44px;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  background: var(--azd-blue) !important;
  color: #fff !important;
  font: 700 14px/1.3 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #dtpl-savebar button:focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 3px;
}
/* Designer-only dialogs share the customer Studio surfaces and keyboard focus. */
html[data-artizia-studio] body.az-designer-active #imp-vswitch,
html[data-artizia-studio] body.az-designer-active #mkpick-ov {
  background: rgba(20, 18, 43, .54) !important;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-vswitch > div,
html[data-artizia-studio] body.az-designer-active #mkpick-ov .mkpick-card {
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 55px rgba(20, 18, 43, .14) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-vswitch .imp-vrow,
html[data-artizia-studio] body.az-designer-active #mkpick-ov .mkpick-it {
  min-height: 44px;
  border-color: var(--azd-border) !important;
  color: var(--azd-ink) !important;
  background: var(--azd-surface) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-vswitch .imp-vrow[aria-current="true"],
html[data-artizia-studio] body.az-designer-active #mkpick-ov .mkpick-it.on {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  box-shadow: inset 0 0 0 1px var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active #imp-vswitch button:focus-visible,
html[data-artizia-studio] body.az-designer-active #mkpick-ov button:focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 2px;
}
html[data-artizia-studio] body.az-designer-active #mkpick-ov .mkpick-btn {
  min-height: 44px;
  border-radius: 12px;
  font: 700 14px/1.3 var(--imp-font);
}
html[data-artizia-studio] body.az-designer-active #mkpick-ov .mkpick-btn.go {
  background: var(--azd-blue) !important;
  border-color: var(--azd-blue) !important;
  color: #fff !important;
}
@media (max-width: 760px) {
  html[data-artizia-studio] body.az-designer-active #mode-toggle {
    top: 72px !important;
    z-index: 54 !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar {
    top: 72px !important;
    bottom: auto !important;
    left: 8px !important;
    transform: none !important;
    width: auto;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar > span {
    display: none;
  }
  html[data-artizia-studio] body.az-designer-active.imp-sheet-raised #dtpl-savebar {
    display: none !important;
  }
  html[data-artizia-studio] body.az-designer-active #site-header .site-header {
    gap: 6px;
    padding-inline: 8px;
  }
  html[data-artizia-studio] body.az-designer-active #site-header .az-studio-wordmark {
    max-width: 118px;
    height: 34px;
  }
  html[data-artizia-studio] body.az-designer-active #site-header .az-designer-identity {
    display: none;
  }
  html[data-artizia-studio] body.az-designer-active #site-header .header-actions,
  html[data-artizia-studio] body.az-designer-active #site-header #az-studio-shortcuts {
    gap: 5px;
  }
  html[data-artizia-studio] body.az-designer-active #site-header #az-studio-shortcuts button {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
  html[data-artizia-studio] body.az-designer-active .controls-panel {
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  html[data-artizia-studio] body.az-designer-active #imp-dbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-artizia-studio] body.az-designer-active #imp-dbar .dtag,
  html[data-artizia-studio] body.az-designer-active #imp-dbar label {
    grid-column: 1 / -1;
  }
  html[data-artizia-studio] body.az-designer-active #imp-dbar :is(.az-designer-action,#mega-presets-btn) {
    width: 100%;
  }
}
/* The bottom tool rail remains visible through tablet widths. Keep Save and
   view switching above the canvas there instead of covering the tool labels. */
@media (min-width: 761px) and (max-width: 1099px) {
  html[data-artizia-studio] body.az-designer-active #mode-toggle {
    top: 72px !important;
    z-index: 54 !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar {
    top: 72px !important;
    bottom: auto !important;
    left: 8px !important;
    transform: none !important;
    width: auto;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar > span,
  html[data-artizia-studio] body.az-designer-active.imp-sheet-raised #dtpl-savebar {
    display: none !important;
  }
}
/* The authoring tools use the same compact sheet model as the customer Studio.
   The legacy sheet is a full-viewport box translated by --sheet-y, with padding
   coupled to that offset. Give designer steps a real scrollport instead so the
   action row and the active controls cannot be stranded below the viewport. */
@media (max-width: 1099px) {
  /* Designer adds a sixth, separate authoring tool. Keep every tool in one
     horizontal rail instead of letting the last button form a second row. */
  html[data-artizia-studio] body.az-designer-active #imp-doorbar {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(64px, auto) !important;
  }
  html[data-artizia-studio] body.az-designer-active #imp-doorbar .imp-dbtn {
    min-width: 0;
    padding-inline: 2px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }
  html[data-artizia-studio] body.az-designer-active .controls-panel {
    position: fixed !important;
    inset: auto 0 0 !important;
    width: auto !important;
    height: max-content !important;
    min-height: 0 !important;
    max-height: min(calc((100dvh - 64px) * .4), calc(100dvh - 116px)) !important;
    box-sizing: border-box;
    padding: 0 16px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-padding-block: 112px 24px;
    transform: none !important;
    transition: none !important;
  }
  html[data-artizia-studio] body.az-designer-active.az-sheet-expanded .controls-panel {
    max-height: min(calc((100dvh - 64px) * .75), calc(100dvh - 116px)) !important;
  }
  html[data-artizia-studio] body.az-designer-active:not(.imp-sheet-raised) .controls-panel {
    display: none !important;
  }
  html[data-artizia-studio] body.az-designer-active #sheet-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45;
    margin-inline: -16px !important;
    padding: 8px 16px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  html[data-artizia-studio] body.az-designer-active.imp-configurator.imp-editor-open #sheet-topbar.sheet-topbar > button.az-sheet-expand:not(#sheet-prompt) {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    grid-area: 1 / 2;
    width: auto !important;
    min-width: 44px !important;
    align-items: center;
    justify-content: center;
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--azd-border) !important;
    border-radius: 12px !important;
    background: var(--azd-bg) !important;
    color: var(--azd-ink) !important;
    font: 600 13px/1.25 var(--imp-font) !important;
  }
  html[data-artizia-studio] body.az-designer-active #sheet-handle {
    display: none !important;
  }
}
@media (min-width: 700px) and (max-width: 1099px) and (orientation: landscape) {
  html[data-artizia-studio] body.az-designer-active .preview-panel {
    position: fixed !important;
    inset: 64px 360px 0 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  html[data-artizia-studio] body.az-designer-active .controls-panel,
  html[data-artizia-studio] body.az-designer-active.az-sheet-expanded .controls-panel,
  html[data-artizia-studio] body.az-designer-active:not(.imp-sheet-raised) .controls-panel {
    display: block !important;
    position: fixed !important;
    inset: 64px 0 0 auto !important;
    width: 360px !important;
    height: auto !important;
    max-height: calc(100dvh - 64px) !important;
    padding: 0 16px 20px !important;
    border-radius: 0 !important;
    border-inline-start: 1px solid var(--azd-border) !important;
  }
  html[data-artizia-studio] body.az-designer-active #imp-doorbar,
  html[data-artizia-studio] body.az-designer-active #sheet-topbar > .az-sheet-expand {
    display: none !important;
  }
  html[data-artizia-studio] body.az-designer-active .controls-panel .add-layer-wrap {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  html[data-artizia-studio] body.az-designer-active #mode-toggle {
    left: auto !important;
    right: 372px !important;
    top: 72px !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar {
    top: auto !important;
    bottom: 12px !important;
    left: calc((100vw - 360px) / 2) !important;
    width: min(430px, calc(100vw - 390px)) !important;
    transform: translateX(-50%) !important;
  }
  html[data-artizia-studio] body.az-designer-active #dtpl-savebar > span {
    display: inline !important;
  }
}
@media (max-width: 380px) {
  html[data-artizia-studio] body.az-designer-active #site-header .az-studio-wordmark {
    max-width: 100px;
  }
  html[data-artizia-studio] body.az-designer-active #site-header :is(#az-studio-shortcuts button,.settings-btn) {
    padding-inline: 5px !important;
  }
  html[data-artizia-studio] body.az-designer-active #imp-dbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-artizia-studio] body.az-designer-active :is(#imp-dbar,#imp-tools-section,#site-header) * {
    transition: none !important;
  }
}
/* Authoring dialogs share the same surfaces and controls as the customer Studio. */
html[data-artizia-studio] body.az-designer-active :is(#dtpl-save-modal,#imp-pub-modal,#add-source-overlay,#imp-dieline-menu,#cutout-overlay,#vect-overlay) {
  --imp-surface: #fff;
  --imp-surface-2: var(--azd-bg);
  --imp-border: var(--azd-border);
  --imp-fg: var(--azd-ink);
  --imp-fg-2: var(--azd-muted);
  --imp-accent: var(--azd-blue);
  font-family: var(--imp-font) !important;
  color: var(--azd-ink) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#dtpl-save-modal,#imp-pub-modal,#add-source-overlay) > div {
  box-sizing: border-box;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto;
  border: 1px solid var(--azd-border) !important;
  border-radius: 20px !important;
  background: var(--azd-surface) !important;
  box-shadow: 0 18px 48px rgba(20,18,43,.14) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#dtpl-save-modal,#imp-pub-modal,#add-source-overlay,#imp-dieline-menu) :is(button,input,select,textarea) {
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#dtpl-save-modal,#imp-pub-modal) :is(#dtpl-save-go,#imp-pub-go) {
  background: var(--azd-blue) !important;
  color: #fff !important;
}
html[data-artizia-studio] body.az-designer-active :is(#dtpl-save-modal,#imp-pub-modal,#add-source-overlay,#imp-dieline-menu,#cutout-overlay,#vect-overlay) :is(button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 2px;
}
html[data-artizia-studio] body.az-designer-active #imp-dieline-menu {
  border-color: var(--azd-border) !important;
  background: var(--azd-surface) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active #imp-dieline-menu button {
  min-height: 44px;
  border-color: var(--azd-border) !important;
  background: var(--azd-bg) !important;
  color: var(--azd-ink) !important;
  font-family: var(--imp-font) !important;
}
/* Editing a picture is a full-screen task with its own stable preview and actions. */
html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay.open,#vect-overlay.open) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: var(--azd-surface) !important;
  backdrop-filter: none !important;
}
html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay,#vect-overlay) .cutout-panel {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--azd-surface) !important;
  box-shadow: none !important;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay,#vect-overlay) .cutout-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay,#vect-overlay) .cutout-preview-wrap {
  width: min(100%, 980px) !important;
  min-height: min(260px, 35dvh) !important;
  height: min(48dvh, 580px) !important;
  margin-inline: auto !important;
  border-color: var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay,#vect-overlay) :is(.cutout-head,.cutout-foot) {
  flex: 0 0 auto;
  border-color: var(--azd-border) !important;
  background: var(--azd-surface) !important;
}
@media (max-width: 500px) {
  html[data-artizia-studio] body.az-designer-active :is(#cutout-overlay,#vect-overlay) .cutout-preview-wrap {
    min-height: 170px !important;
    height: min(36dvh, 340px) !important;
  }
}
/* An existing template must land before its local authoring draft. Keep the
   editor covered if the source fails, including after the boot film times out. */
html[data-artizia-studio] #az-designer-source-veil {
  position: fixed;
  inset: 0;
  z-index: 100190;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--azd-bg, #f8f7ff);
  color: var(--azd-ink, #17142b);
  font-family: var(--imp-font), sans-serif;
}
html[data-artizia-studio] .az-designer-source-card {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  border: 1px solid var(--azd-border, #ded9ee);
  border-radius: 24px;
  background: var(--azd-surface, #fff);
  text-align: center;
}
html[data-artizia-studio] .az-designer-source-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #ede9ff;
  color: var(--azd-blue, #094aff);
  font-size: 28px;
}
html[data-artizia-studio] .az-designer-source-card strong {font-size: 22px;line-height: 1.3;}
html[data-artizia-studio] .az-designer-source-card p {margin: 0;line-height: 1.6;color: var(--azd-muted, #58536b);}
html[data-artizia-studio] .az-designer-source-card button {
  min-width: 140px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--azd-blue, #094aff);
  color: #fff;
  font: 700 15px var(--imp-font), sans-serif;
  cursor: pointer;
}
html[data-artizia-studio] .az-designer-source-card button:focus-visible {outline: 3px solid var(--azd-blue, #094aff);outline-offset: 3px;}

/* Designer-only controls are injected after this sheet by mega.js. Keep their
   palette, density and touch targets in the same system as the Studio shell. */
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes,#testing-panel) {
  --accent: var(--azd-blue);
  --border: var(--azd-border);
  --surface: var(--azd-surface);
  --secondary: var(--azd-muted);
  --text: var(--azd-ink);
  font-family: var(--imp-font) !important;
  color: var(--azd-ink) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-die-item,.mega-shape,.mega-coll,.mega-preset-row) {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--azd-border) !important;
  border-radius: 12px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-die-item--active,.mega-shape.sel,.mega-coll-custom) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  box-shadow: inset 0 0 0 1px var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-preset-hd,.mega-preset-row,.mega-die-row,.mega-row,.mega-shape-top,.mega-shape-ctl,.mega-coll-hd,.mega-hd-actions) {
  flex-wrap: wrap;
  gap: 8px !important;
}
html[data-artizia-studio] body.az-designer-active #imp-presets .mega-preset-row {
  margin-top: 8px !important;
  padding: 8px !important;
}
html[data-artizia-studio] body.az-designer-active #imp-presets :is(.mega-pn,.mega-pg) {
  flex: 1 1 96px !important;
  width: auto !important;
  min-width: 0;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-pn,.mega-pg,.mega-die-nm,.mega-name,.mega-coll-nm-in,.mega-shape-ctl select,.mega-die-unit select) {
  box-sizing: border-box;
  min-height: 44px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 10px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 500 13px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-x,.mega-step,.mega-coll-exp,.mega-die-active-btn,.mega-var-chip button) {
  box-sizing: border-box;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 11px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 700 15px/1 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-add,.mega-btn,.mega-circle-btn,.mega-asset-chip,.mega-die-tool,.mega-toggle,.mega-coll-additems) {
  box-sizing: border-box;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 12px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 600 13px/1.35 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-circle-btn.on,.mega-asset-chip.on,.mega-toggle.on,.mega-die-tool.on,.mega-die-active-btn.on) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
  box-shadow: none !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-dropzone,.mega-die-settings,.mega-mask-panel) {
  box-sizing: border-box;
  max-width: 100%;
  border-color: var(--azd-border) !important;
  border-radius: 12px !important;
  background: var(--azd-bg) !important;
  color: var(--azd-ink) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-dropzone.over,.mega-dropzone:hover) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-dz-ic,.mega-die-tool-ic,.mega-die-ic) {
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-mk-mask-btn,.mega-brush-seg,.mega-mini-btn,.mega-tool-seg,.mega-remap-btn,.mega-remap-done2,.mega-mk-add) {
  box-sizing: border-box;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 8px !important;
  border: 1px solid var(--azd-border) !important;
  border-radius: 11px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 600 12px/1.35 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-mk-mask-btn.on,.mega-brush-seg.on,.mega-tool-seg.on,.mega-mk-solo.on) {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-remap-done,.mega-remap-done2) {
  border-color: var(--azd-blue) !important;
  background: var(--azd-blue) !important;
  color: #fff !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) .mega-mk-mask-btn.has {
  box-shadow: inset 0 0 0 2px var(--azd-violet) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-die-tg,.mega-df-ck,.mega-fin-on) {
  min-height: 44px;
  gap: 8px;
  color: var(--azd-muted) !important;
  font: 500 12px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-die-tg input,.mega-df-ck input,.mega-fin-on input) {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--azd-blue);
}
html[data-artizia-studio] body.az-designer-active :is(#imp-dieline,#imp-shapes,#imp-assets) :is(.mega-size-in,.mega-col-in,.mega-blend-row select,.mega-die-blend,.mega-mk-bl select) {
  box-sizing: border-box;
  min-height: 44px !important;
  border-color: var(--azd-border) !important;
  border-radius: 10px !important;
  background: var(--azd-surface) !important;
  color: var(--azd-ink) !important;
  font: 500 13px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-preset-row input[type="color"],.mega-preset-row .hex-swatch) {
  box-sizing: border-box;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
  border-color: var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-grad-prev,.mega-fin-prev,.mega-item-thumb) {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-color: var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-coll-badge,.mega-die-shapes-hd) {
  color: var(--azd-violet) !important;
  border-color: var(--azd-border) !important;
  background: var(--azd-subtle) !important;
  font: 700 11px/1.4 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(.mega-coll-nm,.mega-item-nm,.mega-die-name,.mega-asset-empty) {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) .mega-coll-items {
  max-height: none !important;
  overflow: visible !important;
  padding: 8px !important;
  border-color: var(--azd-border) !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) .mega-item {
  min-height: 52px;
  padding: 4px 0 !important;
}
html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) :is(button,input,select,[tabindex]):focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 2px;
}
html[data-artizia-studio] body.az-designer-active:has(#imp-presets.open) #mega-presets-btn {
  border-color: var(--azd-violet) !important;
  background: var(--azd-subtle) !important;
  color: var(--azd-violet) !important;
}

/* The testing surface keeps its dense controls, but loses the old gold theme. */
html[data-artizia-studio] body.az-designer-active #testing-panel {
  border-style: solid !important;
  overflow: hidden;
}
html[data-artizia-studio] body.az-designer-active #testing-panel .testing-label {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--azd-ink) !important;
  font: 700 13px/1.4 var(--imp-font) !important;
  letter-spacing: 0;
  text-transform: none;
}
html[data-artizia-studio] body.az-designer-active #testing-panel .testing-body {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--azd-border);
  background: var(--azd-surface);
}
html[data-artizia-studio] body.az-designer-active #testing-panel :is(.slider-name,.slider-val,.test-check-row) {
  color: var(--azd-muted) !important;
  font: 500 12px/1.5 var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #testing-panel :is(.test-check-row,.slider-row) {
  min-height: 44px;
}
html[data-artizia-studio] body.az-designer-active #testing-panel :is(input[type="checkbox"],input[type="range"]) {
  accent-color: var(--azd-blue) !important;
}
html[data-artizia-studio] body.az-designer-active #testing-panel :is(button,select,input:not([type="checkbox"]):not([type="range"])) {
  box-sizing: border-box;
  min-height: 44px;
  font-family: var(--imp-font) !important;
}
html[data-artizia-studio] body.az-designer-active #testing-panel :is(button,input,select):focus-visible {
  outline: 3px solid var(--azd-blue) !important;
  outline-offset: 2px;
}

/* Put slot actions beside their thumbnails instead of covering adjacent slots. */
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-slot-wrap:has(.imp-slot-x) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 0;
}
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-slot-x {
  position: static !important;
  flex: 0 0 44px;
  border-radius: 11px !important;
}
html[data-artizia-studio] body.az-designer-active #imp-assets .imp-ph {
  width: 90px !important;
  height: 90px !important;
}
@media (max-width: 1099px) {
  html[data-artizia-studio] body.az-designer-active :is(#imp-presets,#imp-dieline,#imp-shapes) .mega-coll-items {
    overscroll-behavior: auto;
  }
}

/* Inactive modes need an explicit light ground on first paint too: legacy .on
   styling can otherwise leave a black disc beneath the dark proof glyph. */
html[data-artizia-studio] body.az-designer-active #mode-toggle button{background:var(--azd-surface)!important}
html[data-artizia-studio] body.az-designer-active #mode-toggle button:is(.on,.is-on,[aria-pressed="true"]){background:var(--azd-subtle)!important;color:var(--azd-violet)!important}
html[data-artizia-studio] body.az-designer-active #mode-toggle button svg{fill:none;stroke:currentColor}
html[data-artizia-studio] body.az-designer-active #az-designer-account{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--azd-border);border-radius:999px;background:var(--azd-surface);color:var(--azd-ink);font:600 13px/1.4 var(--imp-font);white-space:nowrap}
html[data-artizia-studio] body.az-designer-active #az-designer-account:focus-visible{outline:2px solid var(--azd-violet);outline-offset:3px}
html[data-artizia-studio] body.az-designer-active #az-designer-account-status{flex-basis:100%;margin:8px 0;color:var(--azd-muted);font:400 12px/1.6 var(--imp-font);white-space:normal}