@import url("/theme.css?v=20261002-pure-black-1");

:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-raised: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --border: #e2e7ee;
  --border-strong: #d0d7e2;
  --primary: #2b64ea;
  --primary-dark: #2458d4;
  --primary-soft: #eaf1ff;
  --on-primary: #ffffff;
  --danger: #c33a4a;
  --success: #15805f;
  --icon-blue: #2f68d9;
  --icon-sky: #1688c9;
  --icon-teal: #0c8f82;
  --icon-green: #19815f;
  --icon-amber: #b97108;
  --icon-orange: #cf6324;
  --icon-red: #d3485c;
  --icon-purple: #7651d5;
  --icon-pink: #b94f8f;
  --icon-light-gray: #9ca6b4;
  --shadow: 0 18px 46px rgba(19, 33, 68, .08);
  --focus: 0 0 0 3px rgba(35, 95, 199, .2);
  --radius: 16px;
  --radius-sm: 11px;
  --header-height: 64px;
  --line: var(--border);
  --line-strong: var(--border-strong);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

/* Dark palette: /theme.css */

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.sr-only,
.visually-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 500;
  left: 16px;
  top: -80px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

.site-header {
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.site-header-inner {
  width: min(1160px, calc(100% - 36px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; min-width: 0; }
.brand img { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.brand-name { font-size: 17px; font-weight: 760; white-space: nowrap; }
.brand-by { font-size: 16px; color: var(--muted); white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.header-actions > * { position: relative; border-radius: 0; }
.header-actions > * + *::before { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line); content: ""; pointer-events: none; }
.header-actions > :first-child { border-radius: 13px 0 0 13px; }
.header-actions > :last-child { border-radius: 0 13px 13px 0; }
.header-nav-button,
.shell-icon-button {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
  cursor: pointer;
}
.header-nav-button:hover:not(:disabled), .shell-icon-button:hover { background: var(--surface-soft); }
.header-nav-button:disabled { opacity: .48; cursor: default; background: transparent; }
.header-nav-button svg, .shell-icon-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.shell-icon-button { width: 38px; padding: 0; }
html[data-theme="light"] .moon-icon, html[data-theme="dark"] .sun-icon { display: none; }

#workspace { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 20px 0 38px; }
.startup-alert, .inline-alert, .workspace-alert { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); padding: 11px 13px; font-size: 13px; }
.startup-alert { margin-bottom: 14px; }
.workspace-alert { margin-bottom: 14px; display: flex; align-items: flex-start; gap: 9px; font-weight: 650; box-shadow: 0 8px 24px color-mix(in srgb, var(--danger) 10%, transparent); }
.workspace-alert[hidden] { display: none; }
.workspace-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace-alert.is-target-limit { flex-wrap: wrap; align-items: center; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); color: var(--text); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent); }
.workspace-alert.is-target-limit > span { flex: 1 1 230px; }
.target-resolution-action { margin-left: auto; border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border)); border-radius: 8px; background: var(--surface); color: var(--primary); padding: 7px 10px; font: inherit; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.target-resolution-action:hover { background: var(--primary-soft); }
.target-resolution-action[hidden] { display: none; }
.tool-shell { width: 100%; --empty-drop-height: clamp(300px, 48dvh, 420px); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr); gap: 18px; height: auto; min-height: clamp(620px, calc(100dvh - 106px), 740px); align-items: stretch; }

.media-panel,
.settings-panel {
  min-width: 0;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.media-panel { position: relative; padding: 16px; display: flex; flex-direction: column; }
.tool-shell.has-images .media-panel { min-height: 620px; }
.settings-panel { display: flex; flex-direction: column; }
.tool-shell:not(.has-images) .tool-grid { height: auto; min-height: 0; }
.tool-shell:not(.has-images) .media-panel,
.tool-shell:not(.has-images) .settings-panel { height: auto; }
.tool-shell:not(.has-images) #settingsForm { flex: 0 0 auto; overflow: visible; }
.tool-shell:not(.has-images) .drop-zone { height: var(--empty-drop-height); min-height: var(--empty-drop-height); flex: 0 0 var(--empty-drop-height); }

.empty-uploader { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; }
.drop-zone {
  width: 100%;
  min-height: 320px;
  flex: 1 1 auto;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--primary); background: var(--primary-soft); }
.drop-zone.is-dragging { transform: scale(.995); }
.drop-zone strong { font-size: 16px; letter-spacing: -.015em; }
.drop-zone small { font-size: 12.5px; color: var(--muted); }
.upload-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.upload-icon svg { width: 23px; height: 23px; }
.paste-row { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12px; }
.paste-row > span { display: inline-flex; align-items: center; gap: 4px; }
.shortcut-separator { margin-inline: 1px; color: var(--muted); }
.paste-button, .compact-button, .text-button { border: 0; background: transparent; cursor: pointer; color: var(--primary); font-weight: 700; }
.paste-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; }
.paste-button:hover, .compact-button:hover, .text-button:hover { background: var(--primary-soft); }
.paste-button svg { width: 17px; height: 17px; }
kbd { padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-soft); color: var(--text); font-size: 10px; }

