/* Sirv AI Studio - Shopify App Styles */

/* Sid-Kit token bridge for legacy embedded-app CSS modules. */
:root {
  --sirv-primary: #1b6fec;
  --sirv-primary-hover: #0a59ca;
  --sirv-teal: #108f72;
  --sirv-cyan: #0a8aa8;
  --sirv-text: #18181b;
  --sirv-text-muted: #52525b;
  --sirv-border: rgba(24, 24, 25, 0.1);
  --p-color-bg-surface: var(--card);
  --p-color-bg-surface-secondary: color-mix(
    in oklch,
    var(--card) 72%,
    var(--background)
  );
  --p-color-bg-surface-hover: color-mix(
    in oklch,
    var(--foreground) 5%,
    var(--background)
  );
  --p-color-bg-surface-active: color-mix(
    in oklch,
    var(--primary) 10%,
    var(--background)
  );
  --p-color-bg-surface-success: color-mix(
    in oklch,
    var(--success) 12%,
    var(--background)
  );
  --p-color-bg-surface-caution: color-mix(
    in oklch,
    var(--warning) 12%,
    var(--background)
  );
  --p-color-bg-surface-critical: color-mix(
    in oklch,
    var(--danger) 12%,
    var(--background)
  );
  --p-color-bg-fill-disabled: color-mix(
    in oklch,
    var(--neutral) 12%,
    var(--background)
  );
  --p-color-border: var(--border);
  --p-color-border-secondary: color-mix(
    in oklch,
    var(--border) 88%,
    var(--foreground) 12%
  );
  --p-color-border-hover: color-mix(
    in oklch,
    var(--border) 60%,
    var(--foreground) 40%
  );
  --p-color-border-critical: color-mix(
    in oklch,
    var(--danger) 42%,
    var(--border)
  );
  --p-color-border-interactive: var(--primary);
  --p-color-icon-disabled: color-mix(
    in oklch,
    var(--foreground-muted) 35%,
    transparent
  );
  --p-color-icon-secondary: var(--foreground-muted);
  --p-color-text: var(--foreground);
  --p-color-text-secondary: var(--foreground-muted);
  --p-color-text-disabled: color-mix(
    in oklch,
    var(--foreground-muted) 45%,
    transparent
  );
  --p-color-text-success: var(--foreground-success);
  --p-color-text-caution: var(--foreground-warning);
  --p-color-text-critical: var(--foreground-danger);
  --p-color-text-interactive: var(--foreground-primary);
  --p-shadow-200: var(--shadow-sm);
  --app-accent: var(--sirv-primary);
  --app-accent-secondary: var(--sirv-cyan);
  --app-accent-gradient: linear-gradient(
    135deg,
    var(--app-accent) 0%,
    var(--app-accent-secondary) 100%
  );
  --app-accent-gradient-flat: linear-gradient(
    90deg,
    var(--app-accent),
    var(--app-accent-secondary)
  );
  --app-accent-gradient-h: linear-gradient(
    90deg,
    transparent,
    var(--app-accent),
    var(--app-accent-secondary),
    transparent
  );
  --app-accent-bg: rgba(13, 153, 255, 0.04);
  --app-accent-bg-hover: rgba(13, 153, 255, 0.06);
  --app-accent-bg-subtle: rgba(13, 153, 255, 0.1);
  --app-accent-bg-light: rgba(13, 153, 255, 0.12);
  --app-accent-bg-medium: rgba(13, 153, 255, 0.15);
  --app-accent-shadow: 0 4px 16px rgba(13, 153, 255, 0.35);
  --app-accent-shadow-hover: 0 8px 24px rgba(13, 153, 255, 0.45);
  --app-accent-shadow-soft: 0 4px 20px rgba(13, 153, 255, 0.2);
  --app-accent-shadow-small: 0 2px 6px rgba(13, 153, 255, 0.4);
  --app-accent-focus-ring: 0 0 0 3px rgba(13, 153, 255, 0.12);
  --app-accent-glow-inset: inset 0 0 20px rgba(13, 153, 255, 0.1);
  --app-success-gradient: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Animations */
@keyframes _spin_eo5qs_124 {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner */
._spinner_eo5qs_124 {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: _spin_eo5qs_124 0.8s linear infinite;
}

._spinnerLarge_eo5qs_133 {
  width: 28px;
  height: 28px;
  border: 3px solid var(--p-color-border-secondary);
  border-top-color: var(--app-accent);
  border-radius: 50%;
  animation: _spin_eo5qs_124 0.8s linear infinite;
}

/* Header Toolbar */
._toolbarContainer_eo5qs_143 {
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

._toolbarRow_eo5qs_152 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Search */
._searchWrapper_eo5qs_160 {
  position: relative;
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 280px;
}

._searchIcon_eo5qs_167 {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--p-color-icon-secondary);
  pointer-events: none;
}

._searchInput_eo5qs_178 {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 42px;
  border: 1px solid var(--p-color-border);
  border-radius: 10px;
  background: var(--p-color-bg-surface);
  font-size: 14px;
  color: var(--p-color-text);
  transition: all 0.15s ease;
}

._searchInput_eo5qs_178:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: var(--app-accent-focus-ring);
}

._searchInput_eo5qs_178::placeholder {
  color: var(--p-color-icon-secondary);
}

._searchClear_eo5qs_200 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--p-color-bg-fill-disabled);
  border-radius: 6px;
  color: var(--p-color-text-secondary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

._searchClear_eo5qs_200:hover {
  background: var(--p-color-icon-disabled);
  color: var(--p-color-text);
}

/* View Tabs: the tab track itself comes from Sid-Kit. Only the count keeps a
   local rule, so a changing number never shifts the label beside it. */
._viewTabCount_eo5qs_227 {
  font-variant-numeric: tabular-nums;
}

/* Keyboard shortcut legend */
._shortcutHintsBtn_eo5qs_232 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--p-color-border);
  border-radius: 50%;
  background: var(--p-color-bg-surface);
  color: var(--p-color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

._shortcutHintsBtn_eo5qs_232:hover {
  color: var(--p-color-text);
}

._shortcutHints_eo5qs_232 {
  display: grid;
  gap: 6px;
  margin: 0;
}

._shortcutHintsRow_eo5qs_257 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

._shortcutHintsRow_eo5qs_257 dd {
  margin: 0;
  color: var(--p-color-text-secondary);
}

._shortcutHintKey_eo5qs_269 {
  display: inline-block;
  min-width: 34px;
  padding: 2px 6px;
  border: 1px solid var(--p-color-border);
  border-radius: 6px;
  background: var(--p-color-bg-fill-disabled);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Toolbar Actions */
._toolbarActions_eo5qs_283 {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

._toolbarBtn_eo5qs_289 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--p-color-border);
  background: var(--p-color-bg-surface);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-color-text);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

._toolbarBtn_eo5qs_289:hover {
  background: var(--p-color-bg-surface-secondary);
  border-color: var(--p-color-border);
}

._toolbarBtnIcon_eo5qs_310 {
  width: 16px;
  height: 16px;
  color: var(--p-color-text-secondary);
}

._toolbarBtnArrow_eo5qs_316 {
  font-size: 10px;
  color: var(--p-color-icon-secondary);
  margin-left: 2px;
}

._toolbarBtnSecondary_eo5qs_322 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--p-color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

._toolbarBtnSecondary_eo5qs_322:hover {
  background: var(--p-color-bg-fill-disabled);
  color: var(--p-color-text);
}

/* Image Grid */
._imageGrid_eo5qs_343 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
  gap: 14px;
}

