.basic-tool-workspace .tool-workspace__preview,
.basic-tool-workspace .tool-workspace__upload {
  min-height: 440px;
}

.tool-section-heading--hero h1,
.tool-section-heading--hero h1 span {
  overflow-wrap: anywhere;
}

.basic-tool-preview {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  padding: var(--space-xl);
}

.basic-tool-preview > .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 392px;
}

.basic-tool-preview > .media-placeholder[hidden] {
  display: none;
}

.basic-tool-app {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 438px;
  max-height: 438px;
  overflow: auto;
  padding: var(--space-xl);
}

.basic-tool-app .hidden,
.basic-tool-preview .hidden {
  display: none !important;
}

.basic-tool-app .drop {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  border: 0;
  border-radius: inherit;
  color: var(--text-primary);
  background: transparent;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease;
}

.basic-tool-app .drop:hover,
.basic-tool-app .drop.over,
.basic-tool-app .drop:focus-within {
  background: transparent;
}

.basic-tool-app .drop .big {
  display: grid;
  width: 100px;
  height: 100px;
  margin-bottom: var(--space-xl);
  place-items: center;
  border-radius: var(--radius-2xl);
  color: var(--brand-pixpix-primary);
  background: var(--surface-container);
  transition: transform 180ms ease;
}

.basic-tool-app .drop:hover .big,
.basic-tool-app .drop.over .big,
.basic-tool-app .drop:focus-within .big {
  transform: translateY(-4px);
}

.basic-tool-app .drop .big svg,
.basic-tool-app .drop .big img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Keep the shared image-upload artwork aligned with Image to SVG: the art
   fills its 100px/72px media slot and does not sit on a second surface. */
.basic-tool-app .drop .big:has(> img[src$="/image-to-svg-upload.webp"]) {
  background: transparent;
}

.basic-tool-app .drop .big > img[src$="/image-to-svg-upload.webp"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
}

.basic-tool-app .drop h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-7);
}

.basic-tool-app .drop p {
  margin: var(--space-sm) 0 var(--space-xl);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
}

.basic-tool-app .drop .btn > img {
  width: 20px;
  height: 20px;
}

.basic-tool-app .btn,
.basic-tool-preview .btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 10px var(--space-xl);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--brand-default-on-primary);
  background: var(--brand-default-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.basic-tool-app .btn:hover,
.basic-tool-preview .btn:hover {
  transform: translateY(-1px);
  background: var(--brand-default-primary-hover);
}

.basic-tool-app .btn:disabled,
.basic-tool-preview .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.basic-tool-app .btn.sec,
.basic-tool-preview .btn.sec {
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
}

.basic-tool-app .btn.sm,
.basic-tool-preview .btn.sm {
  min-height: 36px;
  padding: 6px var(--space-md);
}

.basic-tool-app .controls {
  display: grid;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
}

.basic-tool-app .controls.cols2,
.basic-tool-app .controls.cols3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basic-tool-app .controls.cols3 > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.basic-tool-app .field {
  min-width: 0;
}

.basic-tool-app .field > label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.basic-tool-app input[type="text"],
.basic-tool-app input[type="number"],
.basic-tool-app input[type="url"],
.basic-tool-app input[type="email"],
.basic-tool-app input[type="tel"],
.basic-tool-app textarea,
.basic-tool-app select {
  width: 100%;
  min-height: 36px;
  padding: 7px var(--space-sm);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xl);
  outline: none;
  color: var(--text-primary);
  background-color: var(--surface-card);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
}

.basic-tool-app textarea {
  min-height: 76px;
  resize: vertical;
}

.basic-tool-app select.ui-kit-select {
  padding-right: 36px;
  appearance: none;
  background-image: none;
}

.basic-tool-app .ui-kit-select-field {
  position: relative;
}

