/* finesse · register=product · shell=floating-workbench · palette=cool-slate+cobalt
 * material=quiet-institutional · SOUL=5 SPECTACLE=2 DENSITY=7 */
:root {
  --canvas: #eef1f4;
  --canvas-deep: #e7ebef;
  --surface: #fcfdfe;
  --surface-raised: #f8fafc;
  --surface-subtle: #f4f6f8;
  --surface-accent: #edf3fb;
  --surface-accent-strong: #e4edf9;
  --ink: #16263a;
  --ink-soft: #44556a;
  --muted: #68778a;
  --faint: #94a0ae;
  --line: rgba(31, 50, 72, .10);
  --line-strong: rgba(31, 50, 72, .15);
  --accent: #2f62c6;
  --accent-hover: #244fa4;
  --accent-soft: rgba(47, 98, 198, .10);
  --accent-wash: rgba(47, 98, 198, .04);
  --accent-focus: rgba(47, 98, 198, .18);
  --success: #17865f;
  --success-soft: #e9f6f0;
  --success-line: rgba(23, 134, 95, .28);
  --warning: #a96816;
  --warning-soft: #fff6e7;
  --warning-line: rgba(169, 104, 22, .30);
  --error: #b4474e;
  --error-soft: #fdf0f1;
  --error-line: rgba(180, 71, 78, .28);
  --on-accent: #f8fbff;
  --scrim: rgba(14, 29, 48, .56);
  --highlight: rgba(252, 253, 254, .94);
  --header-bg: rgba(248, 250, 252, .92);
  --shadow-shell: 0 1px 2px rgba(22, 38, 58, .04), 0 22px 58px -26px rgba(22, 38, 58, .24);
  --shadow-panel: 0 8px 24px -18px rgba(22, 38, 58, .22);
  --shadow-control: 0 8px 18px -14px rgba(22, 38, 58, .28);
  --shadow-toast: 0 18px 46px -20px rgba(22, 38, 58, .46);
  --focus: 0 0 0 4px var(--accent-focus);
  --radius-shell: 18px;
  --radius-panel: 14px;
  --radius-control: 11px;
  --radius-small: 9px;
  --font-ui: "MiSans", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-data: Bahnschrift, "Segoe UI Variable", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-ui);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; }
body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -8%, var(--highlight), transparent 29rem),
    linear-gradient(180deg, var(--canvas) 0, var(--canvas-deep) 100%);
  font-size: 14px;
}
button, input { font: inherit; }
button, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
p { text-wrap: pretty; }
button:focus-visible,
label:has(input:focus-visible),
[role="button"]:focus-visible {
  outline: 0;
  box-shadow: var(--focus);
}

.window-line {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
}
.window-line span { display: none; }

.app-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 2px max(22px, calc((100vw - 1480px) / 2)) 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--highlight);
  backdrop-filter: blur(14px);
}
.header-copy {
  width: min(1480px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}
.brand-row { min-width: 0; display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-control);
}
.brand-logo img { width: 34px; height: 34px; border-radius: 9px; }
.brand-row h1 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 780;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.brand-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .01em; }
.header-actions { display: flex; align-items: center; }
.web-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.web-badge i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--success);
  font: 800 10px/1 var(--font-data);
  font-style: normal;
}

.workspace { width: min(1480px, calc(100% - 32px)); margin: 18px auto 12px; }
.workbench-shell {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-shell);
  background: var(--surface);
  box-shadow: var(--shadow-shell);
}
.upload-section { padding: 22px 24px 18px; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.section-heading h2,
.scan-description h2 {
  color: var(--ink);
  font-size: 19px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.section-heading p,
.scan-description p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.secondary-button {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-soft);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--surface-accent);
  box-shadow: var(--shadow-control);
  transform: translateY(-1px);
}
.secondary-button:active { transform: translateY(0) scale(.985); }
.secondary-button input,
.folder-button input,
.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.button-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mixed-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--success-line);
  border-radius: var(--radius-control);
  background: var(--success-soft);
}
.mixed-notice[hidden] { display: none; }
.mixed-notice div { display: flex; align-items: center; gap: 12px; }
.mixed-notice strong { color: var(--success); }
.mixed-notice span { color: var(--ink-soft); font-size: 12px; }
.mixed-notice button,
.link-button {
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
}