._imageGridWithPanel_eo5qs_349 {
  padding-bottom: 120px;
}

._imageCard_eo5qs_353 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

._imageCard_eo5qs_353:active {
  transform: scale(0.98);
}

._imageCardSelected_eo5qs_369 {
  border: 2px solid var(--app-accent);
  box-shadow: var(--app-accent-focus-ring), var(--app-accent-shadow-soft);
}

._imageCardHovered_eo5qs_374 {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

._imageCardImage_eo5qs_379 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The card's activation surface: a real button over the media, painted below
   the overlays because it is the first absolutely positioned sibling. */
._cardMediaButton_eo5qs_388 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

._cardMediaButton_eo5qs_388:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: -3px;
}

/* Checkbox overlay */
._checkbox_eo5qs_405 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--p-color-border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
  cursor: pointer;
  z-index: 10;
}

._checkboxSelected_eo5qs_423 {
  background: var(--app-accent-gradient);
  border: none;
}

/* Selection indicator */
._selectionIndicator_eo5qs_429 {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--app-accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--app-accent-shadow-small);
  /* Decoration only: the card's activation button sits underneath. */
  pointer-events: none;
}

/* Product title overlay */
._titleOverlay_eo5qs_446 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  padding: 24px 10px 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Decoration only: the card's activation button sits underneath. */
  pointer-events: none;
}

._titleOverlayVisible_eo5qs_459 {
  opacity: 1;
}

._titleText_eo5qs_463 {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  /* The width decides where the title ends, not a fixed character count. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Updated badge */
._updatedBadge_eo5qs_474 {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--app-success-gradient);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: var(--p-shadow-200);
  /* Decoration only: the card's activation button sits underneath. */
  pointer-events: none;
}

/* Product View */
._productCard_eo5qs_490 {
  background: var(--p-color-bg-surface);
  border-radius: 14px;
  border: 1px solid var(--p-color-border-secondary);
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

._productCard_eo5qs_490:hover {
  border-color: var(--p-color-border-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._productViewContainer_eo5qs_504 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._productHeader_eo5qs_510 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}

._productHeaderLeft_eo5qs_518 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._productHeaderRight_eo5qs_525 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._productTitle_eo5qs_532 {
  font-size: 14px;
  font-weight: 600;
  color: var(--p-color-text);
}

._productStatus_eo5qs_538 {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

._productStatusActive_eo5qs_545 {
  background: var(--p-color-bg-surface-success);
  color: var(--p-color-text-success);
}

._productStatusDraft_eo5qs_550 {
  background: var(--p-color-bg-surface-caution);
  color: var(--p-color-text-caution);
}

._productImagesGrid_eo5qs_555 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 120px));
  gap: 10px;
}

