Fix: Tile proxy for black globe + radio voicestats modal

- Globe was black because Radio Garden CDN (rg-tiles.b-cdn.net) returns
  403 without Referer: radio.garden header. Added server-side tile proxy
  /api/radio/tile/:z/:x/:y with in-memory cache (max 500 tiles).
- Added radio_voicestats SSE broadcast (every 5s) with voice ping,
  gateway ping, status, channel name, and connected-since timestamp.
- Added clickable "Verbunden" connection indicator in RadioTab bottom
  bar with live ping display and connection details modal (matching
  soundboard's existing modal pattern).

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

web/src/styles.css

@@ -1079,3 +1079,126 @@ html, body {
     max-width: 120px;
   }
 }
+
+/* ── Radio Connection Indicator ── */
+.radio-conn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--success);
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 20px;
+  background: rgba(87, 210, 143, 0.08);
+  transition: all var(--transition);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.radio-conn:hover {
+  background: rgba(87, 210, 143, 0.15);
+}
+
+.radio-conn-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+.radio-conn-ping {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Radio Connection Modal ── */
+.radio-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .55);
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  animation: fade-in .15s ease;
+}
+
+.radio-modal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  width: 340px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
+  overflow: hidden;
+  animation: radio-modal-in .2s ease;
+}
+
+@keyframes radio-modal-in {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.radio-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.radio-modal-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: all var(--transition);
+}
+
+.radio-modal-close:hover {
+  background: rgba(255, 255, 255, .08);
+  color: var(--text-normal);
+}
+
+.radio-modal-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.radio-modal-stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.radio-modal-label {
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.radio-modal-value {
+  font-weight: 600;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.radio-modal-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}