.basic-tool-app .ui-kit-select-field::after {
  position: absolute;
  right: var(--space-sm);
  bottom: 10px;
  width: 16px;
  height: 16px;
  background: var(--text-primary);
  content: "";
  mask: url("/assets/images/ui/chevron-down.svg") center / 16px 16px no-repeat;
  pointer-events: none;
}

.basic-tool-app input[type="color"] {
  width: 52px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: pointer;
}

.basic-tool-app input[type="checkbox"],
.basic-tool-app input[type="radio"] {
  accent-color: var(--brand-pixpix-primary);
}

.basic-tool-app input:focus,
.basic-tool-app textarea:focus,
.basic-tool-app select:focus {
  border-color: var(--border-default);
  outline: none;
  box-shadow: none;
}

.basic-tool-app input:focus-visible,
.basic-tool-app textarea:focus-visible,
.basic-tool-app select:focus-visible {
  border-color: var(--border-default-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.basic-tool-app input[aria-invalid="true"],
.basic-tool-app textarea[aria-invalid="true"],
.basic-tool-app select[aria-invalid="true"] {
  border-color: var(--border-default-accent);
}

.basic-tool-app input:disabled,
.basic-tool-app textarea:disabled,
.basic-tool-app select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.basic-tool-app input[type="range"].ui-kit-slider {
  height: 16px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.basic-tool-app input[type="range"].ui-kit-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    90deg,
    var(--brand-default-primary) 0 var(--range-progress, 0%),
    var(--surface-accent) var(--range-progress, 0%) 100%
  );
}

.basic-tool-app input[type="range"].ui-kit-slider::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-xl);
  background: var(--surface-accent);
}

.basic-tool-app input[type="range"].ui-kit-slider::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-xl);
  background: var(--brand-default-primary);
}

.basic-tool-app input[type="range"].ui-kit-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -4px;
  appearance: none;
  border: var(--border-width-default) solid var(--text-primary);
  border-radius: var(--radius-full);
  background: var(--surface-background);
}

.basic-tool-app input[type="range"].ui-kit-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: var(--border-width-default) solid var(--text-primary);
  border-radius: var(--radius-full);
  background: var(--surface-background);
}

.basic-tool-app input[type="range"].ui-kit-slider:focus-visible {
  outline: none;
  box-shadow: none;
}

.basic-tool-app input[type="range"].ui-kit-slider:focus-visible::-webkit-slider-thumb,
.basic-tool-app input[type="range"].ui-kit-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.basic-tool-app .range-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.basic-tool-app .range-row input {
  min-width: 0;
  flex: 1;
}

.basic-tool-app .range-row .val,
.basic-tool-app .tag {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Circle crop editor: separate each decision into a clear vertical group and
   let the radius slider use the complete control width. */
.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-controls {
  display: grid;
  gap: var(--space-xl);
}

.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-control-row {
  min-width: 0;
}

.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-control-row--radius,
.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-radius-slider {
  width: 100%;
}

.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-radius-slider {
  display: block;
  min-width: 0;
}

.basic-tool-workspace[data-tool-route="circle-crop"] .circle-crop-actions {
  margin-top: var(--space-xl);
}

/* Keep the uploaded-image stage neutral: only the crop result itself should
   communicate a circle or rounded-square shape. */
.basic-tool-workspace[data-tool-route="circle-crop"].has-file .basic-tool-preview {
  background: var(--component-translucent-medium);
}

.basic-tool-workspace[data-tool-route="circle-crop"].has-file .basic-tool-preview canvas.preview {
  border-radius: var(--radius-none);
}

/* Collage editor: keep the three decisions easy to scan and give the spacing
   slider the full available row width. */
.basic-tool-workspace[data-tool-route="collage"] .collage-controls {
  display: grid;
  gap: var(--space-xl);
}

.basic-tool-workspace[data-tool-route="collage"] .collage-control-row {
  min-width: 0;
}

.basic-tool-workspace[data-tool-route="collage"] .collage-control-row--gap .range-row {
  width: 100%;
}

.basic-tool-workspace[data-tool-route="collage"] .collage-gap-slider {
  width: 100%;
  min-width: 0;
}

.basic-tool-workspace[data-tool-route="collage"] .collage-color-control {
  display: flex;
  width: 144px;
  max-width: 100%;
  height: 36px;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-2xs);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.basic-tool-workspace[data-tool-route="collage"] .collage-color-control:focus-within {
  border-color: var(--border-default-accent);
  box-shadow: var(--focus-ring);
}

.basic-tool-workspace[data-tool-route="collage"] .collage-color-control input[type="color"] {
  width: var(--space-lg);
  height: var(--space-lg);
  flex: 0 0 var(--space-lg);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-none);
  outline: 0;
  cursor: pointer;
  background: transparent;
}

