/* Cockpit commerce desk: one product, one workflow, one clear next action. */
html body[data-active-tab="cockpit"] {
  background: #f4f6f5 !important;
  color: #171a18 !important;
}

html body[data-active-tab="cockpit"] main {
  background: #ffffff !important;
}

html body[data-active-tab="cockpit"] .rail {
  border-right: 1px solid #e0e5e1 !important;
  background: #f7f9f8 !important;
}

html body[data-active-tab="cockpit"] .rail button,
html body[data-active-tab="cockpit"] .rail button:hover,
html body[data-active-tab="cockpit"] .rail button.active {
  position: relative !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 12px 10px 20px !important;
  background: transparent !important;
  color: #66706a !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] .rail button:hover,
html body[data-active-tab="cockpit"] .rail button.active {
  color: #151916 !important;
}

html body[data-active-tab="cockpit"] .rail button.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  background: #111512;
}

html body[data-active-tab="cockpit"] .hero {
  width: min(1680px, 100%) !important;
  margin: 0 !important;
  border-bottom: 1px solid #e1e5e2 !important;
  padding-bottom: 18px !important;
}

html body[data-active-tab="cockpit"] .hero .eyebrow {
  margin-bottom: 6px !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

html body[data-active-tab="cockpit"] .hero h1 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #151816 !important;
  font-size: clamp(26px, 2.2vw, 38px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

html body[data-active-tab="cockpit"] .hero > div > p:last-child {
  margin-top: 9px !important;
  color: #6b736e !important;
}

html body[data-active-tab="cockpit"] .accountBadge {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-right: 1px solid #d9dedb !important;
  border-radius: 0 !important;
  padding: 0 18px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .notificationButton,
html body[data-active-tab="cockpit"] #logoutBtn,
html body[data-active-tab="cockpit"] .notificationButton:hover,
html body[data-active-tab="cockpit"] #logoutBtn:hover {
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  background: transparent !important;
  color: #3d4540 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] .commandDock {
  width: min(1680px, 100%) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  margin: 0 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid #e1e5e2 !important;
  border-radius: 0 !important;
  padding: 15px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .commandDockCopy > span,
html body[data-active-tab="cockpit"] .commandDockCopy > strong,
html body[data-active-tab="cockpit"] .commandDockCopy > p {
  display: none !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus i {
  width: 9px !important;
  height: 9px !important;
  background: #98a19b !important;
  box-shadow: 0 0 0 5px #edf0ee !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus.pass i {
  background: #0f766e !important;
  box-shadow: 0 0 0 5px #e7f3ef !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus.warning i {
  background: #d08a19 !important;
  box-shadow: 0 0 0 5px #fff3dd !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus.error i {
  background: #cf4058 !important;
  box-shadow: 0 0 0 5px #fdecef !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus strong {
  color: #202622 !important;
  font-size: 13px !important;
}

html body[data-active-tab="cockpit"] .storeConnectionStatus p {
  color: #7b837e !important;
  font-size: 12px !important;
}

html body[data-active-tab="cockpit"] .commandDockActions > #loginBtn,
html body[data-active-tab="cockpit"] .commandDockActions > #loginBtn:hover {
  min-height: 38px !important;
  border: 1px solid #171b18 !important;
  border-radius: 4px !important;
  padding: 8px 17px !important;
  background: #171b18 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] .commandDockMore > summary,
html body[data-active-tab="cockpit"] .commandDockMore > summary:hover {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 7px 1px !important;
  background: transparent !important;
  color: #46504a !important;
  box-shadow: inset 0 -1px 0 #aeb7b1 !important;
}

html body[data-active-tab="cockpit"] main .listingWorkbench {
  width: min(1680px, 100%) !important;
  max-width: min(1680px, 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .commerceDesk {
  display: grid !important;
  grid-template-columns: minmax(560px, 1fr) minmax(380px, 500px) !important;
  min-height: 650px !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  background: #ffffff !important;
}

html body[data-active-tab="cockpit"] .commerceDeskPrimary {
  min-width: 0 !important;
  padding: 34px 44px 34px 0 !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchHero {
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: 24px !important;
  margin: 0 0 22px !important;
  border: 0 !important;
  padding: 0 !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchHero span,
html body[data-active-tab="cockpit"] .homeStartCopy > span {
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchHero h2 {
  margin: 6px 0 7px !important;
  color: #171b18 !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchHero p {
  color: #78807b !important;
  font-size: 13px !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchScore {
  align-self: end !important;
  min-height: 48px !important;
  border: 0 !important;
  border-left: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchScore strong {
  color: #171b18 !important;
  font-size: 14px !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchScore small {
  color: #7b837e !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchFlow {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e1e5e2 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-active-tab="cockpit"] .productionWorkbenchFlow::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 15px;
  width: 1px;
  background: #d8ded9;
}

html body[data-active-tab="cockpit"] .productionStep,
html body[data-active-tab="cockpit"] .productionStep:hover {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(120px, 0.55fr) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 58px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0ee !important;
  border-radius: 0 !important;
  padding: 0 4px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] .productionStep:hover {
  background: #f7f9f8 !important;
}

html body[data-active-tab="cockpit"] .productionStep span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #bcc5bf !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #66706a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 5px #ffffff !important;
}

html body[data-active-tab="cockpit"] .productionStep.pass span,
html body[data-active-tab="cockpit"] .productionStep.working span {
  border-color: #0f766e !important;
  background: #0f766e !important;
  color: #ffffff !important;
}

html body[data-active-tab="cockpit"] .productionStep.warning span {
  border-color: #c96f1a !important;
  color: #a64d09 !important;
}

html body[data-active-tab="cockpit"] .productionStep.blocked span {
  border-color: #cf4058 !important;
  color: #bb2645 !important;
}

html body[data-active-tab="cockpit"] .productionStep strong {
  color: #252b27 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

html body[data-active-tab="cockpit"] .productionStep small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #7b837e !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-tab="cockpit"] .productionStep em {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #53605a !important;
  font-size: 12px !important;
  font-style: normal !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

html body[data-active-tab="cockpit"] .homeStartLayout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
  gap: 36px !important;
  align-items: center !important;
  margin: 26px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .homeStartLayout.hidden {
  display: none !important;
}

html body[data-active-tab="cockpit"] .homeStartCopy h2 {
  margin: 7px 0 8px !important;
  color: #171b18 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html body[data-active-tab="cockpit"] .homeStartCopy p {
  max-width: 600px !important;
  color: #69726c !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

html body[data-active-tab="cockpit"] .homeActionGrid {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
}

html body[data-active-tab="cockpit"] #quickUploadProductImage,
html body[data-active-tab="cockpit"] #quickUploadProductImage:hover {
  min-width: 190px !important;
  min-height: 44px !important;
  border: 1px solid #171b18 !important;
  border-radius: 4px !important;
  padding: 10px 18px !important;
  background: #171b18 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] #quickUploadProductImage::after {
  content: "  →";
}

html body[data-active-tab="cockpit"] #homeBatchReadiness,
html body[data-active-tab="cockpit"] #homeBatchReadiness:hover {
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 5px 1px !important;
  background: transparent !important;
  color: #46504a !important;
  box-shadow: inset 0 -1px 0 #aeb7b1 !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] .homeStartActions > small,
html body[data-active-tab="cockpit"] .homeStoreGateStatus {
  display: block !important;
  width: auto !important;
  margin: 9px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #818984 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  text-align: right !important;
}

html body[data-active-tab="cockpit"] .homeStoreGateStatus.pass {
  color: #0f766e !important;
}

html body[data-active-tab="cockpit"] .homeProductStage {
  min-width: 0 !important;
  border-left: 1px solid #dfe4e0 !important;
  padding: 30px 0 34px 38px !important;
  background: #fbfcfb !important;
}

html body[data-active-tab="cockpit"] .homeProductPicker {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 20px !important;
  color: #66706a !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

html body[data-active-tab="cockpit"] .homeProductPicker select {
  min-width: 0 !important;
  height: 36px !important;
  border: 0 !important;
  border-bottom: 1px solid #bfc7c2 !important;
  border-radius: 0 !important;
  padding: 4px 26px 4px 2px !important;
  background-color: transparent !important;
  color: #252b27 !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

html body[data-active-tab="cockpit"] .homeProductStageEmpty {
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  min-height: 520px !important;
  border-top: 1px solid #e3e7e4 !important;
  border-bottom: 1px solid #e3e7e4 !important;
}

html body[data-active-tab="cockpit"] .homeProductStageEmpty span {
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body[data-active-tab="cockpit"] .homeProductStageEmpty strong {
  margin: 8px 0 !important;
  color: #252b27 !important;
  font-size: 21px !important;
}

html body[data-active-tab="cockpit"] .homeProductStageEmpty p {
  max-width: 330px !important;
  color: #7b837e !important;
  line-height: 1.7 !important;
}

html body[data-active-tab="cockpit"] .homeProductVisual {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #eef1ef !important;
}

html body[data-active-tab="cockpit"] .homeProductVisual .productThumb {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="cockpit"] .homeProductVisual .productThumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body[data-active-tab="cockpit"] .homeProductId {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 5px 8px !important;
  background: rgba(20, 24, 21, 0.82) !important;
  color: #ffffff !important;
  font-size: 10px !important;
}

html body[data-active-tab="cockpit"] .homeProductSummary {
  padding-top: 18px !important;
}

html body[data-active-tab="cockpit"] .homeProductStatusLine {
  display: flex !important;
  gap: 18px !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

html body[data-active-tab="cockpit"] .homeProductStatusLine span + span::before {
  content: "·";
  margin-right: 18px;
  color: #aeb7b1;
}

html body[data-active-tab="cockpit"] .homeProductSummary h3 {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 10px 0 7px !important;
  color: #171b18 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body[data-active-tab="cockpit"] .homeProductSummary > p {
  overflow: hidden !important;
  color: #7b837e !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-tab="cockpit"] .homeProductFacts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 18px 0 0 !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
}

html body[data-active-tab="cockpit"] .homeProductFacts > div {
  min-width: 0 !important;
  padding: 14px 8px 14px 0 !important;
}

html body[data-active-tab="cockpit"] .homeProductFacts dt {
  color: #8a928d !important;
  font-size: 10px !important;
}

html body[data-active-tab="cockpit"] .homeProductFacts dd {
  overflow: hidden !important;
  margin: 5px 0 0 !important;
  color: #202622 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-tab="cockpit"] .homeProductFootnote {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 12px !important;
  color: #858d88 !important;
  font-size: 10px !important;
}

html body[data-active-tab="cockpit"] .homeProductFootnote span:first-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-tab="cockpit"] .homeProductLinks {
  display: flex !important;
  gap: 22px !important;
  margin-top: 17px !important;
}

html body[data-active-tab="cockpit"] .homeProductLinks button,
html body[data-active-tab="cockpit"] .homeProductLinks button:hover {
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 3px 0 !important;
  background: transparent !important;
  color: #3f4943 !important;
  box-shadow: inset 0 -1px 0 #aeb7b1 !important;
  transform: none !important;
}

html body[data-active-tab="cockpit"] #storeManageList [data-store-delete] {
  border-color: #edb6c0 !important;
  background: #fff8f9 !important;
  color: #b4233c !important;
}

html body[data-active-tab="cockpit"] .cockpitUtilityDrawer {
  width: min(1680px, 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body[data-active-tab="cockpit"] .cockpitUtilityDrawer > summary {
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 15px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.toolboxPage {
  width: min(1180px, 100%);
  margin: 0;
  padding: 8px 0 40px;
}

html body[data-active-tab="utilities"] {
  background: #f4f6f5 !important;
}

html body[data-active-tab="utilities"] main {
  background: #ffffff !important;
}

html body[data-active-tab="utilities"] .rail {
  border-right: 1px solid #e0e5e1 !important;
  background: #f7f9f8 !important;
}

html body[data-active-tab="utilities"] .rail button,
html body[data-active-tab="utilities"] .rail button:hover,
html body[data-active-tab="utilities"] .rail button.active {
  position: relative !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 12px 10px 20px !important;
  background: transparent !important;
  color: #66706a !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="utilities"] .rail button:hover,
html body[data-active-tab="utilities"] .rail button.active {
  color: #151916 !important;
}

html body[data-active-tab="utilities"] .rail button.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  background: #111512;
}

html body[data-active-tab="utilities"] .hero {
  width: min(1680px, 100%) !important;
  margin: 0 0 26px !important;
  border-bottom: 1px solid #e1e5e2 !important;
  padding-bottom: 18px !important;
}

html body[data-active-tab="utilities"] .accountBadge,
html body[data-active-tab="utilities"] .notificationButton,
html body[data-active-tab="utilities"] #logoutBtn {
  box-shadow: none !important;
}

html body[data-active-tab="utilities"]:not([data-active-tab="cockpit"]) main > .commandDock.commandDock,
html body[data-active-tab="utilities"] #statusBar {
  display: none !important;
}

.toolboxPageHead {
  border-bottom: 1px solid #dfe4e0;
  padding: 8px 0 26px;
}

.toolboxPageHead > span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}

.toolboxPageHead h2 {
  margin: 7px 0 8px;
  color: #171b18;
  font-size: 28px;
  letter-spacing: 0;
}

.toolboxPageHead p {
  color: #707974;
  font-size: 13px;
}

.toolboxDirectory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #dfe4e0;
}

.toolboxDirectory > button,
.toolboxDirectory > button:hover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 94px;
  border: 0;
  border-right: 1px solid #e4e8e5;
  border-bottom: 1px solid #e4e8e5;
  border-radius: 0;
  padding: 18px 24px 18px 0;
  background: transparent;
  color: #202622;
  box-shadow: none;
  text-align: left;
  transform: none;
}

.toolboxDirectory > button:nth-child(even) {
  border-right: 0;
  padding-left: 24px;
}

.toolboxDirectory > button span {
  display: grid;
  gap: 6px;
}

.toolboxDirectory > button strong {
  font-size: 15px;
}

.toolboxDirectory > button small {
  color: #7b837e;
  font-size: 12px;
}

.toolboxDirectory > button em {
  color: #52605a;
  font-size: 12px;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.toolboxDirectory > button:hover {
  background: #f7f9f8;
}

.batchLoadMore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  border-top: 1px solid #d8dee8;
  padding: 14px 2px 0;
  color: #667085;
  font-size: 13px;
}

.batchLoadMore button {
  min-height: 34px !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
}

@media (min-width: 1900px) {
  html body[data-active-tab="cockpit"] .commerceDesk {
    grid-template-columns: minmax(720px, 1fr) 520px !important;
  }

  html body[data-active-tab="cockpit"] .commerceDeskPrimary {
    padding-right: 58px !important;
  }

  html body[data-active-tab="cockpit"] .homeProductStage {
    padding-left: 46px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-active-tab="cockpit"] .commandDock,
  html body[data-active-tab="cockpit"] .productionWorkbenchHero,
  html body[data-active-tab="cockpit"] .homeStartLayout {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-tab="cockpit"] .commerceDesk {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-tab="cockpit"] .commerceDeskPrimary {
    padding-right: 0 !important;
  }

  html body[data-active-tab="cockpit"] .homeProductStage {
    border-top: 1px solid #dfe4e0 !important;
    border-left: 0 !important;
    padding: 28px 0 !important;
  }

  html body[data-active-tab="cockpit"] .homeActionGrid {
    justify-content: flex-start !important;
  }

  html body[data-active-tab="cockpit"] .homeStartActions > small,
  html body[data-active-tab="cockpit"] .homeStoreGateStatus {
    text-align: left !important;
  }
}

@media (max-width: 680px) {
  html body[data-active-tab="cockpit"] .rail button.active::before {
    top: auto;
    right: 8px;
    bottom: 0;
    left: 8px;
    width: auto;
    height: 2px;
  }

  html body[data-active-tab="cockpit"] .accountBadge {
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  html body[data-active-tab="cockpit"] .commerceDesk {
    min-height: 0 !important;
  }

  html body[data-active-tab="cockpit"] .commerceDeskPrimary {
    padding: 24px 0 26px !important;
  }

  html body[data-active-tab="cockpit"] .productionWorkbenchScore {
    border-top: 1px solid #dfe4e0 !important;
    border-left: 0 !important;
    padding: 12px 0 0 !important;
  }

  html body[data-active-tab="cockpit"] .productionStep {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  html body[data-active-tab="cockpit"] .productionStep small {
    display: none !important;
  }

  html body[data-active-tab="cockpit"] .homeActionGrid {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body[data-active-tab="cockpit"] #quickUploadProductImage {
    width: 100% !important;
  }

  html body[data-active-tab="cockpit"] .homeProductStage {
    padding-bottom: 10px !important;
  }

  html body[data-active-tab="cockpit"] .homeProductFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-active-tab="cockpit"] .homeProductFacts > div:nth-child(-n + 2) {
    border-bottom: 1px solid #edf0ee !important;
  }

  html body[data-active-tab="cockpit"] .homeProductFootnote {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .toolboxDirectory {
    grid-template-columns: 1fr;
  }

  .toolboxDirectory > button,
  .toolboxDirectory > button:nth-child(even) {
    min-height: 82px;
    border-right: 0;
    padding: 15px 0;
  }

  .batchLoadMore {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Navigation directory: keep the left rail quiet, grouped, and readable. */
body[data-active-tab] .rail {
  width: 248px !important;
  flex: 0 0 248px !important;
  gap: 0 !important;
  padding: 22px 14px 24px !important;
  background: #e7ede9 !important;
  border-right: 1px solid #ccd7d1 !important;
}

body[data-active-tab] .rail .brand {
  margin: 0 2px 24px !important;
  padding: 2px 8px 22px !important;
  border-bottom: 1px solid #cbd6d0 !important;
}

body[data-active-tab] .rail .brand .mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body[data-active-tab] .rail .brand strong {
  font-size: 17px !important;
  letter-spacing: .01em !important;
}

body[data-active-tab] .rail .brand small {
  color: #6b7771 !important;
  font-size: 11px !important;
}

body[data-active-tab] .railGroup {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body[data-active-tab] .railGroup + .railGroup {
  margin-top: 24px !important;
  border-top: 1px solid #cbd6d0 !important;
  padding-top: 18px !important;
}

body[data-active-tab] .railGroupLabel {
  margin: 0 12px 7px !important;
  color: #7b8781 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body[data-active-tab] .railGroup button,
body[data-active-tab] .railGroup button:hover,
body[data-active-tab] .railGroup button.active {
  position: relative !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px 14px 10px 18px !important;
  background: transparent !important;
  color: #5d6962 !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

body[data-active-tab] .railGroup button:hover {
  background: #dce7e1 !important;
  color: #18231d !important;
}

body[data-active-tab] .railGroup button.active {
  background: #f8fbf9 !important;
  color: #17221c !important;
  box-shadow: 0 1px 2px rgba(36, 55, 45, .06) !important;
}

body[data-active-tab] .railGroup button.active::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #1a8779 !important;
}

body[data-active-tab] .railTools button::after {
  content: "›" !important;
  position: absolute !important;
  right: 14px !important;
  color: #a0aca5 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

body[data-active-tab] .railTools button.active::after {
  color: #1a8779 !important;
}

body[data-active-tab="utilities"] .railTools button.hidden,
body[data-active-tab="products"] .railTools button.hidden,
body[data-active-tab="studio"] .railTools button.hidden,
body[data-active-tab="publish"] .railTools button.hidden,
body[data-active-tab="dropship"] .railTools button.hidden,
body[data-active-tab="subscription"] .railTools button.hidden,
body[data-active-tab="agents"] .railTools button.hidden,
body[data-active-tab="settings"] .railTools button.hidden {
  display: block !important;
}

body[data-active-tab="utilities"] .railTools button:not(.active) {
  color: #68756d !important;
}

@media (max-width: 680px) {
  body[data-active-tab] .rail {
    width: 100% !important;
    flex: 0 0 auto !important;
    padding: 14px 14px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ccd7d1 !important;
  }

  body[data-active-tab] .rail .brand {
    margin: 0 0 14px !important;
    padding: 0 6px 14px !important;
  }

  body[data-active-tab] .railGroupLabel {
    display: none !important;
  }

  body[data-active-tab] .railGroup {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  body[data-active-tab] .railGroup + .railGroup {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  body[data-active-tab] .railTools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-tab] .railGroup button,
  body[data-active-tab] .railGroup button:hover,
  body[data-active-tab] .railGroup button.active {
    min-height: 40px !important;
    padding: 10px 12px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
  }

  body[data-active-tab] .railGroup button.active::before {
    top: auto !important;
    right: 10px !important;
    bottom: 0 !important;
    left: 10px !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
  }

  body[data-active-tab] .railTools button::after {
    display: none !important;
  }
}

/* AI assistant: conversation first, product context second. */
html body[data-active-tab="assistant"] {
  background: #f4f6f5 !important;
}

html body[data-active-tab="assistant"] main {
  background: #ffffff !important;
}

html body[data-active-tab="assistant"] .rail {
  border-right: 1px solid #e0e5e1 !important;
  background: #f7f9f8 !important;
}

html body[data-active-tab="assistant"] .rail button,
html body[data-active-tab="assistant"] .rail button:hover,
html body[data-active-tab="assistant"] .rail button.active {
  position: relative !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 12px 10px 20px !important;
  background: transparent !important;
  color: #66706a !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="assistant"] .rail button:hover,
html body[data-active-tab="assistant"] .rail button.active {
  color: #151916 !important;
}

html body[data-active-tab="assistant"] .rail button.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  background: #111512;
}

html body[data-active-tab="assistant"] .hero {
  width: min(1680px, 100%) !important;
  margin: 0 0 26px !important;
  border-bottom: 1px solid #e1e5e2 !important;
  padding-bottom: 18px !important;
}

html body[data-active-tab="assistant"]:not([data-active-tab="cockpit"]) main > .commandDock.commandDock,
html body[data-active-tab="assistant"] #statusBar {
  display: none !important;
}

html body[data-active-tab="assistant"] main > #assistant {
  width: min(1680px, 100%) !important;
  max-width: min(1680px, 100%) !important;
  margin: 0 !important;
}

html body[data-active-tab="assistant"] main .aiCommandPanel.assistantWorkspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .assistantDrawer,
html body[data-active-tab="assistant"] main .assistantDrawer[open] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .assistantDrawer > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 5px 14px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 3px 0 22px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .assistantDrawer > summary span {
  grid-row: 1 / 3 !important;
  align-self: start !important;
  margin-top: 5px !important;
  border: 0 !important;
  border-right: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 2px 14px 2px 0 !important;
  background: transparent !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body[data-active-tab="assistant"] main .assistantDrawer > summary strong {
  color: #171b18 !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body[data-active-tab="assistant"] main .assistantDrawer > summary small {
  color: #737c76 !important;
  font-size: 12px !important;
}

html body[data-active-tab="assistant"] main .assistantDrawerBody {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
  grid-template-areas:
    "chat product"
    "progress product"
    "command advanced"
    "results results" !important;
  gap: 16px 34px !important;
  align-items: start !important;
  padding: 28px 0 0 !important;
}

html body[data-active-tab="assistant"] main .assistantWorkspace .panelHead {
  display: none !important;
}

html body[data-active-tab="assistant"] main .aiChatLog {
  grid-area: chat !important;
  min-height: 480px !important;
  max-height: 560px !important;
  margin: 0 !important;
  border: 1px solid #dfe4e0 !important;
  border-radius: 6px !important;
  padding: 22px !important;
  background: #f8faf9 !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .aiChatLog .aiMessage,
html body[data-active-tab="assistant"] main .aiChatLog .aiMessage.assistant,
html body[data-active-tab="assistant"] main .aiChatLog .aiMessage.user {
  max-width: min(720px, 88%) !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 13px 15px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

html body[data-active-tab="assistant"] main .aiChatLog .aiMessage.assistant {
  background: #ffffff !important;
  color: #303733 !important;
}

html body[data-active-tab="assistant"] main .aiChatLog .aiMessage.user {
  margin-left: auto !important;
  background: #171b18 !important;
  color: #ffffff !important;
}

html body[data-active-tab="assistant"] main .aiChatLog .aiMessage:only-child {
  display: block !important;
  align-self: flex-start !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

html body[data-active-tab="assistant"] main .aiCommandProgressDock {
  grid-area: progress !important;
  margin: 0 !important;
}

html body[data-active-tab="assistant"] main .aiCommandPrimaryBar {
  grid-area: command !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  margin: 0 !important;
  border: 1px solid #cfd6d1 !important;
  border-radius: 6px !important;
  padding: 7px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(28, 37, 31, 0.06) !important;
}

html body[data-active-tab="assistant"] main .aiCommandPrimaryBar input {
  min-height: 44px !important;
  border: 0 !important;
  padding: 9px 11px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .aiCommandPrimaryBar button,
html body[data-active-tab="assistant"] main .aiCommandPrimaryBar button:hover {
  min-width: 82px !important;
  min-height: 44px !important;
  border: 1px solid #171b18 !important;
  border-radius: 4px !important;
  background: #171b18 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-active-tab="assistant"] main .aiProductImageBridge {
  grid-area: product !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .aiProductImageCopy span {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body[data-active-tab="assistant"] main .aiProductImageCopy strong {
  margin-top: 7px !important;
  color: #202622 !important;
  font-size: 17px !important;
}

html body[data-active-tab="assistant"] main .aiProductImageCopy p {
  margin-top: 5px !important;
  color: #7b837e !important;
  font-size: 12px !important;
}

html body[data-active-tab="assistant"] main .aiProductImageActions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html body[data-active-tab="assistant"] main .aiProductDropzone {
  min-height: 150px !important;
  border: 1px dashed #aebbb3 !important;
  border-radius: 5px !important;
  padding: 18px !important;
  background: #f8faf9 !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main #aiUseCurrentProductImage {
  min-height: 40px !important;
  border: 1px solid #cfd6d1 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #303733 !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .aiProductImageBridge .aiCommandImagePreview {
  min-height: 58px !important;
  margin: 0 !important;
  border: 1px solid #dfe4e0 !important;
  border-radius: 5px !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .aiCommandImageDismissed {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}

html body[data-active-tab="assistant"] main .aiCommandImageDismissed > span {
  color: #69726c !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

html body[data-active-tab="assistant"] main .aiCommandImageDismissed .rowActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body[data-active-tab="assistant"] main .aiProductImageBridge .aiCommandImagePreview .aiCommandImageDismissed button {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  border: 1px solid #cfd6d1 !important;
  border-radius: 4px !important;
  padding: 7px 11px !important;
  background: #ffffff !important;
  color: #303733 !important;
  font-size: 12px !important;
}

html body[data-active-tab="assistant"] main .assistantSettingsLaunch,
html body[data-active-tab="assistant"] main .assistantSettingsLaunch:hover {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  min-height: 58px !important;
  border: 0 !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 11px 0 !important;
  background: transparent !important;
  color: #303733 !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

html body[data-active-tab="assistant"] main .assistantSettingsLaunch span {
  grid-row: 1 / 3 !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body[data-active-tab="assistant"] main .assistantSettingsLaunch strong {
  color: #252b27 !important;
  font-size: 13px !important;
}

html body[data-active-tab="assistant"] main .assistantSettingsLaunch small {
  color: #7b837e !important;
  font-size: 11px !important;
}

html body[data-active-tab="assistant"] main .assistantSettingsLaunch::after {
  content: "→" !important;
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  color: #6f7872 !important;
}

html body[data-active-tab="assistant"] main .aiAdvancedSettings {
  align-self: start !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent {
  display: block !important;
  width: 100% !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiAdvancedBody {
  display: grid !important;
  gap: 22px !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiImageInput {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  border: 0 !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions label {
  min-width: 0 !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions .wideField {
  grid-column: span 2 !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions input:not([type="checkbox"]),
#settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .switchField {
  align-items: center !important;
  min-height: 42px !important;
}

#settingsDetailModalBody #aiAdvancedSettingsContent .aiAssistActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

@media (max-width: 980px) {
  #settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #settingsDetailModal .modalHead {
    position: sticky !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
  }

  #settingsDetailModal .modalHead > div:first-child {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    padding-right: 48px !important;
  }

  #settingsDetailModal .modalHead h2 {
    margin: 0 0 8px !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  #settingsDetailModal .modalHead p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #settingsDetailModal .modalWindowControls {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  #settingsDetailModal .modalHead > .iconButton {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
  }

  #settingsDetailModalBody #aiAdvancedSettingsContent .aiImageInput,
  #settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions {
    grid-template-columns: 1fr !important;
  }

  #settingsDetailModalBody #aiAdvancedSettingsContent .aiCommandOptions .wideField {
    grid-column: auto !important;
  }

  #settingsDetailModalBody #aiAdvancedSettingsContent .aiAssistActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

html body[data-active-tab="assistant"] main .aiAdvancedSettings > summary {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="assistant"] main .assistantQuickSummary {
  display: none !important;
}

/* Keep workflow chrome visually separate while the form scrolls underneath it. */
#listingWorkflowModal .listingWorkflowCard {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  height: min(860px, calc(100dvh - 44px)) !important;
  max-height: calc(100dvh - 44px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #ffffff !important;
}

#listingWorkflowModal .modalHead {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  margin: -22px -22px 0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045) !important;
}

#listingWorkflowModal .workflowSteps {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  margin: 14px 0 0 !important;
  background: #f8fbff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#listingWorkflowModal .workflowBody {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding: 16px 4px 24px 0 !important;
}

#listingWorkflowModal .workflowActions {
  position: relative !important;
  bottom: auto !important;
  z-index: 3 !important;
  margin: 0 -22px -22px !important;
  flex: 0 0 auto !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -12px 28px rgba(15, 23, 42, .08) !important;
}

#listingWorkflowModal .modalHead > .iconButton {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
}

#listingWorkflowModal .modalHead > .iconButton:hover {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
  color: #020617 !important;
}

@media (max-width: 760px) {
  #listingWorkflowModal .listingWorkflowCard {
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #listingWorkflowModal .modalHead {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
  }

  #listingWorkflowModal .modalHead > div:first-child {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    padding-right: 48px !important;
  }

  #listingWorkflowModal .modalHead h2 {
    margin-bottom: 6px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  #listingWorkflowModal .modalHead p:not(.modalKicker) {
    max-width: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #listingWorkflowModal .modalWindowControls {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  #listingWorkflowModal .modalHead > .iconButton {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
  }

  #listingWorkflowModal .workflowSteps {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    scrollbar-width: thin !important;
  }

  #listingWorkflowModal .workflowStep {
    flex: 0 0 158px !important;
    min-height: 60px !important;
  }

  #listingWorkflowModal .workflowBody {
    padding-right: 0 !important;
  }
}

html body[data-active-tab="assistant"] main #aiOpportunityPanel,
html body[data-active-tab="assistant"] main #aiCategoryRecommendations,
html body[data-active-tab="assistant"] main #aiCategoryAttributeSummary,
html body[data-active-tab="assistant"] main #aiAssistantAudit,
html body[data-active-tab="assistant"] main #aiAssistantEnhancement,
html body[data-active-tab="assistant"] main #aiListingPlan {
  grid-column: 1 / -1 !important;
}

@media (max-width: 980px) {
  html body[data-active-tab="assistant"] main .assistantDrawerBody {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chat"
      "progress"
      "command"
      "product"
      "advanced"
      "results" !important;
  }

  html body[data-active-tab="assistant"] main .aiProductImageBridge {
    border-top: 1px solid #dfe4e0 !important;
    border-left: 0 !important;
    padding: 24px 0 0 !important;
  }
}

@media (max-width: 680px) {
  html body[data-active-tab="assistant"] main .assistantDrawer > summary {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-tab="assistant"] main .assistantDrawer > summary span {
    grid-row: auto !important;
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  html body[data-active-tab="assistant"] main .assistantDrawer > summary strong {
    font-size: 22px !important;
  }

  html body[data-active-tab="assistant"] main .aiChatLog {
    min-height: 400px !important;
    padding: 14px !important;
  }

  html body[data-active-tab="assistant"] main .aiCommandPrimaryBar {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-tab="assistant"] main .aiCommandPrimaryBar button {
    width: 100% !important;
  }
}

/* Full workspace polish: secondary pages stay focused and mobile-safe. */
html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .commandDock,
html body[data-active-tab]:not([data-active-tab="cockpit"]) main > #statusBar {
  display: none !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero {
  width: min(1680px, 100%) !important;
  min-height: 0 !important;
  justify-content: flex-end !important;
  margin: 0 0 18px !important;
  border-bottom: 1px solid #e1e5e2 !important;
  padding: 0 0 14px !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero > .heroCopy {
  display: none !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero .heroActions {
  margin-left: auto !important;
}

html body[data-active-tab="products"] main .settingsHubPanel,
html body[data-active-tab="studio"] main .settingsHubPanel,
html body[data-active-tab="publish"] main .settingsHubPanel,
html body[data-active-tab="subscription"] main .settingsHubPanel,
html body[data-active-tab="settings"] main .settingsHubPanel,
html body[data-active-tab="agents"] main .agentCommandCenter {
  width: min(1680px, 100%) !important;
  max-width: min(1680px, 100%) !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  border-radius: 0 !important;
  padding: 28px 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-active-tab="products"] main .settingsHubPanel > .panelHead,
html body[data-active-tab="studio"] main .settingsHubPanel > .panelHead,
html body[data-active-tab="publish"] main .settingsHubPanel > .panelHead,
html body[data-active-tab="subscription"] main .settingsHubPanel > .panelHead,
html body[data-active-tab="settings"] main .settingsHubPanel > .panelHead,
html body[data-active-tab="agents"] main .agentCenterHero {
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
}

html body[data-active-tab="dropship"] main > #dropship,
html body[data-active-tab="dropship"] main .dropshipWorkspace,
html body[data-active-tab="agents"] main > #agents,
html body[data-active-tab="agents"] main .agentCommandCenter,
html body[data-active-tab="agents"] main .agentCenterHero,
html body[data-active-tab="agents"] main .agentSummaryGrid,
html body[data-active-tab="agents"] main .agentWorkflowRail,
html body[data-active-tab="agents"] main .agentGrid,
html body[data-active-tab="agents"] main .agentTimeline {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#settingsDetailModal,
#agentModuleModal {
  background: rgba(31, 35, 33, .38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#settingsDetailModal .settingsDetailCard,
#agentModuleModal .agentModuleModalCard {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#settingsDetailModal .modalHead,
#agentModuleModal .modalHead {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#settingsDetailModal .modalHead > .iconButton,
#agentModuleModal .modalHead > .iconButton {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#settingsDetailModal .modalHead > .iconButton:hover,
#agentModuleModal .modalHead > .iconButton:hover {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
  color: #020617 !important;
}

@media (max-width: 980px) {
  html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero {
    margin-bottom: 12px !important;
  }

  html body[data-active-tab="products"] main .settingsHubPanel,
  html body[data-active-tab="studio"] main .settingsHubPanel,
  html body[data-active-tab="publish"] main .settingsHubPanel,
  html body[data-active-tab="subscription"] main .settingsHubPanel,
  html body[data-active-tab="settings"] main .settingsHubPanel,
  html body[data-active-tab="agents"] main .agentCommandCenter {
    padding: 22px 0 !important;
  }
}

@media (max-width: 760px) {
  html body[data-active-tab="dropship"] main > #dropship,
  html body[data-active-tab="dropship"] main .dropshipWorkspace,
  html body[data-active-tab="dropship"] main .dropshipHero,
  html body[data-active-tab="dropship"] main .dropshipSearchPanel,
  html body[data-active-tab="dropship"] main .dropshipDiscoveryGrid,
  html body[data-active-tab="dropship"] main .dropshipFilterPanel,
  html body[data-active-tab="agents"] main > #agents,
  html body[data-active-tab="agents"] main .agentCommandCenter,
  html body[data-active-tab="agents"] main .agentCenterHero > *,
  html body[data-active-tab="agents"] main .agentSummaryGrid > *,
  html body[data-active-tab="agents"] main .agentWorkflowRail > *,
  html body[data-active-tab="agents"] main .agentGrid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body[data-active-tab="dropship"] main .dropshipHero,
  html body[data-active-tab="dropship"] main .dropshipSearchLine,
  html body[data-active-tab="dropship"] main .dropshipInputGrid,
  html body[data-active-tab="dropship"] main .dropshipDiscoveryGrid,
  html body[data-active-tab="dropship"] main .dropshipSummaryGrid,
  html body[data-active-tab="agents"] main .agentCenterHero,
  html body[data-active-tab="agents"] main .agentSummaryGrid,
  html body[data-active-tab="agents"] main .agentWorkflowRail,
  html body[data-active-tab="agents"] main .agentGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-tab="dropship"] main .dropshipHeroActions,
  html body[data-active-tab="dropship"] main .dropshipSearchLine > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-active-tab="agents"] main .agentTimeline,
  html body[data-active-tab="agents"] main .agentNoticeList,
  html body[data-active-tab="agents"] main .agentNoticeItem,
  html body[data-active-tab="agents"] main .agentNoticeItem > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body[data-active-tab="agents"] main > #agents,
  html body[data-active-tab="agents"] main .agentCommandCenter,
  html body[data-active-tab="agents"] main .agentTimeline {
    overflow-x: hidden !important;
  }

  html body[data-active-tab="agents"] main .agentNoticeItem {
    overflow-wrap: anywhere !important;
  }

  html body[data-active-tab="cockpit"] .commandDockMore:not([open]) .commandDockMoreMenu {
    display: none !important;
  }

  #settingsDetailModal .settingsDetailCard,
  #agentModuleModal .agentModuleModalCard {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
  }

  #settingsDetailModal .formGrid,
  #settingsDetailModal .formGrid.two,
  #settingsDetailModal .productListTools,
  #settingsDetailModal .syncControls,
  #settingsDetailModal .shippingTemplateChooser,
  #settingsDetailModal .rowActions,
  #settingsDetailModal .modalTopActions {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
  }

  #settingsDetailModal input,
  #settingsDetailModal select,
  #settingsDetailModal textarea,
  #settingsDetailModal button:not(.iconButton):not(.modalWindowButton) {
    max-width: 100% !important;
  }

  .modalOverlay:not(#listingWorkflowModal):not(#settingsDetailModal) {
    padding: 12px !important;
  }

  .modalOverlay:not(#listingWorkflowModal):not(#settingsDetailModal) .modalCard,
  .modalOverlay:not(#listingWorkflowModal):not(#settingsDetailModal) .lightboxCard {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalHead {
    position: sticky !important;
    top: -20px !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalHead > div:first-child {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    padding-right: 48px !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalHead h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalHead p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalWindowControls {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalHead > .iconButton {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #111827 !important;
    opacity: 1 !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalActions,
  #notificationModal .notificationToolbar,
  #categoryPickerModal .categorySearchRow,
  #categoryPickerModal .categoryCrumbs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .modalOverlay:not(#listingWorkflowModal) .modalActions button,
  #notificationModal .notificationToolbar button,
  #categoryPickerModal .categorySearchRow > *,
  #categoryPickerModal .categoryCrumbs > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #opportunityModal .opportunityList,
  #opportunityModal .opportunityModalList,
  #categoryAttributeModal .attributeModalGrid,
  #batchReadinessModal .batchProductGrid,
  #batchReadinessModal .batchSummaryGrid,
  #batchReadinessModal .batchMetricGrid,
  #draftResultModal .draftResultImageGrid,
  #replicateResultModal .replicateProductGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #batchReadinessModal .batchFilterTabs,
  #batchReadinessModal .batchBulkBar,
  #batchReadinessModal .batchProductHead,
  #batchReadinessModal .batchProductActions,
  #taskLogModal .taskLogItemHead,
  #notificationModal .notificationItemHead {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  #dropshipWebPreviewModal .dropshipWebPreviewBody {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
}

/* Deep content polish: keep real records ahead of optional diagnostics. */
#settingsDetailModalBody > .settingsDetailContent > h2:first-child {
  display: none !important;
}

#settingsDetailModalBody > .settingsDetailContent > .panelHead:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#settingsDetailModalBody > .settingsDetailContent > .panelHead:first-child > h2,
#settingsDetailModalBody > .settingsDetailContent > .panelHead:first-child > div:first-child > h2,
#settingsDetailModalBody > .settingsDetailContent > .panelHead:first-child > div:first-child > p {
  display: none !important;
}

#settingsDetailModalBody > .settingsDetailContent > .panelHead:first-child > .rowActions {
  margin-left: 0 !important;
}

#settingsDetailModal .productDiagnosticsDetails {
  margin: 0 0 16px !important;
  border-top: 1px solid #dfe4e0 !important;
  border-bottom: 1px solid #dfe4e0 !important;
  background: #ffffff !important;
}

#settingsDetailModal .productDiagnosticsDetails > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 46px !important;
  padding: 10px 2px !important;
  color: #202622 !important;
  cursor: pointer !important;
  list-style: none !important;
}

#settingsDetailModal .productDiagnosticsDetails > summary::-webkit-details-marker {
  display: none !important;
}

#settingsDetailModal .productDiagnosticsDetails > summary::after {
  content: "+" !important;
  flex: 0 0 auto !important;
  color: #657069 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#settingsDetailModal .productDiagnosticsDetails[open] > summary::after {
  content: "−" !important;
}

#settingsDetailModal .productDiagnosticsDetails > summary span {
  color: #202622 !important;
  font-weight: 800 !important;
}

#settingsDetailModal .productDiagnosticsDetails > summary small {
  margin-left: auto !important;
  color: #6f7872 !important;
  font-size: 12px !important;
}

#settingsDetailModal .productDiagnosticsBody {
  display: grid !important;
  gap: 10px !important;
  padding: 0 0 14px !important;
}

#settingsDetailModal .productDiagnosticsBody .commercialIssues:empty {
  display: none !important;
}

@media (max-width: 760px) {
  #settingsDetailModal .productDiagnosticsDetails > summary {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #settingsDetailModal .productDiagnosticsDetails > summary small {
    max-width: 130px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  #settingsDetailModal #publishQueueContent .queueResultSummary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  #settingsDetailModal #publishQueueContent .queueSummaryCard {
    min-width: 0 !important;
    padding: 12px !important;
  }

  #settingsDetailModal #publishQueueContent .queueSummaryCard:last-child {
    grid-column: 1 / -1 !important;
  }

  #settingsDetailModal #publishQueueContent .queueSummaryCard small {
    display: none !important;
  }

  #settingsDetailModal #publishQueueContent .queueSummaryCard strong {
    font-size: 22px !important;
  }
}

/* Deep content polish 2: long real records keep a stable reading order. */
#settingsDetailModal .storeManageHead {
  align-items: flex-start !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

#settingsDetailModal .storeManageIdentity,
#settingsDetailModal .storeManageIdentity strong {
  min-width: 0 !important;
  max-width: 100% !important;
}

#settingsDetailModal .storeManageIdentity strong {
  display: block !important;
  overflow-wrap: anywhere !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

#settingsDetailModal .storeManageExpiry {
  color: #66706a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

#settingsDetailModal .productListCard > div:nth-child(2),
#settingsDetailModal .taskResultMain,
#settingsDetailModal .taskResultHead > div,
#settingsDetailModal .billingOrder > div:first-child {
  min-width: 0 !important;
}

#settingsDetailModal .productListTitle,
#settingsDetailModal .taskResultTitle,
#settingsDetailModal .billingOrder > div:first-child > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#settingsDetailModal .billingOrder > div:first-child > p {
  display: -webkit-box !important;
  overflow: hidden !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

#settingsDetailModal .billingOrder > b,
#settingsDetailModal .billingOrder > span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#settingsDetailModal .billingOrder > small {
  overflow-wrap: anywhere !important;
}

#settingsDetailModal .taskResultHead,
#settingsDetailModal .taskResultInfo > div,
#settingsDetailModal .taskFocusBanner {
  min-width: 0 !important;
}

#settingsDetailModal .taskResultInfo strong,
#settingsDetailModal .taskFocusCopy strong,
#settingsDetailModal .taskFocusCopy p {
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  #settingsDetailModal .storeManageCard .rowActions,
  #settingsDetailModal .productListCard .rowActions,
  #settingsDetailModal .taskResultCard > .rowActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #settingsDetailModal .storeManageCard .rowActions button,
  #settingsDetailModal .productListCard .rowActions button,
  #settingsDetailModal .taskResultCard > .rowActions button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  #settingsDetailModal .billingOrder > b,
  #settingsDetailModal .billingOrder > span,
  #settingsDetailModal .billingOrder > small {
    justify-self: start !important;
  }
}

/* Natural workspace pass: restore visual hierarchy without rebuilding a card wall. */
:root {
  --factory-canvas: #eef1ef;
  --factory-shell: #f6f8f7;
  --factory-surface: #ffffff;
  --factory-soft-green: #edf5f1;
  --factory-soft-amber: #fff7e7;
  --factory-soft-coral: #fff0f1;
  --factory-teal: #11786f;
  --factory-coral: #d64b62;
  --factory-amber: #c98218;
  --factory-ink: #1b201d;
  --factory-muted: #68716c;
  --factory-line: #d9dfdb;
}

body[data-active-tab] {
  background: var(--factory-canvas) !important;
}

body[data-active-tab] main {
  background: var(--factory-shell) !important;
}

body[data-active-tab] .rail {
  border-right: 1px solid #d7ddd9 !important;
  background: #e9eeeb !important;
}

body[data-active-tab] .rail .brand {
  margin: 0 14px 22px !important;
  border-bottom: 1px solid #cfd7d2 !important;
  padding: 10px 6px 22px !important;
}

body[data-active-tab] .rail button,
body[data-active-tab] .rail button:hover,
body[data-active-tab] .rail button.active {
  margin: 2px 12px !important;
  border-radius: 6px !important;
  padding-left: 18px !important;
}

body[data-active-tab] .rail button:hover {
  background: rgba(255, 255, 255, .52) !important;
}

body[data-active-tab] .rail button.active {
  background: #ffffff !important;
  color: var(--factory-ink) !important;
  box-shadow: 0 1px 2px rgba(26, 40, 33, .05) !important;
}

body[data-active-tab] .rail button.active::before {
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--factory-teal) !important;
}

