:root { --iw-settings-panel-width: clamp(350px,27vw,420px); }
.iw-rotation-slider { display: flex; align-items: center; gap: 12px; }
.iw-rotation-slider input { flex: 1; min-width: 0; }
.iw-rotation-slider output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.tool-app-page:not(.tool-panel-active) .tool-settings-panel,
.tool-app-page:not(.tool-panel-active) .tool-panel-opener { display: none; }
.tool-app-page .tool-hero > .container { margin-inline: auto; }
.tool-app-page { --iw-primary: #b03359; --iw-primary-dark: #922747; --iw-pink-soft: #f8eaf0; --color-navy: #0f1628; --color-body: #374151; --color-border: #e9dde3; --focus-ring: #d95b84; background: #fdf8fa; }
.tool-settings-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--iw-settings-panel-width); height: 100dvh; z-index: 1050; display: flex; flex-direction: column; background: white; border-left: 1px solid #e9dde3; box-shadow: -12px 0 32px rgba(15,22,40,.07); }
.tool-settings-panel__header { flex: 0 0 auto; padding: 18px 20px; border-bottom: 1px solid #e9dde3; }
.tool-settings-panel__header h2 { font-size: 1.2rem; margin: 0; letter-spacing: -.02em; }
.tool-settings-panel__header p { margin: 8px 0 0; font-size: .85rem; color: #667085; }
.tool-panel-header-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tool-panel-header-actions .text-link { background: none; border: 0; padding: 0; min-height: 44px; font-size: .85rem; }
.tool-settings-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; scrollbar-color: #ddbbc8 transparent; }
.tool-settings-panel__footer { flex: 0 0 auto; padding: 16px 20px; background: white; border-top: 1px solid #e9dde3; }
.tool-settings-panel .iw-editor-actions { display: grid; position: static; padding: 0; margin: 0; gap: 8px; background: white; border: 0; }
.tool-settings-panel .iw-editor-actions .btn { width: 100%; }
.tool-settings-panel .tool-option-groups { display: grid; gap: 16px; }
.tool-settings-panel .option-group, .tool-settings-panel .iw-custom-controls { padding: 0; margin: 0 0 16px; border: 0; background: white; min-width: 0; }
.tool-settings-panel legend { float: none; font-size: .875rem; font-weight: 600; margin: 0 0 6px; width: auto; }
.tool-settings-panel .option-group > p, .tool-settings-panel .option-card small, .tool-settings-panel .option-card > i { display: none; }
.tool-settings-panel .option-card-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-settings-panel .option-card { position: relative; flex: 1 1 70px; min-height: 44px; padding: 8px; border: 1px solid #e9dde3; border-radius: 6px; box-shadow: none; background: white; display: flex; align-items: center; justify-content: center; color: #0f1628; font-size: .82rem; text-align: center; }
.tool-settings-panel .option-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-settings-panel .option-card:has(input:checked) { background: #f8eaf0; border-color: #b03359; color: #922747; }
.tool-settings-panel .option-card:has(input:focus-visible) { outline: 2px solid #d95b84; outline-offset: 2px; }
.tool-settings-panel .option-card span { font-size: .82rem; font-weight: 500; }
.tool-settings-panel .form-control, .tool-settings-panel .form-select { min-height: 44px; font-size: .95rem; }
.tool-settings-panel input[type=range] { accent-color: #b03359; }
.tool-settings-panel input[type=range]::-webkit-slider-thumb { background: #b03359; }
.tool-settings-panel input[type=range]::-moz-range-thumb { background: #b03359; }
.tool-settings-panel output { float: right; color: #922747; font-size: .875rem; }
.tool-settings-panel label:has([data-custom-quality]) { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.tool-settings-panel label:has([data-custom-quality]) output { grid-column: 2; grid-row: 1; }
.tool-settings-panel label:has([data-custom-quality]) input { grid-row: 2; grid-column: 1 / -1; }
.tool-settings-panel label { font-size: .875rem; }
.tool-settings-panel .iw-custom-controls label { display: block; margin-bottom: 12px; }
.tool-settings-panel .iw-custom-controls label:has([data-custom-quality]) { display: grid; }
.tool-settings-panel .tool-option-groups > fieldset { margin-bottom: 0; }
.tool-settings-panel .iw-custom-controls small { font-size: .8rem; color: #667085; }
.tool-settings-panel .iw-toggle-option { display: flex; gap: 10px; min-height: 44px; align-items: center; }
.tool-settings-panel .iw-advanced-settings { padding: 0; margin: 16px 0; border: 0; }
.tool-advanced-toggle { display: block; width: 100%; min-height: 44px; text-align: left; border: 0; border-block: 1px solid #e9dde3; background: white; padding: 10px 0; color: #0f1628; font-size: .875rem; }
.tool-advanced-toggle::after { content: '+'; float: right; }
.tool-advanced-toggle[aria-expanded=true]::after { content: '−'; }
.tool-advanced-toggle + div { padding-top: 16px; }
.tool-settings-panel .iw-editor-panel-card, .tool-settings-panel .iw-editor-file-card { padding: 0; border: 0; box-shadow: none; margin: 0 0 16px; }
.tool-settings-panel .iw-editor-status-badge, .tool-settings-panel .iw-options-preview-card { display: none; }
.tool-settings-panel .side-panel-help { padding: 12px 0 0; margin-top: 12px; font-size: .8rem; }
.tool-panel-status { font-size: .85rem; color: #667085; }
.tool-panel-processing { text-align: center; padding: 32px 0; }
.tool-settings-panel.is-processing .tool-settings-panel__body > :not(.tool-panel-processing) { display: none; }
.tool-settings-panel.is-processing [data-tool-panel-reset] { visibility: hidden; }
.tool-settings-panel .btn .iw-spinner { width: 16px; height: 16px; margin: 0 8px 0 0; border-color: #fff7; border-top-color: white; }
.tool-panel-backdrop { position: fixed; inset: 0; z-index: 1049; background: #0f162866; border: 0; }
.tool-app-page .iw-ready-workspace, .tool-app-page .iw-editor-shell--focused.tool-workspace-layout { display: block; min-height: 0; }
.tool-app-page .iw-ready-preview-panel, .tool-app-page .iw-editor-main.tool-workspace-main { width: 100%; min-height: 0; }
.tool-app-page .iw-ready-heading-row { display: none; }
.tool-app-page .selected-file { display: flex; flex-direction: column; }
.tool-app-page .selected-file-copy { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; padding-bottom: 12px; font-size: .85rem; }
.tool-app-page [data-file-name] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-app-page .selected-preview { width: 100%; height: auto; min-height: 220px; max-height: 65dvh; display: grid; place-items: center; }
.tool-app-page .selected-preview img { display: block; max-width: 100%; max-height: 60dvh; width: auto; height: auto; object-fit: contain; }
.tool-app-page .upload-panel .iw-ready-workspace .selected-preview.tool-preview-stage { height: auto; min-height: 220px; max-height: 60dvh; aspect-ratio: auto; padding: 16px; background: #f5f7fa; }
.tool-app-page .upload-panel .iw-ready-workspace .selected-preview.tool-preview-stage img { max-width: 100%; max-height: 55dvh; height: auto; width: auto; object-fit: contain; }
.tool-app-page .upload-panel .iw-ready-workspace .selected-file { display: flex; flex-direction: column; padding: 0; }
.tool-app-page .selected-file-copy { position: static; background: none; border: 0; }
.tool-app-page .upload-panel .selected-file strong { color: #0f1628; }
.tool-app-page .upload-panel .selected-file span { color: #667085; }
.tool-app-page .upload-panel .iw-ready-workspace .selected-preview.tool-preview-stage img { max-height: clamp(180px,45dvh,520px); }
.tool-panel-filename { overflow-wrap: anywhere; font-size: .85rem; color: #667085; }
.tool-panel-estimate { margin-top: 12px; font-size: .8rem; color: #667085; }
.tool-app-page .iw-editor-error-main { padding: 32px 24px; text-align: center; }
.tool-app-page .iw-editor-error-main p { max-width: 58ch; margin-inline: auto; }
.tool-app-page .iw-editor-processing-main .iw-editor-processing-copy { max-width: 100%; }
.tool-settings-panel .tool-panel-status { display: none; }
.tool-app-page .selected-file-copy strong { flex-basis: auto; }
.tool-app-page [data-file-thumb] { object-fit: contain; flex: 0 0 36px; }
.tool-settings-panel .tool-panel-status { background: none; border: 0; padding: 0; }
.tool-settings-panel__header { padding-block: 16px; }
.tool-panel-header-actions { margin-top: 0; }
.tool-settings-panel .option-card-grid:has([name="compression-level"]) { flex-wrap: nowrap; }
.tool-settings-panel .option-card-grid:has([name="compression-level"]) .option-card { min-height: 44px; padding: 6px 4px; }
.tool-app-page:has(.has-file) #tool-page-secondary-content, .tool-app-page:has([data-editor-state]) #tool-page-secondary-content { display: none; }
.tool-app-page .iw-ready-workspace[hidden] { display: none; }
.tool-panel-result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; }
.tool-panel-result-summary dt { font-size: .8rem; font-weight: 400; color: #667085; }
.tool-panel-result-summary dd { margin: 4px 0 0; font-size: .95rem; font-weight: 600; }
@media(min-width:1024px) {
  .tool-app-page { padding-right: 0; }
  .tool-app-page .site-header { position: sticky; top: 0; z-index: 1051; }
  .tool-panel-active #site-main, .tool-panel-active > .premium-footer { width: calc(100% - var(--iw-settings-panel-width)); margin-right: var(--iw-settings-panel-width); }
  .tool-settings-panel { top: var(--iw-tool-header-height,80px); height: calc(100dvh - var(--iw-tool-header-height,80px)); }
  .tool-panel-close, .tool-panel-opener { display: none; }
}
@media(max-width:1023.98px) {
  .tool-app-page { padding-right: 0; }
  .tool-settings-panel { width: min(420px,92vw); transform: translateX(100%); visibility: hidden; transition: transform 180ms ease,visibility 180ms; }
  .tool-settings-panel.is-open { transform: translateX(0); visibility: visible; }
  .tool-panel-open { overflow: hidden; }
  .tool-panel-opener { display: inline-flex; margin-top: 12px; }
}
@media(max-width:359px) { .tool-settings-panel { width: 100vw; } }
@media(min-width:992px) and (max-width:1199px) {
  .tool-app-page .site-header .iw-brand-logo { width: 180px; }
  .tool-app-page .iw-header-tool, .tool-app-page .iw-header-links .iw-tools-disclosure summary { font-size: .85rem; }
  .tool-app-page .site-header .btn { font-size: .875rem; }
  .tool-app-page .site-header .navbar { height: auto; }
  .tool-app-page .iw-header-fluid { flex-wrap: wrap; padding-block: 10px; gap: 8px; }
  .tool-app-page .site-nav-panel { flex-basis: 100%; }
}
@media(prefers-reduced-motion:reduce) { .tool-settings-panel { transition: none; } }

/* One visual system for upload, processing and output across every tool. */
.tool-app-page .tool-hero > .container { max-width: 1200px; }
.tool-app-page.tool-panel-active .tool-hero > .container { max-width: 1100px; }
.tool-app-page .tool-hero-copy { max-width: 780px; }
.tool-app-page .upload-panel { border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 6px 24px rgb(15 22 40 / 4%); }
.tool-app-page .upload-dropzone { background: #fcf8fa; border: 1.5px dashed #c5a8b3; border-radius: 10px; min-height: 300px; transition: background 180ms ease, border-color 180ms ease; }
.tool-app-page .upload-dropzone:hover, .tool-app-page .upload-dropzone:focus-visible, .tool-app-page .upload-dropzone.dragover { background: #f8eaf0; border-color: var(--iw-primary); }
.tool-app-page .upload-dropzone > span:not(.btn):not(.upload-tool-icon) { max-width: 62ch; }
.tool-app-page .upload-help { background: #fff; border-top: 1px solid var(--color-border); margin-top: 20px; padding-top: 18px; }
.tool-app-page .upload-privacy-note { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: #536174; }
.tool-app-page .upload-privacy-note a { color: var(--iw-primary-dark); text-underline-offset: 3px; }
.tool-app-page .iw-spinner { display: inline-block; box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex: 0 0 40px; margin: 0 0 18px; padding: 0; border: 3px solid #ead6de; border-top: 3px solid #a92b50; border-radius: 50%; background: transparent; opacity: 1; animation: iw-spin .85s linear infinite; }
.tool-app-page .btn .iw-spinner { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex-basis: 18px; margin: 0; border-width: 2px; border-color: #ffffff80; border-top-color: #fff; }
.tool-app-page .iw-editor-processing-main { min-height: 330px; padding: 40px 20px; background: #fff; }
.tool-app-page .iw-editor-processing-copy { display: flex; flex-direction: column; align-items: center; max-width: 52ch; margin-inline: auto; }
.tool-app-page .iw-processing-thumbnail { width: 96px; height: 72px; object-fit: contain; border-radius: 8px; margin-bottom: 20px; background: #f4f6f9; }
.tool-app-page .iw-editor-processing-copy h2 { margin: 0; font-size: 1.4rem; }
.tool-app-page .iw-editor-processing-copy p { margin: 0 0 12px; }
.tool-app-page .iw-editor-processing-copy small { color: #536174; line-height: 1.5; }
.tool-app-page .iw-processing-track { width: 220px; flex: 0 0 6px; margin: 20px auto; }
.tool-app-page .iw-upload-processing-overlay { inset: 0; z-index: 10; display: grid; padding: 16px; background: #fff; }
.tool-app-page .iw-result-heading { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; text-align: left; }
.tool-app-page .iw-result-heading h2 { margin: 0 0 6px; font-size: 1.4rem; }
.tool-app-page .iw-result-heading p { margin: 0; color: #536174; font-size: .9rem; }
.iw-result-check { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #e8f5ec; color: #25613c; font-size: 1.2rem; }
.tool-app-page .iw-result-single { display: grid; justify-items: center; margin: 0; padding: 24px; border-radius: 10px; background-color: #f5f7fa; }
.tool-app-page .iw-result-single img, .tool-app-page .premium-result-preview img { width: auto; height: auto; max-width: 100%; max-height: 58dvh; object-fit: contain; }
.tool-app-page .iw-result-single figcaption { margin-top: 16px; color: #536174; font-size: .85rem; }
.iw-result-file { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; overflow-wrap: anywhere; }
.iw-result-file > i { font-size: 3rem; color: var(--iw-primary); }
.iw-result-mobile-actions { display: none; }
.tool-app-page .preview-grid figure { min-width: 0; }
.tool-app-page .preview-grid img { height: auto; width: auto; max-width: 100%; max-height: 52dvh; }
.tool-app-page .iw-batch-result-item { min-width: 0; }
.tool-app-page .iw-batch-result-item strong { overflow-wrap: anywhere; }
.tool-app-page .iw-background-comparison-image { width: 100%; height: auto; }
.tool-settings-panel .tool-panel-result-summary dd { overflow-wrap: anywhere; }
.tool-settings-panel .iw-editor-actions > small { color: #536174; line-height: 1.5; }
@media (max-width: 1023.98px) {
  .iw-result-mobile-actions { display: grid; gap: 10px; margin-top: 24px; }
  .tool-app-page .tool-panel-opener { min-height: 44px; width: 100%; }
  .tool-app-page .iw-editor-result-main { padding: 16px; }
}
@media (max-width: 767px) {
  .tool-app-page .upload-dropzone { min-height: 270px; }
  .tool-app-page .iw-result-single { padding: 12px; }
  .tool-app-page .iw-batch-result-item { display: flex; flex-wrap: wrap; gap: 12px; }
  .tool-app-page .iw-batch-result-item > div { flex: 1 1 160px; }
  .tool-app-page .iw-batch-result-item .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-app-page .iw-spinner { animation: none; }
  .tool-app-page .iw-processing-track span { animation: none; width: 100%; opacity: .45; }
  .tool-app-page .upload-dropzone { transition: none; }
}