Show detailed batch repair preview

serato_doctor/webui/layout-fixes.css

@@ -139,6 +139,164 @@
   }
 }
 
+.batch-preview-modal {
+  width: min(820px, calc(100vw - 32px));
+  max-height: min(82vh, 760px);
+  padding: 24px;
+  overflow: auto;
+  border: 1px solid rgba(155, 135, 245, .3);
+  border-radius: 20px;
+  background: #161923;
+  color: var(--text);
+  box-shadow: 0 30px 100px rgba(0, 0, 0, .65);
+}
+
+.batch-preview-modal::backdrop {
+  background: rgba(4, 5, 8, .78);
+  backdrop-filter: blur(7px);
+}
+
+.modal-heading,
+.modal-actions,
+.modal-safety {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.modal-heading h2 {
+  margin: 0;
+  font-size: 23px;
+  letter-spacing: -.03em;
+}
+
+.modal-heading > button {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 28px;
+  cursor: pointer;
+}
+
+#batch-preview-summary {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.batch-preview-list {
+  display: grid;
+  gap: 10px;
+  max-height: 390px;
+  margin: 18px 0;
+  padding-right: 4px;
+  overflow: auto;
+}
+
+.preview-decision {
+  display: grid;
+  grid-template-columns: 80px 1fr 1fr;
+  gap: 13px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, .025);
+}
+
+.preview-decision > span,
+.preview-decision b {
+  color: var(--muted);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+
+.winner-path,
+.replaced-paths {
+  min-width: 0;
+}
+
+.winner-path strong,
+.winner-path small,
+.replaced-paths small {
+  display: block;
+  margin-top: 5px;
+  overflow-wrap: anywhere;
+}
+
+.winner-path strong {
+  color: #8ce4b8;
+  font-size: 11px;
+}
+
+.winner-path small,
+.replaced-paths small {
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.45;
+}
+
+.modal-safety {
+  justify-content: flex-start;
+  padding: 13px;
+  border: 1px solid rgba(102, 217, 232, .2);
+  border-radius: 12px;
+  background: rgba(102, 217, 232, .05);
+}
+
+.modal-safety > span {
+  color: var(--cyan);
+}
+
+.modal-safety p,
+.modal-safety strong,
+.modal-safety small {
+  display: block;
+  margin: 0;
+}
+
+.modal-safety strong {
+  font-size: 11px;
+}
+
+.modal-safety small {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.45;
+}
+
+.modal-actions {
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.modal-actions button {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 10px 13px;
+  background: rgba(255, 255, 255, .04);
+  color: var(--text);
+  font: 700 11px/1 inherit;
+  cursor: pointer;
+}
+
+#accept-preview {
+  border-color: transparent;
+  background: #6f5bd0;
+}
+
+@media (max-width: 620px) {
+  .preview-decision {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+}
+
 .file-compare-row {
   display: grid;
   gap: 8px;