body[data-active-tab] main > .hero {
  border-bottom-color: #d8dfda !important;
}

body[data-active-tab] main > .hero h1 {
  color: var(--factory-ink) !important;
  font-weight: 780 !important;
}

body[data-active-tab="cockpit"] main {
  padding-top: 18px !important;
}

body[data-active-tab="cockpit"] .hero {
  margin-bottom: 14px !important;
  padding-bottom: 16px !important;
}

body[data-active-tab="cockpit"] .commandDock {
  gap: 18px !important;
  margin: 0 0 22px !important;
  border: 1px solid #cfe0d8 !important;
  border-left: 4px solid var(--factory-teal) !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  background: #f1f7f4 !important;
}

body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.warning),
body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.waiting) {
  border-color: #ead9b7 !important;
  border-left-color: var(--factory-amber) !important;
  background: var(--factory-soft-amber) !important;
}

body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.error) {
  border-color: #edcbd1 !important;
  border-left-color: var(--factory-coral) !important;
  background: var(--factory-soft-coral) !important;
}

body[data-active-tab="cockpit"] .storeConnectionStatus strong {
  color: #29312d !important;
  font-size: 13px !important;
}

body[data-active-tab="cockpit"] .storeConnectionStatus p {
  color: #707872 !important;
}

body[data-active-tab="cockpit"] .commandDockActions > #loginBtn,
body[data-active-tab="cockpit"] .commandDockActions > #loginBtn:hover {
  border-color: #1c2420 !important;
  background: #1c2420 !important;
}

