Add status filtering and segmented progress v0.3

app/static/styles.css

@@ -41,12 +41,17 @@ button { color: inherit; }
 .folder-row strong, .folder-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .folder-row strong { max-width: 185px; }
 .folder-row span { color: var(--muted); font-size: 12px; margin-top: 4px; max-width: 185px; }
-.progress-track { height: 7px; background: #2a3440; border-radius: 99px; overflow: hidden; }
-.progress-bar { width: 0; height: 100%; background: var(--primary); transition: width .2s ease; }
+.progress-track { height: 7px; display: flex; background: #2a3440; border-radius: 99px; overflow: hidden; }
+.progress-segment { width: 0; height: 100%; flex: 0 0 auto; transition: width .2s ease; }
+.progress-segment.saved { background: var(--success); }
+.progress-segment.skipped { background: var(--warning); }
+.progress-segment.failed { background: var(--danger); }
 .status-legend { display: flex; gap: 12px; margin-top: 11px; color: var(--muted); font-size: 11px; }
 .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
 .dot.saved { background: var(--success); }.dot.skipped { background: #c49a5a; }.dot.pending { background: #748294; }.dot.failed { background: var(--danger); }
 .file-section { flex: 1; display: flex; min-height: 0; flex-direction: column; }
+.file-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.filename-filter { grid-column: 1 / -1; }
 .file-list { flex: 1; min-height: 120px; overflow: auto; margin-top: 10px; padding-right: 3px; }
 .empty-list { color: var(--muted); font-size: 13px; line-height: 1.55; padding: 15px 5px; }
 .file-row { width: 100%; border: 0; border-radius: 8px; background: transparent; display: grid; grid-template-columns: 50px minmax(0, 1fr) 22px; align-items: center; gap: 10px; padding: 8px; text-align: left; cursor: pointer; }