._productImage_eo5qs_555 {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

._productImage_eo5qs_555:active {
  transform: scale(0.96);
}

._productImageSelected_eo5qs_576 {
  border: 2px solid var(--app-accent);
  box-shadow: var(--app-accent-focus-ring);
}

._productImageHovered_eo5qs_581 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

._thumbnailImage_eo5qs_586 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modal styles */
._modalCompareGrid_eo5qs_593 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._modalImageContainerOriginal_eo5qs_599 {
  background: var(--p-color-bg-surface-secondary);
}

._modalImageContainerProcessed_eo5qs_603 {
  background: repeating-conic-gradient(
      var(--p-color-border-secondary) 0% 25%,
      var(--p-color-bg-surface) 0% 50%
    )
    50% / 16px 16px;
}

._modalImage_eo5qs_599 {
  width: 100%;
  height: auto;
  display: block;
}

/* 3D Model result */
._modal3DResult_eo5qs_618 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  gap: 8px;
  min-height: 340px;
}

._modal3DResult_eo5qs_618 model-viewer {
  border-radius: 8px;
  --poster-color: transparent;
}

._modal3DError_eo5qs_635 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--p-color-text-critical);
  text-align: center;
}

._modal3DError_eo5qs_635 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

._modal3DLoading_eo5qs_649 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
}

._modal3DLoading_eo5qs_649 p {
  margin: 0;
  font-size: 14px;
}

._modal3DControls_eo5qs_662 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}

._modal3DArBtn_eo5qs_670 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 6px;
  color: #a5b4fc;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

._modal3DArBtn_eo5qs_670:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.6);
}

._modal3DQrCode_eo5qs_689 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
}

._modal3DQrCode_eo5qs_689 img {
  border-radius: 8px;
  background: white;
  padding: 8px;
}

._modal3DQrCode_eo5qs_689 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

