.image-batch {
  --batch-border: #d8e1eb;
  --batch-ink: #1b2b3d;
  --batch-muted: #52667a;
  --batch-accent: #165ba7;
  max-width: 940px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: var(--batch-ink);
}
.image-batch *, .image-batch *::before, .image-batch *::after { box-sizing: border-box; }
.image-batch-panel, .image-batch-result {
  background: #fff;
  border: 1px solid var(--batch-border);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(20, 46, 75, .05);
  margin: 0 0 1rem;
  padding: 1.35rem;
}
.image-batch-panel h2 { font-size: 1.2rem; margin: 0 0 1rem; line-height: 1.35; }
.image-batch-panel p, .image-batch-result p { color: var(--batch-muted); line-height: 1.6; }
.image-batch-field-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.image-batch-field { display: grid; gap: .4rem; min-width: 155px; font-weight: 600; }
.image-batch-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; font-weight: 600; }
.image-batch input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--batch-accent); flex: none; }
.image-batch input[type="file"], .image-batch input[type="number"], .image-batch select, .image-batch input[type="color"] {
  border: 1px solid #aebdcd;
  border-radius: 8px;
  background: #fff;
  color: var(--batch-ink);
  min-height: 42px;
  padding: .55rem .65rem;
  font: inherit;
  max-width: 100%;
}
.image-batch input[type="file"] { display: block; width: 100%; border: 1px dashed #9fb5ca; background: #f7faff; padding: .8rem; }
.image-batch input[type="file"]::file-selector-button { border: 0; border-radius: 6px; background: #e7f0fa; color: #174e88; font: inherit; font-weight: 700; padding: .45rem .8rem; margin-right: .8rem; cursor: pointer; }
.image-batch input[type="number"] { width: 9rem; }
.image-batch input[type="color"] { width: 4rem; padding: .25rem; }
.image-batch input:focus-visible, .image-batch select:focus-visible, .image-batch button:focus-visible { outline: 3px solid #75a8e2; outline-offset: 2px; }
.image-batch button { border: 1px solid #aebdcd; border-radius: 8px; background: #f7f9fc; color: #244564; font: inherit; font-weight: 650; line-height: 1.3; min-height: 40px; padding: .55rem .9rem; cursor: pointer; }
.image-batch button:hover:not(:disabled) { background: #eaf2fa; }
.image-batch button:disabled { opacity: .48; cursor: not-allowed; }
.image-batch button[data-start], .image-batch button[data-download] { color: #fff; background: var(--batch-accent); border-color: var(--batch-accent); }
.image-batch button[data-start]:hover:not(:disabled), .image-batch button[data-download]:hover:not(:disabled) { background: #0d4d91; }
.image-batch-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.25rem 0; }
.image-batch-result progress { display: block; width: 100%; height: 1rem; accent-color: var(--batch-accent); margin-bottom: 1rem; }
.image-batch-result [data-log] { color: #9b332b; padding-left: 1.25rem; overflow-wrap: anywhere; }
.image-batch-picker { transition: border-color .15s, background .15s; }
.image-batch-picker.is-dragover { border-color: var(--batch-accent); background: #f4f9ff; }
.image-batch-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: 1.2rem 0 .7rem; }
.image-batch-list-head h3 { margin: 0; font-size: 1rem; }
.image-batch-list-actions, .image-batch-view-switch, .image-batch-selection, .image-batch-pages { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.image-batch-view-switch { padding: .2rem; background: #edf3f9; border-radius: 9px; }
.image-batch-view-switch button { min-height: 34px; border: 0; padding: .35rem .65rem; background: transparent; }
.image-batch-view-switch button[aria-pressed="true"] { background: #fff; color: #114c89; box-shadow: 0 1px 4px #cbd8e5; }
.image-batch-selection { justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.image-batch-selection [data-selected-count] { color: var(--batch-muted); font-size: .9rem; }
.image-batch-file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.image-batch-file-list[data-view="thumb"] { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
.image-batch-file-list[data-view="list"] { grid-template-columns: 1fr; }
.image-batch-file-item { display: flex; align-items: center; gap: .55rem; min-width: 0; border: 1px solid var(--batch-border); border-radius: 9px; padding: .55rem; background: #fbfcfe; }
.image-batch-file-list[data-view="thumb"] .image-batch-file-item { flex-direction: column; align-items: stretch; }
.image-batch-file-item:has(input:checked) { border-color: #4788c8; background: #edf6ff; }
.image-batch-file-item input { align-self: flex-start; }
.image-batch-thumb { display: grid; place-items: center; width: 100%; height: 86px; border-radius: 6px; background: #edf1f6; color: #6a7b8c; overflow: hidden; }
.image-batch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.image-batch-file-list[data-view="list"] .image-batch-thumb { display: none; }
.image-batch-file-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 650; }
.image-batch-file-meta { display: block; color: var(--batch-muted); font-size: .78rem; }
.image-batch-pages { justify-content: center; margin-top: .8rem; }
.image-batch-pages span { font-size: .9rem; color: var(--batch-muted); }
.image-batch-note { font-size: .9rem; }
@media (max-width: 600px) {
  .image-batch { padding: 0 .65rem; }
  .image-batch-panel, .image-batch-result { padding: 1rem; }
  .image-batch-file-list[data-view="thumb"] { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .image-batch-field { width: 100%; }
  .image-batch-field select { width: 100%; }
}

/* Compact desktop settings; dependent controls remain visibly inactive. */
.image-batch .image-batch-option-row,
.image-batch .image-batch-field-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.1rem; }
.image-batch .image-batch-option-row { gap: .65rem 1.3rem; }
.image-batch .image-batch-dependent { min-width: 0; margin: 0; padding: 0; border: 0; }
.image-batch .image-batch-dependent:disabled { opacity: .48; }
.image-batch .image-batch-field { display: inline-flex; align-items: center; gap: .5rem; width: auto; min-width: 0; white-space: nowrap; }
.image-batch .image-batch-field select { width: auto; max-width: 14rem; }
.image-batch .image-batch-field input[type="number"] { width: 7rem; }
.image-batch .image-batch-field:has(input:disabled) { opacity: .48; }
.image-batch .image-batch-check { white-space: nowrap; }
.image-batch .image-batch-exif-note { color: var(--batch-muted); font-weight: 600; }
.image-batch .image-batch-note { margin: .75rem 0 0; font-size: .88rem; }
@media (max-width: 680px) {
  .image-batch .image-batch-option-row { align-items: flex-start; flex-direction: column; }
  .image-batch .image-batch-field-row { align-items: flex-start; }
  .image-batch .image-batch-field { width: auto; max-width: 100%; }
  .image-batch .image-batch-field select { width: auto; max-width: 100%; }
}

/* Use the full width already available inside the shared tool page. */
.image-batch { width: 100%; max-width: none; margin: 2rem 0; padding: 0; }
.image-batch .image-batch-size-control { display: inline-flex; align-items: center; gap: .35rem; min-height: 42px; }
.image-batch .image-batch-size-control [hidden] { display: none; }
.image-batch .image-batch-size-control input[type="number"] { width: 6.2rem; }
.image-batch .image-batch-clear-size { min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: #edf2f7; color: #52667a; font-size: 1.1rem; line-height: 1; }
.image-batch .image-batch-add-size { min-height: 34px; border-style: dashed; }
.image-batch .image-batch-file-dimensions,
.image-batch .image-batch-file-preview { display: block; font-size: .78rem; line-height: 1.35; color: var(--batch-muted); }
.image-batch .image-batch-file-preview { color: #135d9e; font-weight: 650; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-item { flex-wrap: wrap; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-details { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; flex: 1; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-dimensions,
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-preview { white-space: nowrap; }
@media (max-width: 680px) {
  .image-batch .image-batch-file-list[data-view="list"] .image-batch-file-details { display: block; }
  .image-batch .image-batch-size-control { flex-wrap: wrap; }
}

/* File details use the same column tracks in every list row. */
.image-batch .image-batch-file-table { overflow-x: auto; }
.image-batch .image-batch-file-columns { display: none; }
.image-batch .image-batch-file-list[data-view="list"] { min-width: 650px; gap: 0; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-item,
.image-batch .image-batch-file-columns {
  grid-template-columns: 30px minmax(0, 1fr) 5rem 6rem minmax(12rem, 1fr);
  column-gap: .7rem;
  align-items: center;
}
.image-batch .image-batch-file-columns { display: grid; min-width: 650px; padding: .45rem .7rem; color: var(--batch-muted); font-size: .78rem; font-weight: 650; }
.image-batch .image-batch-file-table:has(.image-batch-file-list[data-view="thumb"]) .image-batch-file-columns { display: none; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-item { display: grid; border-radius: 0; border-bottom: 0; padding: .55rem .7rem; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-item:last-child { border-bottom: 1px solid var(--batch-border); }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-details { display: contents; }
.image-batch .image-batch-file-ext { color: #426079; font-size: .75rem; font-weight: 700; }
.image-batch .image-batch-file-sizes { min-width: 0; font-variant-numeric: tabular-nums; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-dimensions,
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-preview { display: inline; white-space: nowrap; }
.image-batch .image-batch-file-list[data-view="list"] .image-batch-file-preview:not(:empty) { margin-left: .4rem; }
.image-batch .image-batch-file-list[data-view="thumb"] .image-batch-file-ext { display: inline-block; width: fit-content; margin: .25rem 0; padding: .1rem .4rem; border-radius: 4px; background: #e8eff7; }
.image-batch .image-batch-file-list[data-view="thumb"] .image-batch-file-preview:not(:empty) { margin-top: .1rem; }

/* Match the guide cards and Q/A layout on /ip. */
.image-batch-guide { display: grid; gap: 24px; margin: 34px 0 3rem; color: #182b45; }
.image-batch-guide-section { padding: 22px; border: 1px solid #dce4ed; border-radius: 13px; background: #fff; }
.image-batch-guide-section h2 { margin: 0 0 12px; color: #163b68; font-size: 20px; }
.image-batch-guide-section h3 { margin: 20px 0 5px; color: #243d5d; font-size: 15px; }
.image-batch-guide-section p, .image-batch-guide-section li { color: #52657d; font-size: 14px; line-height: 1.75; }
.image-batch-guide-section p { margin: 0 0 .6rem; }
.image-batch-guide-section p:last-child { margin-bottom: 0; }
.image-batch-guide-section ol { margin: 0; padding-left: 1.5rem; }
.image-batch-guide-section li { padding-left: .2rem; margin-bottom: .65rem; }
.image-batch-guide-section li:last-child { margin-bottom: 0; }
.image-batch-term h3 { margin-top: 20px; }
.image-batch-term:first-child h3 { margin-top: 0; }
.image-batch-faq-item { padding: 16px 2px; border-top: 1px solid #dce4ed; }
.image-batch-faq-item:last-child { border-bottom: 1px solid #dce4ed; }
.image-batch-faq-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.image-batch-faq-answer { margin-top: 9px; }
.image-batch-faq-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: #e6f0ff; color: #1769e0; font: 800 13px/1 Arial, sans-serif; }
.image-batch-faq-answer .image-batch-faq-mark { background: #e6f6ef; color: #087f5b; }
.image-batch-faq-item h3 { margin: 2px 0 0; color: #243d5d; font-size: 14px; line-height: 1.6; }
.image-batch-faq-item p { margin: 1px 0 0; }
@media (max-width: 480px) { .image-batch-guide-section { padding: 17px; } }

/* Phase 2 editing controls and single-image preview. */
.image-batch-transform-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .7rem 0; }
.image-batch-transform-actions > span { margin-right: .35rem; color: var(--batch-muted); font-size: .85rem; font-weight: 700; }
.image-batch-transform-actions button { min-height: 34px; padding: .35rem .6rem; font-size: .83rem; }
.image-batch .image-batch-file-name:is(button) { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #165ba7; text-align: left; cursor: pointer; }
.image-batch .image-batch-file-name:is(button):hover { text-decoration: underline; background: transparent; }
.image-batch-custom-ratio { display: inline-flex; align-items: center; gap: .35rem; }
.image-batch [data-custom-ratio][hidden], .image-batch [data-aspect-background-field][hidden], .image-batch [data-aspect-color-field][hidden], .image-batch [data-aspect-position-field][hidden], .image-batch [data-sequence-prefix][hidden] { display: none; }
.image-batch-preview { width: min(1080px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; border: 1px solid #cbd9e7; border-radius: 14px; box-shadow: 0 15px 50px #142e4b55; color: var(--batch-ink); }
.image-batch-preview::backdrop { background: #0d2035aa; }
.image-batch-preview-head, .image-batch-preview-nav, .image-batch-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.image-batch-preview-head { justify-content: space-between; margin-bottom: .75rem; }
.image-batch-preview-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.05rem; }
.image-batch-preview-canvas { display: grid; place-items: center; min-height: 160px; max-height: 66vh; overflow: auto; background: #e9eef4; border-radius: 8px; }
.image-batch-preview-canvas canvas { display: block; max-width: 100%; height: auto; object-fit: contain; }
.image-batch-preview-canvas p { margin: .5rem; }
.image-batch-preview-canvas p:empty { display: none; }
.image-batch-preview [data-preview-dimensions] { margin: .5rem 0; color: var(--batch-muted); font-variant-numeric: tabular-nums; font-size: .84rem; }
.image-batch-preview-actions { margin-top: .8rem; }
.image-batch-preview-actions button, .image-batch-preview-nav button, .image-batch-preview-head button { padding: .4rem .7rem; min-height: 36px; }
.image-batch-preview-nav { justify-content: center; margin-top: .85rem; }
@media (max-width: 600px) { .image-batch-preview { padding: .8rem; } .image-batch-preview-canvas { max-height: 55vh; } }

/* Keep the entire single-image editor inside the viewport. */
.image-batch .image-batch-preview[open] { display: flex; flex-direction: column; box-sizing: border-box; height: min(760px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); overflow: hidden; }
.image-batch .image-batch-preview-head { flex: none; }
.image-batch .image-batch-preview-canvas { position: relative; flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; }
.image-batch .image-batch-preview-canvas canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.image-batch .image-batch-preview-canvas p:not(:empty) { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: .45rem; background: #fffdf2ee; text-align: center; }
.image-batch .image-batch-preview-actions,
.image-batch .image-batch-preview-nav,
.image-batch .image-batch-preview [data-preview-dimensions] { flex: none; }
@media (max-width: 600px) {
  .image-batch .image-batch-preview[open] { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); padding: .65rem; }
  .image-batch .image-batch-preview-actions { gap: .3rem; }
  .image-batch .image-batch-preview-actions button { min-height: 32px; padding: .3rem .5rem; font-size: .82rem; }
}

/* Phase 3 controls */
.image-batch .image-batch-quality { margin-top: .85rem; }
.image-batch .image-batch-watermark-controls { border: 0; margin: .7rem 0 0; padding: 0; min-width: 0; }
.image-batch .image-batch-watermark-controls:disabled { opacity: .48; }
.image-batch .image-batch-watermark-controls .image-batch-field-row + .image-batch-field-row { margin-top: .75rem; }
.image-batch input[type="text"] { border: 1px solid #aebdcd; border-radius: 8px; background: #fff; color: var(--batch-ink); min-height: 42px; padding: .55rem .65rem; font: inherit; max-width: 100%; }
.image-batch input[type="range"] { width: 8rem; accent-color: var(--batch-accent); }
.image-batch [data-watermark-image] input { max-width: 18rem; }
.image-batch .image-batch-field:has(input[type="range"]:disabled) { opacity: .48; }

/* Show watermark settings and a compact live preview only while enabled. */
.image-batch [data-watermark-details][hidden] { display: none; }
.image-batch .image-batch-watermark-controls { margin: 0; }
.image-batch .image-batch-watermark-preview { min-width: 0; border: 1px solid var(--batch-border); border-radius: 10px; background: #f7faff; padding: .7rem; }
.image-batch .image-batch-watermark-preview > strong { display: block; margin-bottom: .45rem; font-size: .9rem; }
.image-batch .image-batch-watermark-preview-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; background: #e9eef4; }
.image-batch .image-batch-watermark-preview-stage:has(canvas[hidden]) { min-height: 140px; }
.image-batch .image-batch-watermark-preview-stage canvas { display: block; max-width: 100%; max-height: 280px; object-fit: contain; }
.image-batch .image-batch-watermark-preview-stage p { padding: .4rem .65rem; margin: 0; font-size: .82rem; text-align: center; }
.image-batch .image-batch-watermark-preview-stage p:empty { display: none; }
.image-batch .image-batch-watermark-preview-stage [hidden],
.image-batch [data-watermark-preview-open][hidden] { display: none; }
.image-batch [data-watermark-preview-open] { margin-top: .5rem; padding: .4rem .65rem; font-size: .85rem; }
@media (max-width: 800px) { .image-batch .image-batch-watermark-preview { width: min(100%, 360px); margin: 1rem auto 0; } }

.image-batch .image-batch-watermark-panel > .image-batch-check {
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

.image-batch .image-batch-watermark-panel.is-dragover { border-color: var(--batch-accent); background: #f4f9ff; box-shadow: 0 0 0 3px #165ba722; }
.image-batch .image-batch-watermark-drop-hint { margin: .3rem 0 0; }

/* Align the preview with the panel heading while keeping presets beneath controls. */
.image-batch [data-watermark-preview][hidden] { display: none; }
.image-batch .image-batch-watermark-details { min-width: 0; margin-top: .6rem; }
@media (min-width: 801px) {
  .image-batch .image-batch-watermark-panel:has([data-watermark-details]:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 1rem; align-items: start; }
  .image-batch .image-batch-watermark-panel > h2,
  .image-batch .image-batch-watermark-panel > .image-batch-check,
  .image-batch .image-batch-watermark-panel > .image-batch-watermark-drop-hint,
  .image-batch .image-batch-watermark-panel > .image-batch-watermark-details { grid-column: 1; }
  .image-batch .image-batch-watermark-panel > .image-batch-watermark-preview { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
}

.image-batch .image-batch-source-picker { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.image-batch .image-batch-source-picker input[name="files"] { flex: 1 1 18rem; width: auto; min-width: 0; }
.image-batch .image-batch-source-picker input[hidden] { display: none; }
.image-batch .image-batch-source-picker [data-folder-pick] { flex: 0 0 auto; }

.image-batch .image-batch-full-presets { padding: .8rem 1.15rem; }
.image-batch .image-batch-full-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
.image-batch .image-batch-full-preset-row .image-batch-field { flex: 1 1 15rem; }
.image-batch .image-batch-full-preset-row select { width: 100%; max-width: 22rem; }
.image-batch .image-batch-preset-changed { color: #a15514; font-size: .85rem; font-weight: 700; }
.image-batch .image-batch-full-presets .image-batch-note { margin: .45rem 0 0; }
.image-batch .image-batch-preset-status:empty { display: none; }
.image-batch .image-batch-preset-status { margin: .35rem 0 0; font-size: .88rem; }
.image-batch-preset-dialog { border: 1px solid #b9c9d9; border-radius: 13px; padding: 1.25rem; width: min(94vw, 32rem); color: #1b2b3d; }
.image-batch-preset-dialog::backdrop { background: rgba(19, 36, 58, .46); }
.image-batch-preset-dialog h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.image-batch-preset-dialog .image-batch-field { display: grid; gap: .45rem; }
.image-batch-preset-dialog input { min-height: 42px; padding: .55rem .65rem; border: 1px solid #aebdcd; border-radius: 8px; font: inherit; }
.image-batch-preset-dialog p { min-height: 1.4em; color: #9b332b; }
.image-batch-preset-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.image-batch-preset-dialog button { border: 1px solid #aebdcd; border-radius: 8px; background: #f7f9fc; color: #244564; font: inherit; font-weight: 650; min-height: 40px; padding: .55rem .9rem; cursor: pointer; }
.image-batch-preset-dialog button:hover { background: #eaf2fa; }
.image-batch-preset-dialog button[hidden] { display: none; }

/* Keep watermark sliders and their changing percentages in fixed columns. */
.image-batch .image-batch-slider-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5ch;
  gap: .3rem .4rem;
  flex: 0 0 11rem;
  width: 11rem;
  max-width: 100%;
}
.image-batch .image-batch-slider-field > span:first-child { grid-column: 1 / -1; }
.image-batch .image-batch-slider-field input[type="range"] { width: 100%; min-width: 0; margin: 0; }
.image-batch .image-batch-slider-value { width: 5ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.image-batch .image-batch-watermark-message:empty { display: none; }