feat(archive): add retro theme support to archive browser

Implement retro-themed styling and classic pixelated icons for the
archive browser when the "retro" theme is active.

Changes include:
- Adding CSS overrides for `[data-theme="retro"]` to style the archive
  browser container, tree nodes, and hover states.
- Updating the JS preview script to dynamically append retro image
  icons (e.g., classic shell32/zipfldr icons) alongside SVGs.
- Toggling visibility between SVG and retro image icons using CSS
  based on the active theme.

backend/static/css/30-download.css

@@ -367,6 +367,20 @@
   color: var(--muted-foreground);
 }
 
+.archive-svg-icon,
+.archive-retro-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.archive-retro-icon {
+  display: none;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
 .archive-file-icon svg,
 .archive-chevron svg {
   fill: none;
@@ -408,6 +422,92 @@
   color: #f8fafc;
 }
 
+[data-theme="retro"] .archive-browser-preview {
+  border: 1px solid #000000;
+  background: #ffffff;
+  color: #000000;
+  box-shadow:
+    inset -1px -1px 0 #808080,
+    inset 1px 1px 0 #ffffff;
+}
+
+[data-theme="retro"] .archive-browser-header {
+  border-bottom: 1px solid #808080;
+  background: #c0c0c0;
+  color: #000000;
+  box-shadow:
+    inset -1px -1px 0 #808080,
+    inset 1px 1px 0 #ffffff;
+}
+
+[data-theme="retro"] .archive-browser-header span {
+  color: #404040;
+}
+
+[data-theme="retro"] .archive-tree {
+  background: #ffffff;
+  font-family: "PixelOperatorMono", "Courier New", monospace;
+}
+
+[data-theme="retro"] .archive-node-row {
+  min-height: 1.8rem;
+  border-radius: 0;
+  color: #000000;
+}
+
+[data-theme="retro"] .archive-node-row:hover {
+  background: #000078;
+  color: #ffffff;
+}
+
+[data-theme="retro"] .archive-node-size {
+  color: #404040;
+}
+
+[data-theme="retro"] .archive-node-row:hover .archive-node-size {
+  color: #ffffff;
+}
+
+[data-theme="retro"] .archive-chevron {
+  color: #000000;
+}
+
+[data-theme="retro"] .archive-folder[open] > summary .archive-chevron {
+  color: #000078;
+}
+
+[data-theme="retro"] .archive-node-row:hover .archive-chevron,
+[data-theme="retro"] .archive-node-row:hover .archive-file-icon {
+  color: #ffffff;
+}
+
+[data-theme="retro"] .archive-chevron svg {
+  width: 1.35rem;
+  height: 1.35rem;
+  stroke-width: 2.4;
+}
+
+[data-theme="retro"] .archive-file-icon {
+  width: 1.45rem;
+  height: 1.45rem;
+  color: #000000;
+}
+
+[data-theme="retro"] .archive-svg-icon {
+  display: none;
+}
+
+[data-theme="retro"] .archive-retro-icon {
+  display: block;
+}
+
+[data-theme="retro"] .archive-browser-empty,
+[data-theme="retro"] .archive-browser-legacy {
+  color: #000000;
+  background: #ffffff;
+  font-family: "PixelOperatorMono", "Courier New", monospace;
+}
+
 .archive-node-name {
   min-width: 0;
   overflow-wrap: anywhere;

backend/static/js/45-preview.js

@@ -707,7 +707,17 @@
     var element = document.createElement("span");
     element.className = "archive-file-icon archive-file-icon-" + icon;
     element.setAttribute("aria-hidden", "true");
-    element.innerHTML = archiveIconSVG(icon);
+    element.innerHTML = '<span class="archive-svg-icon">' + archiveIconSVG(icon) + '</span>';
+    var retroURL = archiveRetroIconURL(icon);
+    if (retroURL) {
+      var retro = document.createElement("img");
+      retro.className = "archive-retro-icon";
+      retro.src = retroURL;
+      retro.alt = "";
+      retro.decoding = "async";
+      retro.loading = "lazy";
+      element.appendChild(retro);
+    }
     return element;
   }
 
@@ -758,6 +768,21 @@
     return icons[icon] || icons.file;
   }
 
+  function archiveRetroIconURL(icon) {
+    var base = "/static/file-icons/retro/";
+    var icons = {
+      folder: "directory_open_file_mydocs-4.png",
+      img: "shimgvw.dll_14_1-2.png",
+      vid: "wmploc.dll_14_504-2.png",
+      aud: "wmploc.dll_14_610-2.png",
+      txt: "shell32.dll_14_151-2.png",
+      code: "mshtml.dll_14_2660-2.png",
+      arc: "zipfldr.dll_14_101-2.png",
+      file: "shell32.dll_14_152-2.png"
+    };
+    return base + (icons[icon] || icons.file);
+  }
+
   function formatArchiveCount(value, label) {
     value = Number(value || 0);
     return value + " " + label + (value === 1 ? "" : "s");