.ds-studio {
  --line: #d3dde8;
  --panel: #ffffff;
  --text: #122033;
  --muted: #5f7188;
  --accent: #0a7f73;
  --ds-accent-2: #f89f25;
  --ds-bg-custom: #f3f8ff;
  --ds-adminbar-h: 0px;
  font-family: var(--ds-ui-font, "Segoe UI", Tahoma, Arial, sans-serif);
  color: var(--text);
  background: var(--ds-bg-custom);
  border-radius: 12px;
  position: relative;
}

/* Final portrait UX patch: interaction-first mobile shell */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-workspace {
    padding-top: calc(var(--ds-mobile-top-h) + 22px) !important;
  }

  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    padding: 3px !important;
    background: #e7edf7 !important;
  }

  .ds-studio .ds-canvas-wrap {
    padding: 3px !important;
  }

  .ds-studio .ds-mobile-bottom-nav {
    bottom: calc(var(--ds-mobile-safe-b) + 8px) !important;
  }

  .ds-studio .ds-mobile-bottom-nav button.is-active,
  .ds-studio .ds-mobile-bottom-nav button:active,
  .ds-studio .ds-mobile-bottom-nav button:focus-visible {
    color: var(--ds-accent-2, #f89f25) !important;
    background: rgba(248, 159, 37, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(248, 159, 37, 0.34), 0 0 14px rgba(248, 159, 37, 0.24) !important;
    outline: none !important;
  }

  .ds-studio .ds-mobile-bottom-nav button.is-active::before {
    color: var(--ds-accent-2, #f89f25) !important;
  }

  .ds-studio .ds-mobile-apply-cta {
    bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b) + 18px) !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    box-shadow: 0 16px 30px rgba(8, 15, 28, 0.42), 0 4px 10px rgba(8, 15, 28, 0.28) !important;
  }

  .ds-studio .ds-context-toolbar {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition:
      top 200ms cubic-bezier(.2,.8,.2,1),
      left 200ms cubic-bezier(.2,.8,.2,1),
      opacity 180ms ease,
      transform 200ms cubic-bezier(.2,.8,.2,1) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .ds-studio .ds-context-toolbar.is-edit-boost {
    filter: brightness(1.05) saturate(1.06) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating {
    max-width: calc(100vw - 12px) !important;
    border-color: rgba(92, 110, 132, 0.52) !important;
    box-shadow: 0 12px 28px rgba(5, 10, 20, 0.36) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating-above-object {
    transform: translateY(-1px) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating-bottom-safe {
    transform: translateY(0) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating-top-safe {
    transform: translateY(1px) !important;
  }
}

/* Quick dock icons + fixed mobile context bar */
.ds-object-quick-handle {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e9f2ff !important;
}

.ds-object-quick-handle .dashicons {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-object-quick-handle {
    width: 34px;
    min-width: 34px;
    border-radius: 10px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ds-studio .ds-object-quick-handle[data-quick-action="delete"] {
    color: #ffb3b3 !important;
    background: transparent !important;
  }

  .ds-studio .ds-mobile-apply-cta {
    bottom: var(--ds-mobile-safe-b) !important;
    z-index: 309 !important;
  }

  .ds-studio .ds-context-toolbar.is-visible,
  .ds-studio .ds-context-toolbar.is-visible.is-floating,
  .ds-studio .ds-context-toolbar.is-visible.is-fixed-bottom-safe {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 312 !important;
    transform: translateY(0) !important;
  }

  .ds-studio .ds-mobile-subpicker[hidden] {
    display: none !important;
  }

  .ds-studio .ds-mobile-sheet-grid .ds-mobile-subpicker {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(84, 104, 134, 0.36) !important;
  }

  .ds-studio .ds-mobile-inline-toggles {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .ds-studio .ds-mobile-inline-toggles button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 46px !important;
    padding: 0 34px 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(92, 112, 142, 0.64) !important;
    background: #111b2b !important;
    color: #dde8fa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    box-shadow: inset 0 0 0 1px rgba(16, 28, 45, 0.62) !important;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease !important;
  }

  .ds-studio .ds-mobile-inline-toggles button::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: -5px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(150, 170, 196, 0.78) !important;
    background: transparent !important;
    transform: scale(0.95) !important;
    transform-origin: center !important;
    opacity: 1 !important;
    transition: transform 140ms ease, opacity 140ms ease !important;
    z-index: 2 !important;
  }

  .ds-studio .ds-mobile-inline-toggles button span,
  .ds-studio .ds-mobile-inline-toggles button i {
    pointer-events: none !important;
  }

  .ds-studio .ds-mobile-inline-toggles button > * {
    pointer-events: none !important;
  }

  .ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action] {
    overflow: visible !important;
  }

  .ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action]::before,
  .ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action]::after {
    pointer-events: none !important;
  }

  .ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action]::before {
    content: "" !important;
    display: none !important;
  }

  .ds-studio .ds-mobile-inline-toggles button.is-active,
  .ds-studio .ds-mobile-inline-toggles button[aria-pressed="true"] {
    background: rgba(18, 157, 142, 0.16) !important;
    border-color: rgba(23, 176, 158, 0.76) !important;
    color: #eafff9 !important;
    box-shadow: inset 0 0 0 1px rgba(20, 169, 151, 0.34), 0 2px 8px rgba(8, 27, 41, 0.24) !important;
  }

  .ds-studio .ds-mobile-inline-toggles button.is-active::after,
  .ds-studio .ds-mobile-inline-toggles button[aria-pressed="true"]::after {
    opacity: 1 !important;
    transform: scale(1.05) !important;
    border-color: rgba(23, 176, 158, 0.96) !important;
    background: #19c4ad !important;
    box-shadow: 0 0 0 2px rgba(25, 196, 173, 0.25) !important;
  }

  .ds-studio .ds-mobile-inline-toggles button.is-active::before,
  .ds-studio .ds-mobile-inline-toggles button[aria-pressed="true"]::before {
    display: none !important;
  }

  .ds-studio.ds-crop-mode .ds-mobile-topbar,
  .ds-studio.ds-crop-mode .ds-mobile-bottom-nav,
  .ds-studio.ds-crop-mode .ds-mobile-apply-cta,
  .ds-studio.ds-crop-mode .ds-context-toolbar,
  .ds-studio.ds-crop-mode .ds-object-quick-dock {
    display: none !important;
  }

  .ds-mobile-crop-apply {
    display: none;
  }

  .ds-studio.ds-crop-mode .ds-mobile-crop-apply[aria-hidden="false"] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 420;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(21, 175, 154, 0.84);
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 26px rgba(6, 20, 31, 0.38);
  }

  .ds-studio .ds-mobile-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="insert"]::before { content: "\f502" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="canvas"]::before { content: "\f538" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="library"]::before { content: "\f318" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="preview"]::before { content: "\f177" !important; }

  .ds-studio[data-mobile-sheet-open="insert"] .ds-mobile-sheet[data-mobile-sheet="insert"],
  .ds-studio[data-mobile-sheet-open="canvas"] .ds-mobile-sheet[data-mobile-sheet="canvas"],
  .ds-studio[data-mobile-sheet-open="library"] .ds-mobile-sheet[data-mobile-sheet="library"],
  .ds-studio[data-mobile-sheet-open="art"] .ds-mobile-sheet[data-mobile-sheet="art"],
  .ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"],
  .ds-studio .ds-mobile-sheet.is-active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .ds-studio .ds-mobile-sheet[data-mobile-sheet="insert"] .ds-mobile-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .ds-studio .ds-mobile-insert-btn {
    min-height: 58px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
  }

  .ds-studio .ds-mobile-insert-btn::before {
    font-family: dashicons !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    opacity: 0.95 !important;
  }

  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="upload-image"]::before { content: "\f128" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="add-text"]::before { content: "\f122" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="upload-svg"]::before { content: "\f497" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="open-textures"]::before { content: "\f232" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="open-frames"]::before { content: "\f109" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="open-shapes"]::before { content: "\f116" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="open-emoticons"]::before { content: "\f328" !important; }
  .ds-studio .ds-mobile-insert-btn[data-mobile-sheet-action="open-icons"]::before { content: "\f180" !important; }

  .ds-studio .ds-mobile-sheet[data-mobile-sheet="insert"] .ds-mobile-btn-primary {
    min-height: 72px !important;
    background: linear-gradient(180deg, #18b6a6 0%, var(--accent, #0a7f73) 100%) !important;
    border-color: rgba(19, 179, 159, 0.92) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(6, 33, 44, 0.28) !important;
  }

  .ds-studio .ds-mobile-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .ds-studio .ds-mobile-topbar-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn {
    width: 58px !important;
    min-width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(104, 124, 152, 0.45) !important;
    background: #162033 !important;
    color: #eef4ff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 3px 4px !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn .dashicons {
    font-size: 16px !important;
    line-height: 1 !important;
    width: 16px !important;
    height: 16px !important;
  }

  .ds-studio .ds-mobile-topbar-icon-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ds-studio .ds-mobile-topbar-more-btn {
    width: 44px !important;
    min-width: 44px !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .ds-studio .ds-mobile-topbar-more-label {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #dce8ff !important;
  }

  .ds-studio .ds-mobile-topbar-more-btn .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
  }
}

/* =========================================================
   LORANDIT STUDIO — SAAS VISUAL SYSTEM POLISH (NO LOGIC)
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    background: radial-gradient(circle at top, #1e293b, #020617) !important;
  }

  /* Elevation layer 1: canvas container */
  .ds-studio .ds-canvas-shell {
    border-radius: 18px !important;
    background: #e5e7eb !important;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
      0 20px 60px rgba(0, 0, 0, 0.35) !important;
  }

  /* Elevation layer 2: sheets */
  .ds-studio .ds-mobile-sheet {
    background: #0b1420 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
    transition: transform 250ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease !important;
  }

  /* Elevation layer 3: floating */
  .ds-studio .ds-context-toolbar.is-visible,
  .ds-studio .ds-object-quick-dock.is-visible {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }

  /* Button hierarchy */
  .ds-studio .ds-mobile-sheet-grid .ds-mobile-btn-primary {
    background: linear-gradient(135deg, #26c6da, #1de9b6) !important;
    color: #02131d !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-grid .ds-mobile-btn-secondary,
  .ds-studio .ds-mobile-sheet-grid button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .ds-studio .ds-mobile-sheet-head button {
    background: transparent !important;
    border: none !important;
    color: #cfdaf0 !important;
    opacity: 0.85 !important;
  }

  /* Active tab emphasis */
  .ds-studio .ds-mobile-bottom-nav button.is-active {
    color: #26c6da !important;
    background: rgba(38, 198, 218, 0.15) !important;
  }

  /* Section label enterprise pattern */
  .ds-studio .ds-mobile-sheet-section h5 {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
  }

  /* Empty canvas card premium */
  .ds-studio .ds-mobile-empty-state-card,
  .ds-studio .ds-mobile-empty-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
  }

  .ds-studio .ds-mobile-empty-state-title,
  .ds-studio .ds-mobile-empty-card h4,
  .ds-studio .ds-mobile-empty-card p {
    color: #ecf4ff !important;
  }
}