.side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.side-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-panel);
  transition: border-color .24s ease, box-shadow .24s ease;
}
.side-panel.is-paired { border-color: var(--success-line); box-shadow: 0 8px 24px -18px var(--success-line); }
.side-panel.is-mismatch { border-color: var(--warning-line); box-shadow: 0 8px 24px -18px var(--warning-line); }
.side-title {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.side-glyph {
  width: 46px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--accent);
  background: var(--surface-accent);
}
.side-glyph svg { width: 25px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.side-title h3 { color: var(--ink); font-size: 15px; font-weight: 780; line-height: 1.25; }
.side-title p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.count-badge {
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font: 720 11px/1.2 var(--font-data);
  white-space: nowrap;
  transition: color .24s ease;
}
.count-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.count-badge.is-paired { color: var(--success); }
.count-badge.is-paired::before { content: "✓"; width: 16px; height: 16px; display: grid; place-items: center; border: 0; background: var(--success-soft); font-size: 11px; }
.count-badge.is-warning { color: var(--warning); }
.count-badge.is-warning::before { content: "!"; width: 16px; height: 16px; display: grid; place-items: center; border: 0; background: var(--warning-soft); font-size: 11px; }

.drop-zone {
  position: relative;
  min-height: 276px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 14px 14px 0;
  padding: 24px;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-panel);
  color: var(--ink);
  background: var(--surface-subtle);
  text-align: center;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.drop-zone > * { position: relative; z-index: 1; }
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent);
  background-color: var(--surface-accent);
  box-shadow: inset 0 0 0 3px var(--accent-wash), var(--shadow-panel);
  transform: translateY(-1px);
}
.drop-zone.drag-over { border-style: solid; transform: translateY(-2px) scale(1.002); }
.drop-zone.has-files { align-items: stretch; justify-content: flex-start; border-style: solid; border-color: var(--line-strong); background-color: var(--surface-raised); text-align: left; }
.drop-icon {
  width: 66px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  color: var(--accent-hover);
  background: var(--surface-accent);
  box-shadow: var(--shadow-control);
}
.drop-icon svg { width: 35px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.drop-zone.has-files > .drop-icon,
.drop-zone.has-files > strong,
.drop-zone.has-files > p { display: none; }
.drop-zone > strong { font-size: 16px; font-weight: 780; line-height: 1.3; }
.drop-zone > p { margin: 8px 0 12px; color: var(--muted); font-size: 12px; }
.file-preview {
  width: 100%;
  min-height: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}
.preview-empty {
  grid-column: 1 / -1;
  display: block;
  color: var(--accent);
  text-align: center;
}
.preview-empty.managed { color: var(--success); }
.preview-item {
  position: relative;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, box-shadow .24s ease;
}
.preview-item:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.preview-item.is-paired { border-color: var(--success-line); }
.preview-item.is-unpaired { border-color: var(--warning-line); background: var(--warning-soft); }
.preview-thumb {
  position: relative;
  width: 58px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-subtle);
  font: 700 9px/1 var(--font-data);
}
.preview-thumb::before { content: "IMG"; }
.preview-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-thumb.no-preview img { display: none; }
.preview-copy { min-width: 0; display: grid; gap: 5px; }
.preview-copy strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.preview-status { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-size: 10px; }
.preview-status::before { content: "✓"; font-weight: 800; }
.is-unpaired .preview-status { color: var(--warning); }
.is-unpaired .preview-status::before { content: "!"; }
.preview-remove {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease, transform .22s ease;
}
.preview-remove:hover { color: var(--error); background: var(--error-soft); transform: scale(1.05); }
.preview-remove:focus-visible { outline: 0; box-shadow: var(--focus); }
.drop-zone.has-files .file-preview { align-content: start; }
.drop-zone.has-files { max-height: 320px; overflow-y: auto; }
.drop-zone.has-files::-webkit-scrollbar { width: 8px; }
.drop-zone.has-files::-webkit-scrollbar-thumb { border: 2px solid var(--surface-raised); border-radius: 999px; background: var(--line-strong); }
.side-panel.is-mismatch .panel-actions { background: var(--warning-soft); }
.side-panel.is-paired .panel-actions { background: var(--success-soft); }
.panel-actions { transition: background-color .24s ease; }
.panel-actions .secondary-button { min-height: 44px; color: var(--accent); }
.link-button { transition: color .22s ease, background-color .22s ease; }
.link-button:hover:not(:disabled) { color: var(--error); background: var(--error-soft); border-radius: 8px; }
.link-button:disabled { color: var(--faint); cursor: default; }
.mixed-mode .drop-zone { opacity: .58; transform: none; }

@supports not selector(:has(*)) {
  label:focus-within { box-shadow: var(--focus); }
}
.panel-actions {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px 14px;
}

