/* Keep the shared decorative circles outside the page's scrollable area. */
body[data-tool="image-converter"] .page-glow { position: fixed; }
.image-workspace { display: grid; gap: 18px; }
.image-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; border: 2px dashed #c7c2e0; border-radius: 18px; background: #f6f4ff; text-align: center; cursor: pointer; transition: background 160ms, border-color 160ms; }
.image-dropzone:hover, .image-dropzone.is-dragging { background: #eeebff; border-color: var(--purple-dark); }
.image-dropzone:focus-within { outline: 3px solid var(--purple-dark); outline-offset: 3px; }
.image-dropzone strong { font-size: 18px; }
.image-dropzone > span:not(.image-upload-icon, .image-pick-label) { font-size: 12px; line-height: 1.7; color: var(--muted); }
.image-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.image-upload-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--purple-dark); border-radius: 14px; background: #e7e2ff; }
.image-upload-icon svg { width: 26px; height: 26px; }
.image-pick-label { padding: 9px 18px; border-radius: 9px; background: white; border: 1px solid #ded8f4; font-size: 12px; font-weight: 700; }
.image-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.image-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 1.3fr); gap: 18px; align-items: start; }
.image-options .field-group { min-width: 0; }
.image-options label { font-size: 12px; line-height: 1.5; }
.image-quality label { display: flex; justify-content: space-between; gap: 12px; }
.image-quality output { color: var(--purple-dark); font-variant-numeric: tabular-nums; }
.image-quality input { width: 100%; height: 44px; margin: 0; accent-color: var(--purple-dark); direction: ltr; }
.image-options :disabled { opacity: .55; cursor: not-allowed; }
.image-action-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.image-workspace .tool-status { margin: 0; font-size: 12px; line-height: 1.7; }
.image-progress { width: 100%; height: 5px; accent-color: var(--purple-dark); }
.image-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.image-preview-card { display: grid; grid-template-rows: auto 260px auto; overflow: hidden; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.image-preview-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px; }
.image-preview-card figcaption strong { font-size: 13px; }
.image-preview-card figcaption span { color: var(--muted); font-size: 11px; direction: ltr; unicode-bidi: isolate; }
.image-preview-surface { display: grid; place-items: center; min-height: 0; overflow: hidden; background-color: #fff; background-image: conic-gradient(#f0f0f0 25%, transparent 0 50%, #f0f0f0 0 75%, transparent 0); background-size: 20px 20px; }
.image-preview-surface img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.image-preview-surface p { padding: 20px; background: #ffffffeb; color: var(--muted); font-size: 12px; text-align: center; }
.image-filename { min-height: 40px; margin: 0; padding: 12px 16px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.image-result { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px; border: 1px solid #d7e6d7; border-radius: 16px; background: #f1f7f0; }
.image-result strong { font-size: 20px; color: #376743; }
.image-result p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.image-result a { flex-shrink: 0; }
.image-engine-note { border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 700px) {
  .image-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .image-quality { grid-column: 1 / -1; }
  .image-comparison { grid-template-columns: 1fr; }
  .image-preview-card { grid-template-rows: auto 230px auto; }
  .image-result { align-items: flex-start; flex-direction: column; }
  .image-result a { width: 100%; }
  .image-dropzone { padding: 24px 14px; }
}