feat: flat design Sunset Glitch + download manager + settings + recommendations overhaul

- Sunset Glitch color palette applied to all templates
- Font Awesome icons throughout UI
- Download manager with parallel queue and progress tracking
- Settings page with dynamic configuration
- Recommendations router enhanced with scoring
- Local vendor libs (Alpine.js, HTMX) for offline support
- Auto test suite with screenshots
- Series releases list component
- New download model

static/css/style.css

@@ -970,6 +970,99 @@ h1 {
 }
 
 @media (max-width: 768px) {
+    /* --- Header --- */
+    header {
+        padding: 16px 0 0;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+        letter-spacing: 0;
+    }
+
+    .subtitle {
+        font-size: 0.85rem;
+        margin-bottom: 16px;
+    }
+
+    /* --- Auth panel: compact on mobile --- */
+    .auth-panel {
+        flex-direction: column;
+        gap: 6px;
+        text-align: center;
+        padding: 4px 0;
+        font-size: 0.8rem;
+    }
+
+    .auth-panel > div {
+        justify-content: center;
+    }
+
+    .auth-panel span {
+        font-size: 0.75rem;
+    }
+
+    .auth-panel .btn {
+        margin: 0 auto;
+    }
+
+    /* --- Tabs: compact icon mode, scrollable --- */
+    .tabs {
+        gap: 0;
+        margin-bottom: 16px;
+        padding-bottom: 0;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+
+    .tabs::-webkit-scrollbar {
+        display: none;
+    }
+
+    .tab {
+        padding: 12px 14px;
+        font-size: 0.7rem;
+        gap: 4px;
+        min-height: 48px;
+        min-width: auto;
+        flex: 0 0 auto;
+    }
+
+    .tab svg {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+
+    .tab.active::after {
+        height: 2px;
+    }
+
+    /* --- Touch targets: iOS minimum 44px --- */
+    .btn,
+    .btn-small,
+    .btn-sm {
+        min-height: 44px;
+        padding: 10px 16px;
+        font-size: 0.85rem;
+    }
+
+    .btn-xs {
+        min-height: 36px;
+        padding: 6px 10px;
+    }
+
+    /* --- Input groups --- */
+    .input-group {
+        flex-wrap: nowrap;
+    }
+
+    .input-group input {
+        min-height: 44px;
+        font-size: 16px; /* prevent iOS zoom */
+    }
+
+    /* --- Cards --- */
     .anime-grid {
         grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
         gap: 12px;
@@ -979,32 +1072,47 @@ h1 {
         flex: 0 0 140px;
     }
 
-    .tabs {
+    .hc-play {
+        width: 40px;
+        height: 40px;
+        opacity: 1; /* always visible on mobile */
+    }
+
+    /* --- Sections --- */
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
         gap: 10px;
     }
 
-    .tab {
-        padding: 10px 16px;
+    .section-header h2 {
+        font-size: 1.2rem;
     }
 
-    .auth-panel {
-        flex-direction: column;
-        gap: 15px;
-        text-align: center;
+    .section-header .btn {
+        align-self: stretch;
     }
 
+    /* --- Layout --- */
+    .container {
+        padding: 0 16px;
+    }
+
+    /* --- Auth container (login page) --- */
     .auth-container {
-        margin: 40px 20px;
-        padding: 24px;
+        margin: 20px 16px;
+        padding: 20px;
     }
 
+    /* --- Downloads --- */
     .downloads-grid {
         grid-template-columns: 1fr;
     }
 
+    /* --- Toast --- */
     .toast-container {
-        left: 20px;
-        right: 20px;
+        left: 16px;
+        right: 16px;
         transform: none;
     }
 
@@ -1012,20 +1120,42 @@ h1 {
         min-width: auto;
         width: 100%;
     }
+
+    /* --- Horizontal carousels: full bleed on mobile --- */
+    .home-row,
+    .streaming-row,
+    .recommendations-carousel,
+    .releases-carousel {
+        padding: 10px 0 16px;
+        margin: 0 -16px;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    /* --- Settings form --- */
+    .settings-section {
+        padding: 16px;
+    }
+
+    /* --- Watchlist --- */
+    .watchlist-item {
+        padding: 12px;
+    }
 }
 
 @media (max-width: 480px) {
-    .container {
-        padding: 0 16px;
-    }
-
     h1 {
-        font-size: 2rem;
+        font-size: 1.3rem;
     }
 
-    .btn {
-        padding: 8px 16px;
-        font-size: 0.85rem;
+    .tab {
+        padding: 12px 10px;
+        font-size: 0.65rem;
+    }
+
+    .tab svg {
+        width: 20px;
+        height: 20px;
     }
 
     .hc {
@@ -1035,12 +1165,6 @@ h1 {
     .hc-info {
         padding: 8px;
     }
-
-    .section-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 10px;
-    }
 }
 
 @media (min-width: 1400px) {