.scan-section {
  display: grid;
  grid-template-columns: minmax(560px, 1.5fr) minmax(285px, .72fr) auto;
  align-items: stretch;
  gap: 0;
  margin: 0 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-subtle);
}
.scan-bundle { min-width: 0; padding: 16px 17px 17px; }
.scan-description { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scan-description h2 { font-size: 14px; }
.scan-description h2 small { margin-left: 7px; color: var(--muted); font-size: 11px; font-weight: 620; }
.scan-description p { margin-top: 5px; font-size: 11px; }
.output-files {
  max-width: 660px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-wrap: pretty;
}
.save-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border-left: 1px solid var(--line);
}
.save-label { color: var(--ink); font-size: 11px; }
.output-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow-control);
}
.output-row > span {
  min-width: 0;
  overflow: hidden;
  padding: 0 11px;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.output-row .secondary-button {
  min-height: 44px;
  padding: 0 11px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  color: var(--accent);
}
.ready-state {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.ready-state i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
}
.ready-state.ready { color: var(--success); }
.ready-state.ready i { border-color: var(--success); background: var(--success); box-shadow: inset 0 0 0 3px var(--success-soft); }
.ready-state.warning { color: var(--warning); }
.ready-state.warning i { border-color: var(--warning); background: var(--warning-soft); }
.ready-state.error { color: var(--error); }
.ready-state.error i { border-color: var(--error); background: var(--error-soft); }
.action-row {
  display: flex;
  align-items: center;
  padding: 16px;
  border-left: 1px solid var(--line);
}
.primary-button {
  min-height: 66px;
  width: 276px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 12px 24px -12px var(--accent);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), background-color .24s ease, box-shadow .24s ease;
}
.primary-button:hover { background: var(--accent-hover); box-shadow: 0 16px 28px -13px var(--accent-hover); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0) scale(.985); }
.primary-button:disabled { color: var(--faint); background: var(--surface-subtle); border-color: var(--line); box-shadow: none; cursor: not-allowed; transform: none; }

.progress-section {
  margin: 16px 24px 22px;
  padding: 15px 17px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-subtle);
}
.progress-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.progress-header > div { display: flex; align-items: center; gap: 13px; }
.progress-header strong { color: var(--ink); font-size: 11px; }
.progress-header span { color: var(--muted); font-size: 11px; }
#progress-percent { color: var(--accent); font: 730 12px/1 var(--font-data); }
.progress-track {
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--canvas-deep);
}
.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .35s cubic-bezier(.16, 1, .3, 1);
}
.is-processing .progress-track span {
  background-image: linear-gradient(110deg, var(--accent) 0 38%, var(--surface-accent-strong) 38% 50%, var(--accent) 50% 88%, var(--surface-accent-strong) 88%);
  background-size: 72px 100%;
  animation: progress-stripes 1.2s linear infinite;
}

.toast-region {
  position: fixed;
  z-index: 60;
  right: 24px;
  bottom: 24px;
  width: min(390px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 13px 12px 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-toast);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: auto;
  transition: opacity .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
}
.toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-soft);
  font: 800 13px/1 var(--font-data);
}
.toast.warning .toast-icon { color: var(--warning); background: var(--warning-soft); }
.toast.error .toast-icon { color: var(--error); background: var(--error-soft); }
.toast-message { min-width: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.toast-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.toast-close:hover { color: var(--ink); background: var(--surface-subtle); }
.progress-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.app-footer {
  width: min(1480px, calc(100% - 32px));
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 8px 2px 22px;
  color: var(--muted);
  font-size: 10px;
}

@keyframes tray-scan { from { top: 20%; } to { top: 80%; } }
@keyframes progress-stripes { to { background-position: 72px 0; } }

@media (max-width: 1180px) {
  .scan-section { grid-template-columns: minmax(0, 1fr) 300px; }
  .action-row { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--line); border-left: 0; }
  .primary-button { min-height: 48px; width: auto; }
}

@media (max-width: 900px) {
  .side-grid { grid-template-columns: minmax(0, 1fr); }
  .drop-zone { min-height: 240px; }
  .scan-section { grid-template-columns: minmax(0, 1fr); }
  .save-column,
  .action-row { border-top: 1px solid var(--line); border-left: 0; }
  .action-row { justify-content: stretch; }
  .primary-button { width: 100%; }
}

@media (max-width: 640px) {
  .app-header { height: auto; min-height: 66px; padding: 10px 14px 9px; }
  .brand-row { gap: 11px; }
  .brand-logo { width: 42px; height: 42px; border-radius: 12px; }
  .brand-logo img { width: 34px; height: 34px; }
  .brand-row h1 { font-size: 18px; }
  .brand-row p { max-width: 240px; margin-top: 3px; font-size: 10px; line-height: 1.35; }
  .web-badge { display: none; }
  .workspace,
  .app-footer { width: min(calc(100% - 18px), 1480px); }
  .workspace { margin-top: 10px; }
  .upload-section { padding: 16px 14px 14px; }
  .section-heading { align-items: stretch; flex-direction: column; gap: 13px; }
  .folder-button { width: 100%; }
  .side-title { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .count-badge { grid-column: 1 / -1; justify-self: stretch; padding-left: 54px; text-align: left; }
  .drop-zone { min-height: 224px; margin: 10px 10px 0; padding: 24px 12px; }
  .file-preview { grid-template-columns: minmax(0, 1fr); }
  .panel-actions { padding: 10px 10px 12px; }
  .scan-section { margin: 0 14px; }
  .scan-bundle,
  .save-column,
  .action-row { padding: 14px; }
  .progress-section { margin: 14px; padding: 14px; }
  .progress-header > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .progress-meta,
  .app-footer { flex-direction: column; }
  .mixed-notice,
  .mixed-notice div { align-items: flex-start; flex-direction: column; }
  .toast-region { right: 9px; bottom: 12px; width: calc(100% - 18px); }
}

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