Add Apps page with local icons, favicon, and React Router navigation

- Move app links to dedicated /apps page with grouped icon tiles
- Download all icons locally to public/icons/ (no CDN dependency)
- Add favicon and replace header logo-mark with custom icon
- Fix icon names: synology, termix, docsight-light, dbgate (png)
- Add nav tabs in header for Dashboard/Apps routing

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

src/index.css

@@ -63,10 +63,8 @@ header {
 .logo { display: flex; align-items: center; gap: 10px; }
 .logo-mark {
   width: 32px; height: 32px;
-  background: linear-gradient(135deg, var(--accent), var(--accent2));
   border-radius: 8px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: 800; letter-spacing: -1px; color: #fff;
+  object-fit: contain;
 }
 .logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
 .logo-sub  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
@@ -226,6 +224,94 @@ header {
   .topbar-right { gap: 12px; }
 }
 
+/* ── Nav tabs ── */
+.nav-tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.nav-tab {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 5px 14px;
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--text2);
+  transition: background 0.15s, color 0.15s;
+}
+.nav-tab:hover { color: var(--text); }
+.nav-tab-active { background: var(--surface2); color: var(--text); }
+
+/* ── Apps Section ── */
+.app-group { margin-bottom: 28px; }
+
+.app-group-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px; font-weight: 500;
+  letter-spacing: 2px; text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 12px;
+}
+
+.app-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.app-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 12px;
+  width: 90px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  text-decoration: none;
+  color: var(--text2);
+  font-size: 11px;
+  text-align: center;
+  transition: border-color 0.2s, transform 0.2s, color 0.2s;
+  cursor: pointer;
+}
+.app-tile:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  color: var(--text);
+}
+
+.app-icon {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+.app-icon-fallback {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--surface2);
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.app-name {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: inherit;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }