feat: add home page with favorites, resume playback, recently added VOD

public/css/main.css

@@ -4544,4 +4544,87 @@ kbd {
   background: rgba(255, 255, 255, 0.02);
   border-radius: var(--radius-lg);
   border: 1px dashed rgba(255, 255, 255, 0.1);
+}
+
+/* =====================================================
+   Channel Tile Styles (Favorite Channels)
+   ===================================================== */
+
+.channel-tiles {
+  gap: 16px;
+}
+
+.channel-tile {
+  flex: 0 0 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 12px 8px;
+  border-radius: var(--radius-md);
+  transition: transform var(--transition-fast), background var(--transition-fast);
+  scroll-snap-align: start;
+}
+
+.channel-tile:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.tile-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--color-surface);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.channel-tile:hover .tile-logo {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.3);
+}
+
+.tile-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tile-name {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-align: center;
+  max-width: 90px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.channel-tile:hover .tile-name {
+  color: var(--color-text-bright);
+}
+
+/* Responsive: smaller tiles on mobile */
+@media (max-width: 480px) {
+  .channel-tile {
+    flex: 0 0 80px;
+    padding: 8px 4px;
+  }
+
+  .tile-logo {
+    width: 52px;
+    height: 52px;
+  }
+
+  .tile-name {
+    font-size: 0.7rem;
+    max-width: 70px;
+  }
 }