@media (min-width: 901px) {
  .ds-studio button:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 900px) {
  .ds-canvas-side-right,
  .ds-studio.ds-fullscreen .ds-canvas-side-right {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .ds-canvas-side-right .ds-canvas-side-inner,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    min-width: 0;
    max-width: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .ds-canvas-side-right .ds-toolblock,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-toolblock {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .ds-canvas-side-right .ds-group,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-group {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-content: start;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .ds-canvas-side-right .ds-group > *,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-group > * {
    min-width: 0;
    max-width: 100%;
  }

  .ds-canvas-side-right button,
  .ds-canvas-side-right .ds-upload,
  .ds-studio.ds-fullscreen .ds-canvas-side-right button,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-upload {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final mobile modern overrides (keep at end to win specificity/cascade) */
@media (max-width: 900px) {
  /* Top group selector: desktop-modern look */
  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    min-width: 64px;
    height: 46px;
    padding: 4px 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    border: 1px solid #2c3442;
    background: #1a212c;
    color: #d9e3f5;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #203244;
    border-color: rgba(25, 179, 155, 0.62);
    color: #e8f8f4;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 13px;
    line-height: 1;
    color: var(--ds-modern-icon-color);
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    font-size: 8px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: inherit;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tool buttons must show text on mobile modern */
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::after,
  .ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::after {
    display: block !important;
    position: static !important;
    content: attr(data-title) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #d7e2f3 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone .ds-zone-tx,
  .ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone .ds-zone-tx {
    display: block !important;
    color: #d7e2f3 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  /* Narrower tool buttons + 2 columns in landscape */
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .ds-studio.ds-ui-modern .ds-canvas-side-right button,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-upload {
    height: 40px !important;
    padding: 2px 4px !important;
    border-radius: 9px !important;
  }

  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::before {
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    font-size: 14px !important;
    height: 16px !important;
  }

  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::after,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-zone-tx {
    font-size: 8px !important;
  }
}

.ds-woo-editor {
  margin: 14px 0 18px;
  clear: both;
}

.ds-woo-hint {
  margin: 8px 0 0;
  color: #5f7188;
  font-size: 12px;
}

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, var(--ds-bg-custom) 100%);
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 190px;
  position: sticky;
  top: 10px;
  z-index: 35;
}

.ds-toolblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid #ccdaea;
  border-radius: 8px;
  background: #ffffff;
  min-width: 0;
}

.ds-block-title {
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4d637d;
  padding: 0 2px;
}

.ds-block-insert {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(10, 127, 115, 0.1);
}

.ds-zoneblock {
  border-color: var(--ds-accent-2);
  box-shadow: inset 0 0 0 1px rgba(248, 159, 37, 0.12);
}

.ds-zone-preview {
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f8fc;
  cursor: pointer;
}

.ds-zone-preview-img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 82px;
  object-fit: contain;
  background: #eef3f9;
}

.ds-zone-preview-meta {
  font-size: 10px;
  font-weight: 700;
  color: #4d637d;
  padding: 4px 6px;
  border-top: 1px solid #d8e1ec;
  background: #ffffff;
}

.ds-zone-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.ds-font-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
}

.ds-font-picker-modal.is-open {
  display: flex;
}

.ds-font-picker-dialog {
  width: min(680px, 100%);
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.ds-font-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ds-font-picker-top h3 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  color: #2d3f56;
}

.ds-font-picker-top button {
  height: 30px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.ds-font-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ds-font-picker-item {
  border: 1px solid #d6e1ee;
  border-radius: 10px;
  background: #ffffff;
  color: #24364a;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.ds-font-picker-item.is-active {
  border-color: #2f74ff;
  box-shadow: 0 0 0 2px rgba(47, 116, 255, 0.14);
}

.ds-font-picker-item-name {
  display: block;
  font-size: 18px;
  line-height: 1.25;
}

.ds-font-picker-loading {
  border: 1px dashed #c9d6e6;
  border-radius: 10px;
  background: #ffffff;
  color: #4a6079;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.ds-mobile-font-field .ds-mobile-font-picker-open {
  width: 100%;
  border: 1px solid #c6d3e1;
  border-radius: 8px;
  background: #fff;
  min-height: 36px;
  padding: 0 10px;
  text-align: left;
}

.ds-exit-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10020;
}

.ds-exit-confirm-modal.is-open {
  display: flex;
}

.ds-exit-confirm-dialog {
  width: min(460px, 100%);
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 12px;
}

.ds-exit-confirm-head h3 {
  margin: 0;
  font-size: 16px;
  color: #1f334b;
}

.ds-exit-confirm-help {
  margin: 8px 0 12px;
  font-size: 12px;
  color: #526b88;
}

.ds-exit-confirm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ds-exit-confirm-actions button {
  min-height: 36px;
  border: 1px solid #c5d1df;
  border-radius: 8px;
  background: #fff;
  color: #20354e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ds-exit-confirm-actions button[data-action="exit-save"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 84%, #ffffff 16%) 0%,
    var(--ds-accent-secondary, #2f80ed) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 70%, #ffffff 30%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 34%, transparent);
}

.ds-exit-confirm-actions button[data-action="exit-apply"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-primary, #0a7f73) 84%, #ffffff 16%) 0%,
    var(--ds-primary, #0a7f73) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--ds-primary, #0a7f73) 70%, #ffffff 30%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-primary, #0a7f73) 34%, transparent);
}

.ds-exit-confirm-actions button[data-action="exit-leave"] {
  background: linear-gradient(180deg, #263349 0%, #121d30 100%) !important;
  border-color: rgba(12, 23, 40, 0.9) !important;
  color: #e9f1ff !important;
  box-shadow: 0 8px 18px rgba(12, 23, 40, 0.24);
}

.ds-exit-confirm-actions button[data-action="exit-cancel"] {
  background: #ffffff !important;
  border-color: #c5d1df !important;
  color: #20354e !important;
  box-shadow: 0 4px 12px rgba(12, 26, 44, 0.08);
}

.ds-refresh-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10020;
}

.ds-refresh-confirm-modal.is-open {
  display: flex;
}

.ds-refresh-confirm-dialog {
  width: min(420px, 100%);
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 12px;
}

.ds-refresh-confirm-head h3 {
  margin: 0;
  font-size: 16px;
  color: #1f334b;
}

.ds-refresh-confirm-help {
  margin: 8px 0 12px;
  font-size: 12px;
  color: #526b88;
}

.ds-refresh-confirm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ds-refresh-confirm-actions button {
  min-height: 36px;
  border: 1px solid #c5d1df;
  border-radius: 8px;
  background: #fff;
  color: #20354e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ds-refresh-confirm-actions button[data-action="refresh-ok"] {
  background: color-mix(in srgb, #2d3f56 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #2d3f56 68%, #ffffff 32%);
  color: #fff;
}

.ds-refresh-confirm-actions button[data-action="refresh-save"] {
  background: color-mix(in srgb, var(--ds-primary, #0a7f73) 82%, #ffffff 18%);
  border-color: color-mix(in srgb, var(--ds-primary, #0a7f73) 70%, #ffffff 30%);
  color: #fff;
}

.ds-designer-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  z-index: 10030;
  min-width: 200px;
  max-width: min(92vw, 420px);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: opacity 180ms ease, transform 220ms ease;
  box-shadow: 0 10px 24px rgba(8, 16, 30, 0.32);
}

.ds-designer-toast.is-success {
  background: #0a7f73;
  color: #fff;
  border: 1px solid color-mix(in srgb, #0a7f73 70%, #ffffff 30%);
}

.ds-designer-toast.is-error {
  background: #b73a3a;
  color: #fff;
  border: 1px solid color-mix(in srgb, #b73a3a 70%, #ffffff 30%);
}

.ds-designer-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ds-post-save-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.52);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10031;
}

.ds-post-save-modal.is-open {
  display: flex;
}

.ds-post-save-dialog {
  width: min(460px, 100%);
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 12px;
}

.ds-post-save-head h3 {
  margin: 0;
  font-size: 16px;
  color: #1f334b;
}

.ds-post-save-help {
  margin: 8px 0 12px;
  font-size: 12px;
  color: #526b88;
}

.ds-post-save-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ds-post-save-actions button {
  min-height: 36px;
  border: 1px solid #c5d1df;
  border-radius: 8px;
  background: #fff;
  color: #20354e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ds-post-save-actions button[data-action="post-save-continue"] {
  background: color-mix(in srgb, #2d3f56 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #2d3f56 68%, #ffffff 32%);
  color: #fff;
}

.ds-post-save-actions button[data-action="post-save-template"] {
  background: color-mix(in srgb, #4f46e5 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #4f46e5 68%, #ffffff 32%);
  color: #fff;
}

.ds-post-save-actions button[data-action="post-save-apply"] {
  background: color-mix(in srgb, var(--ds-accent, #f89f25) 84%, #ffffff 16%);
  border-color: color-mix(in srgb, var(--ds-accent, #f89f25) 68%, #ffffff 32%);
  color: #1d1607;
}

.ds-save-before-apply-field {
  display: grid;
  gap: 6px;
  margin: 2px 0 10px;
}

.ds-save-before-apply-field span {
  font-size: 12px;
  font-weight: 700;
  color: #1f334b;
}

.ds-save-before-apply-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c5d1df;
  border-radius: 8px;
  background: #ffffff;
  color: #1f334b;
  padding: 8px 10px;
  font-size: 13px;
}

.ds-save-before-apply-field input:focus {
  outline: 2px solid color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 45%, transparent);
  outline-offset: 1px;
}

.ds-empty-zones-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.52);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10032;
}

.ds-empty-zones-modal.is-open {
  display: flex;
}

.ds-empty-zones-dialog {
  width: min(480px, 100%);
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 12px;
}

.ds-empty-zones-head h3 {
  margin: 0;
  font-size: 16px;
  color: #1f334b;
}

.ds-empty-zones-help {
  margin: 8px 0 12px;
  font-size: 12px;
  color: #526b88;
}

.ds-empty-zones-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ds-empty-zones-actions button {
  min-height: 36px;
  border: 1px solid #c5d1df;
  border-radius: 8px;
  background: #fff;
  color: #20354e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ds-empty-zones-actions button[data-action="empty-zones-continue"] {
  background: color-mix(in srgb, #2d3f56 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #2d3f56 68%, #ffffff 32%);
  color: #fff;
}

.ds-empty-zones-actions button[data-action="empty-zones-go"] {
  background: color-mix(in srgb, #4f46e5 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #4f46e5 68%, #ffffff 32%);
  color: #fff;
}

.ds-empty-zones-actions button[data-action="empty-zones-remove"] {
  background: color-mix(in srgb, #f59e0b 84%, #ffffff 16%);
  border-color: color-mix(in srgb, #f59e0b 68%, #ffffff 32%);
  color: #1d1607;
}

.ds-studio .ds-mobile-btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ds-studio .ds-mobile-btn-with-icon .ds-mobile-btn-ic {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.ds-studio .ds-mobile-btn-with-icon .ds-mobile-btn-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ds-studio .ds-mobile-stroke-side-toggle {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(97, 118, 149, 0.6);
  background: linear-gradient(180deg, #122036 0%, #0d1828 100%);
  color: #eef4ff;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
}

.ds-studio .ds-mobile-stroke-side-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 7px;
  color: #b9c9df;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ds-studio .ds-mobile-stroke-side-toggle[data-value="inside"] span[data-role="mobile-stroke-side-inside"],
.ds-studio .ds-mobile-stroke-side-toggle[data-value="outside"] span[data-role="mobile-stroke-side-outside"] {
  background: #0ea5a4;
  color: #062b2b;
}

.ds-zone-picker-modal.is-open {
  display: flex;
}

.ds-zone-picker-dialog {
  width: min(780px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  row-gap: 0;
}

.ds-zone-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ds-zone-picker-top h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  text-transform: none;
  color: #12233a;
}

.ds-zone-picker-dialog button {
  height: 30px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.ds-zone-picker-help {
  margin-bottom: 8px;
  font-size: 12px;
  color: #5f7188;
}

.ds-zone-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.ds-zone-picker-group {
  border: 1px solid #d6e1ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
}

.ds-zone-picker-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ds-zone-picker-title {
  font-size: 12px;
  font-weight: 700;
  color: #2d3f56;
}

.ds-zone-picker-preview {
  position: relative;
  width: min(100%, 460px);
  margin-bottom: 8px;
  border: 1px solid #d6e1ee;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f8ff;
  text-align: center;
}

.ds-zone-picker-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}

.ds-zone-picker-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #eef3f9;
}

.ds-zone-picker-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.ds-zone-picker-area {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed #0f766e;
  background: rgba(15, 118, 110, 0.15);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

.ds-zone-picker-area-fill {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  opacity: 0.95;
}

.ds-zone-picker-area span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 2px 3px;
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(12, 38, 66, 0.75);
}

.ds-zone-picker-area.is-off {
  border-color: rgba(107, 125, 149, 0.9);
  background: rgba(107, 125, 149, 0.10);
  opacity: 0.45;
}

.ds-zone-picker-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}

.ds-startup-zone-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 34dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
  margin-bottom: 8px;
}

.ds-zone-picker-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #d6e1ee;
  border-radius: 8px;
  background: #fbfdff;
  font-size: 12px;
  color: #2d3f56;
}

.ds-zone-picker-check.is-disabled {
  opacity: 0.55;
}

.ds-zone-picker-note {
  margin-bottom: 8px;
  font-size: 12px;
  color: #7a5100;
  background: #fff5dd;
  border: 1px solid #f1d391;
  border-radius: 8px;
  padding: 6px 8px;
}

.ds-zone-picker-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #f8fbff;
  padding-top: 6px;
  border-top: 1px solid #e2eaf4;
}

.ds-zone-picker-actions .ds-woo-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ds-zone-picker-empty {
  border: 1px dashed #c8d4e2;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  color: #5f7188;
  font-size: 12px;
}

/* Zone tools stability: desktop + mobile landscape
   Keep header and Apply visible; scroll only the list. */
.ds-studio[data-vp-mobile="0"] .ds-zone-picker-modal,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-modal {
  align-items: flex-start;
  overflow: auto;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px));
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-dialog,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-dialog {
  width: min(860px, 100%);
  height: min(92dvh, calc(100dvh - 20px));
  max-height: min(92dvh, calc(100dvh - 20px));
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-top,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-top {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fbff;
  padding-bottom: 6px;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-list,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-group,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-group {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
  grid-template-areas:
    "head head"
    "preview checks";
  align-items: start;
  gap: 10px 12px;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-group-head,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-group-head {
  grid-area: head;
  margin-bottom: 0;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-group .ds-zone-picker-preview,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-group .ds-zone-picker-preview {
  grid-area: preview;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-group .ds-zone-picker-checks,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-group .ds-zone-picker-checks {
  grid-area: checks;
  grid-template-columns: 1fr;
  align-content: start;
}

.ds-studio[data-vp-mobile="0"] .ds-zone-picker-actions,
.ds-studio[data-vp-orient="landscape"] .ds-zone-picker-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #f8fbff;
}

.ds-zone-required-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(230, 238, 248, 0.76);
  backdrop-filter: blur(1px);
}

.ds-zone-required-overlay.is-visible {
  display: flex;
}

.ds-studio.ds-no-active-canvas .ds-canvas-viewport canvas,
.ds-studio.ds-no-active-canvas #ds-canvas,
.ds-studio.ds-no-active-canvas .canvas-container {
  opacity: 0 !important;
  visibility: hidden !important;
}

.ds-studio.ds-no-active-canvas .ds-canvas-wrap {
  display: none !important;
  visibility: hidden !important;
}

.ds-studio.ds-no-active-canvas .ds-canvas-shell,
.ds-studio.ds-no-active-canvas .ds-canvas-viewport {
  background: #f3f8ff !important;
}

.ds-zone-required-card {
  width: min(420px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(128, 145, 170, 0.44);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 24px rgba(10, 24, 44, 0.14);
  padding: 16px;
  text-align: center;
}

.ds-zone-required-card h4 {
  margin: 0 0 8px;
  color: #12233a;
  font-size: 16px;
  font-weight: 800;
}

.ds-zone-required-card p {
  margin: 0 0 10px;
  color: #2a415d;
  font-size: 13px;
}

.ds-zone-required-card button {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(10, 127, 115, 0.9);
  background: linear-gradient(180deg, #12a394 0%, #0a7f73 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.ds-zone-buttons button.is-active {
  background: var(--ds-accent-2);
  border-color: var(--ds-accent-2);
  color: #ffffff;
}

.ds-orient-buttons button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.ds-zone-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-zone-actions button {
  font-size: 10px;
  padding: 0 7px;
}

.ds-zone-ic {
  min-width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  background: #edf2f8;
  color: #3f5876;
}

.ds-zone-buttons button.is-active .ds-zone-ic {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.ds-zone-tx {
  font-size: 10px;
}

.ds-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.ds-template-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-active-zone-select {
  display: inline-grid;
  grid-template-columns: 48px minmax(110px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  margin-left: 8px;
  color: #13243a;
  font-size: 11px;
  font-weight: 700;
}

.ds-active-zone-help {
  display: block;
  grid-column: 2;
  grid-row: 1;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b627f;
}

.ds-active-zone-row {
  grid-column: 2;
  grid-row: 2;
  display: block;
}

.ds-active-zone-icon-btn {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #b9cadf;
  background: #ecf2f9;
  padding: 0;
  overflow: hidden;
  display: none;
  align-items: center;
  justify-content: center;
}

.ds-active-zone-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-active-zone-icon-btn.ds-is-3d-preview {
  background: linear-gradient(180deg, #f8fbff 0%, #eaf2fb 100%);
  border-color: #b4c8df;
  width: 54px;
  height: 54px;
}

.ds-active-zone-icon-btn.ds-is-3d-preview .ds-active-zone-icon {
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.ds-active-zone-select select {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid #b9cadf;
  background: #ffffff;
  color: #102136;
  padding: 0 8px;
  min-width: 110px;
  max-width: 170px;
}

.ds-auth-hint {
  font-size: 11px;
  color: var(--muted);
}

.ds-auth-hint a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.ds-auth-hint a:hover {
  text-decoration: underline;
}

.ds-mug-mini-group {
  padding-right: 4px;
  justify-content: space-between;
}

.ds-zoneblock .ds-mug-mini-group.ds-zone-preview-3d {
  width: 100%;
  justify-content: stretch;
  gap: 8px;
  padding-right: 0;
}

.ds-previewblock .ds-group.ds-mug-mini-group {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.ds-previewblock .ds-preview-mini {
  width: 100%;
  max-width: none;
  height: 92px;
}

.ds-previewblock .ds-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ds-preview-collapse-btn {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  border: 1px solid #8ca2bf !important;
  border-radius: 6px !important;
  background: #f4f8ff !important;
  color: #294767 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.ds-preview-collapse-btn:hover {
  background: #e7f1ff !important;
}

.ds-previewblock .ds-mug-mini-group {
  max-height: 140px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.14s ease;
}

.ds-previewblock.is-collapsed .ds-mug-mini-group {
  max-height: 0;
  opacity: 0;
}

.ds-toolbar button,
.ds-toolbar .ds-upload {
  height: 26px;
  min-width: 26px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 6px;
  padding: 0 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ds-toolbar button:hover,
.ds-toolbar .ds-upload:hover {
  background: #f3f8ff;
}

.ds-toolbar button:disabled,
.ds-toolbar button:disabled:hover {
  opacity: 0.55;
  cursor: not-allowed;
  background: #eef3f9;
  color: #6a7d95;
}

.ds-toolbar [data-action="save"],
.ds-toolbar [data-action="final-save"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ds-toolbar input[type="number"] {
  height: 26px;
  width: 84px;
  border: 1px solid #c5d1df;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
}

.ds-toolbar select {
  height: 26px;
  border: 1px solid #c5d1df;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
  min-width: 180px;
  max-width: 260px;
  background: #fff;
}

.ds-upload input { display: none; }

.ds-toggle,
.ds-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.ds-zoom-label {
  min-width: 34px;
  text-align: right;
  font-weight: 700;
  font-size: 10px;
}

.ds-zoom input[type="range"] {
  width: 74px;
}

.ds-toolbar button::before,
.ds-toolbar .ds-upload::before,
.ds-canvas-side button::before,
.ds-canvas-side .ds-upload::before,
.ds-tools-top button::before,
.ds-tools-top .ds-upload::before {
  font-family: dashicons;
  font-size: 12px;
  line-height: 1;
}

[data-action="add-text"]::before { content: "\f122"; }
.ds-upload-image::before { content: "\f128"; }
.ds-upload-svg::before { content: "\f317"; }
[data-action="mask"]::before { content: "\f237"; }
[data-action="mask-bake"]::before { content: "\f332"; }
[data-shape="rect"]::before { content: "\f116"; }
[data-shape="circle"]::before { content: "\f111"; }
[data-shape="triangle"]::before { content: "\f159"; }
[data-shape="star"]::before { content: "\f155"; }
[data-shape="heart"]::before { content: "\f487"; }
[data-shape="polygon"]::before { content: "\f538"; }
[data-action="undo"]::before { content: "\f171"; }
[data-action="redo"]::before { content: "\f172"; }
[data-action="duplicate-object"]::before { content: "\f105"; }
[data-action="crop-image"]::before { content: "\f165"; }
[data-action="ai-remove-bg"]::before { content: "\f180"; }
[data-action="crop-cancel"]::before { content: "\f335"; }
[data-action="delete-object"]::before { content: "\f182"; }
[data-action="object-props"]::before { content: "\f111"; }
[data-align="left"]::before { content: "\f206"; }
[data-align="center"]::before { content: "\f207"; }
[data-align="right"]::before { content: "\f208"; }
[data-align="top"]::before { content: "\f212"; }
[data-align="middle"]::before { content: "\f211"; }
[data-align="bottom"]::before { content: "\f213"; }
[data-action="group"]::before { content: "\f163"; }
[data-action="ungroup"]::before { content: "\f164"; }
[data-action="layer-up"]::before { content: "\f343"; }
[data-action="layer-down"]::before { content: "\f347"; }
[data-action="layer-front"]::before { content: "\f342"; }
[data-action="layer-back"]::before { content: "\f346"; }
[data-action="fit-canvas"]::before { content: "\f472"; }
[data-action="zoom-reset"]::before { content: "\f179"; }
[data-action="toggle-fullscreen"]::before { content: "\f211"; }
[data-action="export"]::before { content: "\f177"; }
[data-action="save"]::before { content: "\f147"; }
[data-action="final-save"]::before { content: "\f533"; }
[data-action="load-design"]::before { content: "\f176"; }
[data-action="my-designs"]::before { content: "\f109"; }

.ds-toggle input {
  margin: 0;
}

.ds-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #0a7f73);
}

.ds-toggle span {
  color: #5a6c84;
  font-weight: 600;
}

.ds-toggle input[type="checkbox"]:checked + span {
  color: var(--accent, #0a7f73);
}

.ds-workspace {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ds-workspace-grid {
  display: grid;
  grid-template-columns: minmax(110px, 14%) minmax(0, 72%) minmax(110px, 14%);
  gap: 10px;
  align-items: start;
}

.ds-tools-top {
  min-height: 0;
  position: static;
  top: auto;
  z-index: 40;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}

.ds-tools-top .ds-toolblock {
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.ds-tools-top .ds-block-title {
  display: block;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6f88;
  padding: 0 2px;
}

.ds-tools-top .ds-canvas-side-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  overflow: visible;
  width: 100%;
}

.ds-tools-top .ds-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: visible;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 100%;
}

.ds-tools-top .ds-template-form {
  max-width: 220px;
  position: relative;
  z-index: 20030;
}

.ds-tools-top .ds-template-form select {
  min-width: 120px;
  max-width: 170px;
  width: 170px;
  position: relative;
  z-index: 20031;
}

.ds-template-form [data-action="template-apply"] {
  border: 1px solid #93aecd !important;
  background: #f7fbff !important;
  color: #18304d !important;
}

.ds-template-form [data-action="template-apply"]::before {
  content: "\f147";
}

.ds-template-form [data-action="template-apply"]:hover,
.ds-template-form [data-action="template-apply"]:focus-visible {
  background: #e9f3ff !important;
  box-shadow: inset 0 0 0 1px rgba(10, 99, 209, 0.2);
}

.ds-no-template .ds-status {
  margin-top: 12px;
  color: #3f5876;
  font-weight: 600;
}

.ds-studio.ds-no-template .ds-mobile-nav,
.ds-studio.ds-no-template .ds-mobile-sheets,
.ds-studio.ds-no-template .ds-mobile-sheet-backdrop,
.ds-studio.ds-no-template .ds-mobile-apply-cta {
  display: none !important;
}

.ds-studio.ds-no-template .ds-toolbar .ds-toolblock:not(.ds-template-block) {
  display: none !important;
}

.ds-studio.ds-startup-gated .ds-mobile-nav,
.ds-studio.ds-startup-gated .ds-mobile-sheets,
.ds-studio.ds-startup-gated .ds-mobile-sheet-backdrop,
.ds-studio.ds-startup-gated .ds-mobile-apply-cta {
  display: none !important;
}

.ds-studio.ds-startup-gated .ds-toolbar .ds-toolblock:not(.ds-template-block) {
  display: none !important;
}

.ds-studio.ds-startup-gated .ds-mobile-topbar [data-mobile-action],
.ds-studio.ds-startup-gated .ds-mobile-topbar .ds-mobile-topbar-btn,
.ds-studio.ds-startup-gated .ds-mobile-topbar .ds-mobile-topbar-back,
.ds-studio.ds-startup-gated .ds-mobile-topbar .ds-mobile-topbar-center {
  display: inline-flex !important;
}

.ds-studio.ds-startup-gated .ds-mobile-topbar .ds-mobile-topbar-center {
  display: flex !important;
}

.ds-studio.ds-startup-gated .ds-startup-flow-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 460 !important;
  margin: 0 !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f3f8ff !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

.ds-studio.ds-startup-gated .ds-startup-flow-panel .ds-no-template-start-card {
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
}

.ds-studio.ds-startup-gated .ds-startup-flow-panel .ds-zone-picker-list {
  max-height: 44dvh !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.ds-startup-loading {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(243, 248, 255, 0.95);
  color: #12304e;
  font-size: 13px;
  font-weight: 700;
}

.ds-startup-loading-spinner {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 3px solid #c7d7ea;
  border-top-color: #0a7f73;
  animation: ds-startup-spin 0.9s linear infinite;
}

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

.ds-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 24, 0.44);
  backdrop-filter: blur(7px) saturate(0.95);
  -webkit-backdrop-filter: blur(7px) saturate(0.95);
  pointer-events: auto;
}

.ds-load-overlay.is-visible {
  display: flex;
}

.ds-load-overlay-card {
  min-width: 180px;
  min-height: 112px;
  border-radius: 14px;
  border: 1px solid rgba(196, 213, 235, 0.56);
  background: rgba(247, 251, 255, 0.98);
  color: #16324f;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(6, 12, 20, 0.30), 0 2px 8px rgba(6, 12, 20, 0.14);
  transform: translateY(0);
  animation: ds-load-overlay-fadein 160ms ease;
}

.ds-load-overlay-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ds-load-overlay-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2.5px solid #bed3ea;
  border-top-color: #0a7f73;
  border-right-color: #169d90;
  animation: ds-startup-spin 0.82s linear infinite;
  box-shadow: 0 0 0 3px rgba(22, 157, 144, 0.10);
}

.ds-load-overlay-text {
  letter-spacing: 0.01em;
}

.ds-load-overlay-powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(130, 150, 180, 0.28);
  background: rgba(255, 255, 255, 0.82);
  color: #16304f !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto !important;
}

.ds-load-overlay-powered:hover {
  filter: brightness(1.02);
}

.ds-load-overlay-powered-logo {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .ds-load-overlay-powered {
    padding: 2px 6px;
    gap: 5px;
    font-size: 10px;
  }
  .ds-load-overlay-powered-text {
    display: inline !important;
    font-size: 10px;
  }
}

@keyframes ds-load-overlay-fadein {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ds-no-template-start {
  margin: 14px 0 0;
  display: flex;
  justify-content: center;
  padding: 0 10px;
}

.ds-center-stage .ds-no-template-start,
.ds-canvas-shell .ds-no-template-start {
  margin: 0;
  min-height: 100%;
  align-items: center;
}

.ds-studio.ds-no-template .ds-no-template-start {
  position: absolute;
  inset: 0;
  z-index: 320;
  margin: 0;
  padding: 12px;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(243, 248, 255, 0.78);
}

.ds-no-template-start-card {
  width: min(1240px, calc(100% - 8px));
  border-radius: 14px;
  border: 1px solid #c8d5e5;
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(10, 24, 44, 0.1);
  padding: 20px;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

.ds-no-template-start-card h3 {
  margin: 0 0 8px;
  color: #12233a;
  font-size: 18px;
  font-weight: 800;
}

.ds-no-template-start-card p {
  margin: 0 0 12px;
  color: #2a415d;
  font-size: 13px;
}

.ds-no-template-start-card [data-role="no-template-step-1"],
.ds-no-template-start-card [data-role="no-template-step-2"],
.ds-no-template-start-card [data-role="no-template-step-2-load"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
}

.ds-no-template-start-card [data-role="no-template-step-1"][hidden],
.ds-no-template-start-card [data-role="no-template-step-2"][hidden],
.ds-no-template-start-card [data-role="no-template-step-2-load"][hidden] {
  display: none !important;
}

.ds-no-template-start-card [data-role="no-template-step-2-load"] h4 {
  margin: 0;
  color: #1b3552;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-no-template-load-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 2px;
}

.ds-no-template-load-groups .ds-my-designs-list {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ds-start-flow-steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ds-start-flow-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2e4864;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.72;
}

.ds-start-flow-steps li span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #a9bfd8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #ffffff;
  color: #24415e;
}

.ds-start-flow-steps li.is-active {
  opacity: 1;
  color: #12304e;
}

.ds-start-flow-steps li.is-active span {
  border-color: #0a7f73;
  background: #e7f8f5;
  color: #0a7f73;
}

.ds-start-flow-steps li.is-done {
  opacity: 1;
  color: #15563f;
}

.ds-start-flow-steps li.is-done span {
  border-color: #0b8e5a;
  background: #e7f9ef;
  color: #0b8e5a;
}

.ds-start-flow-steps li.is-skipped {
  color: #5b6f86;
  opacity: 0.95;
}

.ds-start-flow-steps li.is-skipped span {
  border-color: #c3cfde;
  background: #eef3fa;
  color: #5b6f86;
}

.ds-no-template-start-field {
  display: grid;
  gap: 6px;
  color: #20344e;
  font-size: 12px;
  font-weight: 700;
}

.ds-no-template-start-field--hidden {
  display: none !important;
}

.ds-no-template-start-field select {
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid #b9cadf;
  background: #ffffff;
  color: #11243c;
  padding: 0 10px;
}

.ds-no-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
  align-items: start;
}

.ds-no-template-grid-empty {
  grid-column: 1 / -1;
  min-height: 72px;
  border-radius: 10px;
  border: 1px dashed #bfd0e4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60758f;
  font-size: 12px;
  font-weight: 600;
  background: #f3f8ff;
}

.ds-no-template-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid #c9d8ea !important;
  background: #ffffff !important;
  color: #0f243d !important;
  border-radius: 12px !important;
  padding: 10px !important;
  display: grid !important;
  gap: 8px !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(10, 24, 44, 0.07) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

.ds-no-template-card:hover {
  border-color: #a7bdd8 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 16px rgba(12, 29, 51, 0.12) !important;
  transform: translateY(-1px) !important;
}

.ds-no-template-card.is-active {
  border-color: rgba(10, 127, 115, 0.95) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(10, 127, 115, 0.2), 0 10px 20px rgba(10, 127, 115, 0.16) !important;
}

.ds-no-template-card:focus-visible {
  outline: 2px solid rgba(10, 127, 115, 0.5) !important;
  outline-offset: 2px !important;
}

.ds-no-template-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid #d7e3f0;
  overflow: hidden;
  background: #edf3fa;
}

.ds-no-template-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-no-template-thumb-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f748f;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(233, 241, 251, 0.8)),
    repeating-linear-gradient(
      -45deg,
      rgba(95, 116, 143, 0.08) 0 8px,
      rgba(95, 116, 143, 0.02) 8px 16px
    );
}

.ds-no-template-card-title {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  color: #12243b !important;
}

.ds-no-template-card-meta {
  display: grid;
  gap: 3px;
  align-content: start;
}

.ds-no-template-card-size {
  font-size: 11px;
  line-height: 1.2;
  color: #4f6785 !important;
}

.ds-no-template-start-apply {
  margin-top: 0;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(10, 127, 115, 0.9);
  background: linear-gradient(180deg, #12a394 0%, #0a7f73 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.ds-no-template-start-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.ds-no-template-start-actions .ds-no-template-start-apply,
.ds-no-template-start-actions [data-role="no-template-next"],
.ds-no-template-start-actions [data-role="no-template-load-design"],
.ds-no-template-start-actions [data-role="no-template-open-load"],
.ds-no-template-start-actions [data-role="no-template-back-step-1"],
.ds-no-template-start-actions [data-role="no-template-back-step-2"],
.ds-no-template-start-actions [data-role="startup-hard-refresh"],
.ds-no-template-start-actions [data-role="startup-back-link"] {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  border-radius: 10px;
  border: 1px solid #c1d0e2;
  background: #ffffff;
  color: #1b3552 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-no-template-start-actions .ds-no-template-start-apply {
  border: 1px solid color-mix(in srgb, var(--ds-accent, #f89f25) 82%, #10243d 18%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 84%, #ffffff 16%) 0%,
    var(--ds-accent, #f89f25) 100%
  );
  color: #ffffff;
}

/* Startup actions color roles */
.ds-no-template-start-actions [data-role="no-template-next"],
.ds-no-template-start-actions [data-role="no-template-create-new"] {
  border: 1px solid color-mix(in srgb, var(--ds-accent, #f89f25) 82%, #10243d 18%) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 84%, #ffffff 16%) 0%,
    var(--ds-accent, #f89f25) 100%
  ) !important;
  color: #ffffff !important;
}

.ds-no-template-start-actions [data-role="no-template-open-load"],
.ds-no-template-start-actions [data-role="no-template-load-design"],
.ds-no-template-start-actions [data-role="startup-hard-refresh"] {
  border: 1px solid color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 82%, #10243d 18%) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 84%, #ffffff 16%) 0%,
    var(--ds-accent-secondary, #2f80ed) 100%
  ) !important;
  color: #ffffff !important;
}

.ds-no-template-start-actions [data-role="no-template-back-step-1"],
.ds-no-template-start-actions [data-role="no-template-back-step-2"],
.ds-no-template-start-actions [data-role="startup-back-link"] {
  border: 1px solid rgba(12, 23, 40, 0.9) !important;
  background: linear-gradient(180deg, #263349 0%, #121d30 100%) !important;
  color: #e9f1ff !important;
}

.ds-no-template-start-actions [data-role="no-template-next"]:hover,
.ds-no-template-start-actions [data-role="no-template-create-new"]:hover,
.ds-no-template-start-actions [data-role="no-template-open-load"]:hover,
.ds-no-template-start-actions [data-role="no-template-load-design"]:hover,
.ds-no-template-start-actions [data-role="startup-hard-refresh"]:hover,
.ds-no-template-start-actions [data-role="no-template-back-step-1"]:hover,
.ds-no-template-start-actions [data-role="no-template-back-step-2"]:hover,
.ds-no-template-start-actions [data-role="startup-back-link"]:hover {
  filter: brightness(1.05);
}

.ds-no-template-selected-label {
  margin-top: 2px;
  margin-bottom: 2px;
  color: #24415e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions button {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 10px 8px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: transform 150ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions .ds-no-template-step2-btn-icon {
  width: clamp(30px, 4.2vw, 44px);
  height: clamp(30px, 4.2vw, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions .ds-no-template-step2-btn-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.9;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions .ds-no-template-step2-btn-text {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions button[data-role="no-template-create-new"] {
  border-color: color-mix(in srgb, var(--ds-accent, #f89f25) 82%, #10243d 18%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 84%, #ffffff 16%) 0%,
    var(--ds-accent, #f89f25) 100%
  );
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-accent, #f89f25) 35%, transparent);
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 20px rgba(14, 30, 56, 0.18);
}

.ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions button:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.98);
  box-shadow: 0 6px 14px rgba(14, 30, 56, 0.14);
}

.ds-no-template-start-apply[disabled] {
  opacity: 0.55;
  filter: grayscale(0.2);
  cursor: not-allowed;
}

.ds-no-template-start-card .ds-mobile-empty-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ds-no-template-start-card .ds-mobile-empty-actions button {
  min-height: 42px;
  border-radius: 9px;
  border: 1px solid #bfd0e4;
  background: #ffffff;
  color: #102136;
  font-size: 12px;
  font-weight: 700;
  padding: 0 14px;
}

.ds-no-template-start-card .ds-mobile-empty-actions button:first-child {
  background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%);
  border-color: rgba(12, 161, 145, 0.98);
  color: #ffffff;
}

.ds-no-template-start-card .ds-start-flow-utility {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.ds-no-template-start-card .ds-start-flow-utility button,
.ds-no-template-start-card .ds-start-flow-utility a {
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid #c1d0e2;
  background: #ffffff;
  color: #1b3552;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-active-zone-select {
    margin-left: 6px;
    max-width: 44vw;
  }

  .ds-studio .ds-active-zone-help {
    display: block;
    grid-column: 2;
    grid-row: 1;
    font-size: 8px;
    color: #a9c1e3;
  }

  .ds-studio .ds-active-zone-row {
    grid-column: 2;
    grid-row: 2;
  }

  .ds-studio .ds-active-zone-icon-btn {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    border-radius: 5px;
    border-color: rgba(137, 165, 201, 0.6);
    background: #101a2a;
  }

  .ds-studio .ds-active-zone-select select {
    min-height: 28px;
    max-width: 44vw;
    min-width: 92px;
    font-size: 12px;
    padding: 0 6px;
  }

  .ds-no-template-start {
    margin-top: calc(var(--ds-mobile-top-h, 56px) + 10px);
    padding: 0 12px;
  }

  .ds-studio.ds-no-template .ds-no-template-start {
    top: calc(var(--ds-mobile-top-h, 56px) + 6px);
    bottom: calc(var(--ds-layout-status-h, 26px) + 6px);
    left: 0;
    right: 0;
    padding: 10px 12px;
  }

  .ds-no-template-start-card {
    background: #f3f8ff;
    border-color: #bfd0e4;
    box-shadow: 0 12px 24px rgba(9, 20, 36, 0.18);
    padding: 14px;
  }

  .ds-no-template-start-card h3 {
    font-size: 16px;
  }

  .ds-studio.ds-startup-gated .ds-startup-flow-panel {
    top: calc(var(--ds-mobile-top-h, 56px) + 6px) !important;
    bottom: calc(var(--ds-layout-status-h, 26px) + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 12px !important;
  }

  .ds-studio.ds-startup-gated .ds-startup-flow-panel .ds-no-template-start-card {
    max-height: calc(100dvh - var(--ds-mobile-top-h, 56px) - var(--ds-layout-status-h, 26px) - 24px) !important;
  }
}

@media (max-width: 1100px) {
  .ds-no-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .ds-no-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ds-studio.ds-no-template .ds-no-template-start {
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 10px 14px;
    overflow: hidden;
  }

  .ds-no-template-start-card {
    margin: 0 auto;
    width: min(980px, calc(100% - 8px));
    padding: 18px;
    max-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }

  .ds-no-template-start-card h3,
  .ds-no-template-start-card p {
    flex: 0 0 auto;
    margin-bottom: 2px;
  }

  .ds-no-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 6px 2px 2px;
    align-content: start;
    box-sizing: border-box;
  }

  .ds-no-template-load-groups .ds-my-designs-list {
    max-height: 240px;
  }

  .ds-no-template-card {
    border-radius: 11px !important;
    padding: 10px !important;
    gap: 8px !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .ds-no-template-card-thumb {
    border-radius: 9px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #edf3fa !important;
  }

  .ds-no-template-card-meta {
    display: grid !important;
    gap: 3px !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  .ds-no-template-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.28;
  }

  .ds-no-template-start-actions {
    margin-top: 0;
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, 0.95) 24%, #f8fbff 100%);
  }

  .ds-no-template-start-actions .ds-no-template-start-apply,
  .ds-no-template-start-actions [data-role="no-template-next"],
  .ds-no-template-start-actions [data-role="no-template-load-design"],
  .ds-no-template-start-actions [data-role="no-template-open-load"],
  .ds-no-template-start-actions [data-role="no-template-back-step-1"],
  .ds-no-template-start-actions [data-role="no-template-back-step-2"],
  .ds-no-template-start-actions [data-role="startup-hard-refresh"],
  .ds-no-template-start-actions [data-role="startup-back-link"] {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    width: 100%;
  }
}

.ds-canvas-side {
  min-width: 0;
  align-self: start;
  position: static;
  top: auto;
  z-index: 45;
  overflow: visible;
}

.ds-canvas-side-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 20px;
  margin-top: 0;
}

.ds-canvas-side .ds-toolblock {
  padding: 6px;
  overflow: visible;
  box-sizing: border-box;
}

.ds-canvas-side .ds-group {
  width: 100%;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
}

.ds-canvas-side button,
.ds-canvas-side .ds-upload,
.ds-tools-top button,
.ds-tools-top .ds-upload {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  flex: 0 0 42px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  box-sizing: border-box;
}

.ds-icon-only {
  position: relative;
  overflow: visible;
  color: #223955 !important;
  font-size: 0 !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background 0.16s ease;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1;
}

.ds-icon-only::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  top: auto;
  transform: translateX(-50%) scale(0.97);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  z-index: 10020;
  background: #132238;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(5, 18, 34, 0.25);
}

.ds-icon-only::before {
  content: attr(data-symbol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Arial Unicode MS", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #223955;
  border-radius: 12px;
  background: rgba(20, 44, 74, 0.04);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ds-icon-only.has-svg::before {
  content: "";
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--ds-icon-svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-image: var(--ds-icon-svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;
}

.ds-icon-only.ds-icon-fallback::before {
  content: attr(data-short) !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 800;
}

.ds-studio[data-ds-icon-set="rounded"] .ds-icon-only::before,
.ds-studio[data-ds-icon-set="rounded"] .ds-icon-zone .ds-zone-ic {
  border-radius: 999px;
}

.ds-studio[data-ds-icon-set="minimal"] .ds-icon-only::before,
.ds-studio[data-ds-icon-set="minimal"] .ds-icon-zone .ds-zone-ic {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(34, 57, 85, 0.2);
}

.ds-studio[data-ds-icon-set="outline"] .ds-icon-only::before,
.ds-studio[data-ds-icon-set="outline"] .ds-icon-zone .ds-zone-ic {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(34, 57, 85, 0.35);
}

.ds-studio[data-ds-icon-set="glyph"] .ds-icon-only::before {
  content: attr(data-symbol) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ds-icon-only.has-svg.ds-icon-fallback::before {
  content: "";
  font-size: 0;
}

.ds-tools-top .ds-icon-zone::after {
  left: calc(100% + 8px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) scale(0.97);
  transform-origin: left center;
}

.ds-tools-top .ds-icon-only::after {
  left: calc(100% + 8px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) scale(0.97);
  transform-origin: left center;
}

.ds-icon-only:hover,
.ds-icon-only:focus-visible,
.ds-icon-only:focus-within {
  transform: scale(1.10);
}

.ds-icon-only:hover::after,
.ds-icon-only:focus-visible::after,
.ds-icon-only:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.ds-tools-top .ds-icon-zone:hover::after,
.ds-tools-top .ds-icon-zone:focus-visible::after {
  transform: translateY(-50%) scale(1);
}

.ds-tools-top .ds-icon-only:hover::after,
.ds-tools-top .ds-icon-only:focus-visible::after,
.ds-tools-top .ds-icon-only:focus-within::after {
  transform: translateY(-50%) scale(1);
}

.ds-icon-only:hover::before,
.ds-icon-only:focus-visible::before,
.ds-icon-only:focus-within::before {
  color: var(--accent) !important;
  background: rgba(10, 127, 115, 0.14);
  box-shadow: inset 0 0 0 1px rgba(10, 127, 115, 0.22);
}

.ds-icon-only .ds-zone-tx {
  display: none;
}

.ds-icon-zone {
  position: relative;
  overflow: visible;
  min-width: 42px;
  height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background 0.16s ease;
  z-index: 1;
}

.ds-icon-zone .ds-zone-tx {
  display: none;
}

.ds-icon-zone:hover,
.ds-icon-zone:focus-visible {
  transform: scale(1.10);
}

.ds-icon-zone::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  top: auto;
  transform: translateX(-50%) scale(0.97);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  z-index: 10020;
  background: #132238;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(5, 18, 34, 0.25);
}

.ds-icon-zone:hover::after,
.ds-icon-zone:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.ds-tools-top .ds-icon-only:hover,
.ds-tools-top .ds-icon-only:focus-visible,
.ds-tools-top .ds-icon-only:focus-within,
.ds-tools-top .ds-icon-zone:hover,
.ds-tools-top .ds-icon-zone:focus-visible {
  z-index: 10010;
}

.ds-icon-zone .ds-zone-ic {
  min-width: 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(20, 44, 74, 0.06);
  color: #223955;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ds-toolblock.ds-collapsible-ready > .ds-block-title {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 14px;
}

.ds-toolblock.ds-collapsible-ready > .ds-block-title::after {
  content: "\25BE";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #6b7d95;
}

.ds-toolblock.ds-collapsible-ready.is-collapsed > .ds-block-title::after {
  content: "\25B8";
}

.ds-toolblock.ds-collapsible-ready > .ds-block-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-toolblock.ds-collapsible-ready.is-collapsed > .ds-block-content {
  display: none;
}

.ds-studio.ds-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  margin: 0 !important;
  padding: 8px;
  background: var(--ds-bg-custom);
  overflow: auto;
}

.ds-fullscreen-brand {
  display: none;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand {
  display: block;
  margin: 2px 0 10px;
  padding: 8px 10px 10px;
  border: 1px solid #3a1212;
  border-radius: 12px;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 102, 0, 0.24) 0%, rgba(255, 102, 0, 0) 60%),
    radial-gradient(65% 120% at 50% 100%, rgba(255, 180, 0, 0.15) 0%, rgba(255, 180, 0, 0) 65%),
    #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 129, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.38);
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-mark {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-copy.ds-subtitle-top,
.ds-studio.ds-fullscreen .ds-fullscreen-brand-copy.ds-subtitle-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-copy.ds-subtitle-top {
  flex-direction: column-reverse;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-copy.ds-subtitle-left {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-title-image {
  display: block;
  width: min(320px, 62%);
  max-height: 68px;
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
  border: 1px solid rgba(255, 152, 0, 0.36);
  box-shadow: 0 0 16px rgba(255, 80, 0, 0.35), 0 0 24px rgba(255, 166, 0, 0.18);
  background: #120606;
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-title-text {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffce7a;
  text-shadow: 0 0 14px rgba(255, 122, 0, 0.42);
}

.ds-studio.ds-fullscreen .ds-fullscreen-brand-subtitle {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffc66b;
  text-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
  text-align: right;
  white-space: nowrap;
}

.ds-studio.ds-fullscreen .ds-tools-top {
  position: static;
  top: auto;
  z-index: 120;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.ds-studio.ds-fullscreen .ds-tools-top .ds-toolblock {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.ds-studio.ds-fullscreen .ds-tools-top .ds-group {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ds-studio.ds-fullscreen .ds-tools-top .ds-block-title {
  display: block;
}

.ds-studio.ds-fullscreen .ds-canvas-side {
  position: static;
  top: auto;
  z-index: 115;
}

.ds-studio.ds-fullscreen .ds-canvas-side .ds-canvas-side-inner {
  margin-top: 0;
}

.ds-icon-zone:hover .ds-zone-ic,
.ds-icon-zone:focus-visible .ds-zone-ic {
  background: rgba(10, 127, 115, 0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(10, 127, 115, 0.22);
}

.ds-icon-zone.is-active .ds-zone-ic,
.ds-zone-buttons button.is-active .ds-zone-ic {
  background: rgba(10, 127, 115, 0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(10, 127, 115, 0.26);
}

.ds-icon-only:disabled::before,
.ds-icon-zone:disabled .ds-zone-ic,
.ds-icon-only[aria-disabled="true"]::before,
.ds-icon-zone[aria-disabled="true"] .ds-zone-ic {
  opacity: 0.45;
}

.ds-needs-login::before,
.ds-needs-login .ds-zone-ic {
  opacity: 0.85;
}

.ds-object-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px;
  box-sizing: border-box;
}

.ds-object-panel h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: #2d3f56;
}

.ds-layer-help {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
}

.ds-props {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.ds-props label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #5b6f87;
}

.ds-props input {
  height: 28px;
  border: 1px solid #c5d1df;
  border-radius: 6px;
  padding: 0 6px;
  background: #fbfdff;
  font-size: 12px;
}

.ds-props select {
  height: 28px;
  border: 1px solid #c5d1df;
  border-radius: 6px;
  padding: 0 6px;
  background: #fbfdff;
  font-size: 12px;
}

.ds-props input[type="color"] { padding: 2px; }
.ds-color-mixer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ds-color-mixer-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--sw, #000);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
}
.ds-color-mixer-swatch:focus-visible {
  outline: 2px solid var(--accent, #0a7f73);
  outline-offset: 1px;
}
.ds-mobile-colorpicker {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.48);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  padding: 14px;
}
.ds-mobile-colorpicker.is-open {
  display: flex;
}
.ds-mobile-colorpicker-card {
  width: min(92vw, 360px);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #cfe0f2;
  box-shadow: 0 20px 46px rgba(3, 10, 20, 0.34);
  padding: 12px;
}
.ds-mobile-colorpicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ds-mobile-colorpicker-head button {
  height: 32px;
  border-radius: 8px;
  border: 1px solid #c9d6e8;
  background: #f5f9ff;
  padding: 0 10px;
  font-size: 12px;
}
.ds-mobile-colorpicker-iro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.ds-mobile-colorpicker-sv {
  position: relative;
  height: 180px;
  border-radius: 10px;
  border: 1px solid #c8d6e8;
  background:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, #fff 0%, var(--hue-color, #ff0000) 100%);
  touch-action: none;
}
.ds-mobile-colorpicker-sv > span {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ds-mobile-colorpicker-hue {
  display: block;
  margin-top: 10px;
}
.ds-mobile-colorpicker-hue-strip {
  position: relative;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #bed0e6;
  background: linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  touch-action: none;
}
.ds-mobile-colorpicker-hue-strip > span {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(14, 26, 43, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ds-mobile-colorpicker-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ds-mobile-colorpicker-foot span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #c8d6e8;
  display: inline-block;
}
.ds-mobile-colorpicker-foot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: #20344f;
}

.ds-layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.ds-layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  background: #fff;
  padding: 4px 6px;
}

.ds-layer-item.is-active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.ds-layer-item.is-dragover {
  border-color: #0a7f73;
}

.ds-layer-select {
  width: 100%;
  min-height: 32px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-width: 0;
}

.ds-layer-thumb {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  border: 1px solid #cfd9e7;
  background: #eef3fb;
  color: #1f3a63;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ds-layer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 2px;
  line-height: 1.1;
}

.ds-layer-title {
  max-width: 200px;
  font-size: 12px;
  font-weight: 700;
  color: #102136;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-layer-subtitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f7188;
}

.ds-layer-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-layer-move {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border: 1px solid #c9d4e4;
  border-radius: 6px;
  background: #f7faff;
  color: #243447;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ds-layer-move:hover {
  border-color: #9bb3d3;
  background: #eef4ff;
}

.ds-layer-empty {
  border: 1px dashed #c8d4e2;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.ds-mobile-layer-section {
  grid-column: 1 / -1;
}

.ds-layer-list-inline {
  grid-column: 1 / -1;
  max-height: 220px;
}

.ds-canvas-shell {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.ds-canvas-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ds-bg-custom);
  padding: 10px;
  box-sizing: border-box;
}

.ds-ruler,
.ds-ruler-corner {
  display: none;
}

.ds-canvas-viewport {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: clamp(360px, 68vh, 820px);
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ds-canvas-viewport .canvas-container {
  margin: 0 auto;
  box-shadow: 0 8px 22px rgba(11, 25, 42, 0.16);
}

.ds-canvas-viewport .lower-canvas {
  display: block;
  background: #fff;
}

.ds-canvas-viewport .upper-canvas {
  background: transparent;
}

.ds-canvas-viewport .canvas-container,
.ds-canvas-viewport .lower-canvas,
.ds-canvas-viewport .upper-canvas {
  touch-action: none;
}

.ds-object-quick-dock {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 160;
}

.ds-object-quick-dock.is-visible {
  display: inline-flex;
}

.ds-object-quick-handle {
  height: 30px;
  min-height: 30px;
  width: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 999px;
  border: 0 !important;
  background: transparent !important;
  color: #ebf3ff;
  box-shadow: none !important;
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-object-quick-handle {
    height: 32px;
    min-height: 32px;
    width: 34px;
    min-width: 34px;
    padding: 0;
  }
}

.ds-status {
  margin-top: 10px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.ds-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ds-preview-head h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  color: #2d3f56;
}

.ds-preview-head button {
  height: 28px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 6px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.ds-preview-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px solid #d7e3f2;
  border-radius: 8px;
  background: rgba(233, 241, 251, 0.62);
  color: #45607d;
  font-size: 11px;
  line-height: 1.35;
}

.ds-preview-canvas {
  width: 100%;
  height: 360px;
  border: 1px solid #cdd8e6;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 35% 20%, #fefefe 0%, #dde6f0 65%, #cdd9e8 100%);
}

.ds-preview-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.ds-preview-mini {
  width: 104px;
  height: 66px;
  border: 1px solid #cdd8e6;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(circle at 35% 20%, #fefefe 0%, #dde6f0 65%, #cdd9e8 100%);
}

.ds-preview-mini canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.ds-mug-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9998;
}

.ds-mug-modal.is-open {
  display: flex;
}

.ds-mug-dialog {
  width: min(840px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 10px;
}

.ds-mug-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-preview-canvas-large {
  height: min(72vh, 520px);
}

.ds-props-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.ds-props-modal.is-open {
  display: flex;
}

.ds-props-dialog {
  width: min(920px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 10px;
}

.ds-props-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ds-props-dialog-head h3 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  color: #2d3f56;
}

.ds-props-dialog-head button {
  height: 30px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.ds-my-designs-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.ds-my-designs-modal.is-open {
  display: flex;
}

.ds-my-designs-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid #bfcfe2;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 18px 44px rgba(12, 26, 44, 0.26);
  padding: 10px;
}

.ds-my-designs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-my-designs-empty {
  border: 1px dashed #c9d6e6;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  color: #5f7188;
  font-size: 12px;
}

.ds-my-design-item {
  border: 1px solid #d6e1ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: start;
  gap: 8px;
}

.ds-my-design-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid #d3dde8;
  border-radius: 6px;
  background: #f5f8fc;
  overflow: hidden;
}

.ds-my-design-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-my-design-item.ds-my-design-item-set {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ds-my-design-set {
  width: 100%;
}

.ds-my-design-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.ds-my-design-set-item {
  border: 1px solid #d3dde8;
  border-radius: 8px;
  background: #f5f8fc;
  overflow: hidden;
}

.ds-my-design-set-item img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  background: #ffffff;
  display: block;
}

.ds-my-design-set-item span {
  display: block;
  padding: 4px 6px;
  font-size: 10px;
  color: #5f7188;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ds-asset-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.ds-asset-group-title {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5f7188;
}

.ds-asset-card {
  border: 1px solid #d3dde8;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-asset-card.ds-asset-card-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ds-asset-card.ds-asset-card-btn:focus-visible {
  outline: 2px solid #17a7a1;
  outline-offset: 1px;
}

.ds-asset-card.ds-asset-card-shape {
  align-items: stretch;
  justify-content: flex-start;
}

.ds-asset-card.ds-asset-card-shape .ds-asset-thumb {
  height: 120px;
}

.ds-asset-card.ds-asset-card-shape .ds-asset-meta {
  text-align: center;
}

.ds-asset-card.ds-asset-card-glyph {
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px !important;
  gap: 6px !important;
  aspect-ratio: 1 / 1;
}

.ds-asset-card.ds-asset-card-glyph .ds-asset-meta {
  text-align: center;
  width: 100%;
}

.ds-asset-library-grid[data-asset-kind="emoticons"],
.ds-asset-library-grid[data-asset-kind="icons"] {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.ds-asset-library-grid[data-asset-kind="textures"],
.ds-asset-library-grid[data-asset-kind="frames"],
.ds-asset-library-grid[data-asset-kind="shapes"] {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.ds-asset-library-grid[data-asset-kind="emoticons"] .ds-asset-card.ds-asset-card-glyph,
.ds-asset-library-grid[data-asset-kind="icons"] .ds-asset-card.ds-asset-card-glyph {
  aspect-ratio: 1 / 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
}

.ds-asset-library-grid[data-asset-kind="emoticons"] .ds-asset-card.ds-asset-card-glyph .ds-asset-thumb,
.ds-asset-library-grid[data-asset-kind="icons"] .ds-asset-card.ds-asset-card-glyph .ds-asset-thumb {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.ds-asset-library-grid[data-asset-kind="emoticons"] .ds-asset-card.ds-asset-card-glyph .ds-asset-glyph,
.ds-asset-library-grid[data-asset-kind="icons"] .ds-asset-card.ds-asset-card-glyph .ds-asset-glyph {
  font-size: 34px;
}

.ds-asset-card-wrap.ds-asset-card-wrap-media {
  position: relative;
}

.ds-asset-library-grid[data-asset-kind="textures"] .ds-asset-card.ds-asset-card-media,
.ds-asset-library-grid[data-asset-kind="frames"] .ds-asset-card.ds-asset-card-media,
.ds-asset-library-grid[data-asset-kind="shapes"] .ds-asset-card.ds-asset-card-media {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.ds-asset-library-grid[data-asset-kind="textures"] .ds-asset-card.ds-asset-card-media .ds-asset-thumb,
.ds-asset-library-grid[data-asset-kind="frames"] .ds-asset-card.ds-asset-card-media .ds-asset-thumb,
.ds-asset-library-grid[data-asset-kind="shapes"] .ds-asset-card.ds-asset-card-media .ds-asset-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid #d3dde8;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
  box-shadow: 0 4px 10px rgba(9, 30, 66, 0.08);
}

.ds-asset-library-grid[data-asset-kind="textures"] .ds-asset-card.ds-asset-card-media .ds-asset-meta,
.ds-asset-library-grid[data-asset-kind="frames"] .ds-asset-card.ds-asset-card-media .ds-asset-meta,
.ds-asset-library-grid[data-asset-kind="shapes"] .ds-asset-card.ds-asset-card-media .ds-asset-meta {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.ds-asset-media-bg-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 24px;
  min-width: 30px;
  border: 1px solid #c5d1df;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(9, 30, 66, 0.12);
}

.ds-asset-media-bg-btn:hover {
  filter: brightness(1.02);
}

.ds-asset-thumb {
  width: 100%;
  height: 110px;
  border: 1px solid #d3dde8;
  border-radius: 8px;
  background: #f5f8fc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-asset-thumb.ds-asset-thumb-glyph {
  background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

.ds-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ds-asset-glyph {
  font-size: 42px;
  line-height: 1;
  color: #0f172a;
}

.ds-asset-meta {
  font-size: 11px;
  color: #4d637d;
  font-weight: 700;
}

.ds-asset-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ds-asset-actions button {
  height: 28px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.ds-my-design-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #2d3f56;
}

.ds-my-design-meta strong {
  color: #122033;
}

.ds-my-design-meta span {
  font-size: 11px;
  color: #6b7d95;
}

.ds-my-design-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-my-design-actions button {
  height: 28px;
  border: 1px solid #c5d1df;
  background: #fff;
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .ds-toolbar { gap: 8px; }
  .ds-workspace { gap: 8px; }
  .ds-canvas-side button,
  .ds-canvas-side .ds-upload,
  .ds-tools-top button,
  .ds-tools-top .ds-upload {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .ds-icon-only::before { font-size: 21px; }
  .ds-icon-only::after,
  .ds-icon-zone::after { display: none; }
  .ds-canvas-wrap { padding: 6px; }
  .ds-canvas-viewport { height: 100%; min-height: 0; }
  .ds-tools-top .ds-block-title {
    font-size: 9px;
    letter-spacing: 0.05em;
  }
  .ds-props { grid-template-columns: 1fr; }
  .ds-props-dialog,
  .ds-my-designs-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 8px;
  }
  .ds-my-design-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .ds-tools-top.ds-mobile-tabs-mode {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    overflow: hidden !important;
  }
  .ds-mobile-tool-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 1px;
    -webkit-overflow-scrolling: touch;
  }
  .ds-mobile-tool-tab {
    flex: 0 0 auto;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #c6d3e3;
    background: #eef4fb;
    color: #2a415c;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .ds-mobile-tool-tab-ic { font-size: 12px; line-height: 1; }
  .ds-mobile-tool-tab-tx { line-height: 1; }
  .ds-mobile-tool-tab.is-active {
    background: #0a7f73;
    border-color: #0a7f73;
    color: #fff;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-canvas-side-inner {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-host {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-toolblock {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0;
    background: transparent;
    padding: 2px 0;
    box-shadow: none;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-block-title {
    display: none;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-group {
    overflow: visible;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-workspace {
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ds-tools-top {
    order: 1;
    height: auto;
    overflow: hidden;
    border: 1px solid #d3dde8;
    border-radius: 10px;
    padding: 3px;
    background: #f8fbff;
  }
  .ds-tools-top.ds-mobile-tabs-mode {
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding-bottom: 2px;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    flex: 0 0 auto;
    min-width: 72px;
    height: 28px;
    padding: 0 4px;
    font-size: 8px;
    gap: 3px;
    overflow: hidden;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 10px;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-canvas-side-inner,
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-host,
  .ds-tools-top.ds-mobile-tabs-mode .ds-toolblock {
    display: none !important;
  }

  .ds-workspace-grid {
    order: 2;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(148px, 36dvh);
    gap: 4px;
    min-height: 0;
    overflow: hidden;
  }
  .ds-canvas-shell { grid-row: 1; grid-column: 1; min-height: 0; }
  .ds-canvas-wrap { padding: 8px; height: 100%; }
  .ds-canvas-viewport { height: 100%; min-height: 0; }
  .ds-canvas-side-left { display: none; }
  .ds-canvas-side-right {
    display: block;
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    overflow: hidden;
  }
  .ds-canvas-side-right .ds-canvas-side-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 4px;
  }
  .ds-canvas-side-right .ds-toolblock {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
  }
  .ds-canvas-side-right .ds-group {
    flex-wrap: wrap;
    white-space: normal;
    overflow: hidden;
    justify-content: flex-start;
    gap: 3px;
    padding: 3px;
  }
  .ds-canvas-side-right button,
  .ds-canvas-side-right .ds-upload {
    width: 100%;
    min-width: 0;
    height: 32px;
    flex: 0 0 auto;
  }
  .ds-canvas-side-right .ds-icon-only::before {
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    font-size: 16px;
  }
.ds-canvas-side-right .ds-icon-zone .ds-zone-ic {
    min-width: 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 9px;
  }

  /* Mobile portrait (normal mode): show icon + text in modern style */
  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-canvas-side-right .ds-icon-only,
  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-canvas-side-right .ds-icon-zone {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px;
    height: 56px !important;
    border-radius: 10px !important;
    background: #1a212c !important;
    border: 1px solid #2c3442 !important;
  }

  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-canvas-side-right .ds-icon-only::after {
    position: static;
    content: attr(data-title);
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #d7e2f3;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    left: auto;
    top: auto;
    bottom: auto;
  }

  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-canvas-side-right .ds-zone-tx {
    display: block !important;
    color: #d7e2f3;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Top panel tabs: same modern visual language */
  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    border: 1px solid #2c3442;
    background: #1a212c;
    color: #d9e3f5;
    border-radius: 10px;
    height: 30px;
  }

  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #203244;
    border-color: rgba(25, 179, 155, 0.62);
    color: #e8f8f4;
  }

  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    color: var(--ds-modern-icon-color);
    font-size: 11px;
  }

  .ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    color: inherit;
    font-size: 8px;
    font-weight: 700;
  }
}

/* Modern UI variant scaffold (non-breaking, style-only pass) */
.ds-studio.ds-ui-modern {
  --line: #2a2f38;
  --panel: #141922;
  --text: #e9edf6;
  --muted: #9aa5ba;
  --accent: #19b39b;
  --ds-accent-2: #f4a73b;
  --ds-bg-custom: #c9ccd3;
  --ds-modern-icon-color: #ffffff;
  background: var(--ds-bg-custom);
  border-radius: 14px;
}

.ds-studio.ds-ui-modern .ds-workspace-grid {
  grid-template-columns: minmax(230px, 20%) minmax(0, 64%) minmax(120px, 16%);
  gap: 10px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-left { grid-column: 1; }
.ds-studio.ds-ui-modern .ds-canvas-shell { grid-column: 2; }
.ds-studio.ds-ui-modern .ds-canvas-side-right { grid-column: 3; }

/* Admin option: move right panel to the left side (between tools and canvas) */
.ds-studio.ds-ui-modern.ds-modern-right-left .ds-workspace-grid {
  grid-template-columns: minmax(230px, 20%) minmax(0, 1fr);
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-side-left { grid-column: 1; }
.ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-shell { grid-column: 2; }
.ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-side-right { display: none; }

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-side-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-modern-zones-top {
  border: 1px solid #202531;
  border-radius: 12px;
  background: #111722;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-modern-zones-top .ds-toolblock {
  border: 1px solid #2a3343;
  border-radius: 10px;
  background: #1a212c;
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-modern-zones-top .ds-block-title {
  color: #d6e0f1;
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-modern-zones-top .ds-previewblock {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ds-studio.ds-ui-modern.ds-modern-right-left .ds-modern-shell {
  flex: 1 1 auto;
  min-height: 0;
}

.ds-studio.ds-ui-modern .ds-canvas-side .ds-canvas-side-inner {
  gap: 10px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-left {
  background: #12151c;
  border: 1px solid #242a36;
  border-radius: 14px;
  padding: 8px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-left .ds-toolblock {
  border: 1px solid #283244;
  background: #171c26;
  border-radius: 12px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-left .ds-block-title {
  color: #d8e0f1;
  letter-spacing: 0.08em;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-toolblock {
  border: 1px solid #c7cedb;
  background: #f7f9fc;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-block-title {
  color: #3f4d64;
}

.ds-studio.ds-ui-modern .ds-canvas-wrap {
  border-color: #aeb8ca;
  border-radius: 14px;
  background: linear-gradient(180deg, #d9dee8 0%, #cfd5e0 100%);
}

.ds-studio.ds-ui-modern .ds-tools-top {
  border-radius: 14px;
  border: 1px solid #b3bfd3;
  background: linear-gradient(180deg, #edf1f8 0%, #dde4f0 100%);
}

.ds-studio.ds-ui-modern .ds-tools-top .ds-toolblock {
  border-radius: 10px;
  border-color: #b9c6db;
  background: #f9fbff;
}

@media (min-width: 901px) {
  .ds-studio.ds-ui-modern .ds-tools-top {
    display: none;
  }
}

.ds-studio.ds-ui-modern .ds-canvas-side-left {
  padding: 0;
  overflow: hidden;
  transition: width 0.18s ease, min-width 0.18s ease, max-width 0.18s ease;
}

.ds-studio.ds-ui-modern .ds-modern-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  border: 1px solid #202531;
  border-radius: 14px;
  overflow: hidden;
  background: #f7f9fd;
  transition: grid-template-columns 0.18s ease;
}

.ds-studio.ds-ui-modern .ds-modern-rail {
  background: #131820;
  border-right: 1px solid #232a36;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 6px;
}


.ds-studio.ds-ui-modern .ds-modern-tab {
  width: 100%;
  height: 50px;
  border: 1px solid #2c3442;
  border-radius: 12px;
  background: #1a212c;
  color: var(--ds-modern-icon-color);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.ds-studio.ds-ui-modern .ds-modern-tab:hover {
  transform: translateY(-1px);
  background: #212b39;
}

.ds-studio.ds-ui-modern .ds-modern-tab.is-active {
  background: #203244;
  border-color: #2a8a7d;
  box-shadow: inset 0 0 0 1px rgba(25, 179, 155, 0.28);
}

.ds-studio.ds-ui-modern .ds-modern-tab-ic {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.ds-studio.ds-ui-modern .ds-modern-tab-tx {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #c8d2e4;
  color: color-mix(in srgb, var(--ds-modern-icon-color) 78%, #7f8da6 22%);
}

.ds-studio.ds-ui-modern .ds-modern-tab.is-active .ds-modern-tab-tx {
  color: var(--ds-modern-icon-color);
}

.ds-studio.ds-ui-modern .ds-modern-tab::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  z-index: 10040;
  background: #0f1520;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ds-studio.ds-ui-modern .ds-modern-tab:hover::after,
.ds-studio.ds-ui-modern .ds-modern-tab:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.ds-studio.ds-ui-modern .ds-modern-stage {
  background: #f7f9fd;
  padding: 8px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.ds-studio.ds-ui-modern .ds-modern-stage > .ds-toolblock {
  display: none;
  border: 1px solid #d2dae8;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.ds-studio.ds-ui-modern .ds-modern-stage > .ds-toolblock.is-modern-active {
  display: flex;
  flex-direction: column;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-block-title {
  font-size: 11px;
  color: #31435d;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-group {
  gap: 4px;
  padding: 4px;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  align-content: start;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-group > * {
  min-width: 0;
  max-width: 100%;
}

/* Modern icon treatment for action buttons: match group-tab style */
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone {
  background: #1a212c !important;
  border: 1px solid #2c3442 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::before,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone .ds-zone-ic {
  background-color: transparent;
  color: var(--ds-modern-icon-color);
  box-shadow: none;
}

/* Keep SVG masks visible in modern mode */
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only.has-svg::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only.has-svg::before {
  background-color: var(--ds-modern-icon-color) !important;
  background-image: none !important;
}

/* Hard fallback for environments where CSS mask doesn't render reliably */
.ds-studio.ds-ui-modern .ds-icon-only.ds-inline-svg-mode::before {
  content: "" !important;
  display: none !important;
}

.ds-studio.ds-ui-modern .ds-icon-only .ds-inline-svg {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-modern-icon-color);
}

.ds-studio.ds-ui-modern .ds-icon-only .ds-inline-svg svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:hover::before,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:focus-visible::before,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone:hover .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone:focus-visible .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:hover::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:focus-visible::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone:hover .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone:focus-visible .ds-zone-ic {
  background-color: transparent;
  color: #e9f8f4 !important;
  box-shadow: none;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only.has-svg:hover::before,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only.has-svg:focus-visible::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only.has-svg:hover::before,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only.has-svg:focus-visible::before {
  background-color: #e9f8f4 !important;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:hover .ds-inline-svg,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:focus-visible .ds-inline-svg,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:hover .ds-inline-svg,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:focus-visible .ds-inline-svg {
  color: #e9f8f4 !important;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:hover,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:focus-visible,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone:hover,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone:focus-visible,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:hover,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:focus-visible,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone:hover,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone:focus-visible {
  background: #212b39 !important;
  border-color: rgba(25, 179, 155, 0.55) !important;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone.is-active .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-zone-buttons button.is-active .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone.is-active .ds-zone-ic,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-zone-buttons button.is-active .ds-zone-ic {
  background: transparent;
  color: #e8f8f4 !important;
  box-shadow: none;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-zone-buttons button.is-active,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone.is-active,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-zone-buttons button.is-active,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone.is-active {
  background: #203244 !important;
  border-color: rgba(25, 179, 155, 0.62) !important;
}

.ds-studio.ds-ui-modern .ds-modern-stage button,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-upload {
  width: 100%;
  min-width: 0;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 10px;
  justify-content: center;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::before {
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  font-size: 16px;
  height: 20px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::before {
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  font-size: 16px;
  height: 20px;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone .ds-zone-ic {
  min-width: 26px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 4px;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::after,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::after {
  position: static;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none;
  content: attr(data-title);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #b8c5dc;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  left: auto;
  top: auto;
  bottom: auto;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:hover::after,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only:focus-visible::after,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:hover::after,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only:focus-visible::after {
  color: #e8f8f4;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone .ds-zone-tx,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone .ds-zone-tx {
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  color: #c8d2e4;
  color: color-mix(in srgb, var(--ds-modern-icon-color) 78%, #7f8da6 22%);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone:hover .ds-zone-tx,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone.is-active .ds-zone-tx,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone:hover .ds-zone-tx,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone.is-active .ds-zone-tx {
  color: #e8f8f4;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 4px;
  align-content: start;
  overflow: hidden;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-group > * {
  min-width: 0;
  max-width: 100%;
}

.ds-studio.ds-ui-modern .ds-canvas-side-right button,
.ds-studio.ds-ui-modern .ds-canvas-side-right .ds-upload {
  width: 100%;
  min-width: 0;
  height: 46px;
  flex: 0 0 auto;
}

/* Zones block: thumbnail left, zone buttons in 2 columns right */
.ds-studio.ds-ui-modern .ds-zoneblock {
  display: grid;
  grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.ds-studio.ds-ui-modern .ds-zoneblock > .ds-block-title {
  grid-column: 1 / 3;
}

.ds-studio.ds-ui-modern .ds-zoneblock > .ds-zone-preview {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 128px;
}

.ds-studio.ds-ui-modern .ds-zoneblock > .ds-zone-buttons {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  align-content: start;
  padding: 0;
  border: 0;
  background: transparent;
}

.ds-studio.ds-ui-modern .ds-zoneblock > .ds-zone-buttons button {
  height: 58px;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 22px auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 4px;
}

.ds-studio.ds-ui-modern .ds-zoneblock .ds-zone-ic {
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.ds-studio.ds-ui-modern .ds-zoneblock .ds-zone-tx {
  display: block !important;
  color: #d7e2f3;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Compact Zones mode for normal page (keep fullscreen as-is) */
.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock {
  gap: 4px;
  grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock > .ds-zone-preview {
  max-width: 112px;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zone-preview-img {
  height: 56px;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zone-preview-meta {
  font-size: 9px;
  padding: 3px 5px;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock > .ds-zone-buttons {
  gap: 4px;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock > .ds-zone-buttons button {
  height: 46px;
  grid-template-rows: 18px auto;
  padding: 3px;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock .ds-zone-ic {
  min-width: 18px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
}

.ds-studio.ds-ui-modern:not(.ds-fullscreen) .ds-zoneblock .ds-zone-tx {
  font-size: 9px;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-template-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-template-form select,
.ds-studio.ds-ui-modern .ds-modern-stage .ds-template-form button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-template-form button {
  height: 32px;
  border-radius: 8px;
  padding: 0 8px;
  justify-content: center;
}

.ds-studio.ds-ui-modern .ds-modern-stage .ds-auth-hint {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}


@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio.ds-fullscreen .ds-fullscreen-brand {
    margin: 0 0 4px;
    padding: 3px 6px;
    min-height: 0;
    max-height: 8dvh;
    overflow: hidden;
  }
  .ds-studio.ds-fullscreen .ds-fullscreen-brand-title-image {
    max-height: 5.5dvh;
    width: min(190px, 52%);
    border-radius: 6px;
  }
  .ds-studio.ds-fullscreen .ds-fullscreen-brand-subtitle {
    margin: 0;
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .ds-studio.ds-fullscreen .ds-fullscreen-brand-title-text {
    font-size: 12px;
  }

  .ds-workspace,
  .ds-studio.ds-fullscreen .ds-workspace {
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 152px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
    padding-top: 0;
  }
  .ds-tools-top,
  .ds-studio.ds-fullscreen .ds-tools-top {
    order: 1;
    grid-column: 1 / 3;
    grid-row: 1;
    height: auto;
    overflow: hidden;
    border: 1px solid #d3dde8;
    border-radius: 10px;
    padding: 3px;
    background: #f8fbff;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs,
  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    padding: 2px;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab,
  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 22px;
    padding: 0 4px;
    font-size: 7px;
    gap: 3px;
    overflow: hidden;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 9px;
  }

  .ds-workspace-grid,
  .ds-studio.ds-fullscreen .ds-workspace-grid {
    order: 2;
    grid-column: 1 / 3;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 152px;
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    height: 100%;
  }
  .ds-canvas-shell { grid-column: 1; grid-row: 1; min-height: 0; }
  .ds-canvas-wrap { height: 100%; padding: 8px; }
  .ds-canvas-viewport { height: 100%; min-height: 0; }
  .ds-canvas-side-left,
  .ds-studio.ds-fullscreen .ds-canvas-side-left {
    display: none;
  }
  .ds-canvas-side-right,
  .ds-studio.ds-fullscreen .ds-canvas-side-right {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
  }
  .ds-canvas-side-right .ds-canvas-side-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 4px;
  }
  .ds-canvas-side-right .ds-toolblock {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
    border-radius: 7px;
  }
  .ds-canvas-side-right .ds-group {
    flex-wrap: wrap;
    white-space: normal;
    overflow: hidden;
    justify-content: flex-start;
    gap: 3px;
    padding: 3px;
  }
  .ds-canvas-side-right button,
  .ds-canvas-side-right .ds-upload {
    width: 100%;
    min-width: 0;
    height: 32px;
    flex: 0 0 auto;
  }
  .ds-canvas-side-right .ds-icon-only::before {
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    font-size: 16px;
  }
  .ds-canvas-side-right .ds-icon-zone .ds-zone-ic {
    min-width: 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 9px;
  }

  /* Modern UI in landscape mobile: mirror desktop-style panel workflow */
  .ds-studio.ds-ui-modern .ds-tools-top,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-tools-top {
    display: none !important;
  }

  .ds-studio.ds-ui-modern .ds-workspace,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .ds-studio.ds-ui-modern .ds-workspace-grid,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  .ds-studio.ds-ui-modern:not(.ds-modern-right-left) .ds-workspace-grid,
  .ds-studio.ds-ui-modern:not(.ds-modern-right-left).ds-fullscreen .ds-workspace-grid {
    grid-template-columns: minmax(180px, 32%) minmax(0, 1fr) minmax(106px, 20%);
  }

  .ds-studio.ds-ui-modern:not(.ds-modern-right-left) .ds-canvas-side-left,
  .ds-studio.ds-ui-modern:not(.ds-modern-right-left).ds-fullscreen .ds-canvas-side-left {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
  }

  .ds-studio.ds-ui-modern:not(.ds-modern-right-left) .ds-canvas-shell,
  .ds-studio.ds-ui-modern:not(.ds-modern-right-left).ds-fullscreen .ds-canvas-shell {
    grid-column: 2;
    grid-row: 1;
  }

  .ds-studio.ds-ui-modern:not(.ds-modern-right-left) .ds-canvas-side-right,
  .ds-studio.ds-ui-modern:not(.ds-modern-right-left).ds-fullscreen .ds-canvas-side-right {
    display: block;
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
  }

  .ds-studio.ds-ui-modern.ds-modern-right-left .ds-workspace-grid,
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-workspace-grid {
    grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
  }

  .ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-side-left,
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-canvas-side-left {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
  }

  .ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-shell,
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-canvas-shell {
    grid-column: 2;
    grid-row: 1;
  }

  .ds-studio.ds-ui-modern.ds-modern-right-left .ds-canvas-side-right,
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-canvas-side-right {
    display: none;
  }

  .ds-studio.ds-ui-modern .ds-canvas-side-left .ds-canvas-side-inner,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-left .ds-canvas-side-inner,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-canvas-side-inner,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Final mobile modern overrides: keep this at the end */
@media (max-width: 900px) {
  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
    gap: 6px;
    padding: 4px;
    overflow: hidden;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    min-width: 0 !important;
    height: 48px;
    padding: 4px 6px;
    border-radius: 12px;
    border: 1px solid #2c3442;
    background: #131a25;
    color: #dce7f9;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #1f3248;
    border-color: rgba(25, 179, 155, 0.62);
    color: #eff9f6;
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 14px;
    line-height: 1;
    color: var(--ds-modern-icon-color);
  }

  .ds-studio.ds-ui-modern .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::after,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::after {
    content: attr(data-title) !important;
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #dce7f9 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-zone .ds-zone-tx,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-zone .ds-zone-tx {
    display: block !important;
    color: #dce7f9 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio.ds-ui-modern .ds-tools-top,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-tools-top {
    display: block !important;
  }

  .ds-studio.ds-ui-modern .ds-workspace,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .ds-studio.ds-ui-modern .ds-workspace-grid,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .ds-studio.ds-ui-modern .ds-modern-stage .ds-group,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .ds-studio.ds-ui-modern .ds-modern-stage button,
  .ds-studio.ds-ui-modern .ds-modern-stage .ds-upload,
  .ds-studio.ds-ui-modern .ds-canvas-side-right button,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-upload {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 3px 5px !important;
    border-radius: 10px !important;
  }

  .ds-studio.ds-ui-modern .ds-modern-stage .ds-icon-only::before,
  .ds-studio.ds-ui-modern .ds-canvas-side-right .ds-icon-only::before {
    -webkit-mask-size: 15px 15px !important;
    mask-size: 15px 15px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio,
  .ds-studio.ds-fullscreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-workspace,
  .ds-studio.ds-fullscreen .ds-workspace {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .ds-studio .ds-tools-top,
  .ds-studio.ds-fullscreen .ds-tools-top {
    order: 1 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .ds-tools-top.ds-mobile-tabs-mode {
    grid-template-rows: auto !important;
    gap: 0 !important;
  }

  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 4px !important;
  }

  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    min-width: 74px !important;
    height: 44px !important;
    padding: 4px 6px !important;
    border-radius: 11px !important;
    border: 1px solid #2c3442 !important;
    background: #131a25 !important;
    color: #dce7f9 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #1f3248 !important;
    border-color: rgba(25, 179, 155, 0.62) !important;
    color: #eff9f6 !important;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ds-tools-top.ds-mobile-tabs-mode .ds-canvas-side-inner,
  .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-host,
  .ds-tools-top.ds-mobile-tabs-mode .ds-toolblock {
    display: none !important;
  }

  .ds-studio .ds-workspace-grid,
  .ds-studio.ds-fullscreen .ds-workspace-grid {
    order: 2 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(160px, 38dvh) !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-canvas-shell,
  .ds-studio.ds-fullscreen .ds-canvas-shell {
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-height: 0 !important;
  }

  .ds-studio .ds-canvas-side-left,
  .ds-studio.ds-fullscreen .ds-canvas-side-left {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  .ds-studio .ds-canvas-side-right,
  .ds-studio.ds-fullscreen .ds-canvas-side-right {
    display: block !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-canvas-side-right .ds-canvas-side-inner,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 4px !important;
  }

  .ds-studio .ds-canvas-side-right .ds-toolblock,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-toolblock {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 4px !important;
  }
}

/* Status bar readability + stable mobile placement */
.ds-status {
  margin-top: 10px;
  min-height: 20px;
  padding: 8px 10px;
  border: 1px solid #cfdae9;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  color: #2d435d;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .ds-studio {
    --ds-mobile-status-h: 46px;
  }

  .ds-studio:not(.ds-fullscreen) .ds-workspace {
    height: calc(100dvh - var(--ds-mobile-status-h)) !important;
  }

  .ds-studio:not(.ds-fullscreen) .ds-status {
    position: relative !important;
    z-index: 5;
    margin-top: 6px;
    margin-bottom: 0;
    min-height: 0;
    padding: 7px 9px;
    font-size: 11px;
    border-radius: 9px;
  }
}

/* Fullscreen mobile portrait: strict top-to-bottom layout without page scroll */
@media (max-width: 1024px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 4px !important;
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    flex: 0 0 auto !important;
    min-width: 76px !important;
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid #2c3442 !important;
    background: #1a212c !important;
    color: #dce7f9 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #203244 !important;
    border-color: rgba(25, 179, 155, 0.62) !important;
    color: #eff9f6 !important;
  }

  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--ds-modern-icon-color) !important;
  }

  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ds-studio.ds-fullscreen {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important; /* header | workspace | status */
    gap: 4px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 6px !important;
  }

  .ds-studio.ds-fullscreen .ds-fullscreen-brand {
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    max-height: 10dvh !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-fullscreen .ds-fullscreen-brand-title-image {
    max-height: 5.6dvh !important;
    width: auto !important;
  }

  .ds-studio.ds-fullscreen .ds-workspace {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important; /* groups | canvas+tools */
    gap: 4px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top {
    grid-row: 1 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 4px !important;
    position: relative !important;
    z-index: 21 !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    flex: 0 0 auto !important;
    min-width: 76px !important;
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid #2c3442 !important;
    background: #1a212c !important;
    color: #dce7f9 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    pointer-events: auto !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab.is-active {
    background: #203244 !important;
    border-color: rgba(25, 179, 155, 0.62) !important;
    color: #eff9f6 !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--ds-modern-icon-color) !important;
  }

  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ds-studio.ds-fullscreen .ds-workspace-grid {
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(150px, 37dvh) !important; /* canvas | tools */
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-left {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-shell {
    grid-row: 1 !important;
    min-height: 0 !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-right {
    grid-row: 2 !important;
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    height: 100% !important;
    overflow: hidden !important; /* no internal scrolling in fullscreen */
    gap: 3px !important;
    padding-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* keep toolbox bottom edge fixed above status */
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-toolblock {
    padding: 3px !important;
    gap: 2px !important;
    margin-top: auto !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 2px !important;
  }

  .ds-studio.ds-fullscreen .ds-canvas-side-right button,
  .ds-studio.ds-fullscreen .ds-canvas-side-right .ds-upload {
    height: 38px !important;
    min-height: 38px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
  }

  .ds-studio.ds-fullscreen .ds-status {
    grid-row: 3 !important;
    margin: 1px 0 0 !important;
    min-height: 0 !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: static !important;
    z-index: 10 !important;
  }

  .ds-studio:not(.ds-fullscreen) {
    --ds-mobile-status-h: 34px;
  }

  .ds-studio:not(.ds-fullscreen) .ds-status {
    height: 30px !important;
    max-height: 30px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: static !important;
    margin-top: 1px !important;
  }

  .ds-studio:not(.ds-fullscreen) .ds-canvas-side-right .ds-canvas-side-inner {
    padding-bottom: 1px !important;
  }

  .ds-studio .ds-canvas-side-right,
  .ds-studio.ds-fullscreen .ds-canvas-side-right {
    margin-bottom: 0 !important;
  }
}

/* Desktop modern fullscreen: status fixed at bottom, no page scroll, scroll only left panel */
@media (min-width: 901px) {
  .ds-studio.ds-ui-modern.ds-fullscreen {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important; /* header | content | status */
    gap: 8px !important;
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-fullscreen-brand {
    grid-row: 1 !important;
    margin: 0 !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    grid-row: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    margin-top: 0 !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-status {
    grid-row: 3 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    align-self: stretch !important;
  }

  /* Keep central canvas and right pane static; vertical overflow goes to left panel only */
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-left,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-left .ds-canvas-side-inner {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-shell,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Right panel moved to left mode: still scroll only on the left container */
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-canvas-side-left {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-modern-zones-top {
    flex: 0 0 auto !important;
  }
  .ds-studio.ds-ui-modern.ds-modern-right-left.ds-fullscreen .ds-modern-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace {
    padding-bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px)) + 2px) !important;
  }
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-shell {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
}

/* Mobile landscape fullscreen: scroll only left panel, keep everything else fixed */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio.ds-ui-modern.ds-fullscreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-left,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-left .ds-canvas-side-inner {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-shell,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-tools-top {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* In mobile landscape top area must not show full tool blocks (e.g. View duplicate). */
  .ds-tools-top.ds-mobile-tabs-mode > .ds-toolblock,
  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode > .ds-toolblock {
    display: none !important;
  }

  /* Fullscreen landscape: no top bar at all; right side holds all groups. */
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-tools-top {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    grid-row: 1 !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-toolblock {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 2px !important;
  }

  /* Left panel compaction to avoid overlap */
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-rail {
    gap: 4px !important;
    padding: 6px 5px !important;
    overflow-y: auto !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab {
    height: 40px !important;
    border-radius: 10px !important;
    gap: 1px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab-ic {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab-tx {
    font-size: 7px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-stage {
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-stage .ds-group {
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important;
    gap: 3px !important;
  }
}

/* Portrait mobile tabs: always one row with horizontal scroll (normal + fullscreen) */
@media (max-width: 1024px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs,
  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  .ds-studio .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab,
  .ds-studio.ds-fullscreen .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    flex: 0 0 auto !important;
    touch-action: pan-x !important;
  }
}

/* Final hard override: mobile/touch landscape fullscreen must not show top tools.
   Keep tools in side panels and compact left panel to avoid overlap. */
@media (orientation: landscape) and (pointer: coarse) {
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-tools-top {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace {
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    grid-row: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-canvas-side-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 2px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-rail {
    gap: 4px !important;
    padding: 6px 5px !important;
    overflow-y: auto !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    gap: 1px !important;
    padding: 2px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab-ic {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    line-height: 14px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-tab-tx {
    font-size: 7px !important;
    line-height: 1.05 !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-stage {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px !important;
  }

  .ds-studio.ds-ui-modern.ds-fullscreen .ds-modern-stage .ds-group {
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important;
    gap: 3px !important;
  }
}

/* WP admin bar compatibility: keep designer below admin bar on desktop. */
@media (min-width: 783px) {
  .admin-bar .ds-studio {
    margin-top: var(--ds-adminbar-h, 32px);
  }

  .admin-bar .ds-studio.ds-fullscreen {
    height: calc(100dvh - var(--ds-adminbar-h, 32px)) !important;
    max-height: calc(100dvh - var(--ds-adminbar-h, 32px)) !important;
  }
}

/* Layout Baseline v1: explicit screen split per viewport mode */
.ds-studio {
  --ds-layout-status-h: 34px;
  --ds-layout-groups-h: 56px;
  --ds-layout-tools-h: 28vh;
}

/* Desktop: header -> groups -> main row -> status */
.ds-studio[data-vp-mobile="0"] {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) var(--ds-layout-status-h) !important;
  min-height: 0 !important;
}

.ds-studio[data-vp-mobile="0"] .ds-workspace {
  min-height: 0 !important;
  overflow: hidden !important;
}

.ds-studio[data-vp-mobile="0"] .ds-status {
  height: var(--ds-layout-status-h) !important;
  min-height: var(--ds-layout-status-h) !important;
  max-height: var(--ds-layout-status-h) !important;
}

/* Mobile portrait: header -> canvas -> groups -> tools -> status */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) var(--ds-layout-status-h) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) var(--ds-layout-groups-h) minmax(120px, var(--ds-layout-tools-h)) !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Use workspace slots directly for strict ordering */
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace-grid {
    display: contents !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-shell {
    grid-row: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top {
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-left {
    display: none !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-canvas-side-inner {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-status {
    height: var(--ds-layout-status-h) !important;
    min-height: var(--ds-layout-status-h) !important;
    max-height: var(--ds-layout-status-h) !important;
  }
}

/* Mobile landscape: header -> main row (canvas | tools) -> status */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) var(--ds-layout-status-h) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-workspace {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 38vw) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-canvas-side-inner {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-status {
    height: var(--ds-layout-status-h) !important;
    min-height: var(--ds-layout-status-h) !important;
    max-height: var(--ds-layout-status-h) !important;
  }
}

/* Layout Baseline v1 - Step 2: overflow/scroll stability */
.ds-studio[data-vp-mobile="1"] .ds-workspace,
.ds-studio[data-vp-mobile="1"] .ds-workspace-grid,
.ds-studio[data-vp-mobile="1"] .ds-canvas-shell,
.ds-studio[data-vp-mobile="1"] .ds-canvas-wrap {
  min-height: 0 !important;
}

.ds-studio[data-vp-mobile="1"] .ds-canvas-viewport {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
}

.ds-studio[data-vp-mobile="1"] .ds-status {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 9 !important;
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] {
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-canvas-side-inner {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-toolblock {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] {
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-canvas-side-inner {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-toolblock {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Layout Baseline v1 - Step 3: size/spacing polish */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] {
    --ds-layout-status-h: 32px;
    --ds-layout-groups-h: 52px;
    --ds-layout-tools-h: clamp(150px, 30vh, 260px);
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"][data-vp-fullscreen="1"] .ds-fullscreen-brand {
    padding: 3px 8px !important;
    max-height: 8.5dvh !important;
    min-height: 0 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab {
    min-width: 82px !important;
    height: 44px !important;
    border-radius: 11px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top {
    padding: 0 2px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tabs {
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 2px !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-ic {
    font-size: 12px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-tools-top.ds-mobile-tabs-mode .ds-mobile-tool-tab-tx {
    font-size: 8px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-toolblock {
    padding: 4px !important;
    border-radius: 10px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right button,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-side-right .ds-upload {
    min-height: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] {
    --ds-layout-status-h: 30px;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 36vw) !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-toolblock {
    padding: 4px !important;
    border-radius: 10px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right button,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="landscape"] .ds-canvas-side-right .ds-upload {
    min-height: 34px !important;
    height: 34px !important;
  }
}

/* Layout Baseline v1 - Step 5: hard lock mobile landscape fullscreen */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) var(--ds-layout-status-h, 30px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-tools-top {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-workspace {
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 36vw) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-canvas-side-left {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-canvas-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-canvas-side-right {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-canvas-side-right .ds-canvas-side-inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-canvas-side-right .ds-toolblock {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="landscape"][data-vp-fullscreen="1"] .ds-status {
    grid-row: 3 !important;
    height: var(--ds-layout-status-h, 30px) !important;
    min-height: var(--ds-layout-status-h, 30px) !important;
    max-height: var(--ds-layout-status-h, 30px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/* Phase 1 mobile-first shell (portrait only):
   sticky top bar, large canvas area, bottom nav, floating Apply CTA */
.ds-mobile-topbar,
.ds-mobile-bottom-nav,
.ds-mobile-apply-cta,
.ds-mobile-sheet-backdrop,
.ds-mobile-sheets {
  display: none;
}

.ds-context-toolbar {
  display: none;
}

.ds-context-toolbar.is-visible {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(61, 80, 108, 0.8);
  background: rgba(9, 15, 26, 0.95);
  box-shadow: 0 12px 24px rgba(5, 10, 20, 0.32);
}

.ds-context-group {
  display: none;
  align-items: center;
  gap: 6px;
}

.ds-context-group-common {
  display: inline-flex;
  margin-left: auto;
}

.ds-context-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-context-toolbar input,
.ds-context-toolbar select,
.ds-context-toolbar button {
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(85, 106, 136, 0.9);
  background: #132037;
  color: #ebf3ff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
}

.ds-context-toolbar input[type="color"] {
  width: 34px;
  min-width: 34px;
  padding: 2px;
}

.ds-context-toolbar input[type="range"] {
  width: 108px;
  padding: 0;
}

.ds-context-toolbar[data-ctx-type="text"] .ds-context-group-text,
.ds-context-toolbar[data-ctx-type="image"] .ds-context-group-image,
.ds-context-toolbar[data-ctx-type="shape"] .ds-context-group-shape {
  display: inline-flex;
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    --ds-mobile-shell-top: calc(52px + env(safe-area-inset-top, 0px));
    --ds-mobile-shell-nav-h: 64px;
    --ds-mobile-shell-cta-h: 50px;
    --ds-mobile-shell-gap: 8px;
    --ds-mobile-shell-bottom-safe: env(safe-area-inset-bottom, 0px);
  }

  .ds-studio .ds-mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: var(--ds-mobile-shell-top);
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
    background: rgba(8, 14, 24, 0.96);
    border: 1px solid rgba(60, 74, 96, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(8px);
  }

  .ds-studio .ds-mobile-topbar-center {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: auto !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn {
    width: 58px !important;
    min-width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    border-radius: 10px !important;
  }

  .ds-studio .ds-mobile-topbar-icon-label {
    font-size: 9px !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn {
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(93, 114, 147, 0.8);
    border-radius: 9px;
    background: #141e2d;
    color: #e9f0ff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ds-studio .ds-mobile-topbar-btn.ds-mobile-btn-with-icon {
    gap: 6px;
    padding: 0 10px;
  }

  .ds-studio .ds-mobile-topbar-btn.ds-mobile-btn-with-icon .ds-mobile-btn-ic {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .ds-studio .ds-mobile-topbar-btn-primary {
    background: var(--ds-primary, #0a7f73);
    border-color: color-mix(in srgb, var(--ds-primary, #0a7f73) 68%, #ffffff 32%);
    color: #fff;
  }

  .ds-studio .ds-mobile-topbar-title {
    min-width: 0;
    color: #f0f5ff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ds-studio .ds-workspace {
    height: calc(
      100dvh
      - var(--ds-mobile-shell-top)
      - var(--ds-mobile-shell-nav-h)
      - var(--ds-mobile-shell-cta-h)
      - var(--ds-mobile-shell-gap)
      - var(--ds-mobile-shell-bottom-safe)
      - 12px
    ) !important;
    max-height: calc(
      100dvh
      - var(--ds-mobile-shell-top)
      - var(--ds-mobile-shell-nav-h)
      - var(--ds-mobile-shell-cta-h)
      - var(--ds-mobile-shell-gap)
      - var(--ds-mobile-shell-bottom-safe)
      - 12px
    ) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-top: 2px !important;
  }

  .ds-studio .ds-toolbar {
    display: none !important;
  }

  .ds-studio .ds-workspace-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .ds-studio .ds-tools-top,
  .ds-studio .ds-canvas-side-left,
  .ds-studio .ds-canvas-side-right {
    display: none !important;
  }

  .ds-studio .ds-canvas-shell {
    min-height: 0 !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }

  .ds-studio .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ds-studio .ds-mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ds-mobile-shell-cta-h) + var(--ds-mobile-shell-gap) + var(--ds-mobile-shell-bottom-safe));
    z-index: 130;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    min-height: var(--ds-mobile-shell-nav-h);
    height: var(--ds-mobile-shell-nav-h);
    padding: 4px 6px;
    background: rgba(8, 14, 24, 0.96);
    border: 1px solid rgba(60, 74, 96, 0.9);
    border-radius: 12px;
    backdrop-filter: blur(8px);
  }

  .ds-studio .ds-mobile-bottom-nav button {
    height: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e9f0ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
  }

  .ds-studio .ds-mobile-topbar,
  .ds-studio .ds-mobile-bottom-nav,
  .ds-studio .ds-mobile-topbar *,
  .ds-studio .ds-mobile-bottom-nav * {
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-bottom-nav button::before {
    font-family: dashicons;
    font-size: 18px;
    line-height: 1;
    display: block;
    color: #ffffff;
    opacity: 0.95;
  }

  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="upload"]::before { content: "\f317"; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="text"]::before { content: "\f200"; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="art"]::before { content: "\f128"; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="preview"]::before { content: "\f177"; }

  .ds-studio .ds-mobile-bottom-nav button:active,
  .ds-studio .ds-mobile-bottom-nav button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .ds-studio .ds-mobile-apply-cta {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: var(--ds-mobile-shell-bottom-safe);
    z-index: 131;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--ds-mobile-shell-cta-h);
    min-height: var(--ds-mobile-shell-cta-h);
    border: 1px solid color-mix(in srgb, var(--ds-primary, #0a7f73) 60%, #fff 40%);
    border-radius: 12px;
    background: var(--ds-primary, #0a7f73);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 24px rgba(8, 16, 30, 0.36);
  }

  .ds-studio .ds-mobile-apply-cta.ds-mobile-btn-with-icon {
    gap: 10px;
  }

  .ds-studio .ds-mobile-apply-cta.ds-mobile-btn-with-icon .ds-mobile-btn-ic {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.16));
  }

  .ds-studio .ds-context-toolbar.is-visible {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ds-mobile-shell-cta-h) + var(--ds-mobile-shell-nav-h) + (var(--ds-mobile-shell-gap) * 2) + var(--ds-mobile-shell-bottom-safe) + 6px);
    z-index: 132;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-studio .ds-context-group-common {
    margin-left: 0;
  }

  .ds-studio .ds-mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 134;
    display: block;
    background: rgba(8, 14, 24, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .ds-studio .ds-mobile-sheets {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ds-mobile-shell-cta-h) + var(--ds-mobile-shell-nav-h) + (var(--ds-mobile-shell-gap) * 2) + var(--ds-mobile-shell-bottom-safe));
    z-index: 135;
    display: block;
    pointer-events: none;
  }

  .ds-studio .ds-mobile-sheet {
    display: none;
    background: rgba(8, 14, 24, 0.98);
    border: 1px solid rgba(60, 74, 96, 0.95);
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(5, 10, 20, 0.45);
    max-height: min(46dvh, 360px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.24s ease, opacity 0.24s ease;
  }

  .ds-studio .ds-mobile-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(64, 78, 102, 0.8);
    background: rgba(10, 18, 30, 0.98);
  }

  .ds-studio .ds-mobile-sheet-head h4 {
    margin: 0;
    color: #f0f5ff;
    font-size: 13px;
    font-weight: 700;
  }

  .ds-studio .ds-mobile-sheet-head button {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(93, 114, 147, 0.8);
    border-radius: 8px;
    background: #141e2d;
    color: #e9f0ff;
    font-size: 11px;
    font-weight: 700;
  }

  .ds-studio .ds-mobile-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .ds-studio .ds-mobile-sheet-grid button {
    min-height: 40px;
    border: 1px solid rgba(82, 102, 132, 0.9);
    border-radius: 10px;
    background: #152135;
    color: #ebf3ff;
    font-size: 12px;
    font-weight: 700;
    padding: 0 10px;
    text-align: center;
  }

  .ds-studio .ds-mobile-sheet-grid button:active,
  .ds-studio .ds-mobile-sheet-grid button:focus-visible {
    outline: none;
    background: #1a2a42;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-sheets {
    pointer-events: auto;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-apply-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  .ds-studio.ds-mobile-sheet-open .ds-context-toolbar {
    display: none !important;
  }

  .ds-studio[data-mobile-sheet-open="upload"] .ds-mobile-sheet[data-mobile-sheet="upload"],
  .ds-studio[data-mobile-sheet-open="text"] .ds-mobile-sheet[data-mobile-sheet="text"],
  .ds-studio[data-mobile-sheet-open="art"] .ds-mobile-sheet[data-mobile-sheet="art"],
  .ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"] {
    display: block;
    transform: translateY(0);
    opacity: 1;
  }

  .ds-studio[data-mobile-sheet-open="upload"] .ds-mobile-bottom-nav button[data-mobile-action="upload"],
  .ds-studio[data-mobile-sheet-open="text"] .ds-mobile-bottom-nav button[data-mobile-action="text"],
  .ds-studio[data-mobile-sheet-open="art"] .ds-mobile-bottom-nav button[data-mobile-action="art"],
  .ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-bottom-nav button[data-mobile-action="preview"] {
    background: rgba(255, 255, 255, 0.1);
  }

  .ds-studio .ds-status {
    display: none !important;
  }

  .ds-studio.ds-mobile-more-open .ds-toolbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ds-mobile-shell-bottom-safe) + var(--ds-mobile-shell-cta-h) + var(--ds-mobile-shell-nav-h) + (var(--ds-mobile-shell-gap) * 2));
    z-index: 140;
    display: block !important;
    max-height: 40dvh;
    overflow: auto;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
  }
}

/* Final responsive polish pass (non-breaking overrides) */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    --ds-mobile-shell-top: calc(50px + env(safe-area-inset-top, 0px));
    --ds-mobile-shell-nav-h: 58px;
    --ds-mobile-shell-cta-h: 48px;
    --ds-mobile-shell-gap: 7px;
  }

  .ds-studio .ds-mobile-topbar {
    gap: 5px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 5px;
    border-radius: 11px;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 11px;
  }

  .ds-studio .ds-mobile-topbar-title {
    font-size: 12px;
  }

  .ds-studio .ds-canvas-shell {
    padding: 3px !important;
    border-radius: 10px !important;
    border-color: rgba(110, 128, 154, 0.55) !important;
  }

  .ds-studio .ds-canvas-viewport {
    border-radius: 9px;
    background: #eaf0f8;
  }

  .ds-studio .ds-mobile-bottom-nav {
    left: 8px;
    right: 8px;
    gap: 0;
    padding: 3px 5px;
    border-radius: 11px;
  }

  .ds-studio .ds-mobile-bottom-nav button {
    height: 52px;
    min-height: 52px;
    border-radius: 7px;
    font-size: 9.5px;
    gap: 1px;
    opacity: 0.95;
  }

  .ds-studio .ds-mobile-bottom-nav button::before {
    font-size: 16px;
  }

  .ds-studio .ds-mobile-apply-cta {
    left: 8px;
    right: 8px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.015em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-primary, #0a7f73) 88%, #fff 12%) 0%, var(--ds-primary, #0a7f73) 100%);
    box-shadow: 0 12px 26px rgba(7, 15, 30, 0.42);
  }

  .ds-studio .ds-context-toolbar.is-visible {
    left: 8px;
    right: 8px;
    padding: 7px;
    border-radius: 10px;
    gap: 7px;
  }

  .ds-studio .ds-mobile-sheet {
    border-radius: 12px;
    max-height: min(44dvh, 340px);
  }
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio {
    border-radius: 10px;
    padding: 6px;
  }

  .ds-studio .ds-canvas-shell {
    padding: 5px !important;
    border-radius: 10px !important;
  }

  .ds-studio .ds-canvas-viewport {
    border-radius: 8px;
    background: #e9f0f9;
  }

  .ds-studio .ds-status {
    min-height: 22px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   LORANDIT STUDIO — MOBILE PORTRAIT HARD OVERRIDE FIX
   This block intentionally overrides earlier legacy mobile rules.
   It makes the new mobile shell the primary portrait UI.
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    --ds-mobile-top-h: calc(52px + env(safe-area-inset-top, 0px));
    --ds-mobile-nav-h: 60px;
    --ds-mobile-cta-h: 50px;
    --ds-mobile-gap: 8px;
    --ds-mobile-safe-b: env(safe-area-inset-bottom, 0px);
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #0f1724 !important;
  }

  /* hide all legacy / desktop structures */
  .ds-studio .ds-toolbar,
  .ds-studio .ds-topbar,
  .ds-studio .ds-tools-top,
  .ds-studio .ds-left-rail,
  .ds-studio .ds-right-inspector,
  .ds-studio .ds-canvas-side-left,
  .ds-studio .ds-canvas-side-right,
  .ds-studio .ds-fullscreen-brand,
  .ds-studio .ds-status {
    display: none !important;
  }

  /* mobile top bar */
  .ds-studio .ds-mobile-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 300 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: var(--ds-mobile-top-h) !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px !important;
    background: rgba(9, 14, 22, 0.96) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(90, 110, 138, 0.28) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(10px);
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(104, 124, 152, 0.45) !important;
    background: #162033 !important;
    color: #eef4ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary {
    background: var(--accent, #0a7f73) !important;
    border-color: var(--accent, #0a7f73) !important;
    color: #fff !important;
  }

  .ds-studio .ds-mobile-topbar-title {
    min-width: 0 !important;
    color: #f4f7ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* workspace + stage */
  .ds-studio .ds-workspace {
    display: block !important;
    margin: 0 !important;
    padding: calc(var(--ds-mobile-top-h) + 6px) 8px calc(var(--ds-mobile-nav-h) + var(--ds-mobile-cta-h) + var(--ds-mobile-gap) + var(--ds-mobile-safe-b) + 12px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-desktop-main,
  .ds-studio .ds-workspace-grid {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(142, 158, 184, 0.42) !important;
    background: #dfe7f3 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-canvas-wrap {
    height: 100% !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #e8eef8 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    background: #eef3fb !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-canvas-viewport .canvas-container {
    margin: 0 auto !important;
    box-shadow: 0 10px 26px rgba(12, 20, 34, 0.16) !important;
  }

  /* bottom nav */
  .ds-studio .ds-mobile-bottom-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--ds-mobile-cta-h) + var(--ds-mobile-safe-b) + var(--ds-mobile-gap)) !important;
    z-index: 310 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: var(--ds-mobile-nav-h) !important;
    height: var(--ds-mobile-nav-h) !important;
    padding: 4px !important;
    background: rgba(9, 14, 22, 0.96) !important;
    border: 1px solid rgba(86, 104, 130, 0.38) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(10px);
  }

  .ds-studio .ds-mobile-bottom-nav button {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #eef4ff !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-bottom-nav button::after {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    color: inherit !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-bottom-nav button::before {
    display: block !important;
    font-family: dashicons !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
  }

  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="upload"]::before { content: "\f128" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="text"]::before { content: "\f122" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="art"]::before { content: "\f318" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="preview"]::before { content: "\f177" !important; }

  .ds-studio .ds-mobile-bottom-nav button.is-active,
  .ds-studio .ds-mobile-bottom-nav button:active,
  .ds-studio .ds-mobile-bottom-nav button:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
  }

  /* apply cta */
  .ds-studio .ds-mobile-apply-cta {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: var(--ds-mobile-safe-b) !important;
    z-index: 311 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 52px !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 14px 28px rgba(9, 16, 29, 0.42) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
  }

  .ds-studio .ds-mobile-apply-cta[aria-hidden="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-apply-cta {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }

  /* context toolbar */
  .ds-studio .ds-context-toolbar.is-visible {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--ds-mobile-cta-h) + var(--ds-mobile-nav-h) + var(--ds-mobile-gap) * 2 + var(--ds-mobile-safe-b) + 6px) !important;
    z-index: 312 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating {
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
    overflow: hidden !important;
  }

  .ds-studio.ds-mobile-sheet-open .ds-context-toolbar {
    display: none !important;
  }

  /* sheets */
  .ds-studio .ds-mobile-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 320 !important;
    display: block !important;
    background: rgba(6, 12, 22, 0.42) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
  }

  .ds-studio .ds-mobile-sheet-backdrop[aria-hidden="false"] {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-sheets {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 321 !important;
    display: block !important;
    pointer-events: none !important;
    transform: translateY(104%) !important;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1) !important;
  }

  .ds-studio .ds-mobile-sheets[aria-hidden="false"] {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-sheet {
    display: none !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid rgba(76, 96, 122, 0.7) !important;
    background: rgba(9, 14, 22, 0.98) !important;
    box-shadow: 0 -14px 30px rgba(5, 10, 20, 0.42) !important;
    max-height: calc(60dvh - var(--ds-mobile-safe-b)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease !important;
  }

  .ds-studio .ds-mobile-sheet-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 20px 10px !important;
    border-bottom: 1px solid rgba(75, 92, 116, 0.6) !important;
    background: rgba(11, 18, 28, 0.98) !important;
  }

  .ds-studio .ds-mobile-sheet-head h4 {
    margin: 0 !important;
    color: #f2f6ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-head button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(96, 116, 145, 0.54) !important;
    background: #172235 !important;
    color: #eef4ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 24px 20px 24px !important;
  }

  .ds-studio .ds-mobile-sheet-section {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 4px !important;
  }

  .ds-studio .ds-mobile-sheet-section + .ds-mobile-sheet-section {
    border-top: 1px solid rgba(70, 91, 120, 0.42) !important;
    margin-top: 6px !important;
    padding-top: 16px !important;
  }

  .ds-studio .ds-mobile-sheet-section h5 {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #9bb3d3 !important;
  }

  .ds-studio .ds-mobile-template-picker {
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: 6px !important;
  }

  .ds-studio .ds-mobile-template-picker label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9bb3d3 !important;
  }

  .ds-studio .ds-mobile-template-picker select {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(86, 105, 133, 0.7) !important;
    background: #0f1a2a !important;
    color: #eef4ff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
  }

  .ds-studio .ds-mobile-sheet-grid button {
    min-height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(86, 105, 133, 0.7) !important;
    background: #152134 !important;
    color: #eef4ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 14px !important;
    text-align: center !important;
    transition: transform 120ms ease, background 160ms ease, border-color 160ms ease !important;
  }

  .ds-studio .ds-mobile-sheet-grid button:active {
    transform: scale(0.97) !important;
  }

  .ds-studio .ds-mobile-sheet-grid .ds-mobile-btn-primary {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
    border-color: rgba(12, 161, 145, 0.98) !important;
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(8, 24, 34, 0.24) !important;
  }

  .ds-studio .ds-mobile-sheet-grid .ds-mobile-btn-secondary {
    background: #152134 !important;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-sheet-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ds-studio.ds-mobile-sheet-open .ds-mobile-sheets {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .ds-studio[data-mobile-sheet-open="upload"] .ds-mobile-sheet[data-mobile-sheet="upload"],
  .ds-studio[data-mobile-sheet-open="text"] .ds-mobile-sheet[data-mobile-sheet="text"],
  .ds-studio[data-mobile-sheet-open="art"] .ds-mobile-sheet[data-mobile-sheet="art"],
  .ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"] {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* empty state */
  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-wrap {
    position: relative !important;
  }

  .ds-studio .ds-mobile-empty-state {
    position: absolute !important;
    inset: 0 !important;
    z-index: 40 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    pointer-events: none !important;
  }

  .ds-studio .ds-mobile-empty-state.is-visible,
  .ds-studio.ds-mobile-empty .ds-mobile-empty-state {
    display: flex !important;
  }

  .ds-studio .ds-mobile-empty-state-card,
  .ds-studio .ds-mobile-empty-card {
    width: min(360px, 100%) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(128, 145, 170, 0.34) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 28px rgba(12, 21, 36, 0.15) !important;
    padding: 16px !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-empty-state-title,
  .ds-studio .ds-mobile-empty-card h4 {
    margin: 0 0 8px !important;
    color: #112237 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .ds-studio .ds-mobile-empty-card p {
    margin: 0 0 10px !important;
    color: #334b67 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
  }

  .ds-studio .ds-mobile-empty-state-actions,
  .ds-studio .ds-mobile-empty-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .ds-studio .ds-mobile-empty-state-actions button,
  .ds-studio .ds-mobile-empty-actions button {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 9px !important;
    border: 1px solid #bfd0e4 !important;
    background: #ffffff !important;
    color: #102136 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0 16px !important;
    transition: transform 120ms ease, filter 180ms ease !important;
  }

  .ds-studio .ds-mobile-empty-state-actions button > span:last-child,
  .ds-studio .ds-mobile-empty-actions button > span:last-child {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  .ds-studio .ds-mobile-empty-btn-ico {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #f6f9ff 0%, #e8f0fb 100%) !important;
    border: 1px solid #c6d6ea !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  .ds-studio .ds-mobile-empty-btn-ico svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: #0f2842 !important;
  }

  .ds-studio .ds-mobile-empty-state-actions button:first-child,
  .ds-studio .ds-mobile-empty-actions button:first-child {
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    border-color: rgba(12, 161, 145, 0.98) !important;
    color: #ffffff !important;
  }

  .ds-studio .ds-mobile-empty-state-actions button:active,
  .ds-studio .ds-mobile-empty-actions button:active {
    transform: scale(0.97) !important;
  }

  .ds-studio .ds-mobile-empty-help {
    margin: 14px 0 0 !important;
    color: #36506d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .ds-studio .ds-mobile-empty-help::first-letter {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
}

/* Final portrait UX patch (winning at end of file) */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-workspace {
    padding-top: calc(var(--ds-mobile-top-h) + 22px) !important;
  }

  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    padding: 3px !important;
    background: #e7edf7 !important;
  }

  .ds-studio .ds-canvas-wrap {
    padding: 3px !important;
  }

  .ds-studio .ds-mobile-bottom-nav {
    bottom: calc(var(--ds-mobile-safe-b) + 8px) !important;
  }

  .ds-studio .ds-mobile-bottom-nav button.is-active,
  .ds-studio .ds-mobile-bottom-nav button:active,
  .ds-studio .ds-mobile-bottom-nav button:focus-visible {
    color: var(--ds-accent-2, #f89f25) !important;
    background: rgba(248, 159, 37, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(248, 159, 37, 0.34), 0 0 14px rgba(248, 159, 37, 0.24) !important;
    outline: none !important;
  }

  .ds-studio .ds-mobile-bottom-nav button.is-active::before {
    color: var(--ds-accent-2, #f89f25) !important;
  }

  .ds-studio .ds-mobile-apply-cta {
    bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b) + 18px) !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    box-shadow: 0 16px 30px rgba(8, 15, 28, 0.42), 0 4px 10px rgba(8, 15, 28, 0.28) !important;
  }

  .ds-studio .ds-context-toolbar {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .ds-studio .ds-context-toolbar.is-visible.is-floating {
    max-width: calc(100vw - 12px) !important;
    border-color: rgba(92, 110, 132, 0.52) !important;
    box-shadow: 0 12px 28px rgba(5, 10, 20, 0.36) !important;
  }
}

/* Final hard override: lock canvas scroll + keep Apply under bottom nav */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio {
    --ds-mobile-cta-h: 52px !important;
    --ds-mobile-nav-gap: 8px !important;
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .ds-studio .ds-workspace,
  .ds-studio .ds-desktop-main,
  .ds-studio .ds-workspace-grid,
  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell,
  .ds-studio .ds-canvas-wrap,
  .ds-studio .ds-canvas-viewport {
    overflow: hidden !important;
  }

  .ds-studio .ds-workspace {
    height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) - var(--ds-mobile-cta-h) -
      env(safe-area-inset-bottom, 0px) - 20px
    ) !important;
    min-height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) - var(--ds-mobile-cta-h) -
      env(safe-area-inset-bottom, 0px) - 20px
    ) !important;
    max-height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) - var(--ds-mobile-cta-h) -
      env(safe-area-inset-bottom, 0px) - 20px
    ) !important;
    padding-bottom: 0 !important;
  }

  .ds-studio .ds-canvas-shell,
  .ds-studio .ds-canvas-wrap,
  .ds-studio .ds-canvas-viewport {
    height: 100% !important;
    max-height: 100% !important;
  }

  .ds-studio .ds-canvas-viewport {
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  .ds-studio .ds-mobile-apply-cta {
    bottom: env(safe-area-inset-bottom, 0px) !important;
    height: var(--ds-mobile-cta-h) !important;
    min-height: var(--ds-mobile-cta-h) !important;
    z-index: 306 !important;
  }

  .ds-studio .ds-mobile-bottom-nav {
    bottom: calc(var(--ds-mobile-cta-h) + env(safe-area-inset-bottom, 0px) + var(--ds-mobile-nav-gap)) !important;
    z-index: 310 !important;
  }

  .ds-studio .ds-mobile-sheet-zoom {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(86, 105, 133, 0.7) !important;
    background: #152134 !important;
    color: #eef4ff !important;
    padding: 10px 12px !important;
  }

  .ds-studio .ds-mobile-sheet-zoom > span {
    grid-column: 1 / 2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-zoom input[type="range"] {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    accent-color: var(--accent, #0a7f73) !important;
  }

  .ds-studio .ds-mobile-sheet-zoom strong {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    font-size: 12px !important;
    color: #9ad9d3 !important;
  }

  .ds-studio .ds-mobile-sheet-grid button[data-mobile-sheet-action] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .ds-studio .ds-mobile-sheet-grid button[data-mobile-sheet-action]::before {
    font-family: dashicons !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .ds-studio .ds-mobile-style-field {
    display: grid !important;
    gap: 6px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(86, 105, 133, 0.7) !important;
    background: #152134 !important;
    color: #eef4ff !important;
    padding: 10px 12px !important;
  }

  .ds-studio .ds-mobile-style-field input,
  .ds-studio .ds-mobile-style-field select {
    width: 100% !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(97, 118, 149, 0.6) !important;
    background: #0f1a2a !important;
    color: #eef4ff !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-style-field input[type="range"] {
    min-height: 20px !important;
    padding: 0 !important;
    accent-color: var(--accent, #0a7f73) !important;
  }

  .ds-studio button[data-mobile-sheet-action="duplicate-object"]::before { content: "\f105"; }
  .ds-studio button[data-mobile-sheet-action="delete-object"]::before { content: "\f182"; }
  .ds-studio button[data-mobile-sheet-action="crop-image"]::before { content: "\f165"; }
  .ds-studio button[data-mobile-sheet-action="ai-remove-bg"]::before { content: "\f180"; }
  .ds-studio button[data-mobile-sheet-action="align-left"]::before { content: "\f206"; }
  .ds-studio button[data-mobile-sheet-action="align-center"]::before { content: "\f207"; }
  .ds-studio button[data-mobile-sheet-action="align-right"]::before { content: "\f208"; }
  .ds-studio button[data-mobile-sheet-action="align-top"]::before { content: "\f212"; }
  .ds-studio button[data-mobile-sheet-action="align-middle"]::before { content: "\f211"; }
  .ds-studio button[data-mobile-sheet-action="align-bottom"]::before { content: "\f213"; }
  .ds-studio button[data-mobile-sheet-action="layer-up"]::before { content: "\f343"; }
  .ds-studio button[data-mobile-sheet-action="layer-down"]::before { content: "\f347"; }
  .ds-studio button[data-mobile-sheet-action="layer-front"]::before { content: "\f342"; }
  .ds-studio button[data-mobile-sheet-action="layer-back"]::before { content: "\f346"; }
  .ds-studio button[data-mobile-sheet-action="group"]::before { content: "\f163"; }
  .ds-studio button[data-mobile-sheet-action="ungroup"]::before { content: "\f164"; }
  .ds-studio button[data-mobile-sheet-action="fit-canvas"]::before { content: "\f472"; }
  .ds-studio button[data-mobile-sheet-action="zoom-reset"]::before { content: "\f179"; }
  .ds-studio button[data-mobile-sheet-action="toggle-fullscreen"]::before { content: "\f211"; }
  .ds-studio button[data-mobile-sheet-action="toggle-grid"]::before { content: "\f509"; }
  .ds-studio button[data-mobile-sheet-action="toggle-snap"]::before { content: "\f546"; }
  .ds-studio button[data-mobile-sheet-action="toggle-bleed-marks"]::before { content: "\f469"; }
  .ds-studio button[data-mobile-sheet-action="save"]::before { content: "\f147"; }
  .ds-studio button[data-mobile-sheet-action="final-save"]::before { content: "\f533"; }
  .ds-studio button[data-mobile-sheet-action="apply"]::before { content: "\f174"; }
  .ds-studio button[data-mobile-sheet-action="export"]::before { content: "\f316"; }
  .ds-studio button[data-mobile-sheet-action="my-designs"]::before { content: "\f109"; }
  .ds-studio button[data-mobile-sheet-action="load-design"]::before { content: "\f176"; }
  .ds-studio button[data-mobile-sheet-action="template-apply"]::before { content: "\f326"; }
.ds-studio button[data-mobile-sheet-action="mug-open"]::before { content: "\f177"; }
.ds-studio button[data-mobile-sheet-action="open-zones"]::before { content: "\f319"; }
.ds-studio button[data-mobile-sheet-action="object-props"]::before { content: "\f111"; }

/* Keep Canvas helper toggles in checkbox mode (do not override with dashicons). */
.ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action="toggle-grid"]::before,
.ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action="toggle-snap"]::before,
.ds-studio .ds-mobile-inline-toggles button[data-mobile-sheet-action="toggle-bleed-marks"]::before {
  content: "" !important;
}
}

/* App shell mode: when designer is active, hide WordPress chrome and let studio own the full viewport */
html.ds-designer-shell-active,
body.ds-designer-shell-active {
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.ds-designer-shell-active #wpadminbar,
body.ds-designer-shell-active #masthead,
body.ds-designer-shell-active #colophon,
body.ds-designer-shell-active .site-header,
body.ds-designer-shell-active .site-footer,
body.ds-designer-shell-active header.site-header,
body.ds-designer-shell-active footer.site-footer,
body.ds-designer-shell-active .wp-site-blocks > header,
body.ds-designer-shell-active .wp-site-blocks > footer,
body.ds-designer-shell-active .entry-header,
body.ds-designer-shell-active .entry-footer,
body.ds-designer-shell-active .post-navigation {
  display: none !important;
}

body.ds-designer-shell-active .ds-studio.ds-shell-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 2147483000 !important;
  overflow: hidden !important;
}

body.ds-designer-shell-active .ds-studio.ds-shell-active .ds-workspace {
  max-height: 100dvh !important;
}

/* Mobile interaction safety override:
   guarantees controls remain clickable and hidden layers cannot block input. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-mobile-topbar,
  .ds-studio .ds-mobile-bottom-nav,
  .ds-studio .ds-mobile-apply-cta,
  .ds-studio .ds-mobile-topbar *,
  .ds-studio .ds-mobile-bottom-nav *,
  .ds-studio .ds-mobile-apply-cta * {
    pointer-events: auto !important;
  }

  .ds-studio:not(.ds-mobile-sheet-open) .ds-mobile-sheet-backdrop,
  .ds-studio:not(.ds-mobile-sheet-open) .ds-mobile-sheets {
    pointer-events: none !important;
  }

  .ds-studio:not(.ds-mobile-sheet-open) .ds-mobile-sheet-backdrop {
    opacity: 0 !important;
  }

  .ds-studio:not(.ds-mobile-sheet-open) .ds-mobile-sheets {
    transform: translateY(104%) !important;
  }

  .ds-studio .ds-mobile-sheet-backdrop[aria-hidden="true"] {
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .ds-studio .ds-mobile-sheets[aria-hidden="true"] {
    pointer-events: none !important;
  }

  .ds-studio .ds-mobile-sheet-backdrop[aria-hidden="false"] {
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-sheets[aria-hidden="false"] {
    pointer-events: auto !important;
  }
}
.ds-studio .ds-context-toolbar {
  display: none !important;
}
/* Context menu removed intentionally: keep hidden in all viewports. */
.ds-studio .ds-context-toolbar,
.ds-studio .ds-context-toolbar.is-visible,
.ds-studio .ds-context-toolbar.is-visible.is-floating,
.ds-studio .ds-context-toolbar.is-visible.is-fixed-bottom-safe {
  display: none !important;
}

.ds-studio .ds-mobile-subpicker .ds-mobile-icon-tile {
  min-height: 52px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ds-studio .ds-mobile-icons-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.ds-studio .ds-mobile-icons-grid .ds-mobile-icon-tile {
  min-height: 50px !important;
  font-size: 23px !important;
  color: #0f172a !important;
  border-color: #c8d6ea !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif !important;
}

.ds-studio .ds-mobile-icons-grid .ds-mobile-icon-tile::before,
.ds-studio .ds-mobile-subpicker .ds-mobile-icon-tile::before {
  content: none !important;
}

/* Landscape rail remap: topbar -> left rail, bottom nav -> right rail */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio {
    --ds-land-left-w: 94px;
    --ds-land-right-w: 98px;
    --ds-land-safe-l: env(safe-area-inset-left, 0px);
    --ds-land-safe-r: env(safe-area-inset-right, 0px);
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-toolbar,
  .ds-studio .ds-tools-top,
  .ds-studio .ds-topbar,
  .ds-studio .ds-left-rail,
  .ds-studio .ds-right-inspector {
    display: none !important;
  }

  .ds-studio .ds-mobile-apply-cta {
    display: none !important;
  }

  .ds-studio .ds-mobile-topbar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: calc(var(--ds-land-left-w) + var(--ds-land-safe-l)) !important;
    padding: 10px 8px 10px calc(8px + var(--ds-land-safe-l)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 320 !important;
    border-right: 1px solid rgba(86, 105, 133, 0.42) !important;
    background: rgba(9, 14, 22, 0.94) !important;
    backdrop-filter: blur(10px);
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn {
    width: 100% !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(104, 124, 152, 0.45) !important;
    background: #162033 !important;
    color: #eef4ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn {
    width: 100% !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(104, 124, 152, 0.45) !important;
    background: #162033 !important;
    color: #eef4ff !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary {
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    border-color: rgba(12, 161, 145, 0.98) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(8, 24, 34, 0.24) !important;
  }

  .ds-studio .ds-mobile-topbar-title {
    margin: 2px 0 !important;
    padding: 4px 2px !important;
    color: #eaf1ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 56px !important;
  }

  .ds-studio .ds-mobile-bottom-nav {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: calc(var(--ds-land-right-w) + var(--ds-land-safe-r)) !important;
    padding: 10px calc(8px + var(--ds-land-safe-r)) 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 320 !important;
    border-left: 1px solid rgba(86, 105, 133, 0.42) !important;
    background: rgba(9, 14, 22, 0.94) !important;
    backdrop-filter: blur(10px);
    box-sizing: border-box !important;
    height: 100dvh !important;
    min-height: 0 !important;
  }

  .ds-studio .ds-mobile-bottom-nav button {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #eef4ff !important;
    font-size: 0 !important;
    transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease !important;
  }

  .ds-studio .ds-mobile-bottom-nav button::before {
    display: block !important;
    font-family: dashicons !important;
    font-size: 21px !important;
    line-height: 1 !important;
    color: #ffffff !important;
  }

  .ds-studio .ds-mobile-bottom-nav button::after {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: inherit !important;
    text-align: center !important;
  }

  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="insert"]::before { content: "\f128" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="canvas"]::before { content: "\f538" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="library"]::before { content: "\f318" !important; }
  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action="preview"]::before { content: "\f177" !important; }

  .ds-studio .ds-mobile-bottom-nav button.is-active,
  .ds-studio .ds-mobile-bottom-nav button:active,
  .ds-studio .ds-mobile-bottom-nav button:focus-visible {
    background: rgba(248, 159, 37, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(248, 159, 37, 0.34), 0 0 14px rgba(248, 159, 37, 0.24) !important;
    color: var(--ds-accent-2, #f89f25) !important;
    outline: none !important;
  }

  .ds-studio .ds-mobile-bottom-nav button.is-active::before {
    color: var(--ds-accent-2, #f89f25) !important;
  }

  .ds-studio .ds-workspace {
    margin: 0 !important;
    padding: 10px calc(var(--ds-land-right-w) + var(--ds-land-safe-r) + 10px) 10px calc(var(--ds-land-left-w) + var(--ds-land-safe-l) + 10px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-desktop-main,
  .ds-studio .ds-workspace-grid {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(142, 158, 184, 0.42) !important;
    background: #dfe7f3 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-canvas-wrap {
    height: 100% !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #e8eef8 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    border-radius: 8px !important;
    background: #eef3fb !important;
    box-sizing: border-box !important;
  }

  .ds-studio .ds-mobile-sheet-backdrop {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(var(--ds-land-left-w) + var(--ds-land-safe-l)) !important;
    right: calc(var(--ds-land-right-w) + var(--ds-land-safe-r)) !important;
    z-index: 321 !important;
    background: rgba(6, 12, 22, 0.44) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
  }

  .ds-studio .ds-mobile-sheet-backdrop[aria-hidden="false"] {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-sheets {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: calc(var(--ds-land-right-w) + var(--ds-land-safe-r) + 8px) !important;
    width: min(420px, calc(100vw - var(--ds-land-left-w) - var(--ds-land-right-w) - var(--ds-land-safe-l) - var(--ds-land-safe-r) - 16px)) !important;
    z-index: 322 !important;
    display: block !important;
    pointer-events: none !important;
    transform: translateX(106%) !important;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1) !important;
  }

  .ds-studio[data-mobile-sheet-side="left"] .ds-mobile-sheets {
    left: calc(var(--ds-land-left-w) + var(--ds-land-safe-l) + 8px) !important;
    right: auto !important;
    transform: translateX(-106%) !important;
  }

  .ds-studio .ds-mobile-sheets[aria-hidden="false"] {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-sheet {
    display: none !important;
    margin: 8px 0 !important;
    height: calc(100dvh - 16px) !important;
    max-height: none !important;
    border-radius: 14px !important;
    border: 1px solid rgba(76, 96, 122, 0.72) !important;
    background: rgba(9, 14, 22, 0.98) !important;
    box-shadow: 0 14px 30px rgba(5, 10, 20, 0.42) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ds-studio .ds-mobile-sheet-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 20px 10px !important;
    border-bottom: 1px solid rgba(75, 92, 116, 0.6) !important;
    background: rgba(11, 18, 28, 0.98) !important;
  }

  .ds-studio .ds-mobile-sheet-head h4 {
    margin: 0 !important;
    color: #f2f6ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-head button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(96, 116, 145, 0.54) !important;
    background: #172235 !important;
    color: #eef4ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-sheet-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 24px 20px !important;
  }

  .ds-studio .ds-mobile-sheet-grid button {
    min-height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(86, 105, 133, 0.7) !important;
    background: #152134 !important;
    color: #eef4ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 14px !important;
    text-align: center !important;
    transition: transform 120ms ease, background 160ms ease, border-color 160ms ease !important;
  }

  .ds-studio .ds-mobile-sheet-grid button:active {
    transform: scale(0.97) !important;
  }

  .ds-studio .ds-mobile-sheet-grid .ds-mobile-btn-primary {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
    border-color: rgba(12, 161, 145, 0.98) !important;
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(8, 24, 34, 0.24) !important;
  }

  .ds-studio .ds-mobile-sheet.is-active,
  .ds-studio[data-mobile-sheet-open="insert"] .ds-mobile-sheet[data-mobile-sheet="insert"],
  .ds-studio[data-mobile-sheet-open="canvas"] .ds-mobile-sheet[data-mobile-sheet="canvas"],
  .ds-studio[data-mobile-sheet-open="library"] .ds-mobile-sheet[data-mobile-sheet="library"],
  .ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"],
  .ds-studio[data-mobile-sheet-open="edit"] .ds-mobile-sheet[data-mobile-sheet="edit"],
  .ds-studio[data-mobile-sheet-open="style"] .ds-mobile-sheet[data-mobile-sheet="style"],
  .ds-studio[data-mobile-sheet-open="arrange"] .ds-mobile-sheet[data-mobile-sheet="arrange"],
  .ds-studio[data-mobile-sheet-open="more"] .ds-mobile-sheet[data-mobile-sheet="more"],
  .ds-studio[data-mobile-sheet-open="emoticons"] .ds-mobile-sheet[data-mobile-sheet="emoticons"],
  .ds-studio[data-mobile-sheet-open="icons"] .ds-mobile-sheet[data-mobile-sheet="icons"] {
    display: block !important;
  }
}

/* Portrait top menu control rearrangement */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-mobile-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: calc(var(--ds-mobile-safe-t) + 6px) 8px !important;
    min-height: 48px !important;
  }

  .ds-studio .ds-mobile-topbar-back {
    grid-area: auto !important;
    min-width: 56px !important;
    min-height: 34px !important;
    justify-self: start !important;
  }

  .ds-studio .ds-mobile-topbar-title {
    grid-area: auto !important;
    justify-self: stretch !important;
    text-align: left !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary {
    grid-area: auto !important;
    min-width: 64px !important;
    min-height: 34px !important;
    justify-self: end !important;
  }

  .ds-studio .ds-mobile-topbar-center {
    grid-area: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: max-content !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  .ds-studio .ds-mobile-topbar-btn:not(.ds-mobile-topbar-btn-primary) {
    grid-area: auto !important;
    min-width: 56px !important;
    min-height: 34px !important;
    justify-self: end !important;
  }
}

/* Mobile lock: disable landscape editor mode and force portrait-only UX. */
.ds-studio .ds-mobile-landscape-lock {
  display: none;
}

@media (max-width: 900px) and (orientation: landscape) and (min-width: 99999px) {
  .ds-studio {
    overflow: hidden !important;
  }

  .ds-studio .ds-mobile-landscape-lock {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: radial-gradient(circle at top, #1b2a41 0%, #050b15 76%) !important;
    pointer-events: auto !important;
  }

  .ds-studio .ds-mobile-landscape-lock-card {
    width: min(420px, 92vw) !important;
    border: 1px solid rgba(100, 123, 154, 0.45) !important;
    border-radius: 14px !important;
    background: rgba(16, 27, 43, 0.92) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.44) !important;
    color: #edf5ff !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }

  .ds-studio .ds-mobile-landscape-lock-card .dashicons {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #26c6da !important;
    margin-bottom: 10px !important;
  }

  .ds-studio .ds-mobile-landscape-lock-card h4 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f4f9ff !important;
  }

  .ds-studio .ds-mobile-landscape-lock-card p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #c8d7ea !important;
  }

  .ds-studio .ds-mobile-topbar,
  .ds-studio .ds-mobile-bottom-nav,
  .ds-studio .ds-mobile-apply-cta,
  .ds-studio .ds-workspace,
  .ds-studio .ds-toolbar,
  .ds-studio .ds-context-toolbar,
  .ds-studio .ds-mobile-sheets,
  .ds-studio .ds-mobile-sheet-backdrop,
  .ds-studio .ds-object-quick-dock,
  .ds-studio .ds-status,
  .ds-studio .ds-fullscreen-brand {
    display: none !important;
  }
}

/* Mobile pan/zoom: keep viewport pannable in both portrait and landscape. */
@media (max-width: 900px) {
  .ds-studio .ds-canvas-viewport {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }
}

/* Final hard override: mobile portrait topbar must stay in one row. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-mobile-topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: calc(var(--ds-mobile-safe-t) + 6px) 8px !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn,
  .ds-studio .ds-mobile-topbar-btn-primary,
  .ds-studio .ds-mobile-topbar-center {
    flex: 0 0 auto !important;
  }

  .ds-studio .ds-mobile-topbar-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ds-studio .ds-mobile-topbar-center {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
}

/* Final portrait workspace cutoff:
   Canvas/workspace must end where bottom nav starts (not behind nav/apply). */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-workspace {
    box-sizing: border-box !important;
    height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) -
      var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px))
    ) !important;
    min-height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) -
      var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px))
    ) !important;
    max-height: calc(
      100dvh - var(--ds-mobile-top-h) - var(--ds-mobile-nav-h) -
      var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px))
    ) !important;
    padding-bottom: 4px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-zone-picker-modal {
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-zone-picker-dialog {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .ds-zone-picker-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
    margin-bottom: 6px !important;
    padding-bottom: 6px;
  }

  .ds-zone-picker-help {
    margin-bottom: 6px !important;
  }

  .ds-zone-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
  }

  .ds-zone-picker-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #f8fbff;
    margin-top: 6px !important;
    padding-top: 6px;
  }

  .ds-zone-picker-dialog button,
  .ds-zone-picker-actions .ds-woo-btn-primary {
    min-height: 38px;
  }

  .ds-font-picker-modal {
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-font-picker-dialog {
    width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
    border-radius: 10px !important;
    padding: 8px !important;
  }

  .ds-font-picker-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
    padding-bottom: 6px;
    margin-bottom: 6px !important;
  }

  .ds-exit-confirm-modal {
    align-items: flex-end !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-exit-confirm-dialog {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .ds-refresh-confirm-modal {
    align-items: flex-end !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-refresh-confirm-dialog {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .ds-designer-toast {
    bottom: calc(var(--ds-mobile-shell-cta-h) + var(--ds-mobile-shell-nav-h) + var(--ds-mobile-shell-gap) + var(--ds-mobile-shell-bottom-safe) + 8px);
    font-size: 11px;
  }

  .ds-post-save-modal {
    align-items: flex-end !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-post-save-dialog {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .ds-empty-zones-modal {
    align-items: flex-end !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .ds-empty-zones-dialog {
    width: 100% !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace {
    padding-bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px)) + 2px) !important;
  }
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-shell {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
}

/* Final mobile portrait override (must stay last): canvas area ends before bottom nav */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-workspace {
    padding-bottom: calc(var(--ds-mobile-nav-h) + var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px)) + 2px) !important;
  }
  .ds-studio .ds-workspace-grid,
  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
}

/* Final mobile portrait polish: floating topbar + workspace stops at bottom nav start */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio {
    --ds-mobile-float-gap: 8px;
    --ds-mobile-float-radius: 12px;
    --ds-mobile-topbar-float-h: 48px;
  }

  .ds-studio .ds-mobile-topbar {
    position: fixed !important;
    top: calc(var(--ds-mobile-safe-t, env(safe-area-inset-top, 0px)) + var(--ds-mobile-float-gap)) !important;
    left: var(--ds-mobile-float-gap) !important;
    right: var(--ds-mobile-float-gap) !important;
    width: auto !important;
    min-height: var(--ds-mobile-topbar-float-h) !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: var(--ds-mobile-float-radius) !important;
    border: 1px solid rgba(10, 37, 66, 0.16) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 2100 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn,
  .ds-studio .ds-mobile-topbar-btn-primary,
  .ds-studio .ds-mobile-topbar-center {
    flex: 0 0 auto !important;
  }

  .ds-studio .ds-mobile-topbar-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ds-studio .ds-workspace {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .ds-studio .ds-workspace-grid,
  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }

  .ds-studio .ds-workspace-grid {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Final hard lock: mobile portrait canvas must occupy full vertical workspace. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace-grid,
  .ds-studio.ds-ui-modern[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-shell,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-wrap,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-viewport {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Authoritative mobile portrait layout:
   topbar -> workspace -> bottom nav -> apply CTA */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace {
    grid-row: 2 !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-bottom-nav {
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-apply-cta {
    grid-row: 4 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 3 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-shell,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-canvas-viewport {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet-grid {
    touch-action: pan-y !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 28px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    touch-action: pan-x !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet input[type="range"]::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(154, 217, 211, 0.35) !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: -8px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(10, 37, 66, 0.45) !important;
    background: #9ad9d3 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet input[type="range"]::-moz-range-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(154, 217, 211, 0.35) !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-sheet input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(10, 37, 66, 0.45) !important;
    background: #9ad9d3 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
  }
}

/* Absolute final override: prevent legacy 36/37/38dvh grid rows from shrinking workspace. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio,
  .ds-studio.ds-ui-modern,
  .ds-studio.ds-fullscreen,
  .ds-studio.ds-ui-modern.ds-fullscreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-workspace {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-workspace-grid,
  .ds-studio.ds-ui-modern .ds-workspace-grid,
  .ds-studio.ds-fullscreen .ds-workspace-grid,
  .ds-studio.ds-ui-modern.ds-fullscreen .ds-workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell,
  .ds-studio .ds-canvas-wrap,
  .ds-studio .ds-canvas-viewport {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Emergency direct-canvas mode (mobile portrait):
   show canvas viewport directly, without visible container framing. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-center-stage,
  .ds-studio .ds-canvas-shell,
  .ds-studio .ds-canvas-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ds-studio .ds-canvas-viewport {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ds-mobile-nav-h, 60px)) !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 1 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Final topbar polish (mobile portrait): keep one-row layout with subtle visual refresh. */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-mobile-topbar {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(10, 37, 66, 0.14) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2100 !important;
  }

  .ds-studio .ds-mobile-topbar-back {
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
  }

  .ds-studio .ds-mobile-topbar-back::before {
    content: "×";
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: currentColor !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary {
    width: 50px !important;
    min-width: 50px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-width: 100% !important;
    white-space: normal !important;
    border-color: color-mix(in srgb, var(--accent, #0a7f73) 72%, #ffffff 28%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #0a7f73) 88%, #ffffff 12%) 0%,
      var(--accent, #0a7f73) 100%
    ) !important;
    color: #ffffff !important;
  }

  .ds-studio .ds-mobile-topbar-center {
    display: flex !important;
    flex-direction: row !important;
    justify-content: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ds-studio .ds-mobile-topbar-back,
  .ds-studio .ds-mobile-topbar-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(10, 37, 66, 0.16) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #0a2542 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .ds-studio .ds-mobile-topbar-btn.ds-mobile-btn-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 8px !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary.ds-mobile-btn-with-icon {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 3px 2px !important;
    line-height: 1 !important;
  }

  .ds-studio .ds-mobile-topbar-btn.ds-mobile-btn-with-icon .ds-mobile-btn-ic {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary.ds-mobile-btn-with-icon .ds-mobile-btn-ic {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  .ds-studio .ds-mobile-topbar-btn-primary.ds-mobile-btn-with-icon > span:last-child {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(10, 37, 66, 0.14) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
    color: #0a2542 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn .dashicons {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 15px !important;
  }

  .ds-studio .ds-mobile-topbar-icon-label {
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

/* Ultra-final topbar hard override (mobile portrait only). */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-back {
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-back > * {
    display: none !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-back::before {
    content: "\00d7" !important;
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: currentColor !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-center {
    gap: 2px !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-icon-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-btn:not(.ds-mobile-topbar-btn-primary) {
    min-height: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #0a2542 !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar-btn-primary {
    width: 50px !important;
    min-width: 50px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-color: color-mix(in srgb, var(--accent, #0a7f73) 72%, #ffffff 28%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #0a7f73) 88%, #ffffff 12%) 0%,
      var(--accent, #0a7f73) 100%
    ) !important;
    color: #ffffff !important;
  }

  /* Keep topbar behavior identical during startup step 1 (no legacy hiding). */
  .ds-studio.ds-startup-gated[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar [data-mobile-action],
  .ds-studio.ds-startup-gated[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar .ds-mobile-topbar-btn,
  .ds-studio.ds-startup-gated[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar .ds-mobile-topbar-back,
  .ds-studio.ds-startup-gated[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar .ds-mobile-topbar-center {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .ds-studio.ds-startup-gated[data-vp-mobile="1"][data-vp-orient="portrait-disabled-in-editor-css"] .ds-mobile-topbar .ds-mobile-topbar-center {
    display: flex !important;
  }
}

/* Match topbar look in initial template step (before template is chosen). */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio.ds-no-template .ds-mobile-topbar,
  .ds-studio.ds-startup-gated .ds-mobile-topbar {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 5px 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(10, 37, 66, 0.14) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2100 !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-back,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-back {
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-back > *,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-back > * {
    display: none !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-back::before,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-back::before {
    content: "\00d7" !important;
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: currentColor !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-center,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-center {
    display: flex !important;
    flex-direction: row !important;
    justify-content: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-icon-btn,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-icon-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-btn:not(.ds-mobile-topbar-btn-primary),
  .ds-studio.ds-startup-gated .ds-mobile-topbar-btn:not(.ds-mobile-topbar-btn-primary) {
    min-height: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #0a2542 !important;
  }

  .ds-studio.ds-no-template .ds-mobile-topbar-btn-primary,
  .ds-studio.ds-startup-gated .ds-mobile-topbar-btn-primary {
    width: 50px !important;
    min-width: 50px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-color: color-mix(in srgb, var(--accent, #0a7f73) 72%, #ffffff 28%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #0a7f73) 88%, #ffffff 12%) 0%,
      var(--accent, #0a7f73) 100%
    ) !important;
    color: #ffffff !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product > h5 {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    min-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn::before {
    content: none !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn.ds-mobile-btn-with-icon {
    gap: 3px !important;
    padding: 6px 5px !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn .ds-mobile-btn-ic {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn > span:last-child {
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn-save {
    border: 1px solid rgba(10, 37, 66, 0.16) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%) !important;
    color: #0a2542 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important;
  }

  .ds-studio .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn-apply {
    border: 1px solid color-mix(in srgb, var(--accent, #0a7f73) 72%, #ffffff 28%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #0a7f73) 88%, #ffffff 12%) 0%,
      var(--accent, #0a7f73) 100%
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--accent, #0a7f73) 35%, transparent 65%) !important;
  }
}

/* =========================================================
   Desktop 3-column enhancement (additive, mobile-safe)
   Applies only for desktop screens 1024px+
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) {
    --ds-desktop-top-h: 64px;
    /* Proportional desktop layout (stable across wider/narrower screens) */
    --ds-desktop-left-col: 24fr;
    --ds-desktop-center-col: 46fr;
    --ds-desktop-right-col: 30fr;
    --ds-desktop-gap: 12px;
    height: 100dvh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    overflow: hidden;
    padding: 12px !important;
    background: linear-gradient(180deg, #0d1523 0%, #122033 100%) !important;
    border: 1px solid rgba(88, 108, 138, 0.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 36px rgba(7, 13, 24, 0.28) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-topbar,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-bottom-nav,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-backdrop,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheets,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-apply-cta {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-toolbar {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-context-toolbar.is-visible {
    position: absolute;
    top: calc(var(--ds-desktop-top-h) + 14px);
    right: calc(30% + (var(--ds-desktop-gap) * 2));
    z-index: 90;
    max-width: min(740px, calc(100% - 30% - 40px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-studio:not(.ds-ui-modern) .ds-workspace {
    grid-row: 1;
    margin-top: 0 !important;
    min-height: 0;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--ds-desktop-gap);
    overflow: hidden;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    min-height: var(--ds-desktop-top-h);
    display: grid !important;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: rgba(15, 24, 38, 0.92) !important;
    border: 1px solid rgba(102, 123, 154, 0.42) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-back {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(120, 140, 168, 0.42) !important;
    background: rgba(22, 35, 54, 0.78) !important;
    color: #e9f1ff !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-back .dashicons {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 16px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f1f6ff !important;
    letter-spacing: 0.01em;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn {
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(126, 146, 176, 0.28);
    background: rgba(22, 36, 56, 0.82);
    color: #e1ebfb;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn:hover {
    background: rgba(34, 52, 79, 0.94);
    border-color: rgba(145, 165, 196, 0.36);
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-primary, #0a7f73) 86%, #ffffff 14%) 0%, var(--ds-primary, #0a7f73) 100%);
    border-color: color-mix(in srgb, var(--ds-primary, #0a7f73) 62%, #ffffff 38%);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ds-primary, #0a7f73) 32%, transparent 68%);
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock {
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 11px !important;
    background: rgba(19, 29, 45, 0.86) !important;
    border: 1px solid rgba(112, 134, 166, 0.3) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-template-block .ds-block-title,
  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-zoneblock .ds-block-title {
    display: block !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #bfd0ea !important;
    margin-right: 8px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-template-block .ds-group,
  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-zoneblock .ds-group {
    align-items: center;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top [data-input="template-select"],
  .ds-studio:not(.ds-ui-modern) .ds-tools-top [data-role="active-zone-select"] {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(138, 159, 189, 0.36) !important;
    background: rgba(13, 23, 37, 0.86) !important;
    color: #e6f0ff !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock .ds-group {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top button,
  .ds-studio:not(.ds-ui-modern) .ds-tools-top .ds-upload {
    min-height: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-main {
    min-height: 0;
    overflow: hidden;
  }

  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    display: grid !important;
    grid-template-columns:
      minmax(0, var(--ds-desktop-left-col))
      minmax(0, var(--ds-desktop-center-col))
      minmax(0, var(--ds-desktop-right-col)) !important;
    gap: var(--ds-desktop-gap);
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector {
    min-height: 0;
    border-radius: 14px;
    background: rgba(16, 26, 42, 0.86);
    border: 1px solid rgba(112, 134, 166, 0.32);
    overflow: hidden;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-canvas-side-inner,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-canvas-side-inner {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px !important;
    gap: 12px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock {
    border-radius: 12px !important;
    background: rgba(22, 34, 53, 0.82) !important;
    border: 1px solid rgba(122, 142, 174, 0.24) !important;
    padding: 10px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-group,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-group {
    background: rgba(16, 26, 42, 0.72) !important;
    border-color: rgba(116, 138, 170, 0.2) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-block-title,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-block-title {
    font-size: 11px !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #c7d6ee !important;
    margin-bottom: 6px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock .ds-group,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock .ds-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    min-width: 0;
    min-height: 0;
    border-radius: 16px !important;
    border: 1px solid rgba(114, 134, 162, 0.36) !important;
    background: #dfe6f2 !important;
    padding: 14px !important;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-wrap {
    min-width: 0;
    height: 100%;
    min-height: 0;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    background: #e8eef8 !important;
    border-radius: 12px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail button,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector button,
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-upload,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-upload {
    min-height: 46px !important;
    height: 46px !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 12px !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(123, 145, 177, 0.26) !important;
    background: rgba(19, 30, 46, 0.9) !important;
    color: #dce8fb !important;
    box-shadow: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-upload::before,
  .ds-studio:not(.ds-ui-modern) .ds-left-rail button::before,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-upload::before,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector button::before {
    font-size: 15px !important;
    width: 16px !important;
    min-width: 16px !important;
    text-align: center;
    opacity: 0.95;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-icon-only,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-icon-only {
    font-size: 12px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-icon-only::after,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-icon-only::after {
    content: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-icon-only::before,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-icon-only::before {
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-zone-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-zone-buttons button {
    width: auto !important;
    min-width: 110px !important;
    max-width: 100%;
    flex: 1 1 110px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="apply-product"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-primary, #0a7f73) 84%, #ffffff 16%) 0%, var(--ds-primary, #0a7f73) 100%) !important;
    border-color: color-mix(in srgb, var(--ds-primary, #0a7f73) 62%, #ffffff 38%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ds-primary, #0a7f73) 34%, transparent 66%) !important;
    min-height: 44px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="save"],
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="final-save"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-accent, #f89f25) 86%, #ffffff 14%) 0%, color-mix(in srgb, var(--ds-accent, #f89f25) 72%, #ffffff 28%) 100%) !important;
    border-color: color-mix(in srgb, var(--ds-accent, #f89f25) 54%, #ffffff 46%) !important;
    color: #132845 !important;
    font-weight: 800 !important;
    min-height: 42px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="export"],
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="load-design"],
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector [data-action="my-designs"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(126, 146, 176, 0.28) !important;
    color: #d4e0f5 !important;
    font-weight: 700 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-status {
    grid-row: 2;
    margin-top: 8px !important;
    min-height: 22px !important;
    border-radius: 10px !important;
    background: rgba(8, 14, 24, 0.48) !important;
    border: 1px solid rgba(95, 116, 146, 0.34) !important;
    color: #c6d5ec !important;
  }
}

/* =========================================================
   Mobile canvas safety lock (classic only)
   - portrait workspace ends at bottom nav start
   - portrait/landscape canvas gets stable soft shadow
   ========================================================= */
@media (max-width: 1023px) {
  .ds-studio[data-vp-mobile="1"]:not(.ds-ui-modern) .ds-canvas-viewport .canvas-container {
    border-radius: 10px !important;
    box-shadow: 0 12px 26px rgba(10, 20, 36, 0.2) !important;
  }
}

@media (max-width: 1023px) and (orientation: portrait) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-workspace {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--ds-mobile-top-h, 52px) !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 6px 8px calc(var(--ds-mobile-nav-h, 64px) + var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px))) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background-color: var(--ds-dc-palette-base, #eef5ff) !important;
    background-image:
      var(--ds-dc-palette-r1),
      var(--ds-dc-palette-r2),
      var(--ds-dc-palette-r3),
      var(--ds-dc-palette-l) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-workspace-grid,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-shell,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-wrap,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}

/* Mobile text editor overlay (portrait + landscape) */
@media (max-width: 1023px) {
  .ds-studio .ds-mobile-text-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 10px 10px;
    background: rgba(8, 14, 24, 0.18);
  }

  .ds-studio .ds-mobile-text-edit-modal.is-open {
    display: flex;
  }

  .ds-studio .ds-mobile-text-edit-card {
    width: min(520px, 100%);
    border-radius: 12px;
    border: 1px solid rgba(128, 145, 170, 0.34);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(12, 21, 36, 0.2);
    padding: 10px;
  }

  .ds-studio .ds-mobile-text-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #112237;
    font-size: 13px;
    font-weight: 800;
  }

  .ds-studio .ds-mobile-text-edit-head button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #bfd0e4;
    background: #ffffff;
    color: #102136;
    font-size: 11px;
    font-weight: 700;
  }

  .ds-studio .ds-mobile-text-edit-card textarea[data-role="mte-input"] {
    width: 100%;
    min-height: 88px;
    max-height: 34dvh;
    resize: vertical;
    border-radius: 9px;
    border: 1px solid #bfd0e4;
    background: #ffffff;
    color: #102136;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px;
    outline: none;
  }

  .ds-studio .ds-mobile-text-edit-card textarea[data-role="mte-input"]:focus {
    border-color: #7aa7e0;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.18);
  }

  .ds-studio .ds-mobile-text-edit-actions {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ds-studio .ds-mobile-text-edit-actions button {
    min-height: 38px;
    border-radius: 9px;
    border: 1px solid #bfd0e4;
    background: #ffffff;
    color: #102136;
    font-size: 12px;
    font-weight: 700;
  }

  .ds-studio .ds-mobile-text-edit-actions button[data-role="mte-done"] {
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%);
    border-color: rgba(12, 161, 145, 0.98);
    color: #ffffff;
  }
}

/* =========================================================
   Canvas Focus Pass (desktop classic only, visual-only)
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-desktop-main,
  .ds-studio:not(.ds-ui-modern) .ds-workspace,
  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    background: #0a121d !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    background: linear-gradient(180deg, #101a2a 0%, #0f1826 100%) !important;
    border: 1px solid rgba(120, 145, 178, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 14px 30px rgba(2, 7, 14, 0.42) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-shell {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-wrap {
    background: linear-gradient(180deg, #1a273a 0%, #162235 100%) !important;
    border: 1px solid rgba(148, 173, 205, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 10px 24px rgba(4, 10, 20, 0.34) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    background: #202f45 !important;
    border: 1px solid rgba(182, 204, 232, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  /* Subtle print-area boundary, without heavy nested outlines */
  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .canvas-container,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .lower-canvas,
.ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .upper-canvas {
    border: 1px solid rgba(235, 244, 255, 0.28) !important;
    box-shadow: 0 6px 14px rgba(2, 7, 15, 0.24) !important;
  }
}

/* =========================================================
   Desktop Panel Cleanup (visual hierarchy only)
   - calmer borders
   - clearer depth separation
   - stronger canvas focus
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) {
    background: linear-gradient(180deg, #0b1320 0%, #0e1727 100%) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-workspace {
    background: transparent !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right {
    background: rgba(20, 31, 48, 0.86) !important;
    border: 1px solid rgba(122, 142, 172, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 18px rgba(4, 10, 20, 0.16) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left .ds-canvas-side-inner,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right .ds-canvas-side-inner {
    background: transparent !important;
    gap: 14px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left .ds-toolblock,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right .ds-toolblock {
    background: rgba(30, 44, 66, 0.9) !important;
    border: 1px solid rgba(136, 156, 186, 0.14) !important;
    box-shadow: 0 2px 7px rgba(5, 12, 24, 0.12) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left .ds-group,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right .ds-group {
    background: rgba(15, 24, 38, 0.42) !important;
    border: 1px solid rgba(132, 152, 182, 0.08) !important;
    box-shadow: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    background: rgba(16, 25, 39, 0.9) !important;
    border: 1px solid rgba(124, 144, 174, 0.2) !important;
    box-shadow: 0 4px 12px rgba(6, 12, 23, 0.18) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    background: linear-gradient(180deg, #e9eff8 0%, #dce5f2 100%) !important;
    border: 1px solid rgba(142, 162, 191, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      0 10px 24px rgba(6, 12, 22, 0.14) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    background: #eef3fb !important;
    border: 1px solid rgba(153, 171, 198, 0.36) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-status {
    background: rgba(10, 16, 28, 0.36) !important;
    border: 1px solid rgba(106, 127, 157, 0.18) !important;
  }
}

/* =========================================================
   Subtle Motion Layer (no layout/logic changes)
   ========================================================= */
.ds-studio {
  --ds-motion-dur-fast: 160ms;
  --ds-motion-dur-base: 200ms;
  --ds-motion-ease: cubic-bezier(.2,.8,.2,1);
}

/* Mobile sheets / drawers */
.ds-studio .ds-mobile-sheet-backdrop,
.ds-studio .ds-mobile-sheets {
  transition:
    opacity var(--ds-motion-dur-base) var(--ds-motion-ease),
    transform var(--ds-motion-dur-base) var(--ds-motion-ease) !important;
  will-change: opacity, transform;
}

.ds-studio .ds-mobile-sheet {
  transition:
    opacity var(--ds-motion-dur-base) var(--ds-motion-ease),
    transform var(--ds-motion-dur-base) var(--ds-motion-ease) !important;
  transform: translateY(16px) scale(0.995);
  opacity: 0;
  will-change: opacity, transform;
}

.ds-studio .ds-mobile-sheet.is-active,
.ds-studio[data-mobile-sheet-open="insert"] .ds-mobile-sheet[data-mobile-sheet="insert"],
.ds-studio[data-mobile-sheet-open="canvas"] .ds-mobile-sheet[data-mobile-sheet="canvas"],
.ds-studio[data-mobile-sheet-open="library"] .ds-mobile-sheet[data-mobile-sheet="library"],
.ds-studio[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"],
.ds-studio[data-mobile-sheet-open="edit"] .ds-mobile-sheet[data-mobile-sheet="edit"],
.ds-studio[data-mobile-sheet-open="style"] .ds-mobile-sheet[data-mobile-sheet="style"],
.ds-studio[data-mobile-sheet-open="arrange"] .ds-mobile-sheet[data-mobile-sheet="arrange"],
.ds-studio[data-mobile-sheet-open="more"] .ds-mobile-sheet[data-mobile-sheet="more"],
.ds-studio[data-mobile-sheet-open="emoticons"] .ds-mobile-sheet[data-mobile-sheet="emoticons"],
.ds-studio[data-mobile-sheet-open="icons"] .ds-mobile-sheet[data-mobile-sheet="icons"] {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

/* Small pop elements: modal/dialog wrappers */
.ds-studio .ds-font-picker-modal,
.ds-studio .ds-exit-confirm-modal,
.ds-studio .ds-refresh-confirm-modal,
.ds-studio .ds-post-save-modal,
.ds-studio .ds-empty-zones-modal,
.ds-studio .ds-zone-picker-modal,
.ds-studio .ds-mug-modal,
.ds-studio .ds-props-modal,
.ds-studio .ds-my-designs-modal,
.ds-studio .ds-apply-product-modal,
.ds-studio .ds-asset-library-modal {
  transition: opacity var(--ds-motion-dur-base) var(--ds-motion-ease) !important;
}

.ds-studio .ds-font-picker-modal .ds-font-picker-dialog,
.ds-studio .ds-exit-confirm-modal .ds-exit-confirm-dialog,
.ds-studio .ds-refresh-confirm-modal .ds-refresh-confirm-dialog,
.ds-studio .ds-post-save-modal .ds-post-save-dialog,
.ds-studio .ds-empty-zones-modal .ds-empty-zones-dialog,
.ds-studio .ds-zone-picker-modal .ds-zone-picker-dialog,
.ds-studio .ds-mug-modal .ds-mug-dialog,
.ds-studio .ds-props-modal .ds-props-dialog,
.ds-studio .ds-my-designs-modal .ds-my-designs-dialog,
.ds-studio .ds-apply-product-modal .ds-apply-product-dialog,
.ds-studio .ds-asset-library-modal .ds-asset-library-dialog {
  transition:
    opacity var(--ds-motion-dur-base) var(--ds-motion-ease),
    transform var(--ds-motion-dur-base) var(--ds-motion-ease) !important;
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  will-change: opacity, transform;
}

.ds-studio .ds-font-picker-modal.is-open .ds-font-picker-dialog,
.ds-studio .ds-exit-confirm-modal.is-open .ds-exit-confirm-dialog,
.ds-studio .ds-refresh-confirm-modal.is-open .ds-refresh-confirm-dialog,
.ds-studio .ds-post-save-modal.is-open .ds-post-save-dialog,
.ds-studio .ds-empty-zones-modal.is-open .ds-empty-zones-dialog,
.ds-studio .ds-zone-picker-modal.is-open .ds-zone-picker-dialog,
.ds-studio .ds-mug-modal.is-open .ds-mug-dialog,
.ds-studio .ds-props-modal.is-open .ds-props-dialog,
.ds-studio .ds-my-designs-modal.is-open .ds-my-designs-dialog,
.ds-studio .ds-apply-product-modal.is-open .ds-apply-product-dialog,
.ds-studio .ds-asset-library-modal.is-open .ds-asset-library-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Desktop side-card reveal */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock {
    animation: ds-panel-reveal var(--ds-motion-dur-base) var(--ds-motion-ease) both;
  }
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock:nth-child(2),
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock:nth-child(2) { animation-delay: 24ms; }
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock:nth-child(3),
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock:nth-child(3) { animation-delay: 48ms; }
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock:nth-child(4),
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-toolblock:nth-child(4) { animation-delay: 72ms; }
}

/* Optional collapse/expand smoothing */
.ds-studio .ds-toolblock.ds-collapsible-ready > .ds-block-content {
  transition:
    opacity var(--ds-motion-dur-fast) var(--ds-motion-ease),
    transform var(--ds-motion-dur-fast) var(--ds-motion-ease),
    max-height var(--ds-motion-dur-fast) var(--ds-motion-ease) !important;
}

.ds-studio .ds-toolblock.ds-collapsible-ready.is-collapsed > .ds-block-content {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes ds-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Canvas Visual Focus Boost (desktop classic, visual only)
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-desktop-main,
  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    background: #0a111c !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right {
    background: rgba(23, 35, 53, 0.88) !important;
    border: 1px solid rgba(125, 145, 176, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 14px rgba(3, 8, 17, 0.14) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    background: linear-gradient(180deg, #f0f5fc 0%, #e5edf8 100%) !important;
    border: 1px solid rgba(144, 164, 193, 0.44) !important;
    padding: 16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.64),
      0 14px 30px rgba(6, 12, 22, 0.16) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    background: #f4f7fc !important;
    border: 1px solid rgba(157, 175, 202, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 1px 4px rgba(25, 38, 58, 0.06) !important;
  }
}

/* =========================================================
   Desktop Topbar Premium Polish (classic only)
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    min-height: 64px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    background: rgba(16, 26, 40, 0.92) !important;
    border: 1px solid rgba(129, 149, 179, 0.24) !important;
    box-shadow:
      0 6px 16px rgba(6, 12, 22, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    min-height: 48px;
    border-radius: 12px;
    background: rgba(24, 37, 56, 0.62);
    border: 1px solid rgba(128, 148, 178, 0.16);
    padding: 6px 8px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-title {
    font-size: 13px !important;
    color: #e8f0ff !important;
    letter-spacing: 0.01em;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center {
    justify-content: center !important;
    overflow: hidden;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top {
    gap: 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock {
    background: rgba(16, 26, 40, 0.72) !important;
    border: 1px solid rgba(130, 150, 179, 0.2) !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-template-block,
  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-zoneblock {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 4px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-template-block .ds-block-title,
  .ds-studio:not(.ds-ui-modern) .ds-tools-top > .ds-toolblock.ds-zoneblock .ds-block-title {
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #b9cae5 !important;
    line-height: 1.1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-tools-top [data-input="template-select"],
  .ds-studio:not(.ds-ui-modern) .ds-tools-top [data-role="active-zone-select"] {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
    background: rgba(12, 21, 34, 0.86) !important;
    border: 1px solid rgba(141, 161, 192, 0.3) !important;
    color: #ebf3ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    gap: 7px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .ds-ui-icon,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .dashicons {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 16px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn-primary {
    box-shadow: 0 9px 20px color-mix(in srgb, var(--ds-primary, #0a7f73) 30%, transparent 70%) !important;
  }
}

/* Final topbar balance pass (desktop classic) */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    display: grid !important;
    grid-template-columns: minmax(250px, 1.1fr) minmax(420px, 1.8fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    min-width: 0;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta {
    padding: 6px 9px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center {
    padding: 6px 9px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    padding: 5px 6px !important;
    gap: 5px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top > .ds-toolblock {
    padding: 5px 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top > .ds-toolblock .ds-group {
    gap: 6px !important;
    align-items: center !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top > .ds-toolblock.ds-template-block .ds-block-title,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top > .ds-toolblock.ds-zoneblock .ds-block-title,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-active-zone-help {
    font-size: 9px !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #bfd0ea !important;
    font-weight: 800 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-active-zone-select {
    margin-left: 2px !important;
    grid-template-columns: 44px minmax(130px, 1fr) !important;
    column-gap: 7px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-active-zone-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(141, 161, 192, 0.32) !important;
    background: rgba(12, 21, 34, 0.86) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-active-zone-icon-btn.ds-is-3d-preview {
    width: 50px !important;
    height: 50px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center [data-input="template-select"],
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center [data-role="active-zone-select"] {
    height: 35px !important;
    min-height: 35px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(144, 164, 194, 0.32) !important;
    background: rgba(13, 22, 35, 0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-title {
    font-size: 13px !important;
    font-weight: 800 !important;
  }
}

/* =========================================================
   Final Visual Consistency Pass (no logic/layout changes)
   ========================================================= */
.ds-studio {
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 12px;
  --ds-icon-size-desktop: 18px;
  --ds-icon-size-mobile: 19px;
  --ds-btn-h-desktop-final: 46px;
  --ds-btn-h-mobile-final: 44px;
  --ds-shadow-soft: 0 4px 12px rgba(6, 12, 23, 0.16);
  --ds-shadow-card: 0 6px 16px rgba(6, 12, 23, 0.18);
  --ds-spacing-panel: 12px;
}

/* Icon consistency */
.ds-studio .ds-ui-icon,
.ds-studio .ds-ui-icon svg {
  width: var(--ds-icon-size-desktop);
  height: var(--ds-icon-size-desktop);
}

.ds-studio .dashicons {
  width: var(--ds-icon-size-desktop);
  height: var(--ds-icon-size-desktop);
  font-size: var(--ds-icon-size-desktop);
  line-height: 1;
}

/* Button consistency */
.ds-studio button,
.ds-studio .ds-upload {
  border-radius: var(--ds-radius-md) !important;
}

@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-left-rail button,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector button,
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-upload,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector .ds-upload,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-back {
    min-height: var(--ds-btn-h-desktop-final) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: var(--ds-shadow-soft) !important;
  }
}

@media (max-width: 900px) {
  .ds-studio .ds-mobile-topbar-icon-btn,
  .ds-studio .ds-mobile-topbar-btn,
  .ds-studio .ds-mobile-apply-cta,
  .ds-studio .ds-mobile-bottom-nav button {
    min-height: var(--ds-btn-h-mobile-final) !important;
    border-radius: var(--ds-radius-md) !important;
  }

  .ds-studio .ds-mobile-topbar-icon-btn .ds-ui-icon,
  .ds-studio .ds-mobile-bottom-nav .ds-ui-icon,
  .ds-studio .ds-mobile-topbar-btn .ds-ui-icon,
  .ds-studio .ds-mobile-apply-cta .ds-ui-icon,
  .ds-studio .ds-mobile-topbar-icon-btn .dashicons {
    width: var(--ds-icon-size-mobile) !important;
    height: var(--ds-icon-size-mobile) !important;
    font-size: var(--ds-icon-size-mobile) !important;
  }
}

/* Panel spacing/shadows */
.ds-studio .ds-canvas-side-inner {
  padding: var(--ds-spacing-panel) !important;
  gap: var(--ds-spacing-panel) !important;
}

.ds-studio .ds-toolblock {
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-soft) !important;
}

/* Section title consistency */
.ds-studio .ds-block-title,
.ds-studio .ds-mobile-sheet-section h5 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Input/select consistency */
.ds-studio select,
.ds-studio input[type="text"],
.ds-studio input[type="number"],
.ds-studio input[type="search"] {
  min-height: 36px;
  border-radius: var(--ds-radius-sm) !important;
  border-width: 1px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Primary CTA consistency */
.ds-studio [data-action="apply-product"],
.ds-studio [data-role="mobile-apply-cta"],
.ds-studio [data-mobile-action="apply"],
.ds-studio .ds-topbar-action-btn-primary,
.ds-studio .ds-mobile-topbar-btn-primary {
  border-radius: var(--ds-radius-md) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ds-primary, #0a7f73) 34%, transparent 66%) !important;
}

/* Classic hardening: prevent admin theme/icon-set settings from overriding classic visuals */
.ds-studio.ds-ui-classic {
  --text: #122033;
  --ds-bg-custom: #f3f8ff;
  --ds-modern-icon-color: #ffffff;
}

/* =========================================================
   Desktop Classic: reuse mobile sheets as side drawers
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 74px !important;
    height: 74px !important;
    overflow: hidden !important;
    gap: 10px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 8px !important;
    width: auto !important;
    padding: 0 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 5px 4px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .ds-ui-icon,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .ds-ui-icon svg,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn .dashicons {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn > span:last-child {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions .ds-topbar-action-btn-primary {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    margin-left: auto !important;
  }

  /* Topbar relayout (desktop classic): no left section, 3 actions left, Save right */
  .ds-studio:not(.ds-ui-modern) .ds-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    position: relative !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-meta {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center {
    grid-column: 1 !important;
    justify-self: center !important;
    z-index: 2 !important;
    width: 100% !important;
    pointer-events: none;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-center .ds-tools-top * {
    pointer-events: auto;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions {
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    z-index: 3 !important;
    padding: 0 2px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions .ds-topbar-action-btn-primary {
    margin-left: auto !important;
    min-width: 128px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
    border-color: color-mix(in srgb, var(--accent, #0a7f73) 72%, #ffffff 28%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #0a7f73) 88%, #ffffff 12%) 0%,
      var(--accent, #0a7f73) 100%
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent, #0a7f73) 34%, transparent 66%) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions .ds-topbar-action-btn-primary .ds-ui-icon,
  .ds-studio:not(.ds-ui-modern) .ds-topbar-actions .ds-topbar-action-btn-primary .ds-ui-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .ds-studio:not(.ds-ui-modern) {
    --ds-desktop-viewport-bottom-line: calc(100dvh - 24px);
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .ds-studio:not(.ds-ui-modern)::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 98, 98, 0) 0%, rgba(255, 98, 98, 0.85) 18%, rgba(255, 98, 98, 0.85) 82%, rgba(255, 98, 98, 0) 100%);
    box-shadow: 0 0 6px rgba(255, 98, 98, 0.45);
    pointer-events: none;
    z-index: 999;
  }

  .ds-studio:not(.ds-ui-modern) .ds-workspace,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-main,
  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    min-height: 0 !important;
    max-height: var(--ds-desktop-viewport-bottom-line) !important;
    overflow: hidden !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    grid-template-columns: minmax(250px, 28%) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left {
    grid-column: 1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-shell {
    grid-column: 2 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-right,
  .ds-studio:not(.ds-ui-modern) .ds-right-inspector {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-backdrop {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-host {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-host .ds-mobile-sheets {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-host [data-mobile-sheet-close] {
    display: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet {
    display: none !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(132, 156, 190, 0.38) !important;
    background: linear-gradient(180deg, rgba(16, 26, 42, 0.98) 0%, rgba(12, 20, 33, 0.98) 100%) !important;
    box-shadow: 0 16px 32px rgba(4, 8, 16, 0.46) !important;
    overflow: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-head {
    background: rgba(20, 32, 50, 0.95) !important;
    border-bottom: 1px solid rgba(140, 163, 196, 0.24) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-head h4 {
    color: #f2f7ff !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-grid button,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet .ds-mobile-inline-toggles button,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet .ds-mobile-save-product-btn {
    border: 1px solid rgba(136, 160, 194, 0.34) !important;
    background: rgba(26, 39, 60, 0.95) !important;
    color: #eef5ff !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-grid button:hover,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet .ds-mobile-inline-toggles button:hover,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet .ds-mobile-save-product-btn:hover {
    background: rgba(38, 55, 81, 0.98) !important;
    border-color: rgba(171, 195, 228, 0.52) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet.is-active,
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="insert"] .ds-mobile-sheet[data-mobile-sheet="insert"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="canvas"] .ds-mobile-sheet[data-mobile-sheet="canvas"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="library"] .ds-mobile-sheet[data-mobile-sheet="library"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="preview"] .ds-mobile-sheet[data-mobile-sheet="preview"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="edit"] .ds-mobile-sheet[data-mobile-sheet="edit"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="style"] .ds-mobile-sheet[data-mobile-sheet="style"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="arrange"] .ds-mobile-sheet[data-mobile-sheet="arrange"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="more"] .ds-mobile-sheet[data-mobile-sheet="more"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="emoticons"] .ds-mobile-sheet[data-mobile-sheet="emoticons"],
  .ds-studio:not(.ds-ui-modern)[data-mobile-sheet-open="icons"] .ds-mobile-sheet[data-mobile-sheet="icons"] {
    display: block !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    align-items: start;
    justify-items: center;
    align-self: start !important;
    position: sticky;
    top: 0;
    z-index: 3;
    padding-top: 2px;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn {
    width: 64px;
    min-height: 62px;
    height: 62px;
    padding: 6px 4px 5px;
    border-radius: 11px;
    border: 1px solid rgba(151, 177, 214, 0.44);
    background: linear-gradient(180deg, rgba(31, 47, 71, 0.96) 0%, rgba(21, 34, 53, 0.96) 100%);
    color: #eef5ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:hover {
    background: linear-gradient(180deg, rgba(46, 66, 94, 0.98) 0%, rgba(31, 47, 71, 0.98) 100%);
    border-color: rgba(185, 209, 241, 0.7);
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn.is-active {
    border-color: rgba(120, 236, 214, 0.85);
    background: linear-gradient(180deg, rgba(23, 178, 159, 0.78) 0%, rgba(12, 126, 111, 0.82) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(10, 78, 70, 0.42);
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-ic {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-ic .ds-ui-icon,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-ic svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.1;
    stroke: currentColor;
    fill: none;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-label {
    display: block !important;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .02em;
    color: currentColor;
    text-align: center;
    white-space: nowrap;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-canvas-side-inner {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-desktop-sheet-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-desktop-sheet-host {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-shell,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-wrap,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    overflow: auto !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-host .ds-mobile-sheet,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-host .ds-mobile-sheet-grid {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-desktop-sheet-host .ds-mobile-sheet-grid,
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-desktop-sheet-host .ds-mobile-sheet-section {
    color: #ecf4ff !important;
  }

  @media (min-width: 1024px) {
    .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="style"] .ds-mobile-text-style-group {
      display: grid !important;
      gap: 8px !important;
      padding: 8px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(136, 160, 194, 0.24) !important;
      background: rgba(16, 28, 45, 0.55) !important;
    }

    .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="style"] .ds-mobile-text-style-group h5 {
      margin: 0 !important;
      font-size: 11px !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
      color: #b7cae6 !important;
    }

    .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="style"] .ds-mobile-text-stroke-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      align-items: start !important;
    }

    .ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="style"] .ds-mobile-text-style-group .ds-mobile-style-field {
      margin: 0 !important;
    }
  }

  /* Left desktop panel: remove old menu cards, keep only sheet nav */
  .ds-studio:not(.ds-ui-modern) .ds-left-rail .ds-toolblock {
    display: none !important;
  }

  /* Desktop classic: same Start Designing card style as mobile portrait */
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state {
    position: absolute !important;
    inset: 0 !important;
    z-index: 48 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    pointer-events: none !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state.is-visible,
  .ds-studio:not(.ds-ui-modern).ds-mobile-empty .ds-mobile-empty-state {
    display: flex !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-card {
    width: min(360px, 100%) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(128, 145, 170, 0.34) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 28px rgba(12, 21, 36, 0.15) !important;
    padding: 16px !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-card h4 {
    margin: 0 0 8px !important;
    color: #112237 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-card p {
    margin: 0 0 10px !important;
    color: #334b67 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state-actions,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state-actions button,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-actions button {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 9px !important;
    border: 1px solid #bfd0e4 !important;
    background: #ffffff !important;
    color: #102136 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0 16px !important;
    transition: transform 120ms ease, filter 180ms ease !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state-actions button > span:last-child,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-actions button > span:last-child {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-btn-ico {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #f6f9ff 0%, #e8f0fb 100%) !important;
    border: 1px solid #c6d6ea !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-btn-ico svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: #0f2842 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state-actions button:first-child,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-actions button:first-child {
    background: linear-gradient(180deg, #11a191 0%, var(--accent, #0a7f73) 100%) !important;
    border-color: rgba(12, 161, 145, 0.98) !important;
    color: #ffffff !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-state-actions button:active,
  .ds-studio:not(.ds-ui-modern) .ds-mobile-empty-actions button:active {
    transform: scale(0.97) !important;
  }
}

/* Mobile portrait safety: restore bottom tabs visibility if any desktop rule leaked */
@media (max-width: 900px) and (orientation: portrait) and (min-width: 99999px) {
  .ds-studio .ds-mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .ds-studio .ds-mobile-bottom-nav button[data-mobile-action] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   Desktop Classic Final Polish (visual only, no logic/layout change)
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) {
    --ds-polish-icon-size: 20px;
    --ds-polish-icon-stroke: 1.75;
    --ds-polish-btn-h: 46px;
    --ds-polish-radius: 10px;
    --ds-polish-panel-pad: 12px;
    --ds-polish-gap: 12px;
    --ds-polish-grid-gap: 10px;
    --ds-polish-shell-bg: #091321;
    --ds-polish-panel-bg: rgba(19, 31, 47, 0.92);
    --ds-polish-card-bg: rgba(24, 38, 58, 0.94);
    --ds-polish-border: rgba(128, 152, 186, 0.26);
    --ds-polish-border-soft: rgba(128, 152, 186, 0.14);
  }

  .ds-studio:not(.ds-ui-modern) .ds-desktop-main,
  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    background: var(--ds-polish-shell-bg) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left,
  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    border: 1px solid var(--ds-polish-border) !important;
    box-shadow: 0 10px 24px rgba(5, 10, 18, 0.26) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-left {
    background: var(--ds-polish-panel-bg) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-side-inner {
    padding: var(--ds-polish-panel-pad) !important;
    gap: var(--ds-polish-gap) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-toolblock {
    border: 0 !important;
    background: var(--ds-polish-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 14px rgba(6, 12, 22, 0.16) !important;
    padding: var(--ds-polish-panel-pad) !important;
    gap: var(--ds-polish-grid-gap) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-group {
    border: 1px solid var(--ds-polish-border-soft) !important;
    border-radius: 10px !important;
    background: rgba(22, 35, 54, 0.55) !important;
    gap: var(--ds-polish-grid-gap) !important;
    padding: 8px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    background: linear-gradient(180deg, #f2f7ff 0%, #e8f0fb 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 16px 28px rgba(4, 10, 20, 0.20) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-wrap {
    background: #e5edf8 !important;
    border: 1px solid rgba(143, 166, 198, 0.34) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    background: #eff4fc !important;
    border-radius: 10px !important;
  }

  /* Icon system */
  .ds-studio:not(.ds-ui-modern) .ds-ui-icon,
  .ds-studio:not(.ds-ui-modern) .ds-ui-icon svg,
  .ds-studio:not(.ds-ui-modern) .dashicons {
    width: var(--ds-polish-icon-size) !important;
    height: var(--ds-polish-icon-size) !important;
    min-width: var(--ds-polish-icon-size) !important;
    font-size: var(--ds-polish-icon-size) !important;
    line-height: var(--ds-polish-icon-size) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-ui-icon svg {
    stroke-width: var(--ds-polish-icon-stroke) !important;
  }

  /* Button dimensions + icon/label alignment */
  .ds-studio:not(.ds-ui-modern) button,
  .ds-studio:not(.ds-ui-modern) .ds-upload {
    min-height: var(--ds-polish-btn-h) !important;
    height: var(--ds-polish-btn-h) !important;
    border-radius: var(--ds-polish-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 14px !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn {
    min-height: var(--ds-polish-btn-h) !important;
    height: var(--ds-polish-btn-h) !important;
    border-radius: var(--ds-polish-radius) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn > span:last-child,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-label {
    display: inline !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn,
  .ds-studio:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn {
    flex-direction: row !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* CTA hierarchy */
  .ds-studio:not(.ds-ui-modern) [data-action="apply-product"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="apply"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-action="apply"],
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn-primary {
    background: linear-gradient(180deg, #15aa97 0%, var(--accent, #0a7f73) 100%) !important;
    border: 1px solid rgba(125, 243, 220, 0.44) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(10, 120, 108, 0.34) !important;
  }

  .ds-studio:not(.ds-ui-modern) [data-action="final-save"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="final-save"] {
    background: linear-gradient(180deg, #f4b24e 0%, #d88e20 100%) !important;
    border: 1px solid rgba(255, 221, 162, 0.55) !important;
    color: #1c1203 !important;
    box-shadow: 0 8px 18px rgba(145, 92, 12, 0.28) !important;
  }

  .ds-studio:not(.ds-ui-modern) button:not(.ds-topbar-action-btn-primary):not([data-action="apply-product"]):not([data-mobile-sheet-action="apply"]):not([data-mobile-action="apply"]):not([data-action="final-save"]):not([data-mobile-sheet-action="final-save"]),
  .ds-studio:not(.ds-ui-modern) .ds-upload {
    background: rgba(29, 45, 67, 0.95) !important;
    border: 1px solid rgba(137, 160, 194, 0.33) !important;
    color: #ecf4ff !important;
  }

  /* Interaction states */
  .ds-studio:not(.ds-ui-modern) button,
  .ds-studio:not(.ds-ui-modern) .ds-upload {
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 150ms ease, filter 160ms ease !important;
  }

  .ds-studio:not(.ds-ui-modern) button:hover,
  .ds-studio:not(.ds-ui-modern) .ds-upload:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 8px 16px rgba(9, 18, 32, 0.28) !important;
  }

  .ds-studio:not(.ds-ui-modern) button:active,
  .ds-studio:not(.ds-ui-modern) .ds-upload:active {
    transform: scale(0.97) !important;
  }
}

/* =========================================================
   Final Canvas Focus Override (desktop classic only)
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) .ds-desktop-main,
  .ds-studio:not(.ds-ui-modern) .ds-workspace,
  .ds-studio:not(.ds-ui-modern) .ds-workspace-grid {
    background: #0a121d !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-center-stage {
    background: linear-gradient(180deg, #101a2a 0%, #0f1826 100%) !important;
    border: 1px solid rgba(120, 145, 178, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 14px 30px rgba(2, 7, 14, 0.42) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-shell {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-wrap {
    background: linear-gradient(180deg, #1a273a 0%, #162235 100%) !important;
    border: 1px solid rgba(148, 173, 205, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 10px 24px rgba(4, 10, 20, 0.34) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport {
    background: #202f45 !important;
    border: 1px solid rgba(182, 204, 232, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .canvas-container,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .lower-canvas,
  .ds-studio:not(.ds-ui-modern) .ds-canvas-viewport .upper-canvas {
    border: 1px solid rgba(235, 244, 255, 0.28) !important;
    box-shadow: 0 6px 14px rgba(2, 7, 15, 0.24) !important;
  }
}

/* =========================================================
   Final CTA Hierarchy Override (desktop classic only)
   Apply > Final Save > Save/Export
   ========================================================= */
@media (min-width: 1024px) {
  .ds-studio:not(.ds-ui-modern) [data-action="apply-product"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-action="apply"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="apply"],
  .ds-studio:not(.ds-ui-modern) [data-role="mobile-apply-cta"] {
    background: linear-gradient(180deg, #17b8a2 0%, #0a7f73 100%) !important;
    border: 1px solid rgba(149, 255, 235, 0.52) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 30px rgba(8, 128, 113, 0.38) !important;
  }

  .ds-studio:not(.ds-ui-modern) [data-action="final-save"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-action="final-save"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="final-save"],
  .ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn-primary[data-mobile-action="final-save"] {
    background: linear-gradient(180deg, #f5bb61 0%, #d68f26 100%) !important;
    border: 1px solid rgba(255, 224, 168, 0.62) !important;
    color: #211605 !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 20px rgba(140, 91, 18, 0.30) !important;
  }

  .ds-studio:not(.ds-ui-modern) [data-action="save"],
  .ds-studio:not(.ds-ui-modern) [data-action="export"],
  .ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="save"],
.ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="export"] {
    background: rgba(28, 44, 66, 0.94) !important;
    border: 1px solid rgba(136, 160, 196, 0.34) !important;
    color: #e9f2ff !important;
    box-shadow: 0 6px 14px rgba(8, 15, 28, 0.22) !important;
  }
}

/* =========================================================
   Mobile canvas safety lock (classic only) - FINAL
   ========================================================= */
@media (max-width: 1023px) {
  .ds-studio[data-vp-mobile="1"]:not(.ds-ui-modern) .ds-canvas-viewport .canvas-container {
    border-radius: 10px !important;
    box-shadow: 0 12px 26px rgba(10, 20, 36, 0.2) !important;
  }
}

@media (max-width: 1023px) and (orientation: portrait) {
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-workspace {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--ds-mobile-top-h, 52px) !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 6px 8px calc(var(--ds-mobile-nav-h, 64px) + var(--ds-mobile-safe-b, env(safe-area-inset-bottom, 0px))) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background-color: var(--ds-dc-palette-base, #eef5ff) !important;
    background-image:
      var(--ds-dc-palette-r1),
      var(--ds-dc-palette-r2),
      var(--ds-dc-palette-r3),
      var(--ds-dc-palette-l) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-workspace-grid,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-center-stage,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-shell,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-wrap,
  .ds-studio[data-vp-mobile="1"][data-vp-orient="portrait"]:not(.ds-ui-modern) .ds-canvas-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}


/* Status line: live status message + Powered by badge */
.ds-studio .ds-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.ds-studio .ds-status .ds-status-msg {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ds-studio .ds-status .ds-status-powered {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(130, 150, 180, 0.28) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: #16304f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.ds-studio .ds-status .ds-status-powered:hover {
  filter: brightness(1.02) !important;
}

.ds-studio .ds-status .ds-status-powered:focus-visible {
  outline: 2px solid rgba(64, 120, 208, 0.5) !important;
  outline-offset: 2px !important;
}

.ds-studio .ds-status .ds-status-powered-logo {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 640px) {
  .ds-studio .ds-status .ds-status-powered-text {
    display: none !important;
  }
}

/* Desktop Step 1 readability lock (all desktop variants) */
@media (min-width: 1024px) {
  .ds-studio.ds-no-template button.ds-no-template-card {
    border: 1px solid #c9d8ea !important;
    background: #ffffff !important;
    color: #0f243d !important;
    box-shadow: 0 3px 10px rgba(10, 24, 44, 0.07) !important;
  }

  .ds-studio.ds-no-template .ds-no-template-card-title {
    color: #12243b !important;
    font-weight: 700 !important;
  }

  .ds-studio.ds-no-template .ds-no-template-card-size {
    color: #4f6785 !important;
  }

  .ds-studio.ds-no-template .ds-no-template-card-thumb {
    border: 1px solid #d7e3f0 !important;
    background: #edf3fa !important;
  }

  .ds-studio.ds-no-template .ds-no-template-start-actions .ds-no-template-start-apply {
    border: 1px solid rgba(10, 127, 115, 0.9) !important;
    background: linear-gradient(180deg, #12a394 0%, #0a7f73 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(10, 127, 115, 0.22) !important;
  }

  .ds-studio.ds-no-template .ds-no-template-start-actions .ds-no-template-start-apply[disabled] {
    background: linear-gradient(180deg, #12a394 0%, #0a7f73 100%) !important;
    color: #ffffff !important;
    border-color: rgba(10, 127, 115, 0.9) !important;
    opacity: 0.55 !important;
  }
}

/* Mobile Step 1: full-screen panel, sticky header/footer, scroll only template grid */
@media (max-width: 1023px) {
  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start {
    position: fixed !important;
    inset: 0 !important;
    z-index: 520 !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      8px
      max(8px, env(safe-area-inset-bottom, 0px))
      8px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: rgba(243, 248, 255, 0.92) !important;
  }

  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start-card h3,
  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start-card p,
  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start-field {
    margin: 0 !important;
  }

  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-grid {
    min-height: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
    padding-right: 2px !important;
  }

  .ds-studio[data-vp-mobile="1"].ds-no-template .ds-no-template-start-actions {
    margin: 0 !important;
    padding-top: 6px !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, 0.95) 26%, #f8fbff 100%) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
  }
}

/* HARD LOCK (fallback): mobile portrait Step 1 uses fixed header/footer, scroll only middle cards */
@media (max-width: 1023px) and (orientation: portrait) {
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-mobile-topbar,
  .ds-studio.ds-no-template:not(.ds-startup-gated) [data-role="mobile-topbar"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start {
    position: fixed !important;
    inset: 0 !important;
    z-index: 460 !important;
    margin: 0 !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    background: #f3f8ff !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-toolbar,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-tools-top,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-canvas-side-left,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-canvas-side-right,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-status,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-mobile-nav,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-mobile-sheets,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-mobile-sheet-backdrop,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-mobile-apply-cta {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-card {
    width: min(1240px, calc(100% - 8px)) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-card h3,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-card p,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-field {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    align-content: start !important;
    padding-right: 2px !important;
    overscroll-behavior: contain !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    overflow: visible !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, 0.95) 26%, #f8fbff 100%) !important;
  }

  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions .ds-no-template-start-apply,
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="no-template-next"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="no-template-load-design"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="no-template-open-load"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="no-template-back-step-1"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="no-template-back-step-2"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="startup-hard-refresh"],
  .ds-studio.ds-no-template:not(.ds-startup-gated) .ds-no-template-start-actions [data-role="startup-back-link"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Startup flow stability (all views): keep header/footer visible, scroll only middle content */
.ds-studio.ds-no-template .ds-no-template-start-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-1"],
.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"],
.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2-load"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ds-studio.ds-no-template .ds-no-template-start-card .ds-no-template-grid,
.ds-studio.ds-no-template .ds-no-template-start-card .ds-no-template-load-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}

.ds-studio.ds-no-template .ds-no-template-start-card .ds-no-template-start-actions {
  flex: 0 0 auto;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 3;
}

/* Step 2 action cards: large 1:1 icon buttons (all views) */
.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-start-actions button {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  white-space: normal !important;
}

.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-step2-btn-icon {
  width: clamp(30px, 4.2vw, 44px) !important;
  height: clamp(30px, 4.2vw, 44px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-step2-btn-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke-width: 1.9 !important;
}

.ds-studio.ds-no-template .ds-no-template-start-card [data-role="no-template-step-2"] .ds-no-template-step2-btn-text {
  display: block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Desktop Step 1 final contrast lock (keep mobile untouched) */
@media (min-width: 1024px) {
  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-start-card {
    background: #f8fbff !important;
    border: 1px solid #c8d5e5 !important;
    box-shadow: 0 10px 24px rgba(10, 24, 44, 0.10) !important;
  }

  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-card {
    border: 1px solid #c9d8ea !important;
    background: #ffffff !important;
    color: #0f243d !important;
    box-shadow: 0 4px 12px rgba(10, 24, 44, 0.08) !important;
  }

  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-card:hover {
    border-color: #a7bdd8 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(12, 29, 51, 0.12) !important;
  }

  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-card-thumb {
    border: 1px solid #d7e3f0 !important;
    background: #edf3fa !important;
  }

  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-card-title {
    color: #12243b !important;
  }

  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-card-size,
  .ds-studio.ds-no-template[data-vp-mobile="0"] .ds-no-template-selected-label {
    color: #4f6785 !important;
  }
}

/* FINAL EOF OVERRIDE v10 - Apply/Save Design color contract (classic UI, true EOF lock) */
.ds-studio:not(.ds-ui-modern) [data-action="apply-product"],
.ds-studio:not(.ds-ui-modern) [data-action="post-save-apply"],
.ds-studio:not(.ds-ui-modern) [data-action="exit-apply"],
.ds-studio:not(.ds-ui-modern) [data-role="mobile-apply-cta"],
.ds-studio:not(.ds-ui-modern) [data-mobile-action="apply"],
.ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="apply"],
.ds-studio:not(.ds-ui-modern) .ds-dc-apply-btn,
.ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn-apply,
.ds-studio:not(.ds-ui-modern) .ds-mobile-save-product-btn-apply {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 86%, #ffffff 14%) 0%,
    var(--ds-accent, #f89f25) 100%
  ) !important;
  background-color: var(--ds-accent, #f89f25) !important;
  border-color: color-mix(in srgb, var(--ds-accent, #f89f25) 62%, #ffffff 38%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ds-accent, #f89f25) 34%, transparent 66%) !important;
}

.ds-studio:not(.ds-ui-modern) [data-action="final-save"],
.ds-studio:not(.ds-ui-modern) [data-action="exit-save"],
.ds-studio:not(.ds-ui-modern) [data-mobile-action="final-save"],
.ds-studio:not(.ds-ui-modern) [data-mobile-sheet-action="final-save"],
.ds-studio:not(.ds-ui-modern) .ds-mobile-sheet-section.ds-mobile-save-product .ds-mobile-save-product-btn-save,
.ds-studio:not(.ds-ui-modern) .ds-mobile-save-product-btn-save,
.ds-studio:not(.ds-ui-modern) .ds-topbar-action-btn-primary[data-mobile-action="final-save"],
.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-btn-primary[data-mobile-action="final-save"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 86%, #ffffff 14%) 0%,
    var(--ds-accent-secondary, #2f80ed) 100%
  ) !important;
  background-color: var(--ds-accent-secondary, #2f80ed) !important;
  border-color: color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 62%, #ffffff 38%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 34%, transparent 66%) !important;
}

/* FINAL EOF OVERRIDE v10.1 - Step 2 load library button colors */
.ds-studio:not(.ds-ui-modern) .ds-my-design-actions [data-action="no-template-design-use"],
.ds-studio:not(.ds-ui-modern) .ds-my-design-actions [data-role="no-template-design-use"],
.ds-studio:not(.ds-ui-modern) .ds-my-design-actions .ds-design-use-btn {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 86%, #ffffff 14%) 0%,
    var(--ds-accent, #f89f25) 100%
  ) !important;
  background-color: var(--ds-accent, #f89f25) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent, #f89f25) 86%, #ffffff 14%) 0%,
    var(--ds-accent, #f89f25) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--ds-accent, #f89f25) 62%, #ffffff 38%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-accent, #f89f25) 32%, transparent 68%) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-my-design-actions [data-action="no-template-design-load"],
.ds-studio:not(.ds-ui-modern) .ds-my-design-actions [data-role="no-template-design-load"],
.ds-studio:not(.ds-ui-modern) .ds-my-design-actions .ds-design-load-btn {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 86%, #ffffff 14%) 0%,
    var(--ds-accent-secondary, #2f80ed) 100%
  ) !important;
  background-color: var(--ds-accent-secondary, #2f80ed) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 86%, #ffffff 14%) 0%,
    var(--ds-accent-secondary, #2f80ed) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 62%, #ffffff 38%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-accent-secondary, #2f80ed) 32%, transparent 68%) !important;
}

/* FINAL EOF OVERRIDE v10.2 - Menu icon/text color follows Designer Text Color */
.ds-studio:not(.ds-ui-modern) {
  --ds-menu-fg: var(--text, #122033);
}

.ds-studio:not(.ds-ui-modern) .ds-mobile-bottom-nav button:not(.is-active) {
  color: var(--ds-menu-fg) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-mobile-bottom-nav button:not(.is-active)::before,
.ds-studio:not(.ds-ui-modern) .ds-mobile-bottom-nav button:not(.is-active)::after {
  color: var(--ds-menu-fg) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-icon-btn,
.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-icon-btn .dashicons,
.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-icon-btn .ds-ui-icon,
.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-icon-btn .ds-ui-icon svg,
.ds-studio:not(.ds-ui-modern) .ds-mobile-topbar-icon-btn .ds-mobile-topbar-icon-label {
  color: var(--ds-menu-fg) !important;
}

.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active),
.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .ds-desktop-sheet-nav-label,
.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .ds-desktop-sheet-nav-ic,
.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .ds-ui-icon,
.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .ds-ui-icon svg,
.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .dashicons {
  color: var(--ds-menu-fg) !important;
}

.ds-studio[data-ds-ui-variant="classic"]:not(.ds-ui-modern) .ds-desktop-sheet-nav-btn:not(.is-active) .ds-ui-icon svg {
  stroke: currentColor !important;
}

/* FINAL EOF OVERRIDE v10.3 - Font picker readability + Arrange left align */
.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-dialog {
  background: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--line, #d3dde8) 82%, transparent 18%) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-top {
  background: #ffffff !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-top h3 {
  color: var(--text, #122033) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-top button {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--line, #d3dde8) 82%, transparent 18%) !important;
  color: var(--text, #122033) !important;
  box-shadow: 0 4px 10px rgba(9, 30, 66, 0.10) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-item {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--line, #d3dde8) 82%, transparent 18%) !important;
  color: var(--text, #122033) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-item:hover {
  background: #f8fbff !important;
  border-color: color-mix(in srgb, var(--line, #d3dde8) 92%, transparent 8%) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-font-picker-modal .ds-font-picker-item.is-active {
  border-color: color-mix(in srgb, var(--accent, #0a7f73) 62%, #ffffff 38%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0a7f73) 20%, transparent 80%) !important;
}

.ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="arrange"] .ds-mobile-sheet-grid button[data-mobile-sheet-action] {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* FINAL EOF OVERRIDE v10.4 - Preview sheet button alignment */
.ds-studio:not(.ds-ui-modern) .ds-mobile-sheet[data-mobile-sheet="preview"] .ds-mobile-sheet-grid button[data-mobile-sheet-action] {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* FINAL EOF OVERRIDE v10.5 - Popup safe frame (admin bar + fixed top/bottom sections) */
.ds-studio {
  --ds-modal-safe-top: max(10px, env(safe-area-inset-top, 0px));
  --ds-modal-safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --ds-modal-admin-top: 0px;
}

body.admin-bar .ds-studio {
  --ds-modal-admin-top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .ds-studio {
    --ds-modal-admin-top: var(--wp-admin--admin-bar--height, 46px);
  }
}

.ds-studio .ds-font-picker-modal,
.ds-studio .ds-exit-confirm-modal,
.ds-studio .ds-refresh-confirm-modal,
.ds-studio .ds-post-save-modal,
.ds-studio .ds-empty-zones-modal,
.ds-studio .ds-zone-picker-modal,
.ds-studio .ds-mug-modal,
.ds-studio .ds-props-modal,
.ds-studio .ds-my-designs-modal,
.ds-studio .ds-apply-product-modal,
.ds-studio .ds-asset-library-modal {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(var(--ds-modal-safe-top) + var(--ds-modal-admin-top)) !important;
  padding-bottom: var(--ds-modal-safe-bottom) !important;
  overflow: auto !important;
}

.ds-studio .ds-font-picker-dialog,
.ds-studio .ds-exit-confirm-dialog,
.ds-studio .ds-refresh-confirm-dialog,
.ds-studio .ds-post-save-dialog,
.ds-studio .ds-empty-zones-dialog,
.ds-studio .ds-zone-picker-dialog,
.ds-studio .ds-mug-dialog,
.ds-studio .ds-props-dialog,
.ds-studio .ds-my-designs-dialog,
.ds-studio .ds-apply-product-dialog,
.ds-studio .ds-asset-library-dialog {
  max-height: calc(100dvh - var(--ds-modal-safe-top) - var(--ds-modal-safe-bottom) - var(--ds-modal-admin-top)) !important;
}

.ds-studio .ds-font-picker-dialog,
.ds-studio .ds-mug-dialog,
.ds-studio .ds-props-dialog,
.ds-studio .ds-my-designs-dialog,
.ds-studio .ds-apply-product-dialog,
.ds-studio .ds-asset-library-dialog {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ds-studio .ds-font-picker-top,
.ds-studio .ds-props-dialog-head,
.ds-studio .ds-preview-head,
.ds-studio .ds-zone-picker-top {
  position: sticky;
  top: 0;
  z-index: 7;
  background: inherit;
}

.ds-studio .ds-zone-picker-actions,
.ds-studio .ds-post-save-actions,
.ds-studio .ds-empty-zones-actions,
.ds-studio .ds-refresh-confirm-actions,
.ds-studio .ds-exit-confirm-actions {
  position: sticky;
  bottom: 0;
  z-index: 7;
  background: inherit;
  margin-top: 8px;
  padding-top: 8px;
}

.ds-studio .ds-zone-picker-note {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: inherit;
}

.ds-studio .ds-font-picker-list,
.ds-studio .ds-props-dialog .ds-object-panel,
.ds-studio .ds-my-designs-list,
.ds-studio .ds-asset-library-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}