/*
 * Responsive desktop workstation layout.
 * Mobile keeps using the dedicated /m pages. Desktop controls remain readable
 * while navigation, form columns and card grids adapt to the available CSS
 * viewport without global zoom, transform scaling or a fixed-width canvas.
 */

.desktop-sidebar-toggle {
  display: none;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.app-layout,
body.feature-focus-mode .app-layout,
body.section-focus-mode .app-layout,
body.workstation-feature-mode .app-layout {
  width: 100% !important;
  min-width: 0 !important;
}

/*
 * Compact desktop navigation keeps controls at their normal size and gives the
 * preview the remaining width. The expanded sidebar is an overlay, not a reflow.
 */
@media (max-width: 1599px) {
  html:not([data-mobile-workbench="true"]) {
    --desktop-compact-sidebar-width: 80px;
    --desktop-compact-sidebar-expanded-width: 274px;
    --desktop-compact-form-width: 400px;
    --desktop-compact-detail-form-width: 420px;
    --desktop-latest-columns: 4;
  }

  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .app-layout,
  body.feature-focus-mode .app-layout,
  body.section-focus-mode .app-layout,
  body.workstation-feature-mode .app-layout {
    grid-template-columns: var(--desktop-compact-sidebar-width) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sidebar,
  body.feature-focus-mode .sidebar,
  body.section-focus-mode .sidebar,
  body.workstation-feature-mode .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    width: var(--desktop-compact-sidebar-width) !important;
    min-width: var(--desktop-compact-sidebar-width) !important;
    max-width: var(--desktop-compact-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 14px 10px 12px !important;
    overflow: visible !important;
    transition: width 180ms ease, max-width 180ms ease, box-shadow 180ms ease !important;
  }

  .desktop-sidebar-toggle {
    position: absolute;
    top: 78px;
    right: -22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(207, 199, 239, 0.94);
    border-radius: 999px;
    color: #6757db;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 22px rgba(83, 67, 176, 0.16);
    cursor: pointer;
  }

  .desktop-sidebar-toggle:hover,
  .desktop-sidebar-toggle:focus-visible {
    border-color: rgba(108, 86, 226, 0.72);
    color: #fff;
    background: #6c56e2;
    outline: none;
  }

  .desktop-sidebar-toggle .lucide {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }

  .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sidebar .brand-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    margin: 0 !important;
  }

  .sidebar .brand-logo img {
    width: 54px !important;
    max-width: 54px !important;
    height: auto !important;
  }

  .sidebar .brand-tagline,
  .sidebar .mobile-merchant-edition {
    display: none !important;
  }

  .sidebar .side-nav,
  body.feature-focus-mode .sidebar .side-nav,
  body.section-focus-mode .sidebar .side-nav,
  body.workstation-feature-mode .sidebar .side-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .sidebar .side-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .sidebar .side-nav .nav-group,
  body.feature-focus-mode .sidebar .side-nav .nav-group,
  body.section-focus-mode .sidebar .side-nav .nav-group,
  body.workstation-feature-mode .sidebar .side-nav .nav-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar .nav-sublist {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .sidebar .side-nav a,
  .sidebar .side-nav .nav-primary,
  .sidebar .side-nav .nav-sublist a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  .sidebar .side-nav a::before,
  .sidebar .side-nav .nav-primary[data-nav-target]::after {
    display: none !important;
  }

  .sidebar .side-nav a .lucide,
  .sidebar .side-nav .nav-primary .lucide,
  .sidebar .side-nav .nav-sublist a .lucide {
    flex: 0 0 auto !important;
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
  }

  .sidebar-footer-stack {
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sidebar .works-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .sidebar .works-card > span:not(.works-icon) {
    display: none !important;
  }

  .sidebar .works-icon {
    margin: 0 !important;
  }

  body:not(.desktop-sidebar-expanded) .sidebar .ai-assistant-sidebar-slot.is-active {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 auto !important;
  }

  body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 5px !important;
  }

  body:not(.desktop-sidebar-expanded) .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 16px !important;
  }

  body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher-copy,
  body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher-shine {
    display: none !important;
  }

  body.desktop-sidebar-expanded .sidebar {
    position: fixed !important;
    left: 0 !important;
    width: var(--desktop-compact-sidebar-expanded-width) !important;
    min-width: var(--desktop-compact-sidebar-expanded-width) !important;
    max-width: var(--desktop-compact-sidebar-expanded-width) !important;
    padding: 14px 14px 12px !important;
    box-shadow: 18px 0 46px rgba(42, 35, 92, 0.2) !important;
  }

  body.desktop-sidebar-expanded .sidebar .brand {
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    min-height: 92px !important;
    padding: 6px 10px 8px !important;
  }

  body.desktop-sidebar-expanded .sidebar .brand-logo,
  body.desktop-sidebar-expanded .sidebar .brand-logo img {
    width: 166px !important;
    max-width: 166px !important;
  }

  body.desktop-sidebar-expanded .sidebar .brand-tagline {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  body.desktop-sidebar-expanded .sidebar .side-nav .nav-group {
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(222, 216, 246, 0.86) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  html[data-theme="dark"] .desktop-sidebar-toggle {
    border-color: rgba(94, 107, 135, 0.9) !important;
    color: #b9c5ff !important;
    background: rgba(24, 28, 39, 0.98) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important;
  }

  html[data-theme="dark"] body.desktop-sidebar-expanded .sidebar .side-nav .nav-group {
    border-color: rgba(69, 79, 104, 0.86) !important;
    background: rgba(22, 25, 35, 0.96) !important;
  }

  body.desktop-sidebar-expanded .sidebar .nav-sublist {
    gap: 2px !important;
  }

  body.desktop-sidebar-expanded .sidebar .side-nav a,
  body.desktop-sidebar-expanded .sidebar .side-nav .nav-primary,
  body.desktop-sidebar-expanded .sidebar .side-nav .nav-sublist a {
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  body.desktop-sidebar-expanded .sidebar .works-card {
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 12px !important;
  }

  body.desktop-sidebar-expanded .sidebar .works-card > span:not(.works-icon) {
    display: grid !important;
  }

  body.desktop-sidebar-expanded .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher {
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-items: stretch !important;
    gap: 10px !important;
    width: var(--ai-assistant-sidebar-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ai-assistant-sidebar-height) !important;
    min-height: var(--ai-assistant-sidebar-height) !important;
    max-height: none !important;
    border-radius: var(--ai-assistant-sidebar-radius) !important;
    padding: 10px 12px !important;
  }

  body.desktop-sidebar-expanded .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher-copy {
    display: grid !important;
  }

  .main-area,
  .content-grid,
  .workspace,
  .task-panel {
    min-width: 0 !important;
  }

  .main-area {
    grid-column: 2 !important;
  }

  .topbar {
    gap: 10px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  body.feature-focus-mode.workstation-feature-mode .content-grid {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.feature-focus-mode.workstation-feature-mode .workspace,
  body.feature-focus-mode.workstation-feature-mode .task-panel,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"] .workspace,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"] .task-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.feature-focus-mode.workstation-feature-mode .preview-column,
  body.feature-focus-mode.workstation-feature-mode:is(
    [data-active-feature="pet-product-main-image"],
    [data-active-feature="pet-product-scene"],
    [data-active-feature="beauty-product-scene"]
  ) .preview-column {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .detail-page-latest-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 320px)) !important;
    justify-content: start !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .detail-page-latest-frame.is-draft {
    width: 100% !important;
    min-width: 280px !important;
    max-width: 320px !important;
  }
}

@media (max-width: 1599px) {
  body.feature-focus-mode.workstation-feature-mode #task-panel.task-panel,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"] #task-panel.task-panel {
    grid-template-columns:
      minmax(360px, var(--desktop-compact-form-width))
      minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] #task-panel.task-panel {
    grid-template-columns:
      minmax(380px, var(--desktop-compact-detail-form-width))
      minmax(0, 1fr) !important;
  }
}

@media (max-width: 1599px) and (min-height: 821px) {
  body.feature-focus-mode,
  body.feature-focus-mode.workstation-feature-mode {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  body.feature-focus-mode .app-layout,
  body.feature-focus-mode.workstation-feature-mode .app-layout,
  body.feature-focus-mode .main-area,
  body.feature-focus-mode.workstation-feature-mode .main-area {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.feature-focus-mode .main-area,
  body.feature-focus-mode.workstation-feature-mode .main-area {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.feature-focus-mode .content-grid,
  body.feature-focus-mode .workspace,
  body.feature-focus-mode .task-panel,
  body.feature-focus-mode.workstation-feature-mode .content-grid,
  body.feature-focus-mode.workstation-feature-mode .workspace,
  body.feature-focus-mode.workstation-feature-mode .task-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.feature-focus-mode.workstation-feature-mode .upload-column,
  body.feature-focus-mode.workstation-feature-mode .settings-column,
  body.feature-focus-mode.workstation-feature-mode .settings-scroll-area {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  body.feature-focus-mode.workstation-feature-mode .preview-column,
  body.feature-focus-mode.workstation-feature-mode .preview-card,
  body.feature-focus-mode.workstation-feature-mode .preview-frame,
  body.feature-focus-mode.workstation-feature-mode .preview-empty {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}

@media (max-width: 980px) {
  html,
  body,
  body.feature-focus-mode,
  body.feature-focus-mode.workstation-feature-mode,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .app-layout,
  body.feature-focus-mode .app-layout,
  body.section-focus-mode .app-layout,
  body.workstation-feature-mode .app-layout {
    align-items: start !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  body.feature-focus-mode .main-area,
  body.feature-focus-mode.workstation-feature-mode .main-area,
  body.feature-focus-mode.workstation-feature-mode .content-grid,
  body.feature-focus-mode.workstation-feature-mode .workspace,
  body.feature-focus-mode.workstation-feature-mode .task-panel,
  body.feature-focus-mode.workstation-feature-mode .task-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.feature-focus-mode.workstation-feature-mode .content-grid {
    padding: 12px 14px 28px !important;
  }

  body.feature-focus-mode.workstation-feature-mode .task-panel,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .task-panel,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"] .task-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  body.feature-focus-mode.workstation-feature-mode .task-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .upload-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .upload-column {
    order: 1 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .settings-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .settings-column {
    order: 2 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .preview-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .preview-column {
    order: 3 !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-heading,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .upload-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .settings-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-body:not([hidden]) .preview-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .upload-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .settings-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .preview-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .task-recent-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .settings-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .settings-scroll-area {
    overflow: visible !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .settings-bottom-area {
    position: static !important;
    inset: auto !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature] .preview-card {
    width: 100% !important;
    height: clamp(520px, 72vh, 760px) !important;
    min-height: 520px !important;
    max-height: none !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .preview-column,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .preview-card,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .detail-page-latest-panel,
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .detail-page-latest-body {
    height: auto !important;
    min-height: 620px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"] .detail-page-latest-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 320px)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (min-width: 1600px) {
  .desktop-sidebar-toggle {
    display: none !important;
  }
}

/* FHD selective desktop density.
 * Wide desktops keep the source design sizes. FHD-class desktops only tighten
 * the shared navigation and form column; preview and homepage card rules stay
 * outside this block and continue to use their existing layouts.
 */
@media (min-width: 1600px) and (max-width: 2200px) {
  :root {
    --desktop-density-sidebar-width: 220px;
    --desktop-density-form-width: 400px;
    --desktop-density-detail-form-width: 420px;
    --desktop-density-workbench-gap: 18px;
  }

  html:not([data-mobile-workbench="true"]) .app-layout,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode .app-layout,
  html:not([data-mobile-workbench="true"]) body.section-focus-mode .app-layout,
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode .app-layout {
    grid-template-columns: var(--desktop-density-sidebar-width) minmax(0, 1fr) !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode .sidebar,
  html:not([data-mobile-workbench="true"]) body.section-focus-mode .sidebar,
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode .sidebar {
    gap: 10px !important;
    width: var(--desktop-density-sidebar-width) !important;
    min-width: var(--desktop-density-sidebar-width) !important;
    max-width: var(--desktop-density-sidebar-width) !important;
    padding: 14px 10px 12px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .brand {
    gap: 4px !important;
    min-height: 72px !important;
    padding: 8px 4px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .brand-logo {
    width: min(100%, 140px) !important;
    height: 32px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .side-nav {
    gap: 8px !important;
    padding: 2px 2px 6px 0 !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-group {
    gap: 4px !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .side-nav a {
    gap: 8px !important;
    min-height: 34px !important;
    padding-inline: 9px !important;
    font-size: 13px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-primary {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-primary[data-nav-target] {
    min-height: 34px !important;
    padding-inline: 7px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .nav-sublist a {
    min-height: 30px !important;
    font-size: 12.5px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .works-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 10px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .works-icon {
    width: 42px !important;
    height: 42px !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .works-card strong {
    font-size: 16px !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .content-grid {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode #task-panel.task-panel {
    grid-template-columns:
      minmax(360px, var(--desktop-density-form-width))
      minmax(0, 1fr) !important;
    column-gap: var(--desktop-density-workbench-gap) !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]
    #task-panel.task-panel {
    grid-template-columns:
      minmax(380px, var(--desktop-density-detail-form-width))
      minmax(0, 1fr) !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .task-heading {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .upload-column {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .settings-column {
    gap: 10px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .settings-scroll-area {
    gap: 10px !important;
    padding-right: 2px !important;
  }
}

/* Extra vertical density for 1080p-class full-screen browser viewports. */
@media (min-width: 1600px) and (max-width: 2200px) and (max-height: 1200px) {
  html:not([data-mobile-workbench="true"]) {
    --desktop-fhd-density-active: 1;
    --desktop-density-sidebar-width: 192px;
    --desktop-density-workbench-gap: 14px;
  }
  html:not([data-mobile-workbench="true"]) .app-layout,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode .app-layout,
  html:not([data-mobile-workbench="true"]) body.section-focus-mode .app-layout,
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode .app-layout {
    grid-template-columns: var(--desktop-density-sidebar-width) minmax(0, 1fr) !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode .sidebar,
  html:not([data-mobile-workbench="true"]) body.section-focus-mode .sidebar,
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode .sidebar,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .sidebar {
    gap: 7px !important;
    width: var(--desktop-density-sidebar-width) !important;
    min-width: var(--desktop-density-sidebar-width) !important;
    max-width: var(--desktop-density-sidebar-width) !important;
    padding: 10px 8px 8px !important;
    box-sizing: border-box !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .brand {
    gap: 3px !important;
    min-height: 62px !important;
    padding: 5px 2px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .brand-logo {
    width: 128px !important;
    height: 29px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav {
    gap: 5px !important;
    padding: 0 1px 4px 0 !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-group {
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav a {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    padding: 0 7px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-primary {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav .nav-primary[data-nav-target] {
    min-height: 31px !important;
    padding-inline: 7px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-sublist a {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 12px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 64px !important;
    padding: 7px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .works-icon {
    width: 36px !important;
    height: 36px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card strong {
    font-size: 14px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .topbar {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 7px 14px !important;
    box-sizing: border-box !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode
    .topbar > .generation-channel-switch {
    top: 9px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .content-grid {
    padding: 10px 14px 12px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode #task-panel.task-panel {
    column-gap: var(--desktop-density-workbench-gap) !important;
    row-gap: 8px !important;
    padding-top: 8px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .task-heading {
    padding: 11px 14px 5px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .task-heading h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .task-heading p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode:not([data-active-feature="detail-page"]):not([data-active-feature="pet-product-main-image"])
    .upload-column {
    padding: 0 14px 10px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .settings-column {
    gap: 8px !important;
    padding-right: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 14px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .settings-scroll-area {
    gap: 7px !important;
    padding-right: 2px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode .settings-bottom-area {
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode #generate {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  html:not([data-mobile-workbench="true"])
    body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor
    .ai-assistant-launcher {
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  html:not([data-mobile-workbench="true"])
    body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor
    .ai-assistant-launcher-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }
}
/* End FHD selective desktop density. */

/* Responsive desktop homepage: preserve card geometry and change only columns. */
html:not([data-mobile-workbench="true"]):has(> body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode)) {
  min-width: 0 !important;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) {
  overflow-x: hidden !important;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .app-layout {
  min-width: 0 !important;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board,
body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .advanced-board {
  width: 100%;
  min-width: 0;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board .basic-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-content: start;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .advanced-board .advanced-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: start;
}

@media (max-width: 1599px) {
  body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board .basic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .advanced-board .advanced-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html:not([data-mobile-workbench="true"]) { --desktop-latest-columns: 2; }

  body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board .basic-grid,
  body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .advanced-board .advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board .function-card {
  grid-template-rows: auto auto;
  min-height: 0;
  align-self: start;
}

body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode) .basic-board .function-card .card-media {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* Desktop right-side large recent works only. Lower recent-task strips, detail
 * module lists, and video history keep their independent layouts. */
html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid {
  --latest-masonry-row-size: 4px;
  display: grid !important;
  grid-template-columns: repeat(var(--desktop-latest-columns, 6), minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  gap: 10px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  column-count: auto !important;
  column-width: auto !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid[data-fixed-six-masonry-ready="true"] {
  grid-auto-rows: var(--latest-masonry-row-size) !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid[data-fixed-six-masonry-ready="true"]
  > .wrinkle-latest-card {
  grid-row-end: span var(--latest-masonry-span, 1) !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  vertical-align: top !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card:not(.wrinkle-running-card) {
  position: relative !important;
  display: inline-block !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card:not(.wrinkle-running-card):is(:hover, :focus-within) {
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card:not(.wrinkle-running-card)
  :is(.wrinkle-latest-open, .wrinkle-latest-thumb) {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card:not(.wrinkle-running-card)
  .wrinkle-latest-thumb
  > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: contain !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-latest-card:not(.wrinkle-running-card)
  .wrinkle-latest-thumb
  > .work-image-empty {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  aspect-ratio: 4 / 3 !important;
  border: 0 !important;
  border-radius: inherit !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  > .unified-generation-status {
  width: 100% !important;
  gap: 6px !important;
  padding: 8px 5px !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-visual {
  width: 52px !important;
  height: 52px !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-copy {
  gap: 3px !important;
  max-width: 100% !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-copy
  strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-copy
  > span:not(.generation-wait-elapsed),
html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-copy
  > small {
  display: none !important;
}

html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature]
  #detail-page-latest-panel
  > .wrinkle-latest-panel
  > .wrinkle-latest-grid
  > .wrinkle-running-card
  .generation-wait-elapsed {
  min-height: 22px !important;
  padding: 3px 7px !important;
  font-size: 9px !important;
}