Nuova tab Registra: cattura audio da ingresso del computer

Aggiunta sezione per registrare in MP3 320 kbps da qualsiasi
dispositivo di input audio del sistema (mixer, scheda audio
esterna, microfono interno, BlackHole / driver virtuali per audio
di sistema).

- core/recorder.py: list_input_devices() parsa l'output di
  ffmpeg -list_devices su AVFoundation (macOS) e DirectShow (Win),
  marca come 'virtual' i driver loopback noti (BlackHole, Soundflower,
  Loopback, VB-Cable, Stereo Mix, OBS). start_recording() lancia
  ffmpeg in thread e emette eventi tick/started/stopped/error.
- api/bridge.py: list_audio_inputs, start_audio_recording,
  stop_audio_recording, is_audio_recording
- webui: hero rosso, dropdown dispositivi con badge 'loopback',
  selettore bitrate, timer HH:MM:SS animato, bottone REC con
  pulse animation, card 'Ultima registrazione' con durata+path
- Hint visibile: per registrare audio di sistema serve BlackHole

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

webui/css/style.css

@@ -34,6 +34,10 @@
   --amber-hover: #FBBF24;
   --amber-dim: #78350F;
 
+  --rec-red: #EF4444;
+  --rec-red-hover: #F87171;
+  --rec-red-dim: #7F1D1D;
+
   --red: #E22134;
   --red-hover: #FF4055;
 
@@ -241,6 +245,10 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
   background: linear-gradient(135deg, #F59E0B 0%, #78350F 60%, #3B1E07 100%);
 }
 
+.hero-red {
+  background: linear-gradient(135deg, #DC2626 0%, #7F1D1D 60%, #3F0A0A 100%);
+}
+
 .hero-content { position: relative; z-index: 2; max-width: 70%; }
 
 .hero-eyebrow {
@@ -255,6 +263,7 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
 .hero-eyebrow.purple { color: var(--purple); }
 .hero-eyebrow.pink { color: var(--pink-hover); }
 .hero-eyebrow.amber { color: var(--amber-hover); }
+.hero-eyebrow.red { color: var(--rec-red-hover); }
 
 .hero-title {
   font-size: 36px;
@@ -477,6 +486,20 @@ input[type="number"]::-webkit-inner-spin-button {
   color: #000;
 }
 
+.btn-red {
+  background: var(--rec-red);
+  color: #fff;
+}
+
+.btn-red.recording {
+  animation: pulseRed 1.2s ease-in-out infinite;
+}
+
+@keyframes pulseRed {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
+  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
+}
+
 .btn-success {
   background: #00CEC9;
   color: #000;
@@ -926,3 +949,43 @@ input[type="number"]::-webkit-inner-spin-button {
   .form-grid { grid-template-columns: 1fr; }
   .cover-card { grid-template-columns: 1fr; }
 }
+
+/* ===============================
+   RECORDER
+   =============================== */
+.rec-timer {
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--rec-red-hover);
+  letter-spacing: 1px;
+  margin-left: auto;
+  min-width: 130px;
+  text-align: right;
+}
+
+.rec-status {
+  color: var(--text-2);
+  font-size: 12.5px;
+  font-weight: 600;
+  margin-left: 18px;
+}
+
+.rec-result {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 6px;
+  word-break: break-all;
+  user-select: text;
+}
+
+.rec-result .badge-dur {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--rec-red-hover);
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11.5px;
+  font-weight: 700;
+  margin-right: 10px;
+}