.preview-workspace { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 9px; }
.tool-shell.has-images .preview-workspace { flex: 0 0 auto; height: auto; }
.tool-shell.has-images.has-pdf-pages .preview-workspace { flex: 0 0 auto; height: auto; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.selected-file-copy { min-width: 0; max-width: 55%; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.preview-filename-row { min-width: 0; width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 2px; }
.preview-filename-row > .preview-filename {
  width: var(--filename-width, 120px);
  min-width: 42px;
  max-width: calc(100% - 30px);
  flex: 0 1 var(--filename-width, 120px);
  height: 27px;
  min-height: 27px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.preview-filename:hover { background: var(--surface-soft) !important; }
.preview-filename.is-editing { outline: 0 !important; background: var(--surface) !important; box-shadow: none; }
.rename-file-button { width: 28px; height: 28px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rename-file-button:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.rename-file-button:disabled { opacity: .4; cursor: not-allowed; }
.rename-file-button svg { width: 15px; height: 15px; }
.selected-file-copy > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10.5px; }
.selected-file-meta-group { white-space: nowrap; }
.selected-file-meta-arrow { display: inline-block; margin-inline: 5px; color: var(--primary); font-size: 12px; font-weight: 900; line-height: 1; }
.preview-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.compact-button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 11.5px; }
.compact-button svg { width: 15px; height: 15px; }
.add-images-button { border-style: dashed; border-color: #e2b954; background: #fffdf6; color: #815c09; }
.add-images-button:hover:not(:disabled) { border-color: #c99319; background: #fff8df; }
.paste-more-button { border-color: #c7d5f8; background: #f7f9ff; color: #244c9b; }
.paste-more-button:hover:not(:disabled) { border-color: #9fb8ef; background: #edf3ff; }
.text-button { min-height: 32px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border)); border-radius: 9px; background: color-mix(in srgb, var(--danger) 4%, var(--surface)); font-size: 11.5px; color: var(--danger); }
.clear-all-button:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
html[data-theme="dark"] .add-images-button { border-color: #756431; background: color-mix(in srgb, #8b650d 17%, var(--surface)); color: #f1c966; }
html[data-theme="dark"] .add-images-button:hover:not(:disabled) { border-color: #9a813d; background: #2b2216; }
html[data-theme="dark"] .paste-more-button { border-color: #42577c; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
html[data-theme="dark"] .paste-more-button:hover:not(:disabled) { border-color: #6686bf; background: var(--primary-soft); }
.icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.icon-button:hover:not(:disabled) { background: var(--surface-soft); color: var(--text); }
.icon-button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button svg { width: 17px; height: 17px; }

.main-preview { position: relative; width: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: #eef2f7; transition: border-color .16s ease; }
html[data-theme="dark"] .main-preview { background: var(--bg); }
.main-preview:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.main-preview.is-dragging { border-color: var(--primary); }
.main-preview-button { width: 100%; height: 100%; padding: 24px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: default; }
.main-preview-button.has-pdf-page-caption { position: relative; padding-bottom: 48px; }
.main-preview-button > .preview-page-caption { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); line-height: 1; white-space: nowrap; pointer-events: none; }
.main-preview-button.can-pan { cursor: grab; touch-action: none; }
.main-preview-button.is-panning, .pdf-page-scroller.is-panning { cursor: grabbing; }
.main-preview-button img, .pdf-page-scroller img { -webkit-user-drag: none; user-select: none; }
.main-preview-button:disabled { cursor: default; }
.preview-output-frame { position: relative; flex: 0 0 auto; min-width: 1px; min-height: 1px; display: grid; place-items: center; overflow: visible; background: #fff; box-shadow: 0 12px 34px rgba(19, 29, 46, .22); transition: box-shadow .16s ease; }
.preview-image-region { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.canvas-image-placement { position: absolute; inset: 0; overflow: hidden; display: block; }
.canvas-image-placement img { position: absolute; inset: 0 auto auto 0; max-width: none; }
.main-preview img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.preview-output-frame.is-pdf-page img { filter: none; }
.canvas-transform-box { position: absolute; z-index: 8; border: 2px solid #7657ff; cursor: move; touch-action: none; pointer-events: auto; }
.canvas-transform-box[hidden] { display: none; }
.canvas-resize-handle { position: absolute; z-index: 2; display: block; border: 1.5px solid #7657ff; background: #fff; box-shadow: 0 1px 4px rgba(20, 22, 34, .28); }
.canvas-resize-handle.is-nw, .canvas-resize-handle.is-ne, .canvas-resize-handle.is-se, .canvas-resize-handle.is-sw { width: 11px; height: 11px; border-radius: 50%; }
.canvas-resize-handle.is-nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.canvas-resize-handle.is-ne { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.canvas-resize-handle.is-se { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.canvas-resize-handle.is-sw { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.canvas-resize-handle.is-n, .canvas-resize-handle.is-s { left: 50%; width: 24px; height: 8px; border-radius: 5px; transform: translate(-50%, -50%); cursor: ns-resize; }
.canvas-resize-handle.is-e, .canvas-resize-handle.is-w { top: 50%; width: 8px; height: 24px; border-radius: 5px; transform: translate(-50%, -50%); cursor: ew-resize; }
.canvas-resize-handle.is-n { top: 0; }
.canvas-resize-handle.is-e { left: 100%; }
.canvas-resize-handle.is-s { top: 100%; }
.canvas-resize-handle.is-w { left: 0; }
.canvas-guide { position: absolute; z-index: 7; display: block; background: #d72bdc; pointer-events: none; }
.canvas-guide.is-vertical { top: -10%; bottom: -10%; left: 50%; width: 1px; }
.canvas-guide.is-horizontal { left: -10%; right: -10%; top: 50%; height: 1px; }
.canvas-guide[hidden] { display: none; }
.tool-shell.has-images:not(.has-pdf-pages) .main-preview { height: clamp(280px, calc(100dvh - 230px), 520px); }
.tool-shell.has-images.has-pdf-pages .preview-workspace { flex: 1 1 auto; min-height: 0; }
.tool-shell.has-images.has-pdf-pages .main-preview { height: auto; min-height: clamp(280px, calc(100dvh - 230px), 520px); flex: 1 1 auto; }
.pdf-page-scroller { position: absolute; inset: 0; overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px 44px 30px; scrollbar-color: var(--border-strong) transparent; }
.pdf-page-scroller.can-pan { cursor: grab; }
.pdf-page-wrapper { display: flex; align-items: center; flex-direction: column; gap: 9px; width: max-content; min-width: 100%; padding: 6px 0 32px; }
.pdf-page-wrapper { cursor: pointer; }
.pdf-page-sheet { position: relative; width: min(100%, 510px); background: #fff; overflow: visible; box-shadow: 0 12px 32px rgba(24, 39, 65, .2); }
.pdf-page-image-region { position: absolute; overflow: hidden; }
.pdf-page-sheet .canvas-image-placement img { width: 100%; height: 100%; display: block; max-width: none; filter: none; }
.pdf-page-caption { font-size: 11px; font-weight: 650; color: var(--muted); }
.pdf-orientation-note { margin: 7px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; white-space: nowrap; }
.preview-delete-button { position: absolute; z-index: 4; top: 11px; left: 11px; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--danger); display: grid; place-items: center; box-shadow: 0 5px 16px rgba(18, 30, 52, .12); backdrop-filter: blur(10px); cursor: pointer; }
.preview-delete-button:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.preview-delete-button:disabled { opacity: .45; cursor: not-allowed; }
.preview-delete-button svg { width: 17px; height: 17px; }
.preview-image-nav { position: absolute; z-index: 6; top: 50%; width: 32px; height: 48px; padding: 0; border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--surface) 78%, transparent); color: color-mix(in srgb, var(--text) 74%, transparent); display: grid; place-items: center; transform: translateY(-50%); box-shadow: 0 5px 16px rgba(18, 30, 52, .09); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); opacity: .72; cursor: pointer; transition: opacity .14s ease, color .14s ease, background .14s ease, border-color .14s ease; }
.preview-image-nav[hidden] { display: none; }
.preview-image-nav.is-previous { left: 11px; }
.preview-image-nav.is-next { right: 11px; }
.preview-image-nav:hover:not(:disabled), .preview-image-nav:focus-visible { opacity: 1; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface)); }
.preview-image-nav:disabled { opacity: .28; cursor: default; }
.preview-image-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.preview-adjust-button { position: absolute; z-index: 9; top: 11px; right: 11px; min-width: 84px; height: 34px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 5px 16px rgba(18, 30, 52, .12); backdrop-filter: blur(10px); font-size: 11.5px; font-weight: 750; cursor: pointer; }
.preview-adjust-button:hover:not(:disabled), .preview-adjust-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--primary-soft); color: var(--primary); }
.preview-adjust-button:disabled { opacity: .45; cursor: not-allowed; }
.preview-adjust-button svg { width: 18px; height: 18px; }
.adjust-history-controls { position: absolute; z-index: 10; top: 11px; left: 50%; transform: translateX(-50%); height: 34px; display: inline-flex; align-items: center; padding: 3px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 5px 16px rgba(18, 30, 52, .12); backdrop-filter: blur(10px); }
.adjust-history-controls[hidden] { display: none; }
.adjust-history-controls button { height: 26px; min-width: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 750; cursor: pointer; }
.adjust-history-controls button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.adjust-history-controls button:disabled { opacity: .35; cursor: default; }
.adjust-history-controls svg { width: 16px; height: 16px; }
.adjust-history-controls .adjust-reset-button { padding-inline: 8px; color: var(--danger); }
.preview-fallback { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.preview-fallback svg { width: 34px; height: 34px; }
.edited-badge { position: absolute; z-index: 4; top: 16px; left: 52px; padding: 5px 8px; border-radius: 999px; background: rgba(18, 28, 43, .8); color: #fff; font-size: 10px; font-weight: 750; backdrop-filter: blur(6px); }
.preview-footer { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.thumbnail-rail { min-width: 0; list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; overflow: visible; }
.thumbnail-rail li { flex: 0 0 auto; }
.thumbnail-button { position: relative; width: 48px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 9px; background: var(--surface-soft); overflow: hidden; cursor: pointer; }
.thumbnail-button[draggable="true"] { cursor: grab; }
.thumbnail-rail li.is-dragging .thumbnail-button { cursor: grabbing; }
.thumbnail-button.is-selected { border-color: var(--primary); box-shadow: var(--focus); }
.thumbnail-rail li.is-dragging { opacity: .5; }
.thumbnail-rail li.is-drop-target .thumbnail-button { outline: 2px solid var(--primary); outline-offset: 2px; }
.thumbnail-button img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.thumbnail-index { position: absolute; right: 2px; bottom: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: rgba(0,0,0,.68); color: #fff; font-size: 9px; display: grid; place-items: center; }
.page-order-controls { align-self: center; display: flex; gap: 5px; }
.reorder-button { color: var(--primary); }
.reorder-button svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.edit-images-button { position: absolute; z-index: 4; right: 11px; bottom: 11px; min-height: 34px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--primary); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11.5px; font-weight: 750; box-shadow: 0 5px 16px rgba(18, 30, 52, .12); backdrop-filter: blur(10px); cursor: pointer; }
.edit-images-button:hover { background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.edit-images-button svg { width: 17px; height: 17px; }
.preview-zoom-controls { position: absolute; z-index: 5; left: 11px; bottom: 11px; min-height: 34px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 5px 16px rgba(18, 30, 52, .12); backdrop-filter: blur(10px); }
.preview-zoom-button { width: 30px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--text); display: grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer; }
.preview-zoom-controls #playPreview { width: auto; min-width: 46px; height: 32px; padding: 0 7px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--primary); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer; }
.preview-zoom-button:hover:not(:disabled), .preview-zoom-controls #playPreview:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.preview-zoom-button:disabled, .preview-zoom-controls #playPreview:disabled { opacity: .4; cursor: not-allowed; }
.preview-zoom-controls #playPreview:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.preview-zoom-value { align-self: stretch; min-width: 43px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 750; text-align: center; cursor: pointer; }
.preview-zoom-value:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.media-panel > .inline-alert { margin-top: 9px; }
.add-drop-overlay { position: absolute; z-index: 20; inset: 0; border: 2px dashed var(--primary); border-radius: inherit; background: color-mix(in srgb, var(--primary-soft) 92%, transparent); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 760; backdrop-filter: blur(8px); pointer-events: none; }
.add-drop-overlay svg { width: 30px; height: 30px; }
.upload-progress { position: absolute; z-index: 30; inset: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: linear-gradient(145deg, rgba(9, 17, 31, .4), rgba(17, 27, 47, .54)); color: #fff; display: grid; place-items: center; padding: clamp(20px, 7%, 60px); text-align: left; -webkit-backdrop-filter: blur(10px) saturate(.7); backdrop-filter: blur(10px) saturate(.7); box-shadow: inset 0 0 0 1px rgba(9, 17, 31, .08); }
.upload-progress[hidden] { display: none; }
.operation-preview-status { position: absolute; z-index: 31; inset: 0; border: 0; border-radius: inherit; background: linear-gradient(145deg, rgba(9, 17, 31, .42), rgba(17, 27, 47, .56)); color: #fff; display: grid; place-items: center; padding: clamp(24px, 8%, 76px); text-align: left; -webkit-backdrop-filter: blur(10px) saturate(.7); backdrop-filter: blur(10px) saturate(.7); }
.operation-preview-status[hidden] { display: none; }
.operation-preview-status .progress-overlay-heading { grid-template-columns: 24px minmax(0, 1fr); }
.progress-overlay-content { width: min(400px, 84%); display: grid; gap: 13px; filter: drop-shadow(0 3px 9px rgba(0,0,0,.35)); animation: progress-overlay-in .18s ease-out both; }
.progress-overlay-heading { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.progress-overlay-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.progress-overlay-copy strong { min-width: 0; overflow: hidden; color: #fff; font-size: 15px; font-weight: 780; letter-spacing: -.01em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.progress-overlay-copy small { overflow: hidden; color: rgba(242,247,255,.78); font-size: 11px; font-weight: 620; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.progress-overlay-value { min-width: 48px; padding: 4px 7px; border: 1px solid rgba(185,211,255,.18); border-radius: 999px; background: rgba(7,14,27,.28); color: #dce8ff; font-size: 11.5px; font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.42); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-overlay-content progress { width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; appearance: none; background: rgba(232,240,255,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.22), 0 1px 5px rgba(0,0,0,.12); }
.progress-overlay-content progress::-webkit-progress-bar { border-radius: 99px; background: rgba(232,240,255,.25); }
.progress-overlay-content progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #8fb2ff 0%, #5b8cff 58%, #66d1ff 100%); box-shadow: 0 0 12px rgba(105,153,255,.58); transition: width .35s ease-out; }
.progress-overlay-content progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #8fb2ff 0%, #5b8cff 58%, #66d1ff 100%); box-shadow: 0 0 12px rgba(105,153,255,.58); transition: width .35s ease-out; }
.operation-preview-status progress::-webkit-progress-value { transition: none; }
.operation-preview-status progress::-moz-progress-bar { transition: none; }
.progress-meter { position: relative; width: 100%; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(232,240,255,.25); }
.progress-meter progress { position: absolute; inset: 0; display: block; }
.progress-meter-activity { position: absolute; inset: 0; width: 45%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(59,130,246,.18) 32%, rgba(96,165,250,.58) 50%, rgba(59,130,246,.18) 68%, transparent); will-change: transform; animation: progress-meter-working 1.75s linear infinite; }
.progress-meter.is-complete .progress-meter-activity { display: none; }
@keyframes progress-meter-working { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.upload-progress-spinner { width: 21px; height: 21px; border: 2px solid rgba(232,240,255,.28); border-top-color: #a7c1ff; border-right-color: #67d0ff; border-radius: 50%; box-shadow: 0 0 12px rgba(102,156,255,.2); animation: upload-spin .78s cubic-bezier(.55,.15,.45,.85) infinite; }
@keyframes progress-overlay-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes upload-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .progress-overlay-content { animation: none; }
  .upload-progress-spinner { animation-duration: 1.8s; }
  .progress-overlay-content progress::-webkit-progress-value { transition: none; }
  .progress-meter-activity { animation-duration: 3s; }
}

.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px; border-bottom: 1px solid var(--border); }
.primary-button, .secondary-button, .download-all-button, .download-result-button { min-height: 40px; border-radius: 9px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 750; text-decoration: none; cursor: pointer; }
.quick-actions .primary-button { min-width: 0; flex: 1.15 1 112px; }
.quick-actions .secondary-button { min-width: 0; flex: .8 1 82px; padding-inline: 9px; }
.quick-actions .download-selected-button { flex: 1 1 92px; }
.quick-actions .copy-button { flex: .7 1 70px; }
.primary-button { border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); }
.primary-button:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.secondary-button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.secondary-button:hover:not(:disabled) { background: var(--surface-soft); }
.primary-button:disabled, .secondary-button:disabled { opacity: .44; cursor: not-allowed; }
.primary-button svg, .secondary-button svg { width: 17px; height: 17px; }
.quick-actions .is-working { opacity: 1; cursor: progress; }
.quick-actions button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-actions .is-working svg { animation: working-pulse 1.2s ease-in-out infinite; }
@keyframes working-pulse { 50% { opacity: .4; transform: translateY(2px); } }
.settings-reset-footer { display: flex; flex: 0 0 auto; margin-top: auto; justify-content: center; padding: 5px 12px 11px; border-top: 1px solid var(--border); }
.reset-button { min-height: 30px; padding: 3px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--danger); font-size: 11.5px; font-weight: 650; cursor: pointer; }
.reset-button:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.reset-button:disabled { opacity: .45; cursor: not-allowed; }
.cancel-process-button { flex: 1 0 100% !important; color: var(--danger); }

#settingsForm { flex: 1 0 auto; min-height: 0; overflow: visible; padding: 11px; display: flex; flex-direction: column; gap: 9px; }
label > span:first-child, .field-group > span:first-child { font-size: 11.5px; color: var(--muted); font-weight: 700; }
input[type="text"], input[type="number"], select { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 10px; outline: 0; }
select { appearance: auto; }
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus { border-color: var(--border); outline: 0; box-shadow: none; }
.number-entry { position: relative; display: block; min-width: 0; width: 100%; }
.number-entry-clear { position: absolute; z-index: 2; top: -4px; right: -4px; display: grid; place-items: center; width: 18px; height: 18px; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); opacity: 0; visibility: hidden; cursor: pointer; }
.number-entry-clear svg { width: 10px; height: 10px; stroke-width: 1.5; }
.number-entry:hover > .number-entry-clear, .number-entry:focus-within > .number-entry-clear { opacity: 1; visibility: visible; }
.number-entry:has(input:disabled) > .number-entry-clear, .number-entry:has(input:read-only) > .number-entry-clear { display: none; }
.number-entry-clear:hover { color: var(--text); }
@media (hover: none) { .number-entry-clear { opacity: 1; visibility: visible; } }
select:focus-visible, button:focus-visible, a:focus-visible { outline: 0; box-shadow: var(--focus); }
input[type="checkbox"]:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--focus); }
.settings-mode-panel { display: flex; flex-direction: column; gap: 9px; }
.image-settings, .pdf-settings { flex: 0 0 auto; }
.settings-block { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.setting-heading { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 12px; font-weight: 750; color: var(--text); }
.setting-heading-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--icon-blue); stroke-width: 1.75; }
.setting-heading-icon:is([data-icon="format"], [data-icon="output"]) { color: var(--icon-purple); }
.setting-heading-icon[data-icon="compress"] { color: var(--icon-teal); }
.setting-heading-icon:is([data-icon="upscale"], [data-icon="orientation"]) { color: var(--icon-pink); }
.setting-heading-icon:is([data-icon="resize"], [data-icon="fit"], [data-icon="metadata"]) { color: var(--icon-sky); }
.setting-heading-icon[data-icon="page-size"] { color: var(--icon-amber); }
.setting-heading-icon[data-icon="margin"] { color: var(--icon-orange); }
.setting-heading-icon[data-icon="orientation"] { width: 18px; height: 18px; }
#format-heading .setting-heading-icon { color: var(--icon-purple); }
#compression-heading .setting-heading-icon, #pdf-compression-heading .setting-heading-icon { color: var(--icon-teal); }
#upscale-heading .setting-heading-icon, #pdf-upscale-heading .setting-heading-icon { color: var(--icon-pink); }
.resize-section > .setting-heading .setting-heading-icon, .resize-section > .setting-heading-row .setting-heading-icon { color: var(--icon-sky); }
#pdf-output-heading .setting-heading-icon { color: var(--icon-purple); }
#pdf-size-heading .setting-heading-icon { color: var(--icon-amber); }
#pdf-orientation-heading .setting-heading-icon { color: var(--icon-pink); }
#pdf-orientation-heading .setting-heading-icon { width: 18px; height: 18px; }
#image-fit-heading .setting-heading-icon, #pdf-fit-heading .setting-heading-icon { color: var(--icon-sky); }
#pdf-margin-heading .setting-heading-icon { color: var(--icon-orange); }
.metadata-row .settings-toggle-title .setting-heading-icon { color: var(--icon-sky); }
#batchSettingsRow .settings-toggle-title .setting-heading-icon { color: var(--icon-purple); }
.setting-heading-row { min-height: 22px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.setting-heading-row .setting-heading { margin-bottom: 0; }
.setting-heading-row > .section-text-button { margin-left: auto; }
.shared-section-badge { min-height: 18px; margin: 0; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--success) 26%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--success) 8%, var(--surface)); color: var(--success); font-size: 9px; font-weight: 750; line-height: 1.1; cursor: pointer; white-space: nowrap; }
.shared-section-badge:hover { border-color: color-mix(in srgb, var(--success) 52%, var(--border)); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.shared-section-badge.is-current { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); background: color-mix(in srgb, var(--text) 5%, var(--surface)); color: var(--muted); }
.shared-section-badge.is-current:hover { border-color: color-mix(in srgb, var(--text) 42%, var(--border)); background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--text); }
.shared-section-badge[hidden] { display: none; }
.shared-section-badge[aria-disabled="true"] { cursor: default; }
.section-text-button { min-height: 22px; margin: 0 -3px 0 0; padding: 0 5px; border: 0; border-radius: 6px; background: transparent; color: var(--primary); font-size: 10.5px; font-weight: 750; cursor: pointer; }
.section-text-button:hover { background: var(--primary-soft); }
.choice-section { min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.choice-grid button { min-width: 0; min-height: 32px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 11.5px; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.choice-grid button:hover:not(:disabled) { border-color: var(--primary); background: var(--surface-soft); }
.choice-grid button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.choice-grid button:disabled { opacity: .43; cursor: not-allowed; }
.format-choices button, .icon-choice-grid button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.choice-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); stroke-width: 1.75; transition: color .15s ease, transform .15s ease; }
.choice-grid button:hover:not(:disabled) .choice-icon { transform: translateY(-1px); }
.choice-grid button[aria-pressed="true"] .choice-icon { color: currentColor; }
[data-choice-for="format"] button[data-value="png"] .choice-icon { color: var(--icon-blue); }
[data-choice-for="format"] button[data-value="jpeg"] .choice-icon { color: var(--icon-amber); }
[data-choice-for="format"] button[data-value="webp"] .choice-icon { color: var(--icon-purple); }
[data-choice-for="format"] button[data-value="pdf"] .choice-icon { color: var(--icon-red); }
[data-choice-for="format"] button[data-value="tiff-cmyk"] .choice-icon { color: var(--icon-pink); }
[data-choice-for="format"] button[data-value="avif"] .choice-icon { color: var(--icon-teal); }
[data-choice-for="format"] button[data-value="heic"] .choice-icon { color: var(--icon-sky); }
[data-choice-for="format"] button[data-value="svg"] .choice-icon { color: var(--icon-light-gray); }
[data-choice-for="format"] button[data-value="gif"] .choice-icon { color: var(--icon-orange); }
[data-choice-for="compressionChoice"] button[data-value="smart"] .choice-icon,
[data-choice-for="compressionGoal"] button[data-value="best"] .choice-icon,
[data-choice-for="pdfCompressionChoice"] button[data-value="smart"] .choice-icon { color: var(--icon-purple); }
[data-choice-for="compressionChoice"] button[data-value="keep"] .choice-icon,
[data-choice-for="compressionGoal"] button[data-value="keep"] .choice-icon,
[data-choice-for="pdfCompressionChoice"] button[data-value="keep"] .choice-icon { color: var(--icon-green); }
[data-choice-for="compressionChoice"] button[data-value="custom"] .choice-icon,
[data-choice-for="compressionGoal"] button[data-value="under"] .choice-icon,
[data-choice-for="pdfCompressionChoice"] button[data-value="custom"] .choice-icon { color: var(--icon-amber); }
[data-choice-for="resizeMode"] button[data-value="none"] .choice-icon { color: var(--icon-green); }
[data-choice-for="resizeMode"] button[data-value="pixels"] .choice-icon { color: var(--icon-orange); }
[data-choice-for="resizeMode"] button[data-value="percentage"] .choice-icon { color: var(--icon-purple); }
[data-choice-for="resizeMode"] button[data-value="preset"] .choice-icon { color: var(--icon-teal); }
[data-choice-for="pdfOutput"] button[data-value="images"] .choice-icon { color: var(--icon-blue); }
[data-choice-for="pdfOutput"] button[data-value="combined"] .choice-icon { color: var(--icon-red); }
[data-choice-for="pdfOutput"] button[data-value="separate"] .choice-icon { color: var(--icon-orange); }
[data-choice-for="pdfOrientation"] button[data-value="auto"] .choice-icon { color: var(--icon-teal); }
[data-choice-for="pdfOrientation"] button[data-value="portrait"] .choice-icon { color: var(--icon-purple); }
[data-choice-for="pdfOrientation"] button[data-value="landscape"] .choice-icon { color: var(--icon-blue); }
[data-choice-for="fit"] button[data-value="contain"] .choice-icon,
[data-choice-for="pdfFit"] button[data-value="contain"] .choice-icon { color: var(--icon-green); }
[data-choice-for="fit"] button[data-value="cover"] .choice-icon,
[data-choice-for="pdfFit"] button[data-value="cover"] .choice-icon { color: var(--icon-purple); }
[data-choice-for="fit"] button[data-value="stretch"] .choice-icon,
[data-choice-for="pdfFit"] button[data-value="stretch"] .choice-icon { color: var(--icon-orange); }
.format-choices .choice-icon, .pdf-output-choices .choice-icon { width: 17px; height: 17px; }
.compression-choices .visual-choice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 7px; text-align: left; }
.compression-choices .visual-choice > .choice-icon { width: 17px; height: 17px; }
.choice-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.15; }
.choice-copy > span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.choice-copy small { margin-top: 3px !important; }
.format-settings-block { container-type: inline-size; }
.format-choices { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.format-choices > button { grid-column: span 3; }
.format-choices > button:nth-child(n + 5):nth-child(-n + 7) { grid-column: span 4; }
.format-choices > button:nth-child(n + 8) { grid-column: span 6; }
@container (min-width: 410px) {
  .format-choices.is-expanded { grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .format-choices.is-expanded > button { grid-column: span 5; }
  .format-choices.is-expanded > button:nth-child(n + 5) { grid-column: span 4; }
}
.resize-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.image-fit-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-fit-choices.has-stretch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compression-choices button { min-height: 45px; }
.choice-grid button small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 450; }
.unit-choice { align-self: end; min-width: 0; }
.unit-choice .choice-grid { gap: 3px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.custom-size-fields .unit-choice .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-choice .choice-grid button { min-height: 38px; padding-inline: 2px; font-size: 10px; }
.choice-grid.unit-segments { grid-template-columns: repeat(var(--choice-count, 4), minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.choice-grid.unit-segments > button { position: relative; min-height: 36px; padding: 5px 4px; border: 0; border-radius: 0; background: transparent; font-size: 10px; }
.choice-grid.unit-segments > button + button::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 1px; background: color-mix(in srgb, var(--border) 60%, var(--surface)); pointer-events: none; }
.choice-grid.unit-segments > button:hover:not(:disabled) { background: var(--surface-soft); }
.choice-grid.unit-segments > button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-dark); }
.choice-grid.unit-segments > button:focus-visible { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--primary); }
.unit-choice .choice-grid.unit-segments > button { padding-inline: 2px; }
.choice-grid.unit-segments .choice-icon { width: 13px; height: 13px; }
.choice-grid.unit-segments.print-size-choices { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.compact-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.field-group { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.custom-size-fields { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 86px; gap: 7px; }
#dpiCustomFields { display: block; }
#dpiCustomFields input { width: 100%; }
.custom-size-fields label, .dimension-fields label, .single-dimension label, .resolution-field label { display: flex; flex-direction: column; gap: 4px; }
.custom-size-fields label > span:not(.number-entry), .dimension-fields label > span:not(.number-entry), .single-dimension label > span:not(.number-entry), .resolution-field label > span:not(.number-entry) { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.custom-size-fields label > small { color: var(--primary); font-size: 10px; font-weight: 650; }
.target-resize-option { grid-column: 1 / -1; flex-direction: row !important; justify-content: flex-start; padding-top: 2px; }
.checkbox-line { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.checkbox-line input { accent-color: var(--primary); }
.transparency-notice { margin: 8px 0 0; padding: 7px 9px; border-radius: 8px; background: repeating-conic-gradient(#ebedf1 0% 25%, #fff 0% 50%) 50% / 14px 14px; color: #263143; font-size: 10.5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }

.resize-section > .setting-heading-row { margin-bottom: 6px; }
.details-content { display: flex; flex-direction: column; gap: 8px; }
.resize-dynamic-area { display: flex; flex-direction: column; gap: 8px; transition: min-height .16s ease; }
.dimension-fields { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) minmax(96px,.72fr); gap: 6px; align-items: end; }
.dimension-fields.no-lock { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) minmax(96px,.72fr); }
.dimension-times { align-self: end; min-height: 38px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.unit-field { min-width: 0; }
.single-dimension, .resolution-field { width: 100%; max-width: none; }
.input-with-unit { position: relative; display: block; }
.input-with-unit input { padding-right: 38px; }
.input-with-unit small { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 10px; }
.resize-option-row { display: flex; align-items: center; justify-content: flex-start; gap: 24px; padding-top: 2px; flex-wrap: wrap; }
.resize-option-row .checkbox-line { min-width: 0; min-height: 30px; padding-inline: 4px; justify-content: flex-start; font-size: 10.5px; line-height: 1.25; white-space: nowrap; }
.resize-option-row .checkbox-line input { flex: 0 0 auto; }
.upscale-settings-block { padding-bottom: 9px; }
.upscale-range-row { display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; column-gap: 8px; }
.upscale-range-label { min-width: 0; flex: 1; display: block; }
.upscale-range-label input[type="range"] { width: 100%; height: 20px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.upscale-range-label input[type="range"]:disabled { cursor: not-allowed; }
.upscale-factor-value { width: 32px; height: 20px; display: flex; align-items: center; justify-content: flex-end; align-self: center; color: var(--text); font-size: 11px; font-weight: 750; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.upscale-status-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 4px; }
.upscale-summary { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upscale-limit-message { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; margin: 0; color: #9b6b00; font-size: 10.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.upscale-limit-message[hidden] { display: none; }
.upscale-limit-message svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
html[data-theme="dark"] .upscale-limit-message { color: #f0c34f; }
.upscale-batch-summary { margin: 3px 0 0; color: var(--primary); font-size: 10.5px; font-weight: 650; line-height: 1.35; }
.upscale-batch-summary[hidden] { display: none; }
.social-preset-section { min-height: 0; }
.preset-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset-choices > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.preset-choices button { display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding-inline: 5px; text-align: left; font-size: 10.5px; line-height: 1.25; }
.preset-choices button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.safe-area-control { margin-top: 7px; justify-content: flex-start; font-size: 11px; }
.safe-area-guide { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; background: transparent; }
.safe-area-guide[hidden], .safe-area-control[hidden] { display: none; }
.safe-area-guide > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.safe-area-label { position: absolute; transform: translateX(-50%); padding: 0; color: #fff; font-size: 9px; font-weight: 500; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.fit-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset-platform-icon { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 5px; color: var(--text); display: grid; place-items: center; }
.preset-platform-icon svg { width: 19px; height: 19px; stroke: none; }
.preset-platform-icon.youtube { color: #ff0033; }
.preset-platform-icon.instagram { color: #fff; background: linear-gradient(35deg, #feda75 0%, #fa7e1e 27%, #d62976 57%, #962fbf 78%, #4f5bd5 100%); }
.preset-platform-icon.instagram svg { width: 18px; height: 18px; }
.preset-platform-icon.facebook { color: #fff; background: #1877f2; border-radius: 50%; }
.preset-platform-icon.linkedin { color: #fff; background: #0a66c2; border-radius: 4px; }
.preset-platform-icon.pinterest { color: #e60023; }
.settings-toggle-stack { min-width: 0; display: grid; gap: 7px; margin-top: 0; }
.settings-toggle-row { min-width: 0; min-height: 49px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
label.settings-toggle-row, .settings-toggle-copy { cursor: pointer; }
.settings-toggle-copy { min-width: 0; flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 1px 5px; }
.settings-toggle-copy .settings-toggle-description { flex: 1 0 100%; }
.settings-toggle-copy .shared-section-badge { margin: 0; }
.settings-toggle-row .settings-toggle-title { color: var(--text); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
.settings-toggle-row .settings-toggle-description { color: color-mix(in srgb, var(--text) 72%, var(--surface)); font-size: 11px; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-toggle-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.metadata-view-button { min-height: 28px; flex: 0 0 auto; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.metadata-view-button:hover:not(:disabled) { background: var(--primary-soft); }
.settings-toggle-row input[type="checkbox"] { appearance: none; width: 38px; height: 22px; flex: 0 0 38px; border: 0; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .16s ease; }
.settings-toggle-row input[type="checkbox"]::after { content: ""; position: absolute; width: 18px; height: 18px; top: 2px; left: 2px; border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 3px rgba(0,0,0,.24); }
.settings-toggle-row input[type="checkbox"]:checked { background: var(--primary); }
.settings-toggle-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.settings-toggle-row input[type="checkbox"]:indeterminate { background: color-mix(in srgb, var(--primary) 58%, var(--border-strong)); }
.settings-toggle-row input[type="checkbox"]:indeterminate::after { transform: translateX(8px); }
.settings-toggle-row input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.pdf-settings { padding: 0; border: 0; border-radius: 0; background: transparent; }
.pdf-output-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdf-output-choices.is-single-image { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdf-output-choices button { padding-inline: 4px; font-size: 10.5px; }
.pdf-size-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pdf-size-choices button { padding-inline: 4px; font-size: 10px; }
.pdf-custom-fields { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.pdf-fit-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdf-margin-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdf-margin-choices button { padding-inline: 3px; font-size: 10.5px; white-space: nowrap; }
.pdf-margin-field { width: 100%; max-width: none; margin-top: 8px; }
.pdf-transparency-note { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.results-section { margin-top: 16px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.results-heading-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 12px; }
.results-heading-row h2 { margin: 0; font-size: 18px; }
.results-heading-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.download-all-button, .download-result-button, .copy-result-button { border: 1px solid var(--border); background: var(--surface); color: var(--primary); }
.download-all-button svg, .download-result-button svg, .copy-result-button svg { width: 17px; height: 17px; }
.download-all-button:disabled { opacity: .5; cursor: not-allowed; }
.download-all-button.is-working { opacity: 1; cursor: progress; }
.download-all-button.is-working svg { animation: working-pulse .8s ease-in-out infinite; }
.result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.copy-result-button { min-height: 40px; padding: 0 13px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 750; cursor: pointer; }
.copy-result-button:hover:not(:disabled), .download-result-button:hover { background: var(--primary-soft); }
.copy-result-button:disabled { opacity: .5; cursor: wait; }
.result-actions .is-working { opacity: 1; pointer-events: none; cursor: progress; }
.result-actions .is-working svg { animation: working-pulse .8s ease-in-out infinite; }
.result-actions .is-disabled { opacity: .45; pointer-events: none; }
.result-list { display: grid; gap: 10px; }
.result-card { display: grid; grid-template-columns: 170px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.result-visuals { display: flex; align-items: center; justify-content: center; gap: 7px; }
.result-preview { width: 72px; margin: 0; position: relative; }
.result-preview img { width: 72px; height: 52px; object-fit: contain; border-radius: 6px; background: var(--surface-soft); }
.result-preview figcaption { color: var(--muted); font-size: 9px; text-align: center; }
.preview-arrow, .comparison-arrow { color: var(--primary); font-weight: 900; }
.pdf-result-icon { width: 72px; height: 52px; display: grid; place-items: center; background: var(--surface-soft); border-radius: 6px; }
.pdf-result-icon svg { width: 28px; height: 28px; }
.result-title-row { min-width: 0; width: 100%; display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.result-filename-row { min-width: 0; width: max-content; max-width: min(560px, calc(100% - 78px)); flex: 0 1 auto; display: inline-flex; align-items: center; gap: 2px; }
.result-filename-row > .result-filename { min-width: 42px; width: var(--filename-width, 120px); max-width: calc(100% - 27px); flex: 0 1 var(--filename-width, 120px); height: 27px; min-height: 27px !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--text); font-size: 13px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.result-filename:hover { background: var(--surface-soft) !important; }
.result-filename.is-editing { outline: 0 !important; background: var(--surface) !important; box-shadow: none; }
.rename-result-button { width: 27px; height: 27px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rename-result-button:hover { color: var(--primary); background: var(--primary-soft); }
.rename-result-button svg { width: 14px; height: 14px; }
.saving-badge { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-size: 9px; font-weight: 800; white-space: nowrap; }
.comparison-grid { display: flex; align-items: center; column-gap: 8px; row-gap: 3px; margin: 5px 0 0; padding: 0; color: var(--muted); font-size: 10px; flex-wrap: wrap; }
.comparison-stage { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.comparison-stage.is-source { color: color-mix(in srgb, var(--danger) 55%, var(--muted)); }
.comparison-stage.is-baseline { color: color-mix(in srgb, var(--icon-amber) 72%, var(--muted)); }
.comparison-stage.is-output { color: color-mix(in srgb, var(--success) 75%, var(--muted)); }
.comparison-side { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.comparison-side strong { color: var(--text); }
.result-note { margin: 5px 0 0; padding: 0; color: var(--primary); font-size: 10px; font-weight: 650; }
.site-footer { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 0 0 25px; color: var(--muted); font-size: 11px; text-align: left; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 500; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 36px)); padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease; }
.toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

dialog { border: 0; padding: 0; }
dialog::backdrop { background: rgba(5, 10, 18, .72); backdrop-filter: blur(5px); }
.metadata-dialog { width: min(660px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 40px)); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.34); }
.dialog-shell { max-height: inherit; display: flex; flex-direction: column; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; border-bottom: 1px solid var(--border); }
.dialog-header h2 { margin: 0; font-size: 19px; }
.metadata-dialog-body { padding: 15px 18px; min-height: 0; overflow-y: auto; }
.metadata-dialog-body h3 { margin: 0 0 7px; font-size: 12px; }
.metadata-dialog-body section + h3 { margin-top: 13px; }
.detected-metadata { display: grid; gap: 5px; margin-bottom: 13px; }
.detected-metadata p { margin: 0; display: grid; grid-template-columns: 125px 1fr; gap: 10px; padding: 6px 8px; border-radius: 7px; background: var(--surface-soft); font-size: 11px; }
.detected-metadata strong { color: var(--muted); }
.metadata-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.metadata-category-button { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; cursor: pointer; }
.metadata-category-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.metadata-category-button .trash { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); background: var(--surface-soft); }
.metadata-category-button[aria-pressed="true"] .trash { color: var(--danger); }
.metadata-category-button svg { width: 16px; height: 16px; }
.metadata-category-button span:not(.trash) { display: flex; flex-direction: column; }
.metadata-category-button strong { font-size: 12px; }
.metadata-category-button small { color: var(--muted); font-size: 10px; }
.batch-dialog-body { padding: 14px 18px; min-height: 0; overflow-y: auto; }
.batch-mode-tabs { display: flex; gap: 6px; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.batch-mode-tabs button { flex: 1; min-height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 11px; font-weight: 650; cursor: pointer; }
.batch-mode-tabs button[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.batch-sections-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.batch-sections-list > .batch-section-row:last-child:nth-child(odd) { grid-column: 1 / -1; width: 100%; }
.batch-section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 41px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 11.5px; font-weight: 650; cursor: pointer; }
.batch-section-row input { accent-color: var(--primary); flex: 0 0 auto; }
.dialog-footer { padding: 12px 18px 17px; display: flex; justify-content: flex-end; }
.dialog-footer .primary-button { min-width: 100px; }

.image-editor-dialog { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; background: #1b1b1c; color: #f4f4f5; }
.image-editor-dialog::backdrop { background: #1b1b1c; }
.editor-shell { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 78px minmax(0,1fr) 170px; background: #1b1b1c; }
.editor-header { display: grid; grid-template-columns: minmax(330px, 1fr) auto minmax(260px, 1fr); align-items: center; gap: 20px; padding: 10px 24px; border-bottom: 1px solid #303033; }
.zoom-controls, .editor-tools, .editor-actions { display: flex; align-items: center; gap: 5px; }
.zoom-controls { justify-self: start; padding: 4px; border: 1px solid #303033; border-radius: 10px; background: #202021; }
.editor-header button { border: 0; background: transparent; color: #efeff2; cursor: pointer; }
.zoom-controls button { min-width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; }
.zoom-controls button:hover:not(:disabled), .editor-tool:hover { background: #2b2b2e; }
.zoom-controls button:disabled { color: #656568; cursor: not-allowed; }
.zoom-controls svg { width: 20px; height: 20px; }
.zoom-controls output { min-width: 48px; text-align: center; font-size: 13px; }
.editor-separator { width: 1px; height: 30px; background: #55555a; margin: 0 3px; }
.text-control { padding: 0 8px !important; color: #b8b8bd !important; }
.editor-tools { justify-self: center; align-self: stretch; gap: 12px; }
.editor-tool { position: relative; min-width: 70px; height: 58px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #d5d5d9 !important; }
.editor-tool svg { width: 22px; height: 22px; }
.editor-tool span { font-size: 10px; }
.editor-tool.is-active { color: #e49bec !important; }
.editor-tool.is-active::after { content: ""; position: absolute; bottom: -10px; width: 24px; height: 3px; border-radius: 3px; background: #d887e5; }
.editor-actions { justify-self: end; }
.editor-save-button, .editor-cancel-button { min-width: 108px; height: 40px; border-radius: 7px !important; padding: 0 16px; font-weight: 700; }
.editor-save-button { background: #db94e5 !important; color: #201521 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.editor-save-spinner { width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid rgba(32, 21, 33, .25); border-top-color: currentColor; border-radius: 50%; animation: upload-spin .72s linear infinite; }
.editor-save-spinner[hidden] { display: none; }
.editor-cancel-button { border: 1px solid #3e3e42 !important; background: #272729 !important; }

.editor-body { min-height: 0; display: grid; grid-template-columns: 76px minmax(0,1fr) 76px auto; position: relative; overflow: hidden; }
.editor-stage { min-width: 0; min-height: 0; overflow: auto; display: grid; place-items: center; position: relative; }
.checkerboard-dark { background-color: #19191a; background-image: linear-gradient(45deg, #202022 25%, transparent 25%), linear-gradient(-45deg, #202022 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #202022 75%), linear-gradient(-45deg, transparent 75%, #202022 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.editor-canvas-wrap { position: relative; transform-origin: center; transition: transform .12s ease; line-height: 0; }
#editorCanvas { display: block; max-width: none; box-shadow: 0 8px 35px rgba(0,0,0,.36); }
.editor-loading { position: absolute; padding: 9px 13px; border-radius: 8px; background: rgba(25,25,27,.86); color: #d5d5d9; font-size: 12px; }
.editor-nav-button { align-self: center; justify-self: center; width: 42px; height: 62px; border: 1px solid #353538; border-radius: 10px; background: #242426; color: #f1f1f3; display: grid; place-items: center; cursor: pointer; z-index: 3; }
.editor-nav-button:disabled { opacity: .25; cursor: default; }
.editor-nav-button svg { width: 23px; height: 23px; }
.adjustment-panel { width: min(350px, 30vw); min-width: 285px; height: 100%; border-left: 1px solid #323235; background: #242425; overflow: hidden; }
.adjustment-scroll { height: 100%; overflow-y: auto; padding: 22px 26px 40px; scrollbar-color: #777 #2a2a2c; }
.adjustment-scroll h3 { margin: 0 0 18px; font-size: 17px; }
.adjustment-scroll h3:not(:first-child) { margin-top: 28px; }
.adjustment-control { display: block; margin-bottom: 22px; }
.adjustment-control > span { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 10px; font-size: 13px; }
.adjustment-control input { width: 100%; accent-color: #dc8de6; touch-action: none; }

.crop-overlay { position: absolute; inset: 0; pointer-events: none; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(0,0,0,.48); pointer-events: auto; cursor: move; }
.crop-grid-line { position: absolute; background: rgba(255,255,255,.65); pointer-events: none; }
.crop-grid-v { top: 0; bottom: 0; width: 1px; }
.crop-grid-h { left: 0; right: 0; height: 1px; }
.crop-grid-v.one { left: 33.333%; }.crop-grid-v.two { left: 66.666%; }.crop-grid-h.one { top: 33.333%; }.crop-grid-h.two { top: 66.666%; }
.crop-box i { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; background: transparent; }
.crop-box i[data-crop-handle="nw"] { left: -4px; top: -4px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.crop-box i[data-crop-handle="n"] { left: 50%; top: -5px; width: 24px; height: 7px; transform: translateX(-50%); border: 0; border-top: 4px solid #fff; cursor: ns-resize; }
.crop-box i[data-crop-handle="ne"] { right: -4px; top: -4px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.crop-box i[data-crop-handle="e"] { right: -5px; top: 50%; width: 7px; height: 24px; transform: translateY(-50%); border: 0; border-right: 4px solid #fff; cursor: ew-resize; }
.crop-box i[data-crop-handle="se"] { right: -4px; bottom: -4px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.crop-box i[data-crop-handle="s"] { left: 50%; bottom: -5px; width: 24px; height: 7px; transform: translateX(-50%); border: 0; border-bottom: 4px solid #fff; cursor: ns-resize; }
.crop-box i[data-crop-handle="sw"] { left: -4px; bottom: -4px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.crop-box i[data-crop-handle="w"] { left: -5px; top: 50%; width: 7px; height: 24px; transform: translateY(-50%); border: 0; border-left: 4px solid #fff; cursor: ew-resize; }

.editor-footer { position: relative; min-width: 0; border-top: 1px solid #303033; background: #1d1d1f; display: flex; align-items: center; justify-content: center; padding: 13px 30px; overflow-x: auto; }
.editor-file-position { position: absolute; left: 18px; top: 13px; max-width: 220px; display: flex; flex-direction: column; }
.editor-file-position strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.editor-file-position span { color: #99999f; font-size: 10px; }
.tool-controls { width: min(1100px, calc(100% - 250px)); }
.crop-controls { display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 9px; }
.ratio-options { display: flex; justify-content: center; gap: 5px; max-width: 100%; overflow-x: auto; }
.ratio-options button, .filter-controls button, .markup-controls button { border: 1px solid #343438; background: #252527; color: #ededf0; border-radius: 7px; cursor: pointer; }
.ratio-options button { min-width: 66px; height: 29px; font-size: 10px; }
.ratio-options button.is-active, .filter-controls button.is-active { border-color: #d989e4; color: #e6a1ee; }
.custom-ratio-control { height: 29px; flex: 0 0 auto; padding: 2px 5px; border: 1px solid #343438; border-radius: 7px; background: #252527; color: #ededf0; display: inline-flex; align-items: center; gap: 3px; }
.custom-ratio-control.is-active { border-color: #d989e4; color: #e6a1ee; }
.custom-ratio-control input { width: 38px; min-height: 23px; height: 23px; padding: 0 3px; border: 0; border-radius: 4px; background: #1c1c1e; color: #fff; text-align: center; font-size: 10px; }
.custom-ratio-control > .number-entry { width: 38px; flex: 0 0 38px; }
.custom-ratio-control input::-webkit-inner-spin-button { appearance: none; }
.tilt-control { width: min(620px, 70%); display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }
.tilt-control output { text-align: right; font-size: 12px; }
.tilt-control input { width: 100%; accent-color: #fff; }
.transform-buttons { display: flex; gap: 18px; }
.transform-buttons button { min-width: 74px; border: 0; background: transparent; color: #dedee2; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.transform-buttons svg { width: 21px; height: 21px; }
.transform-buttons span { font-size: 9px; }
.filter-controls { display: flex; justify-content: center; gap: 10px; overflow-x: auto; }
.filter-controls button { min-width: 98px; padding: 7px; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 10px; }
.filter-swatch { display: block; width: 76px; height: 74px; border-radius: 6px; background: linear-gradient(140deg, #294a76, #d58a67 55%, #f0d7a2); }
.filter-swatch.auto { background: linear-gradient(140deg, #203f6b, #d76455 47%, #f7dd94); filter: saturate(1.18) contrast(1.08) brightness(1.04); }
.filter-swatch.vivid { filter: saturate(1.5) contrast(1.15); }.filter-swatch.warm { filter: sepia(.25) saturate(1.2); }.filter-swatch.cool { filter: hue-rotate(175deg) saturate(.9); }.filter-swatch.mono { filter: grayscale(1) contrast(1.08); }.filter-swatch.vintage { filter: sepia(.55) contrast(.92) saturate(.8); }
.markup-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.markup-controls label { display: flex; align-items: center; gap: 8px; color: #ededf0; font-size: 12px; }
.markup-controls input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid #444448; border-radius: 7px; background: transparent; }
.markup-size-control { min-width: 250px; }
.markup-size-control input { width: 160px; accent-color: #dc8de6; touch-action: none; }
.markup-size-control output { min-width: 42px; padding: 4px 7px; border: 1px solid #3d3d41; border-radius: 6px; background: #202022; color: #f3f3f5; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.markup-controls .markup-highlighter { color: #ededf0; }
.markup-controls .markup-highlighter input { width: 16px; height: 16px; accent-color: #dc8de6; }
.markup-controls button { height: 36px; padding: 0 13px; }
.markup-controls .markup-clear-button { display: inline-flex; align-items: center; gap: 6px; border-color: #4b3d40; background: #292426; color: #f1c7cd; }
.markup-controls .markup-clear-button:hover:not(:disabled) { border-color: #89535c; background: #35282b; }
.markup-controls .markup-clear-button:disabled { opacity: .42; cursor: default; }
.markup-clear-button svg { width: 16px; height: 16px; }
.editor-stage.is-markup #editorCanvas { cursor: crosshair; }

@media (max-width: 1050px) {
  .editor-header { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; }
  .editor-tools { grid-column: 1 / -1; grid-row: 2; }
  .editor-shell { grid-template-rows: 125px minmax(0,1fr) 170px; }
  .zoom-controls { grid-column: 1; grid-row: 1; }
  .editor-actions { grid-column: 2; grid-row: 1; }
  .adjustment-panel { width: 310px; }
}

@media (max-width: 980px) {
  .site-header-inner, #workspace, .site-footer { width: min(100% - 24px, 1160px); }
  .brand-by { display: none; }
  .header-nav-button span { display: none; }
  .header-nav-button { width: 38px; padding: 0; }
  #workspace { padding-top: 11px; }
  .tool-grid, .tool-shell.has-images .tool-grid { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .tool-shell { --empty-drop-height: clamp(185px, 30dvh, 260px); }
  .media-panel { height: clamp(360px, calc(100dvh - 82px), 540px); min-height: 360px; }
  .tool-shell.has-images .media-panel { height: auto; min-height: 0; }
  .tool-shell.has-images .preview-workspace, .tool-shell.has-images.has-pdf-pages .preview-workspace { flex: 0 0 auto; height: auto; }
  .tool-shell.has-images:not(.has-pdf-pages) .main-preview { height: clamp(260px, 48dvh, 460px); }
  .tool-shell.has-images.has-pdf-pages .main-preview { height: auto; min-height: clamp(260px, 48dvh, 460px); }
  .tool-shell:not(.has-images) .media-panel { height: auto; min-height: 0; }
  .settings-panel { height: auto; max-height: none; }
  #settingsForm { overflow: visible; }
  .result-card { grid-template-columns: 1fr; }
  .result-actions { justify-content: flex-start; }
  .editor-shell { grid-template-rows: auto minmax(0,1fr) 184px; }
  .editor-header { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 7px; padding: 8px 12px; }
  .zoom-controls { max-width: calc(100vw - 170px); overflow-x: auto; }
  .editor-tools { width: 100%; justify-content: center; overflow-x: auto; }
  .editor-tool { min-width: 66px; height: 50px; }
  .editor-actions button { min-width: 68px; padding: 0 8px; }
  .editor-body { grid-template-columns: 48px minmax(0,1fr) 48px; grid-template-rows: minmax(0,1fr) auto; }
  .adjustment-panel { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; height: 220px; border-left: 0; border-top: 1px solid #323235; }
  .adjustment-scroll { padding: 15px 18px 28px; }
  .editor-nav-button { width: 34px; height: 52px; }
  .editor-footer { padding: 10px; }
  .editor-file-position { display: none; }
  .tool-controls { width: 100%; }
  .tilt-control { width: 88%; }
  .transform-buttons { gap: 8px; }
  .transform-buttons button { min-width: 62px; }
  .markup-controls { justify-content: flex-start; padding-inline: 8px; overflow-x: auto; }
}

@media (max-width: 520px) {
  .tool-shell { --empty-drop-height: clamp(154px, 28dvh, 205px); }
  .tool-shell:not(.has-images) .media-panel { height: auto; min-height: 0; }
  .media-panel { padding: 10px; }
  .drop-zone { padding: 13px; }
  .drop-zone strong { font-size: 15px; }
  .drop-zone small { font-size: 10.5px; }
  .paste-row > span { display: none; }
  .preview-workspace { gap: 9px; }
  .tool-shell.has-images:not(.has-pdf-pages) .main-preview { height: clamp(230px, 44dvh, 360px); }
  .tool-shell.has-images.has-pdf-pages .main-preview { height: auto; min-height: clamp(230px, 44dvh, 360px); }
  .preview-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 5px; }
  .selected-file-copy { width: 100%; max-width: 100%; }
  .preview-toolbar-actions { width: 100%; justify-content: flex-start; }
  .preview-toolbar-actions .text-button { margin-left: auto; }
  .compact-button { padding: 0 8px; font-size: 11px; }
  .compact-button svg { width: 16px; height: 16px; }
  .main-preview-button { padding: 15px; }
  .main-preview-button.has-pdf-page-caption { padding-bottom: 72px; }
  .main-preview-button > .preview-page-caption { bottom: 54px; }
  .adjust-history-controls { top: 52px; }
  .operation-preview-status { inset: 0; padding: 18px; }
  .pdf-page-scroller { padding: 20px 24px; }
  .compact-field-grid { grid-template-columns: 1fr; }
  .dimension-fields, .dimension-fields.no-lock { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr); }
  .dimension-fields .unit-field { grid-column: 1 / -1; }
  .quick-actions { gap: 5px; padding: 9px; }
  .quick-actions .primary-button, .quick-actions .secondary-button { min-height: 38px; padding-inline: 7px; font-size: 11px; }
  .quick-actions .primary-button { flex-basis: 104px; }
  .quick-actions .secondary-button { flex-basis: 72px; }
  .metadata-category-list, .batch-sections-list { grid-template-columns: 1fr; }
  .batch-sections-list > .batch-section-row:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  #settingsForm { padding: 10px; }
  .resize-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdf-size-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdf-margin-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset-choices { grid-template-columns: 1fr; }
  .resize-option-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .resize-option-row .checkbox-line { justify-content: flex-start; }
  .choice-grid button { font-size: 11px; }
  .editor-shell { grid-template-rows: auto minmax(0,1fr) 178px; }
  .zoom-controls .text-control, .zoom-controls .editor-separator { display: none; }
  .editor-tool span { display: none; }
  .editor-tool { min-width: 46px; }
  .editor-tool.is-active::after { bottom: -7px; }
  .editor-actions button { min-width: 60px; height: 36px; font-size: 11px; }
  .ratio-options { justify-content: flex-start; width: 100%; }
  .transform-buttons span { display: none; }
  .transform-buttons button { min-width: 44px; }
  .markup-controls { gap: 8px; flex-wrap: wrap; }
  .results-heading-row { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 520px) {
  .compression-choices .visual-choice { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-inline: 3px; text-align: center; }
  .compression-choices .visual-choice > .choice-icon { width: 16px; height: 16px; }
  .compression-choices .choice-copy { align-items: center; text-align: center; }
}

@media (max-width: 360px) {
  .site-header-inner, #workspace, .site-footer { width: calc(100% - 16px); }
  .site-header-inner { gap: 8px; }
  .brand { gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .brand-name { font-size: 15px; }
  .header-nav-button, .shell-icon-button { width: 34px; min-height: 36px; padding: 0; }
  .header-actions { border-radius: 12px; }
  .quick-actions, #settingsForm { padding-inline: 8px; }
  .settings-block { padding-inline: 8px; }
  .choice-grid { gap: 4px; }
  .choice-grid button { padding-inline: 3px; font-size: 10.5px; }
  .compression-choices .visual-choice > .choice-icon { width: 15px; height: 15px; }
  .pdf-output-choices button, .pdf-size-choices button, .pdf-margin-choices button { padding-inline: 2px; font-size: 9.5px; }
  .settings-toggle-row { padding-inline: 7px; gap: 6px; }
  .metadata-view-button { padding-inline: 4px; font-size: 10.5px; }
  .results-section { padding: 12px; }
}

@media (min-width: 981px) and (max-height: 520px) {
  .tool-shell { --empty-drop-height: clamp(170px, 42dvh, 230px); }
}

@media (max-height: 650px) {
  .editor-shell { grid-template-rows: auto minmax(110px, 1fr) 126px; }
  .editor-header { padding-block: 5px; }
  .editor-tool { min-width: 48px; height: 38px; }
  .editor-tool span { display: none; }
  .editor-tool.is-active::after { bottom: -5px; }
  .editor-footer { padding: 6px 12px; }
  .filter-controls { gap: 6px; }
  .filter-controls button { min-width: 68px; padding: 4px; }
  .filter-swatch { width: 52px; height: 46px; }
  .ratio-options button { min-width: 58px; }
  .adjustment-panel { position: absolute; z-index: 8; left: 48px; right: 48px; bottom: 0; width: auto; min-width: 0; height: min(150px, 48%); border-top: 1px solid #323235; border-left: 0; }
  .adjustment-scroll { padding: 12px 16px 22px; }
  .adjustment-scroll h3 { margin-bottom: 10px; font-size: 14px; }
  .adjustment-control { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Theme only the interface: image transparency and PDF paper keep their true colors. */
html[data-theme="dark"] input::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .upload-progress { background: linear-gradient(145deg, rgba(0, 0, 0, .48), rgba(24, 24, 24, .64)); }
html[data-theme="dark"] .operation-preview-status { background: linear-gradient(145deg, rgba(0, 0, 0, .50), rgba(24, 24, 24, .66)); }
html[data-theme="dark"] .transparency-notice { background: repeating-conic-gradient(#222222 0% 25%, #2c2c2c 0% 50%) 50% / 14px 14px; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
html[data-theme="dark"] .settings-toggle-row input[type="checkbox"]:checked::after { background: var(--on-primary); }
html[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .72); }

html[data-theme="dark"] .image-editor-dialog,
html[data-theme="dark"] .image-editor-dialog::backdrop,
html[data-theme="dark"] .editor-shell { background: var(--bg); }
html[data-theme="dark"] .editor-footer { background: var(--surface); }
html[data-theme="dark"] .adjustment-panel { background: var(--surface-raised); }
html[data-theme="dark"] .checkerboard-dark { background-color: #000000; background-image: linear-gradient(45deg, #121212 25%, transparent 25%), linear-gradient(-45deg, #121212 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #121212 75%), linear-gradient(-45deg, transparent 75%, #121212 75%); }