Restructure Settings nav, modernize import page, dedup/genres UX polish

Settings is now one top-nav entry with Credentials and Jobs as sidebar
sub-pages (jobs moved from /jobs to /settings/jobs). Manual import page
replaces the bare file input and free-text filename field with a drag-drop
dropzone and a proper file-picker table. Genres page drops the "force"
checkbox for two explicit buttons (Preview / Fix genres now). Dedup's
"Scan now" runs both the file-naming and acoustic passes together, and the
table labels which pass caught each candidate instead of showing the raw
pass name. .btn-ghost gets a visible border so it reads as a real button
next to Delete/Danger actions instead of looking unaligned. Job names
throughout the UI are now human-readable instead of raw job_key strings.

Also includes the fpcalc exit-code fix from earlier (fingerprint index
was discarding valid fingerprints on files with a benign decode warning).

app/static/style.css

@@ -342,8 +342,13 @@ main {
 .btn-danger:hover { background: rgba(251, 113, 133, 0.18); }
 
 .btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
-.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
-.btn-ghost:hover { background: var(--panel); color: var(--fg); }
+/* A fully transparent border left the pill outline invisible, so a ghost
+   button sitting next to a filled one (Keep both / Delete, Edit / Delete)
+   read as unaligned text rather than a matching pair of buttons. A
+   visible-but-quiet border keeps the lower-emphasis look while still
+   giving it the same pill shape as everything else. */
+.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
+.btn-ghost:hover { background: var(--panel); color: var(--fg); border-color: var(--border-strong); }
 
 form.inline { display: inline-block; }
 .btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
@@ -390,6 +395,14 @@ select {
   background-size: 0.85rem 0.85rem;
   padding-right: 2.25rem;
 }
+/* The closed <select> box uses a translucent background (fine, since it
+   sits on top of the page). The open option list is a separate native
+   popup with no dark surface behind it, so that same translucent value
+   renders as plain white -- it needs an explicit opaque background. */
+select option {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
 
 .checkbox-field {
   display: flex;
@@ -559,6 +572,88 @@ tbody td.actions-cell { display: flex; gap: 0.5rem; flex-wrap: wrap; }
   .cred-grid { grid-template-columns: 1fr; }
 }
 
+/* ---- settings layout (sidebar sub-nav) ---- */
+
+.settings-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 2.25rem;
+}
+.settings-nav {
+  flex: 0 0 180px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  position: sticky;
+  top: 5.5rem;
+}
+.settings-nav a {
+  padding: 0.65rem 1rem;
+  border-radius: var(--radius-sm);
+  border-left: 2px solid transparent;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-decoration: none !important;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.settings-nav a:hover { color: var(--fg); background: var(--panel); }
+.settings-nav a.active {
+  color: var(--fg);
+  background: var(--panel-strong);
+  border-left-color: var(--iris-violet);
+}
+.settings-content { flex: 1; min-width: 0; }
+
+@media (max-width: 780px) {
+  .settings-layout { flex-direction: column; gap: 1.25rem; }
+  .settings-nav {
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 0.4rem;
+  }
+  .settings-nav a { border-left: none; border-radius: 999px; }
+  .settings-nav a.active { background: var(--gradient-holo); color: #08090d; }
+}
+
+/* ---- import dropzone ---- */
+
+.dropzone-panel { padding: 0; overflow: hidden; }
+.dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 3rem 1.5rem;
+  border: 1.5px dashed var(--border-strong);
+  border-radius: var(--radius);
+  margin: 0;
+  cursor: pointer;
+  text-align: center;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.dropzone:hover, .dropzone.dragover {
+  border-color: var(--iris-violet);
+  background: rgba(167, 139, 250, 0.06);
+}
+.dropzone .dropzone-icon { color: var(--iris-violet); filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.4)); }
+.dropzone-title { font-weight: 700; font-size: 0.98rem; color: var(--fg); }
+.dropzone-hint { font-size: 0.8rem; color: var(--muted); }
+.dropzone input[type="file"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  padding: 0;
+  border: none;
+}
+
 @media (max-width: 1040px) {
   .topbar-inner { flex-wrap: wrap; }
   .nav-pills { order: 3; width: 100%; flex-wrap: wrap; overflow: visible; row-gap: 0.3rem; }