._modal3DQrBack_eo5qs_709 {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

._modal3DQrBack_eo5qs_709:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

._modal3DFormatToggle_eo5qs_725 {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
}

._modal3DFormatBtn_eo5qs_734 {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

._modal3DFormatBtn_eo5qs_734:hover {
  color: rgba(255, 255, 255, 0.8);
}

._modal3DFormatBtnActive_eo5qs_750 {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Video result */
._modalVideoResult_eo5qs_756 {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

._modalVideo_eo5qs_756 {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
}

/* Batch results */
._batchResultsGrid_eo5qs_770 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

._batchResultCard_eo5qs_778 {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--p-color-border-secondary);
  background: var(--p-color-bg-surface);
}

._batchResultCardError_eo5qs_785 {
  border-color: var(--p-color-border-critical);
  background: var(--p-color-bg-surface-critical);
}

._batchResultImages_eo5qs_790 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2/1;
}

._batchResultImage_eo5qs_790 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._batchResultProcessedPlaceholder_eo5qs_802 {
  width: 100%;
  height: 100%;
  background: var(--p-color-bg-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

._batchResultInfo_eo5qs_811 {
  padding: 6px 8px;
}

._batchResultTitle_eo5qs_815 {
  font-size: 11px;
  color: var(--p-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._batchResultError_eo5qs_823 {
  font-size: 10px;
  color: var(--p-color-text-critical);
  margin-top: 2px;
}

._batchResultCardExcluded_eo5qs_829 {
  opacity: 0.4;
  border-color: var(--p-color-border);
}

._batchResultToggle_eo5qs_834 {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 10px;
  border: 1px solid var(--p-color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--p-color-text-secondary);
  cursor: pointer;
}

._batchResultToggle_eo5qs_834:hover {
  background: var(--p-color-bg-surface-secondary);
}

._batchResultToggleExcluded_eo5qs_850 {
  color: var(--p-color-text-success);
  border-color: var(--p-color-text-success);
}

/* Alt text results */
._altTextResultsList_eo5qs_856 {
  max-height: 400px;
  overflow-y: auto;
}

._altTextResultCard_eo5qs_861 {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--p-color-border-secondary);
  background: var(--p-color-bg-surface);
  margin-bottom: 12px;
}

._altTextResultCardError_eo5qs_871 {
  border-color: var(--p-color-border-critical);
  background: var(--p-color-bg-surface-critical);
}

._altTextResultImage_eo5qs_876 {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

._altTextResultContent_eo5qs_884 {
  flex: 1;
  min-width: 0;
}

._altTextResultProductTitle_eo5qs_889 {
  font-size: 13px;
  font-weight: 500;
  color: var(--p-color-text);
  margin-bottom: 4px;
}

._altTextResultText_eo5qs_896 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
  line-height: 1.4;
}

._altTextResultErrorText_eo5qs_902 {
  font-size: 12px;
  color: var(--p-color-text-critical);
}

._altTextResultPending_eo5qs_907 {
  font-size: 12px;
  color: var(--p-color-text-disabled);
}

/* Progress modal */
._progressContainer_eo5qs_913 {
  text-align: center;
  padding: 20px 0;
}

._progressIcon_eo5qs_918 {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--app-accent-bg-subtle),
    rgba(124, 58, 237, 0.1)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

._progressBar_eo5qs_933 {
  width: 100%;
  height: 8px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 4px;
  margin-top: 16px;
  overflow: hidden;
}

._progressBarFill_eo5qs_942 {
  height: 100%;
  background: var(--app-accent-gradient-flat);
  border-radius: 4px;
  transition: width 0.3s ease;
}

._progressStats_eo5qs_949 {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

._progressStat_eo5qs_949 {
  text-align: center;
}

._progressStatValue_eo5qs_960 {
  font-size: 20px;
  font-weight: 600;
}

._progressStatValueSuccess_eo5qs_965 {
  color: var(--p-color-text-success);
}

._progressStatValueError_eo5qs_969 {
  color: var(--p-color-text-critical);
}

._progressStatLabel_eo5qs_973 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
}

/* Glow effect */
._glowEffect_eo5qs_979 {
  position: absolute;
  inset: 0;
  box-shadow: var(--app-accent-glow-inset);
  pointer-events: none;
}

/* ========================================
   Compact Process Panel (Single Row)
   ======================================== */

._processPanelCompact_eo5qs_990 {
  position: fixed;
  bottom: calc(24px + var(--shopify-safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: var(--p-color-bg-surface);
  border-radius: 20px;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  /* Sid-Kit owns z-50 for overlays. App chrome stays below it. */
  z-index: 30;
  max-width: calc(100% - 40px);
}

._compactSection_eo5qs_1009 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

._compactThumbnail_eo5qs_1016 {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--p-color-border-secondary);
}

._compactCredits_eo5qs_1026 {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text-secondary);
  white-space: nowrap;
}

._compactCreditsWarning_eo5qs_1033 {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-color-text-caution);
  white-space: nowrap;
}

._compactDivider_eo5qs_1040 {
  width: 1px;
  height: 40px;
  background: var(--p-color-bg-fill-disabled);
  flex-shrink: 0;
}

/* Pill buttons for tool/model selection */
._compactPill_eo5qs_1048 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border-secondary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text);
  transition: all 0.15s ease;
  white-space: nowrap;
}

._compactPillIcon_eo5qs_1064 {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

._compactPill_eo5qs_1048:hover {
  background: var(--p-color-bg-surface-hover);
  border-color: var(--p-color-border-secondary);
}

._compactPillSecondary_eo5qs_1075 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--p-color-border-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--p-color-text-secondary);
  transition: all 0.15s ease;
  white-space: nowrap;
}

._compactPillSecondary_eo5qs_1075:hover {
  background: var(--p-color-bg-surface-secondary);
  border-color: var(--p-color-border-secondary);
  color: var(--p-color-text);
}

._compactPillArrow_eo5qs_1097 {
  font-size: 12px;
  color: var(--p-color-text-disabled);
  margin-left: 4px;
}

/* Scale selector group */
._compactScaleGroup_eo5qs_1104 {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--p-color-border-secondary);
}

._compactScaleBtn_eo5qs_1111 {
  padding: 12px 18px;
  border: none;
  background: var(--p-color-bg-surface-secondary);
  color: var(--p-color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

._compactScaleBtn_eo5qs_1111:not(:last-child) {
  border-right: 1px solid var(--p-color-border-secondary);
}

._compactScaleBtnActive_eo5qs_1126 {
  background: var(--app-accent-bg-light);
  color: var(--app-accent);
}

/* Prompt input */
._compactPromptInput_eo5qs_1132 {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--p-color-border-secondary);
  background: var(--p-color-bg-surface-secondary);
  color: var(--p-color-text);
  font-size: 15px;
  outline: none;
  transition: all 0.15s ease;
}

._compactPromptInput_eo5qs_1132:focus {
  border-color: var(--app-accent);
  box-shadow: var(--app-accent-focus-ring);
  background: var(--p-color-bg-surface);
}

._compactPromptInputError_eo5qs_1152 {
  border-color: var(--p-color-border-critical);
}

/* Actions (Process + Close) */
._compactActions_eo5qs_1157 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._compactProcessBtn_eo5qs_1164 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  background: var(--app-accent-gradient);
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  box-shadow: var(--app-accent-shadow);
  transition: all 0.2s ease;
  white-space: nowrap;
}

._compactProcessBtn_eo5qs_1164:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--app-accent-shadow-hover);
}

._compactProcessBtnDisabled_eo5qs_1187 {
  background: var(--p-color-bg-fill-disabled);
  color: var(--p-color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

._compactCloseBtn_eo5qs_1194 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--p-color-border-secondary);
  background: var(--p-color-bg-surface-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

._compactCloseBtn_eo5qs_1194:hover:not(:disabled) {
  background: var(--p-color-bg-surface-hover);
  border-color: var(--p-color-border-secondary);
}

._compactCloseBtn_eo5qs_1194:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Batch thumbnails (stacked) - large version */
._batchThumbnailsLarge_eo5qs_1219 {
  display: flex;
  align-items: center;
}

._batchThumbnailLarge_eo5qs_1224 {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

._batchThumbnailStackedLarge_eo5qs_1234 {
  margin-left: -16px;
}

._batchThumbnailMoreLarge_eo5qs_1238 {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--p-color-bg-surface-hover);
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-left: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-color-text-secondary);
  flex-shrink: 0;
}

._batchInfo_eo5qs_1255 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 4px;
}