.basic-tool-workspace[data-tool-route="collage"] .collage-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.basic-tool-workspace[data-tool-route="collage"] .collage-color-control input[type="color"]::-webkit-color-swatch,
.basic-tool-workspace[data-tool-route="collage"] .collage-color-control input[type="color"]::-moz-color-swatch {
  border: var(--border-width-default) solid var(--border-default-accent);
  border-radius: var(--radius-none);
}

.basic-tool-workspace[data-tool-route="collage"] .collage-background-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collage upload artwork uses the full 100px media slot without an extra
   surface behind it. The dark-theme upload icon follows the button label. */
.basic-tool-workspace[data-tool-route="collage"] .drop .big {
  background: transparent;
}

.basic-tool-workspace[data-tool-route="collage"] .drop .big img {
  width: 100%;
  height: 100%;
}

:root[data-theme="dark"] .basic-tool-workspace[data-tool-route="collage"] .drop .btn > img {
  filter: brightness(0) saturate(100%);
}

.basic-tool-workspace[data-tool-route="collage"].has-file .basic-tool-preview {
  background-color: var(--surface-card);
  background-image: url("/assets/images/ui/transparency-grid.webp");
  background-repeat: repeat;
  background-size: 24px 24px;
}

/* Compress editor: keep the case study in the left panel and contain the full
   editing workflow in the fixed-height right panel. */
.basic-tool-workspace[data-tool-route="compress"] .tool-workspace__preview > .media-placeholder {
  display: block;
}

.compress-tool-app {
  display: flex;
  height: 438px;
  max-height: 438px;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-xl);
}

.compress-tool-app .compress-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-md);
  row-gap: var(--space-xl);
  margin: 0 0 var(--space-md);
}

.compress-tool-app .compress-field--quality {
  grid-column: 1 / -1;
}

.compress-tool-app .compress-field > label {
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-5);
}

.compress-tool-app .compress-select,
.compress-tool-app .compress-input {
  height: 36px;
  min-height: 36px;
  padding: 0 var(--space-2xs);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  background-color: var(--surface-card);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
}

.compress-tool-app input.compress-input {
  min-height: 36px;
}

.compress-tool-app .compress-input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.compress-tool-app .compress-select-field {
  position: relative;
}

.compress-tool-app .compress-select {
  padding-right: 32px;
  appearance: none;
}

.compress-tool-app .compress-select-field::after {
  position: absolute;
  right: var(--space-2xs);
  bottom: 10px;
  width: 16px;
  height: 16px;
  background: var(--text-primary);
  content: "";
  mask: url("/assets/images/ui/chevron-down.svg") center / 16px 16px no-repeat;
  pointer-events: none;
}

.compress-tool-app .compress-select:focus,
.compress-tool-app .compress-input:focus {
  border-color: var(--border-default);
  outline: none;
  box-shadow: none;
}

.compress-tool-app .compress-select:focus-visible,
.compress-tool-app .compress-input:focus-visible {
  border-color: var(--border-default-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.compress-tool-app .range-row {
  min-height: 16px;
  gap: var(--space-md);
}

.compress-tool-app .compress-slider {
  height: 16px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.compress-tool-app .compress-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    90deg,
    var(--brand-default-primary) 0 var(--range-progress),
    var(--surface-accent) var(--range-progress) 100%
  );
}

.compress-tool-app .compress-slider::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-xl);
  background: var(--surface-accent);
}