body[data-active-tab="cockpit"] .listingWorkbench {
  padding-bottom: 26px !important;
}

body[data-active-tab="cockpit"] .commerceDesk {
  overflow: hidden !important;
  border: 1px solid #d4dbd7 !important;
  border-radius: 8px !important;
  background: var(--factory-surface) !important;
  box-shadow: 0 16px 42px rgba(35, 49, 41, .08) !important;
}

body[data-active-tab="cockpit"] .commerceDeskPrimary {
  padding: 34px 42px !important;
  background: #ffffff !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchHero {
  align-items: end !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--factory-line) !important;
  padding-bottom: 20px !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchHero > div:first-child > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background: var(--factory-soft-green) !important;
  color: var(--factory-teal) !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchHero h2 {
  margin-top: 10px !important;
  font-size: 27px !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchScore {
  border: 0 !important;
  border-left: 3px solid var(--factory-teal) !important;
  border-radius: 0 !important;
  padding: 5px 0 5px 15px !important;
  background: transparent !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchFlow {
  border-top: 0 !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchFlow::before {
  background: #cfd8d3 !important;
}

body[data-active-tab="cockpit"] .productionStep,
body[data-active-tab="cockpit"] .productionStep:hover {
  min-height: 62px !important;
  margin: 2px 0 !important;
  border-bottom-color: #e7ebe8 !important;
  border-radius: 6px !important;
  padding: 0 12px 0 0 !important;
}

body[data-active-tab="cockpit"] .productionStep:hover {
  background: #f5f8f6 !important;
}

body[data-active-tab="cockpit"] .productionStep.working,
body[data-active-tab="cockpit"] .productionStep.pass {
  background: #f0f7f4 !important;
}

body[data-active-tab="cockpit"] .productionStep.warning {
  background: #fff9ee !important;
}

body[data-active-tab="cockpit"] .productionStep.blocked {
  background: #fff5f6 !important;
}

body[data-active-tab="cockpit"] .productionStep.blocked span {
  border-color: #e8909f !important;
  background: #fff8f9 !important;
  color: #c8324c !important;
}

body[data-active-tab="cockpit"] .productionStep em {
  color: var(--factory-teal) !important;
  text-decoration-color: rgba(17, 120, 111, .35) !important;
}

body[data-active-tab="cockpit"] .productionStep.blocked em {
  color: #c8324c !important;
  text-decoration-color: rgba(200, 50, 76, .3) !important;
}

body[data-active-tab="cockpit"] .homeProductStage {
  border-left-color: #d4dbd7 !important;
  padding: 32px 34px !important;
  background: #f1f5f3 !important;
}

body[data-active-tab="cockpit"] .homeProductPicker {
  border-bottom: 1px solid #d2dad5 !important;
  padding-bottom: 16px !important;
}

body[data-active-tab="cockpit"] .homeProductPicker select {
  border-bottom-color: #8eaaa0 !important;
}

body[data-active-tab="cockpit"] .homeProductStageEmpty {
  position: relative !important;
  min-height: 500px !important;
  border: 1px dashed #c5d1cb !important;
  border-radius: 8px !important;
  padding: 36px !important;
  background: rgba(255, 255, 255, .54) !important;
}

body[data-active-tab="cockpit"] .homeProductStageEmpty::before {
  content: "";
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border: 1px solid #9bb9ae;
  border-radius: 50%;
  background: #e4f0eb;
  box-shadow: inset 0 0 0 12px #f3f8f6;
}

body[data-active-tab="cockpit"] .homeProductStageEmpty strong {
  color: #29312d !important;
  font-size: 23px !important;
}

body[data-active-tab="cockpit"] .homeProductStageEmpty p {
  color: #737c76 !important;
}

body[data-active-tab="cockpit"] .homeProductVisual {
  border: 1px solid #d5dcd8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

body[data-active-tab="cockpit"] .homeProductFacts {
  border-color: #cfd8d3 !important;
  background: rgba(255, 255, 255, .48) !important;
}

body[data-active-tab="cockpit"] .homeProductFacts > div {
  padding-left: 10px !important;
}

/* Secondary pages use broad bands and interactive rows, not floating card grids. */
body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsHubPanel,
body[data-active-tab="agents"] main .agentCommandCenter {
  border-color: #d4dbd7 !important;
  background: rgba(255, 255, 255, .68) !important;
}

body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchGrid {
  overflow: hidden !important;
  border: 1px solid #d8dfda !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard,
body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard:hover {
  min-height: 92px !important;
  border: 0 !important;
  border-right: 1px solid #e1e6e3 !important;
  border-bottom: 1px solid #e1e6e3 !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard:hover {
  background: #f2f7f4 !important;
}

body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard > span {
  color: var(--factory-teal) !important;
}

/* Dialogs are calm work surfaces with a visible header/body boundary. */
#settingsDetailModal .settingsDetailCard,
#agentModuleModal .agentModuleModalCard {
  overflow: hidden !important;
  border: 1px solid #cfd7d2 !important;
  background: #f3f6f4 !important;
  box-shadow: 0 24px 72px rgba(24, 36, 30, .18) !important;
}

#settingsDetailModal .modalHead,
#agentModuleModal .modalHead {
  border-bottom: 1px solid #d9dfdb !important;
  background: #ffffff !important;
}

#settingsDetailModal .settingsDetailModalBody,
#agentModuleModal .agentModuleBody {
  background: #f3f6f4 !important;
}

#settingsDetailModal .settingsDetailContent,
#agentModuleModal .agentModuleBody > * {
  border-color: #d9dfdb !important;
}

#settingsDetailModal .modalTopActions,
#settingsDetailModal .productListTools,
#settingsDetailModal .syncControls,
#settingsDetailModal .shippingTemplateChooser {
  border-color: #d7dfda !important;
  background: #ffffff !important;
}