._batchCount_eo5qs_1262 {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text);
  white-space: nowrap;
}

._batchCredits_eo5qs_1269 {
  font-size: 13px;
  font-weight: 500;
  color: var(--p-color-text-secondary);
  white-space: nowrap;
}

/* ========================================
   Tool Selector Modal
   ======================================== */

._toolModalContent_eo5qs_1280 {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

._toolModalBody_eo5qs_1286 {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

._toolCategory_eo5qs_1292 {
  margin-bottom: 24px;
}

._toolCategory_eo5qs_1292:last-child {
  margin-bottom: 0;
}

._toolCategoryTitle_eo5qs_1300 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
}

._toolGrid_eo5qs_1308 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  ._toolGrid_eo5qs_1308 {
    grid-template-columns: 1fr;
  }
}

._toolCard_eo5qs_1320 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--p-color-bg-surface);
  border: 2px solid var(--p-color-border-secondary);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
}

._toolCard_eo5qs_1320:hover {
  border-color: var(--p-color-border-secondary);
  background: var(--p-color-bg-surface-secondary);
}

._toolCardSelected_eo5qs_1339 {
  border-color: var(--app-accent);
  background: var(--app-accent-bg);
}

._toolCardSelected_eo5qs_1339:hover {
  border-color: var(--app-accent);
  background: var(--app-accent-bg-hover);
}

._toolCardIcon_eo5qs_1349 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

._toolCardContent_eo5qs_1359 {
  flex: 1;
  min-width: 0;
}

._toolCardHeader_eo5qs_1364 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._toolCardName_eo5qs_1371 {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text);
}

._toolBadgeFree_eo5qs_1377 {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--p-color-bg-surface-success);
  color: var(--p-color-text-success);
  border-radius: 6px;
}

._toolCardMeta_eo5qs_1388 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

._toolCardCredits_eo5qs_1395 {
  font-size: 13px;
  color: var(--p-color-text-secondary);
}

._toolCardModels_eo5qs_1400 {
  font-size: 12px;
  color: var(--p-color-text-disabled);
}

._toolCardCheck_eo5qs_1405 {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--app-accent-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

._toolCardCheck_eo5qs_1405 svg {
  width: 14px;
  height: 14px;
}

/* Comparison Slider */
._comparisonSlider_eo5qs_1425 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: ew-resize;
  user-select: none;
  background:
    linear-gradient(
      45deg,
      var(--p-color-border-secondary) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      var(--p-color-border-secondary) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      var(--p-color-border-secondary) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      var(--p-color-border-secondary) 75%
    );
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0px;
}

._comparisonImageWrapper_eo5qs_1462 {
  position: absolute;
  inset: 0;
}

._comparisonImage_eo5qs_1462 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Opaque, so a transparent "before" photo never shows the draft underneath it. */
._comparisonClipWrapper_eo5qs_1475 {
  position: absolute;
  inset: 0;
  background: inherit;
  background-color: var(--p-color-bg-surface, #fff);
}

._comparisonLabel_eo5qs_1482 {
  position: absolute;
  bottom: 12px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  pointer-events: none;
}

._comparisonLabelLeft_eo5qs_1494 {
  left: 12px;
}

._comparisonLabelRight_eo5qs_1498 {
  right: 12px;
}

._comparisonHandle_eo5qs_1502 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 10;
}

._comparisonHandleLine_eo5qs_1512 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: white;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

._comparisonHandleCircle_eo5qs_1523 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--p-color-text);
}

._comparisonHandleCircle_eo5qs_1523:hover {
  background: var(--p-color-bg-surface-secondary);
}

._comparisonHandleCircle_eo5qs_1523 svg {
  width: 20px;
  height: 20px;
}

/* Comparison View Toggle */
._comparisonViewToggle_eo5qs_1549 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

._comparisonViewBtn_eo5qs_1556 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--p-color-border);
  background: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--p-color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

._comparisonViewBtn_eo5qs_1556:hover {
  background: var(--p-color-bg-surface-secondary);
  color: var(--p-color-text-secondary);
}

._comparisonViewBtnActive_eo5qs_1576 {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: white;
}

._comparisonViewBtnActive_eo5qs_1576:hover {
  background: var(--app-accent);
  color: white;
}

._modalSliderContainer_eo5qs_1587 {
  max-width: 400px;
  margin: 0 auto;
}

/* Quick Actions on Image Hover */
._quickActions_eo5qs_1593 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 10;
  animation: _fadeInUp_eo5qs_1 0.15s ease-out;
}

@keyframes _fadeInUp_eo5qs_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._quickActionBtn_eo5qs_1616 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.85);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

