Nuova tab Guida: manuale d'uso completo dentro l'app

Aggiunta una sezione 'Guida' (icona 📖, hero indaco) con manuale
d'uso interno, organizzato in 10 capitoli con sommario sticky a
sinistra:

- Introduzione, Setup iniziale
- Una sezione per ogni tab (Scarica, Video, Upgrade, Metadati,
  Registra, Impostazioni)
- Aggiornamenti
- Troubleshooting con tabella di 8 sintomi/cause/fix
- Risorse esterne (GitHub, yt-dlp FAQ, BlackHole)

UX:
- Layout grid 200px (TOC) + content fluido. Su schermi <900px
  il TOC diventa una row in alto
- TOC sticky con highlight del link attivo via IntersectionObserver
- Link esterni (data-ext) aperti nel browser di sistema via
  open_external_url
- Hint nella tab Registra ora apre la sezione 'Tab Registra' della
  guida invece del README su GitHub
- Box info/success/warn riusabili, stile <code> verde, <pre>
  monospace, tabella troubleshooting

CSS:
- Nuova palette indigo + hero-indigo
- Stili .guide-layout, .guide-toc, .g-section, .g-box, .g-table,
  .kbd, .toc-link.active

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

webui/js/app.js

@@ -488,11 +488,55 @@ $("#recRefreshBtn").addEventListener("click", refreshRecDevices);
 
 $("#recOpenGuide").addEventListener("click", (e) => {
   e.preventDefault();
-  window.pywebview.api.open_external_url(
-    "https://github.com/luzadev/musicdownload#guida-rapida-registrazione-audio-di-sistema-macos"
-  );
+  showView("guide");
+  setTimeout(() => {
+    const el = document.getElementById("g-record");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, 80);
 });
 
+// ============================================================
+// GUIDE — link esterni + TOC active highlight
+// ============================================================
+document.querySelectorAll("#view-guide a[data-ext]").forEach((a) => {
+  a.addEventListener("click", (e) => {
+    e.preventDefault();
+    window.pywebview.api.open_external_url(a.dataset.ext);
+  });
+});
+
+document.querySelectorAll(".toc-link").forEach((a) => {
+  a.addEventListener("click", (e) => {
+    e.preventDefault();
+    const id = a.getAttribute("href").slice(1);
+    const el = document.getElementById(id);
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+  });
+});
+
+// Aggiorna TOC active in base allo scroll della view
+function setupGuideObserver() {
+  const sections = document.querySelectorAll(".g-section[id]");
+  const tocLinks = document.querySelectorAll(".toc-link");
+  if (!sections.length || !tocLinks.length) return;
+
+  const main = document.querySelector(".main");
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        const id = entry.target.id;
+        tocLinks.forEach((l) => {
+          l.classList.toggle("active", l.getAttribute("href") === "#" + id);
+        });
+      });
+    },
+    { root: main, rootMargin: "-20% 0px -65% 0px", threshold: 0 }
+  );
+  sections.forEach((s) => observer.observe(s));
+}
+setupGuideObserver();
+
 $("#recBrowseBtn").addEventListener("click", async () => {
   const path = await window.pywebview.api.browse_directory();
   if (path) {