#settingsDetailModal .itemCard,
#settingsDetailModal .taskCard,
#settingsDetailModal .billingOrder,
#settingsDetailModal .storeManageCard,
#settingsDetailModal .assetSection {
  border-top-color: #d7dfda !important;
}

@media (max-width: 1080px) {
  body[data-active-tab="cockpit"] .homeProductStage {
    border-top-color: #d4dbd7 !important;
    padding: 28px !important;
  }
}

@media (max-width: 680px) {
  body[data-active-tab] .rail {
    border-right: 0 !important;
    border-bottom: 1px solid #d4dbd7 !important;
    background: #edf1ef !important;
  }

  body[data-active-tab] .rail .brand {
    margin: 0 0 12px !important;
    padding: 6px 4px 18px !important;
  }

  body[data-active-tab] .rail button,
  body[data-active-tab] .rail button:hover,
  body[data-active-tab] .rail button.active {
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-active-tab] .rail button.active::before {
    top: auto !important;
    right: 10px !important;
    bottom: 0 !important;
    left: 10px !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
  }

  body[data-active-tab="cockpit"] main {
    padding-top: 14px !important;
    background: var(--factory-shell) !important;
  }

  body[data-active-tab="cockpit"] .hero {
    margin-bottom: 12px !important;
    border-bottom-color: #d5dcd8 !important;
    padding-bottom: 18px !important;
  }

  body[data-active-tab="cockpit"] .hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  body[data-active-tab="cockpit"] .commandDock {
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding: 14px !important;
  }

  body[data-active-tab="cockpit"] .commandDockActions,
  body[data-active-tab="cockpit"] .commandDockActions > #loginBtn {
    width: 100% !important;
  }

  body[data-active-tab="cockpit"] .commerceDeskPrimary {
    padding: 24px 18px 26px !important;
  }

  body[data-active-tab="cockpit"] .productionWorkbenchHero {
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  body[data-active-tab="cockpit"] .productionWorkbenchHero h2 {
    font-size: 25px !important;
  }

  body[data-active-tab="cockpit"] .productionWorkbenchScore {
    border-top: 0 !important;
    border-left: 3px solid var(--factory-teal) !important;
    padding: 4px 0 4px 12px !important;
  }

  body[data-active-tab="cockpit"] .productionStep,
  body[data-active-tab="cockpit"] .productionStep:hover {
    padding-right: 10px !important;
  }

  body[data-active-tab="cockpit"] .homeProductStage {
    padding: 22px 18px !important;
  }

  body[data-active-tab="cockpit"] .homeProductStageEmpty {
    min-height: 330px !important;
    padding: 26px 22px !important;
  }

  body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchGrid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard,
  body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsLaunchCard:hover {
    border-right: 0 !important;
  }
}

