feat: backup manager #15 #16 #17 #18 #19 — preview, restore, purge vault, compress, auto-backup

#15: Click backup item to preview content in side panel (100KB limit)
#16: Purge all backups per vault (red 'Vider' button)
#17: /api/backups/compress — gzip backups older than N days
#18: /api/backups/auto — backup files modified since N hours
#19: Restore button per backup in manager with timestamp extraction
+ Professional side-panel preview, action buttons on hover, vault grouping

frontend/style.css

@@ -7615,3 +7615,59 @@ body.popup-mode .content-area {
   text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem;
 }
 .backup-manager-error { color: var(--danger); }
+
+/* Manager body: list + preview side panel */
+.backup-manager-body { display: flex; gap: 0; min-height: 400px; }
+
+.backup-manager-list { flex: 1; min-width: 0; }
+
+.backup-manager-preview {
+  width: 400px; flex-shrink: 0;
+  border-left: 1px solid var(--border);
+  background: var(--bg-primary);
+  display: flex; flex-direction: column;
+}
+.bm-preview-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; border-bottom: 1px solid var(--border);
+}
+.bm-preview-header h3 { margin: 0; font-size: 0.85rem; }
+.bm-preview-content {
+  flex: 1; overflow: auto; padding: 12px 14px;
+  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55;
+  white-space: pre-wrap; word-break: break-all;
+  color: var(--text-secondary); margin: 0;
+}
+
+/* Vault header with purge button */
+.bm-vault-header {
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
+}
+.bm-vault-meta { font-size: 0.7rem; color: var(--text-muted); flex: 1; }
+
+.bm-vault-purge {
+  padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
+  background: transparent; color: var(--danger); cursor: pointer;
+  font-size: 0.7rem; display: flex; align-items: center; gap: 4px;
+  transition: all 150ms ease;
+}
+.bm-vault-purge:hover { background: rgba(239,68,68,0.08); border-color: var(--danger); }
+
+/* Backup item actions */
+.bm-backup-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
+.bm-backup-item:hover .bm-backup-actions { opacity: 1; }
+
+.bm-backup-preview,
+.bm-backup-restore {
+  width: 22px; height: 22px; border: none; border-radius: 4px;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.bm-backup-preview:hover { color: var(--accent); background: rgba(59,130,246,0.1); }
+.bm-backup-restore:hover { color: #22c55e; background: rgba(34,197,94,0.1); }
+
+.bm-backup-item.active {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  border-radius: 4px;
+}