._quickActionBtn_eo5qs_1616:hover {
  background: var(--app-accent);
  transform: scale(1.05);
}

._quickActionBtn_eo5qs_1616:active {
  transform: scale(0.98);
}

._quickActionBtn_eo5qs_1616 svg {
  flex-shrink: 0;
}

._quickActionBtn_eo5qs_1616 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   Skeleton Loading States
   ======================================== */

@keyframes _shimmer_eo5qs_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

._skeletonCard_eo5qs_1664 {
  border-radius: 12px;
  aspect-ratio: 1;
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary) 25%,
    var(--p-color-bg-surface-hover) 50%,
    var(--p-color-bg-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: _shimmer_eo5qs_1 1.5s ease-in-out infinite;
}

._skeletonProductCard_eo5qs_1677 {
  background: var(--p-color-bg-surface);
  border-radius: 14px;
  border: 1px solid var(--p-color-border-secondary);
  padding: 16px;
}

._skeletonProductHeader_eo5qs_1684 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

._skeletonLine_eo5qs_1691 {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary) 25%,
    var(--p-color-bg-surface-hover) 50%,
    var(--p-color-bg-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: _shimmer_eo5qs_1 1.5s ease-in-out infinite;
}

._skeletonBadge_eo5qs_1704 {
  width: 60px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary) 25%,
    var(--p-color-bg-surface-hover) 50%,
    var(--p-color-bg-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: _shimmer_eo5qs_1 1.5s ease-in-out infinite;
}

/* ========================================
   Alt Text Badge
   ======================================== */

._altTextBadge_eo5qs_1722 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 5;
  /* Decoration only: the card's activation button sits underneath. */
  pointer-events: none;
}

._altTextBadgeMissing_eo5qs_1739 {
  background: rgba(191, 7, 17, 0.85);
  color: white;
}

/* ========================================
   Image Quality Warning Badge
   ======================================== */

._qualityBadge_eo5qs_1748 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 5;
  /* Decoration only: the card's activation button sits underneath. */
  pointer-events: none;
}

._qualityBadgeWarning_eo5qs_1765 {
  background: rgba(234, 179, 8, 0.9);
  color: #422006;
}

._qualityBadgeCritical_eo5qs_1770 {
  background: rgba(191, 7, 17, 0.85);
  color: white;
}

/* ========================================
   Alt Text Health Dashboard
   ======================================== */

._healthDashboard_eo5qs_1779 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-radius: 16px;
  margin-bottom: 16px;
}

._healthDashboardIcon_eo5qs_1790 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

._healthDashboardIconWarning_eo5qs_1800 {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
}

._healthDashboardIconSuccess_eo5qs_1805 {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

._healthDashboardContent_eo5qs_1810 {
  flex: 1;
  min-width: 0;
}

._healthDashboardTitle_eo5qs_1815 {
  font-size: 14px;
  font-weight: 600;
  color: var(--p-color-text);
  margin: 0 0 2px 0;
}

._healthDashboardSubtitle_eo5qs_1822 {
  font-size: 13px;
  color: var(--p-color-text-secondary);
  margin: 0;
}

._healthProgressBar_eo5qs_1828 {
  width: 100%;
  height: 6px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

._healthProgressBarFill_eo5qs_1837 {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

._healthProgressBarGood_eo5qs_1843 {
  background: var(--app-success-gradient);
}

._healthProgressBarWarning_eo5qs_1847 {
  background: linear-gradient(90deg, #eab308, #f59e0b);
}

._healthProgressBarCritical_eo5qs_1851 {
  background: linear-gradient(90deg, #bf0711, #ef4444);
}

._healthDashboardActions_eo5qs_1855 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

._healthActionBtn_eo5qs_1861 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: var(--app-accent-gradient);
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--app-accent-shadow);
  transition: all 0.2s ease;
  white-space: nowrap;
}

._healthActionBtn_eo5qs_1861:hover {
  transform: translateY(-1px);
  box-shadow: var(--app-accent-shadow-hover);
}

._healthActionBtnSecondary_eo5qs_1883 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--p-color-border);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

._healthActionBtnSecondary_eo5qs_1883:hover {
  background: var(--p-color-bg-surface-secondary);
}

/* ========================================
   Credit Warning
   ======================================== */

._creditWarning_eo5qs_1907 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

._creditWarningLow_eo5qs_1918 {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
}

._creditWarningInsufficient_eo5qs_1923 {
  background: rgba(191, 7, 17, 0.1);
  color: #bf0711;
}

/* ========================================
   Product Alt Text Progress
   ======================================== */

._productAltProgress_eo5qs_1932 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--p-color-text-secondary);
}

._productAltProgressBar_eo5qs_1940 {
  width: 60px;
  height: 4px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 2px;
  overflow: hidden;
}

._productAltProgressFill_eo5qs_1948 {
  height: 100%;
  border-radius: 2px;
}

._productAltProgressFillGood_eo5qs_1953 {
  background: #22c55e;
}

._productAltProgressFillPartial_eo5qs_1957 {
  background: #eab308;
}