.compress-tool-app .compress-slider::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-xl);
  background: var(--brand-default-primary);
}

.compress-tool-app .compress-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -4px;
  appearance: none;
  border: var(--border-width-default) solid var(--text-primary);
  border-radius: var(--radius-full);
  background: var(--surface-background);
}

.compress-tool-app .compress-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: var(--border-width-default) solid var(--text-primary);
  border-radius: var(--radius-full);
  background: var(--surface-background);
}

.compress-tool-app .compress-slider:focus-visible {
  outline: none;
}

.compress-tool-app .compress-slider:focus {
  border-color: transparent;
  box-shadow: none;
}

.compress-tool-app .compress-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.compress-tool-app .compress-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.compress-tool-app .range-row .val {
  min-width: 40px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: right;
}

.compress-tool-app .compress-actions {
  flex: 0 0 auto;
  margin: 0;
}

.compress-tool-app .compress-results {
  display: grid;
  min-height: 0;
  margin-top: var(--space-md);
  padding-right: var(--space-3xs);
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--space-2xs);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.compress-tool-app .compress-result-item {
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs);
  border: var(--border-width-default) solid var(--border-default-muted);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.compress-tool-app .compress-result-item .thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.compress-tool-app .compress-result-item .meta {
  min-width: 0;
  flex: 1;
}

.compress-tool-app .compress-result-item .nm {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-5);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compress-tool-app .compress-result-item .st {
  margin-top: var(--space-4xs);
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-4);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compress-tool-app .compress-result-item .btn.sm {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 5px var(--space-sm);
}

/* Shared batch editor: the case image stays fixed on the left. Upload,
   settings, actions and file results all live in the right editor. */
.basic-tool-workspace[data-editor-pattern="batch"] .tool-workspace__preview > .media-placeholder {
  display: grid;
  place-items: center;
}

.basic-tool-workspace[data-editor-pattern="batch"] .basic-tool-case-asset {
  width: min(88%, 560px);
  height: min(88%, 360px);
  object-fit: contain;
}

.batch-tool-app {
  display: flex;
  height: 438px;
  max-height: 438px;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-xl);
}

.batch-tool-app .controls,
.batch-tool-app > .note,
.batch-tool-app > .toolbar,
.batch-tool-app > .awr-row,
.batch-tool-app > .spt-panel {
  flex: 0 0 auto;
}

.batch-tool-app .batch-tool-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  flex: 0 0 auto;
  gap: var(--space-sm);
  margin: 0;
}

.batch-tool-app .batch-tool-actions .btn {
  width: 100%;
  min-width: 0;
  padding-inline: var(--space-sm);
}

.batch-tool-app .batch-add-files__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: url("/assets/images/ui/tool-upload.svg") center / contain no-repeat;
  mask: url("/assets/images/ui/tool-upload.svg") center / contain no-repeat;
}

/* Compress keeps a compact action group like the refined edit-state design.
   Four equal grid tracks made the add button wrap and look like a segmented
   control at this panel width. */
.compress-tool-app .compress-actions.batch-tool-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-top: 0;
}

.compress-tool-app .compress-actions.batch-tool-actions .btn {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  padding-inline: 14px;
  white-space: nowrap;
}

.compress-tool-app .compress-actions.batch-tool-actions .batch-add-files__icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

/* Format converter uses the same compact batch-action pattern as Compress.
   Keep labels and the add icon on one line instead of stretching four buttons
   into a segmented-looking 70px grid row. */
.basic-tool-workspace[data-tool-route="convert"] .batch-tool-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-top: 0;
}

.basic-tool-workspace[data-tool-route="convert"] .batch-tool-actions .btn {
  width: auto;
  height: 44px;
  min-width: 0;
  min-height: 44px;
  flex: 0 0 auto;
  padding-inline: 14px;
  box-sizing: border-box;
  white-space: nowrap;
}