/* Natural workspace contrast tuning. */
body[data-active-tab] main,
body[data-active-tab="cockpit"] main {
  background: #edf1ef !important;
}

body[data-active-tab] .rail {
  background: #e5ebe7 !important;
}

body[data-active-tab="cockpit"] .commandDock {
  border-color: #bfd6cc !important;
  border-left-color: var(--factory-teal) !important;
  background: #eaf4ef !important;
}

body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.warning),
body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.waiting) {
  border-color: #e8cd95 !important;
  border-left-color: var(--factory-amber) !important;
  background: #fff3d8 !important;
}

body[data-active-tab="cockpit"] .commandDock:has(.storeConnectionStatus.error) {
  border-color: #e7b7c0 !important;
  border-left-color: var(--factory-coral) !important;
  background: #ffebee !important;
}

body[data-active-tab="cockpit"] .commerceDesk {
  border-top: 3px solid #2f7e73 !important;
}

body[data-active-tab="cockpit"] .commerceDeskPrimary {
  background: #fbfcfb !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchFlow {
  margin-top: 4px !important;
  border: 1px solid #d9e0dc !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: #f3f6f4 !important;
}

body[data-active-tab="cockpit"] .productionWorkbenchFlow::before {
  top: 36px !important;
  bottom: 36px !important;
  left: 27px !important;
}