._productAltProgressFillNone_eo5qs_1961 {
  background: #ef4444;
}

/* ========================================
   Onboarding / Connect Screen
   ======================================== */

._connectScreen_eo5qs_1969 {
  text-align: center;
  padding: 40px 20px;
  max-width: 520px;
  margin: 0 auto;
}

._connectTitle_eo5qs_1976 {
  font-size: 24px;
  font-weight: 700;
  color: var(--p-color-text);
  margin: 0 0 8px 0;
}

._connectSubtitle_eo5qs_1983 {
  font-size: 15px;
  color: var(--p-color-text-secondary);
  margin: 0 0 32px 0;
  line-height: 1.5;
}

._connectFeatures_eo5qs_1990 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
  text-align: left;
}

._connectFeature_eo5qs_1990 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 12px;
}

._connectFeatureIcon_eo5qs_2007 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

._connectFeatureGlyph_eo5qs_2017 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._connectFeatureTitle_eo5qs_2023 {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-color-text);
  margin: 0 0 2px 0;
}

._connectFeatureDesc_eo5qs_2030 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
  margin: 0;
  line-height: 1.4;
}




/* ========================================
   Empty State
   ======================================== */

._emptyState_eo5qs_2044 {
  text-align: center;
  padding: 48px 20px;
}

._emptyStateIcon_eo5qs_2049 {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-color-icon-secondary);
}

._emptyStateTitle_eo5qs_2061 {
  font-size: 16px;
  font-weight: 600;
  color: var(--p-color-text);
  margin: 0 0 8px 0;
}

._emptyStateText_eo5qs_2068 {
  font-size: 14px;
  color: var(--p-color-text-secondary);
  margin: 0 0 20px 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ========================================
   Image Quality Score (Product View)
   ======================================== */

._productScoreBadge_eo5qs_2082 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

._productScoreGood_eo5qs_2092 {
  background: var(--p-color-bg-surface-success);
  color: var(--p-color-text-success);
}

._productScoreWarning_eo5qs_2097 {
  background: var(--p-color-bg-surface-caution);
  color: var(--p-color-text-caution);
}

._productScoreCritical_eo5qs_2102 {
  background: var(--p-color-bg-surface-critical);
  color: var(--p-color-text-critical);
}

/* ========================================
   Workflow Page
   ======================================== */

._wfPage_eo5qs_2111 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 32px;
}

/* Source media */

._wfSectionTitle_eo5qs_2120 {
  margin: 0;
  color: var(--p-color-text);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}

._wfSourceSection_eo5qs_2128 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._wfSourceHeader_eo5qs_2134 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

._wfSourceControls_eo5qs_2142 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._wfSourceControls_eo5qs_2142 > *:first-child {
  min-width: 0;
}

._wfSelectedSourceCard_eo5qs_2153,
._wfEmptySourceCard_eo5qs_2154 {
  background: color-mix(in srgb, var(--p-color-bg-surface) 72%, transparent);
  border: 1px solid var(--p-color-border);
  border-radius: 12px;
}

._wfSelectedSourceCard_eo5qs_2153 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

._wfSelectedSourceTop_eo5qs_2167 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._wfSelectedSourceMeta_eo5qs_2174 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p-color-text-secondary);
  font-size: 12px;
}

._wfSelectedThumbGrid_eo5qs_2182 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

._wfSelectedThumb_eo5qs_2182,
._wfSelectedMore_eo5qs_2189 {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  border-radius: 9px;
}


._wfSelectedThumbImg_eo5qs_2199 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._wfSelectedThumbIndex_eo5qs_2206 {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 650;
}

/* A corner button, no veil: the picked photo stays at full strength. */
._wfSelectedThumbRemove_eo5qs_2219 {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

._wfSelectedThumb_eo5qs_2182:hover ._wfSelectedThumbRemove_eo5qs_2219,
._wfSelectedThumb_eo5qs_2182:focus-within ._wfSelectedThumbRemove_eo5qs_2219 {
  opacity: 1;
}

/* No hover on touch screens: keep the button reachable. */
@media (hover: none) {
  ._wfSelectedThumbRemove_eo5qs_2219 {
    opacity: 1;
  }
}

._wfSelectedMore_eo5qs_2189 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-color-text-secondary);
  font-size: 13px;
  font-weight: 650;
}