.basic-tool-workspace[data-tool-route="convert"] .batch-tool-actions .batch-add-files__icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.basic-tool-workspace[data-tool-route="convert"] .convert-item-action {
  display: grid;
  width: 64px;
  min-width: 64px;
  min-height: 36px;
  place-items: center end;
}

.basic-tool-workspace[data-tool-route="convert"] .convert-status-tag {
  min-height: 28px;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--surface-container);
  white-space: nowrap;
}

.basic-tool-workspace[data-tool-route="convert"] .convert-status-tag--error {
  color: var(--status-danger-text, var(--text-primary));
}

.batch-tool-app .batch-tool-results {
  display: flex;
  min-height: 0;
  margin: var(--space-md) 0 0;
  padding: 0 var(--space-3xs) 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  flex-direction: column;
  align-content: initial;
  gap: var(--space-2xs);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.batch-tool-app .batch-tool-results > .item,
.batch-tool-app .batch-tool-results > li,
.batch-tool-app .batch-tool-results > .wm-row,
.batch-tool-app .batch-tool-results > .spt-row,
.batch-tool-app .batch-tool-results > .awr-file {
  min-height: 56px;
  flex: 0 0 auto;
}

.batch-tool-app .batch-tool-results > .wm-row,
.batch-tool-app .batch-tool-results > .spt-row,
.batch-tool-app .batch-tool-results > .awr-file {
  display: flex !important;
  min-width: 0;
  align-items: center !important;
  gap: var(--space-sm) !important;
  padding: var(--space-2xs) !important;
  border: var(--border-width-default) solid var(--border-default-muted) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface-card) !important;
}

.batch-tool-app .batch-tool-results .item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs);
  border: var(--border-width-default) solid var(--border-default-muted);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.batch-tool-app .batch-tool-results .item .thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.batch-tool-app .batch-tool-results .item .meta {
  min-width: 0;
  flex: 1;
}

.batch-tool-app .batch-tool-results .item .nm,
.batch-tool-app .batch-tool-results .item .st {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-tool-app .batch-tool-results .item .nm {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-5);
}

.batch-tool-app .batch-tool-results .item .st {
  margin-top: var(--space-4xs);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-4);
}

.basic-tool-app .seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--space-4xs);
  padding: var(--space-4xs);
  border: var(--border-width-default) solid var(--border-overlay-muted);
  border-radius: var(--radius-2xl);
  background: var(--component-translucent-inverse);
}

.basic-tool-app .seg button {
  min-width: 0;
  min-height: 32px;
  flex: 1 1 auto;
  padding: 7px var(--space-sm);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  background: var(--component-ghost);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.basic-tool-app .seg button.on {
  color: var(--text-primary);
  background: var(--component-translucent-medium);
  box-shadow: none;
}

.basic-tool-app .seg button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--component-focus-ring);
}

.basic-tool-app .chk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.basic-tool-app .chk.ui-checkbox-group {
  min-height: 24px;
  cursor: pointer;
}

.basic-tool-app .actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.basic-tool-app .actions .btn {
  width: 100%;
  min-width: 0;
}

.basic-tool-workspace[data-tool-route="favicon"] .favicon-actions {
  margin-top: 0;
}

.basic-tool-workspace[data-tool-route="favicon"] .favicon-preview {
  display: flex;
  width: 100%;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--border-width-default) solid var(--border-default-muted);
}

.basic-tool-workspace[data-tool-route="favicon"] .favicon-preview__item {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
}

.basic-tool-workspace[data-tool-route="favicon"] .favicon-preview__canvas {
  display: block;
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  image-rendering: auto;
}

.basic-tool-workspace[data-tool-route="favicon"] .favicon-preview__label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-4);
}

.basic-tool-app .ui-kit-button:hover {
  transform: none;
}

.basic-tool-app .note,
.basic-tool-app .muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
}

