.client-image-converter {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  padding: clamp(16px, 3vw, 28px);
  overflow: auto;
  border: 1px solid #c7d4cd;
  border-radius: 16px;
  background: #fff;
  color: #172b21;
  font: 1rem/1.5 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.client-image-converter::backdrop { background: rgb(0 0 0 / 55%); }
.client-image-converter h2 { margin: 0 0 12px; font-size: 1.4rem; line-height: 1.3; }
.client-image-converter h2:focus { outline: none; }
.client-image-converter p { margin: 12px 0; }
.client-image-filename { font-weight: 650; }
.client-image-privacy { padding: 12px; background: #edf8f1; border-radius: 10px; }
.client-image-controls, .client-image-sliders { display: grid; gap: 16px; margin: 20px 0; }
.client-image-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.client-image-field { display: grid; gap: 6px; min-width: 0; }
.client-image-field label { color: #172b21; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; }
.client-image-field input, .client-image-field select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px; border: 1px solid #80988b; border-radius: 8px; background: #fff; color: #172b21; font: inherit; }
/* The editor has a global fixed input font with !important. Keep this dialog scalable. */
.client-image-field input, .client-image-field select { font-size: 1rem !important; }
/* A native select shows one line; its option list retains the full labels. */
.client-image-field select { appearance: none; text-overflow: ellipsis; overflow: hidden; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23172b21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.client-image-field input[type=range] { margin: 0; padding: 0; border: 0; accent-color: #007a42; }
.client-image-preview { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; margin: 16px auto; border: 1px solid #c7d4cd; border-radius: 10px; box-sizing: border-box; background: #edf2ef; }
.client-image-status { min-height: 24px; }
.client-image-error { color: #9c2020; font-weight: 600; }
.client-image-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.client-image-actions button { flex: 1 1 150px; min-width: 0; min-height: 44px; height: auto; box-sizing: border-box; padding: 12px 16px; white-space: normal; border: 1px solid #80988b; border-radius: 10px; font: inherit; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: normal; text-align: center; cursor: pointer; }
.client-image-actions .client-image-primary { background: #007a42; color: #fff; border-color: #007a42; }
.client-image-actions .client-image-secondary { background: #fff; color: #172b21; }
.client-image-actions button:disabled { opacity: .65; cursor: default; }
.client-image-converter :focus-visible { outline: 3px solid #006a39; outline-offset: 3px; }
.client-image-converter [hidden] { display: none; }
@media (max-width: 480px) {
  .client-image-dimensions { grid-template-columns: minmax(0, 1fr); }
  .client-image-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}