._wfEmptySourceCard_eo5qs_2154 {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

._wfNoStepsTitle_eo5qs_2256 {
  margin: 0;
  color: var(--p-color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

._wfNoStepsText_eo5qs_2263 {
  margin: 4px 0 0;
  color: var(--p-color-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

/* Image Selector: the picker's photo grid. */

._wfPickerImageGrid_eo5qs_2272 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

._wfRunSummary_eo5qs_2278 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 28px auto 0;
  padding: 16px;
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}

._wfRunSummaryHeader_eo5qs_2291 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

._wfRunSummaryTitle_eo5qs_2298 {
  margin: 0;
  color: var(--p-color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

._wfRunSummaryText_eo5qs_2306 {
  margin: 4px 0 0;
  color: var(--p-color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

._wfRunSummaryActions_eo5qs_2313 {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

._wfRunSummaryMetrics_eo5qs_2320 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

._wfRunSummaryMetrics_eo5qs_2320 div {
  min-width: 0;
  padding: 10px;
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  border-radius: 10px;
}

._wfRunSummaryMetrics_eo5qs_2320 dt {
  margin: 0 0 4px;
  color: var(--p-color-text-secondary);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

._wfRunSummaryMetrics_eo5qs_2320 dd {
  margin: 0;
  color: var(--p-color-text);
  font-size: 14px;
  font-weight: 700;
}

._wfRunSummaryFooter_eo5qs_2350 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--p-color-text-secondary);
  font-size: 13px;
}

._wfRunSummaryWarning_eo5qs_2359 {
  color: var(--p-color-text-critical);
  font-weight: 650;
}

@media (max-width: 700px) {
  ._wfSourceHeader_eo5qs_2134,
  ._wfSelectedSourceTop_eo5qs_2167 {
    align-items: stretch;
    flex-direction: column;
  }

  ._wfSourceControls_eo5qs_2142 {
    width: 100%;
  }

  ._wfSourceControls_eo5qs_2142 > * {
    width: 100%;
  }

  ._wfSelectedThumbGrid_eo5qs_2182 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  ._wfPickerImageGrid_eo5qs_2272 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Execution Progress */

._wfProgress_eo5qs_2391 {
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

._wfProgressHeader_eo5qs_2399 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

._wfProgressSpinner_eo5qs_2407 {
  width: 20px;
  height: 20px;
  border: 2px solid var(--p-color-border);
  border-top-color: var(--p-color-text-interactive);
  border-radius: 50%;
  animation: _wfSpin_eo5qs_1 0.8s linear infinite;
}

@keyframes _wfSpin_eo5qs_1 {
  to {
    transform: rotate(360deg);
  }
}

._wfProgressTitle_eo5qs_2422 {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text);
}

._wfProgressSteps_eo5qs_2428 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

._wfProgressStep_eo5qs_2428 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--p-color-bg-surface-secondary);
  border-radius: 8px;
  padding: 6px 12px;
}

._wfProgressStepNum_eo5qs_2446 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--p-color-bg-surface-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-color-text);
}

._wfProgressStepName_eo5qs_2459 {
  font-size: 12px;
  color: var(--p-color-text);
}

._wfProgressNote_eo5qs_2464 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
  margin: 0;
}

/* Workflow Results */

._wfResults_eo5qs_2472 {
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-radius: 12px;
  padding: 16px;
}

._wfResultsHeader_eo5qs_2479 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._wfResultsSummary_eo5qs_2488 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._wfResultsTitle_eo5qs_2495 {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-color-text);
}

._wfResultsCredits_eo5qs_2501 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
}

._wfResultsList_eo5qs_2506 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._wfResultRow_eo5qs_2512 {
  border: 1px solid var(--p-color-border);
  border-radius: 10px;
  overflow: hidden;
}

._wfResultRowMain_eo5qs_2518 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  flex-wrap: wrap;
}

._wfResultImages_eo5qs_2526 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._wfResultThumb_eo5qs_2533 {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--p-color-border);
}

._wfResultArrow_eo5qs_2541 {
  color: var(--p-color-text-secondary);
  font-size: 16px;
}

._wfResultInfo_eo5qs_2546 {
  flex: 1;
  min-width: 0;
}

._wfResultStatus_eo5qs_2551 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

._wfResultAltText_eo5qs_2558 {
  font-size: 12px;
  color: var(--p-color-text-secondary);
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

._wfResultError_eo5qs_2568 {
  font-size: 12px;
  color: var(--p-color-text-critical);
  margin: 4px 0 0;
}

._wfResultActions_eo5qs_2574 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

._wfResultDetailsToggle_eo5qs_2581 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--p-color-text-interactive);
  padding: 4px 8px;
  font: inherit;
}

._wfResultDetailsToggle_eo5qs_2581:hover {
  text-decoration: underline;
}

._wfResultDetails_eo5qs_2581 {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--p-color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._wfResultStep_eo5qs_2603 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

._wfResultStepName_eo5qs_2610 {
  font-weight: 500;
  color: var(--p-color-text);
  min-width: 100px;
}

._wfResultStepCredits_eo5qs_2616 {
  font-size: 11px;
  color: var(--p-color-text-secondary);
  margin-left: auto;
}

._wfPublishReceipt_eo5qs_2622 {
  border-top: 1px solid var(--p-color-border);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 12px;
}

._wfPublishReceiptId_eo5qs_2629 {
  color: var(--p-color-text-secondary);
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

._wfPublishReceiptItems_eo5qs_2635 {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

._wfPublishReceiptItems_eo5qs_2635 li {
  display: grid;
  gap: 2px;
}

._comparisonRange_eo5qs_2648 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  /* Keys only: pointer drags stay with the container handlers. */
  pointer-events: none;
}

._comparisonSlider_eo5qs_1425:focus-within {
  outline: 2px solid var(--p-color-border-focus, #005bd3);
  outline-offset: 2px;
}