.basic-tool-app .note {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default-muted);
  border-radius: var(--radius-lg);
  background: var(--surface-container);
}

.basic-tool-app .tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  font-size: var(--font-size-xs);
}

.basic-tool-app .toolbar,
.basic-tool-app .awr-row,
.basic-tool-app .awr-btns,
.basic-tool-app .spt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.basic-tool-app .toolbar,
.basic-tool-app .awr-row {
  justify-content: space-between;
}

.basic-tool-app .wm-list,
.basic-tool-app .awr-files,
.basic-tool-app .spt-files {
  min-width: 0;
}

.basic-tool-preview > .results,
.basic-tool-preview > div:not(.media-placeholder) {
  width: 100%;
  max-height: 396px;
  overflow: auto;
}

.basic-tool-preview > ul,
.basic-tool-preview > ol,
.basic-tool-preview > canvas,
.basic-tool-preview > img {
  width: 100%;
  max-height: 396px;
  overflow: auto;
}

.basic-tool-preview > ul,
.basic-tool-preview > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.basic-tool-preview .awr-file,
.basic-tool-preview .wm-row,
.basic-tool-preview .spt-row {
  border-color: var(--border-default-muted);
  background: var(--surface-card);
}

.basic-tool-preview .results {
  display: grid;
  gap: var(--space-sm);
}

.basic-tool-preview .item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border-default-muted);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.basic-tool-preview .item .thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.basic-tool-preview .item .meta {
  min-width: 0;
  flex: 1;
}