body[data-active-tab="cockpit"] .productionStep,
body[data-active-tab="cockpit"] .productionStep:hover {
  padding-left: 0 !important;
  background: transparent !important;
}

body[data-active-tab="cockpit"] .productionStep.working,
body[data-active-tab="cockpit"] .productionStep.pass {
  background: transparent !important;
}

body[data-active-tab="cockpit"] .productionStep.warning {
  background: transparent !important;
}

body[data-active-tab="cockpit"] .productionStep.blocked {
  background: transparent !important;
}

body[data-active-tab="cockpit"] .productionStep.current.pass,
body[data-active-tab="cockpit"] .productionStep.current.working {
  background: #e7f2ed !important;
  box-shadow: inset 3px 0 0 var(--factory-teal) !important;
}

body[data-active-tab="cockpit"] .productionStep.current.warning {
  background: #fff4dc !important;
  box-shadow: inset 3px 0 0 var(--factory-amber) !important;
}

body[data-active-tab="cockpit"] .productionStep.current.blocked {
  background: #fdecee !important;
  box-shadow: inset 3px 0 0 var(--factory-coral) !important;
}

body[data-active-tab="cockpit"] .homeProductStage {
  background: #e9f0ec !important;
}

body[data-active-tab="cockpit"] .homeProductStageEmpty {
  background: rgba(255, 255, 255, .7) !important;
}