.basic-tool-preview .item .nm {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.basic-tool-preview .item .st {
  margin-top: var(--space-3xs);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.basic-tool-workspace[data-tool-route="date-stamp"].has-file .basic-tool-preview {
  padding: 0;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .basic-tool-preview > .results {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-height: none;
  overflow: hidden;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-md) var(--space-sm);
  border-right: var(--border-width-default) solid var(--border-default);
  background: transparent;
  scrollbar-gutter: stable;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  outline: 0;
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb:hover {
  border-color: var(--border-default-accent);
  transform: translateY(-1px);
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb.is-active {
  border-color: var(--feedback-info-primary);
  box-shadow: none;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb:focus-visible {
  box-shadow: var(--focus-ring);
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Date-stamp editor: keep the date inputs paired, then give size, color, and
   position their own full-width rows. */
.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row--primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row--size .range-row,
.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row--size input[type="range"],
.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row .seg {
  width: 100%;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row .field > label {
  margin-bottom: var(--space-2xs);
}

.basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row:last-child {
  margin-bottom: 0;
}

.basic-tool-workspace[data-tool-route="date-stamp"] .batch-tool-actions {
  margin-top: auto;
}

.basic-tool-preview canvas,
.basic-tool-preview img.preview {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px !important;
  margin-inline: auto;
  border-radius: var(--radius-2xl);
}

/* Social-cover generator: the canvas must preserve the selected export ratio.
   It is centered inside the fixed preview panel instead of stretching to the
   panel's landscape dimensions (especially important for 1:1 and 9:16). */
.basic-tool-workspace[data-tool-route="og-image"] .basic-tool-preview > canvas.preview {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 360px !important;
  object-fit: contain;
}

.basic-tool-workspace[data-tool-route="og-image"] .og-image-title-field {
  margin-top: var(--space-sm);
}

/* Watermark preview: mirror the crop editor's contain behavior. The canvas
   keeps square corners while the surrounding stage exposes transparency. */
.basic-tool-workspace[data-tool-route="watermark"].has-file .basic-tool-preview {
  background-color: var(--surface-card);
  background-image: url("/assets/images/ui/transparency-grid.webp");
  background-repeat: repeat;
  background-size: 24px 24px;
}

.basic-tool-workspace[data-tool-route="watermark"] .basic-tool-preview > .watermark-preview-stage {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  max-height: none;
  place-items: center;
  overflow: hidden;
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-preview-canvas {
  display: block;
  max-width: none;
  max-height: none !important;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  box-shadow: none;
}

/* Match the lower control rows' vertical rhythm at the two transitions called
   out in the design review: mode to content, then content to positioning. */
.basic-tool-workspace[data-tool-route="watermark"] .watermark-control-section--mode,
.basic-tool-workspace[data-tool-route="watermark"] .watermark-control-section--content {
  margin-bottom: var(--space-lg);
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control {
  display: flex;
  width: 144px;
  max-width: 100%;
  height: 36px;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-2xs);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control:focus-within {
  border-color: var(--border-default-accent);
  box-shadow: var(--focus-ring);
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control input[type="color"] {
  width: var(--space-lg);
  height: var(--space-lg);
  flex: 0 0 var(--space-lg);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-none);
  outline: 0;
  cursor: pointer;
  background: transparent;
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control input[type="color"]::-webkit-color-swatch,
.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-control input[type="color"]::-moz-color-swatch {
  border: var(--border-width-default) solid var(--border-default-accent);
  border-radius: var(--radius-none);
}

.basic-tool-workspace[data-tool-route="watermark"] .watermark-color-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.basic-tool-workspace.has-file .basic-tool-app {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.basic-tool-workspace.has-file .basic-tool-app .drop {
  display: none;
}

.basic-tool-workspace.has-file .tool-workspace__upload {
  border-width: var(--border-width-default);
  border-style: solid;
  border-color: var(--border-default-muted);
}

.basic-tool-workspace.has-file .tool-workspace__upload::before {
  display: none;
}

.basic-tool-workspace:not(:has(.basic-tool-app .drop)) .tool-workspace__upload {
  border-style: solid;
  border-color: var(--border-default-muted);
}

.tool-effect {
  background: var(--surface-container);
}

.tool-effect__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.tool-effect-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-lg);
}

.tool-effect-card__media {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-4xl);
  overflow: hidden;
}

.tool-effect-card__copy h3,
.tool-effect-card__copy p {
  margin: 0;
}

.tool-effect-card__copy h3 {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-7);
}

.tool-effect-card__copy p {
  margin-top: var(--space-2xs);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-5);
}

@media (max-width: 1023px) {
  .tool-effect__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .tool-section-heading--hero h1 span {
    white-space: normal;
  }

  .tool-section-heading--hero h1.tool-title--long {
    font-size: 30px;
    line-height: 36px;
  }

  .basic-tool-workspace .tool-workspace__preview,
  .basic-tool-workspace .tool-workspace__upload,
  .basic-tool-app {
    min-height: 330px;
    max-height: 330px;
  }

  .basic-tool-preview,
  .basic-tool-app {
    padding: var(--space-md);
  }

  .basic-tool-preview > .media-placeholder {
    min-height: 298px;
  }

  .basic-tool-app .drop {
    min-height: 298px;
    padding: var(--space-lg) var(--space-md);
  }

  .basic-tool-app .drop .big {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-md);
  }

  .basic-tool-app .drop .big svg,
  .basic-tool-app .drop .big img {
    width: 44px;
    height: 44px;
  }

  .basic-tool-app .controls.cols2,
  .basic-tool-app .controls.cols3 {
    grid-template-columns: 1fr;
  }

  .basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-control-row--primary {
    grid-template-columns: 1fr;
  }

  .basic-tool-workspace[data-tool-route="date-stamp"] .basic-tool-preview > .results {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-list {
    gap: var(--space-2xs);
    padding: var(--space-sm);
  }

  .basic-tool-workspace[data-tool-route="date-stamp"] .date-stamp-preview-thumb {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .compress-tool-app {
    height: 330px;
    max-height: 330px;
  }

  .batch-tool-app {
    height: 330px;
    max-height: 330px;
  }

  .batch-tool-app .controls.cols2,
  .batch-tool-app .controls.cols3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compress-tool-app .compress-controls.cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-md);
  }

  .compress-tool-app .compress-field--quality {
    grid-column: 1 / -1;
  }

  .compress-tool-app .compress-actions {
    gap: var(--space-2xs);
  }

  .compress-tool-app .compress-actions .btn {
    min-height: 40px;
    padding-inline: var(--space-md);
  }

  .compress-tool-app .compress-actions.batch-tool-actions {
    flex-wrap: wrap;
  }

  .compress-tool-app .compress-actions.batch-tool-actions .btn {
    min-width: 0;
    flex: 1 1 calc(50% - var(--space-2xs));
    padding-inline: var(--space-sm);
  }

  .basic-tool-workspace[data-tool-route="convert"] .batch-tool-actions {
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .basic-tool-workspace[data-tool-route="convert"] .batch-tool-actions .btn {
    height: 40px;
    min-height: 40px;
    flex: 1 1 calc(50% - var(--space-2xs));
    padding-inline: var(--space-sm);
  }

  .tool-effect-card__media {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .basic-tool-app .drop,
  .basic-tool-app .drop .big,
  .basic-tool-app .btn {
    transition-duration: 0.01ms;
  }

  .basic-tool-app .drop:hover .big,
  .basic-tool-app .drop.over .big,
  .basic-tool-app .drop:focus-within .big,
  .basic-tool-app .btn:hover {
    transform: none;
  }
}

/* Synthetic performer tag starts as a single, centered upload surface. The
   outer editor card owns the boundary, so the upload state needs no nested
   panel treatment or step heading. */
.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .basic-tool-app:not(.spt-has-files) {
  overflow: hidden;
  padding: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage {
  display: flex;
  width: 100%;
  min-height: 438px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage[hidden] {
  display: none;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-dropzone {
  width: 100%;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage .drop {
  min-height: 0;
  padding: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage .spt-dirow {
  display: flex;
  justify-content: center;
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage .spt-dirow .btn {
  width: auto;
  min-height: 44px;
  white-space: nowrap;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage .spt-dirow .btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* After upload, settings, selected files and actions form one continuous
   editor. The file list owns the only internal scroll area so filenames and
   status stay visible without splitting the flow into numbered cards. */
.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .basic-tool-app.spt-has-files {
  overflow: hidden;
  padding: var(--space-lg);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-sm);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor[hidden] {
  display: none;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-field {
  flex: 0 0 auto;
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-lb {
  margin-bottom: var(--space-2xs);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-input {
  min-height: 36px;
  padding: 7px var(--space-sm);
  border-color: var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: inherit;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-hint {
  margin-top: var(--space-2xs);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-4);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-check {
  min-height: 20px;
  flex: 0 0 auto;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-check input {
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-file-summary {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-2xs);
  border-top: var(--border-width-default) solid var(--border-default-muted);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-file-summary__label {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-file-summary .spt-count {
  margin: 0;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-xs);
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-files.batch-tool-results {
  min-height: 64px;
  flex: 1 1 auto;
  gap: var(--space-3xs);
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-row {
  margin: 0;
  padding: 6px var(--space-sm) !important;
  box-shadow: none;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-prog {
  height: 4px;
  flex: 0 0 4px;
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: var(--space-sm);
  margin: 0;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px var(--space-sm);
  border-radius: var(--radius-full);
  box-shadow: none;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-actions .spt-primary {
  color: var(--brand-default-on-primary) !important;
  border-color: var(--brand-default-primary) !important;
  background: var(--brand-default-primary) !important;
}

.basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-actions .spt-primary:hover {
  background: var(--brand-default-primary-hover) !important;
}

@media (max-width: 767px) {
  .basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-upload-stage {
    min-height: 330px;
    gap: var(--space-sm);
  }

  .basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .basic-tool-app.spt-has-files {
    padding: var(--space-md);
  }

  .basic-tool-workspace[data-tool-route="synthetic-performer-tag"] .spt-editor .spt-actions {
    grid-template-columns: 1fr;
  }
}