body[data-active-tab]:not([data-active-tab="cockpit"]) main .settingsHubPanel,
body[data-active-tab="agents"] main .agentCommandCenter {
  background: rgba(255, 255, 255, .82) !important;
}

@media (max-width: 680px) {
  body[data-active-tab] main,
  body[data-active-tab="cockpit"] main {
    background: #edf1ef !important;
  }

  body[data-active-tab="cockpit"] .productionWorkbenchFlow {
    padding: 8px !important;
  }

  body[data-active-tab="cockpit"] .productionWorkbenchFlow::before {
    left: 23px !important;
  }
}

/* Secondary page framing: remove duplicate hero copy and give directories a real surface. */
html body[data-active-tab]:not([data-active-tab="cockpit"]) main {
  background: #edf1ef !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero {
  min-height: 54px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #d3dad6 !important;
  padding-bottom: 12px !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero > div:first-child {
  display: none !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero .accountBadge {
  border: 0 !important;
  border-right: 1px solid #cfd7d2 !important;
  border-radius: 0 !important;
  padding: 0 18px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero .notificationButton,
html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero #logoutBtn {
  border: 0 !important;
  border-radius: 0 !important;
  padding-inline: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-tab="utilities"] .toolboxPage {
  width: min(1180px, 100%) !important;
  padding-top: 0 !important;
}

html body[data-active-tab="utilities"] .toolboxPageHead {
  margin-bottom: 18px !important;
  border: 1px solid #cbdcd4 !important;
  border-left: 4px solid var(--factory-teal) !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
  background: #e5f0eb !important;
}

html body[data-active-tab="utilities"] .toolboxPageHead > span {
  color: var(--factory-teal) !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory {
  overflow: hidden !important;
  border: 1px solid #d4dbd7 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 38px rgba(35, 49, 41, .07) !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button,
html body[data-active-tab="utilities"] .toolboxDirectory > button:hover {
  position: relative !important;
  min-height: 104px !important;
  padding: 20px 24px 20px 28px !important;
  background: #ffffff !important;
  transform: none !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button:hover {
  background: #f3f7f5 !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  background: #79a89b;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button:nth-child(2)::before,
html body[data-active-tab="utilities"] .toolboxDirectory > button:nth-child(5)::before {
  background: #d4a044;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button:nth-child(3)::before {
  background: #d97586;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button:nth-child(4)::before,
html body[data-active-tab="utilities"] .toolboxDirectory > button:nth-child(6)::before {
  background: #6e8eaa;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button strong {
  color: var(--factory-ink) !important;
  font-size: 17px !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button small {
  color: var(--factory-muted) !important;
}

html body[data-active-tab="utilities"] .toolboxDirectory > button em {
  color: #44504a !important;
  text-decoration-color: #9dacA4 !important;
}

@media (max-width: 680px) {
  html body[data-active-tab]:not([data-active-tab="cockpit"]) main > .hero {
    min-height: 48px !important;
  }

  html body[data-active-tab="utilities"] .toolboxPageHead {
    padding: 20px 18px !important;
  }

  html body[data-active-tab="utilities"] .toolboxDirectory > button,
  html body[data-active-tab="utilities"] .toolboxDirectory > button:hover {
    min-height: 88px !important;
    padding: 16px 18px 16px 22px !important;
  }

  html body[data-active-tab="utilities"] .toolboxDirectory > button::before {
    top: 17px;
    bottom: 17px;
  }
}

/* Final rail hierarchy: parent toolbox stays quieter than the selected tool. */
body[data-active-tab="products"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="studio"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="publish"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="dropship"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="subscription"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="agents"] .railPrimary button[data-tab="utilities"].active,
body[data-active-tab="settings"] .railPrimary button[data-tab="utilities"].active {
  background: #dce8e2 !important;
  box-shadow: none !important;
}

body[data-active-tab="products"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="studio"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="publish"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="dropship"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="subscription"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="agents"] .railPrimary button[data-tab="utilities"].active::before,
body[data-active-tab="settings"] .railPrimary button[data-tab="utilities"].active::before {
  background: #89a99e !important;
}

@media (max-width: 680px) {
  body[data-active-tab] .railTools {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-active-tab] .railTools::-webkit-scrollbar {
    display: none !important;
  }

  body[data-active-tab] .railTools button,
  body[data-active-tab] .railTools button:hover,
  body[data-active-tab] .railTools button.active {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
    text-align: center !important;
  }
}