feat: flat design Sunset Glitch palette + Font Awesome icons

templates/components/watchlist_items_list.html

@@ -167,7 +167,7 @@
 .filter-tabs {
     display: flex;
     gap: 8px;
-    border-bottom: 1px solid #ced0ce;
+    border-bottom: 1px solid #2a2d32;
     padding-bottom: 12px;
     margin-bottom: 8px;
 }
@@ -188,7 +188,7 @@
 }
 
 .filter-tab:hover {
-    background: #e6e8e6;
+    background: var(--bg-elevated);
     color: var(--text-main);
 }
 
@@ -211,7 +211,7 @@
     background: var(--bg-card);
     border-radius: var(--card-radius);
     padding: 16px;
-    border: 1px solid #ced0ce;
+    border: 1px solid #2a2d32;
     transition: var(--transition);
 }
 
@@ -258,16 +258,16 @@
 
 .poster-badge.paused {
     background: #f4a261;
-    color: #191919;
+    color: #15171A;
 }
 
 .poster-badge.completed {
-    background: #9c27b0;
-    color: #fff;
+    background: #FF9F1C;
+    color: #15171A;
 }
 
 .poster-badge.archived {
-    background: #ced0ce;
+    background: rgba(206, 208, 206, 0.2);
     color: var(--text-dim);
 }
 
@@ -277,7 +277,7 @@
     left: 8px;
     padding: 4px 10px;
     border-radius: 20px;
-    background: #f15025;
+    background: #FF9F1C;
     color: var(--bg-dark);
     font-size: 0.65rem;
     font-weight: 700;
@@ -325,9 +325,9 @@
 }
 
 .meta-provider {
-    background: rgba(241, 80, 37, 0.1);
+    background: rgba(255, 191, 105, 0.1);
     color: var(--primary);
-    border: 1px solid rgba(241, 80, 37, 0.3);
+    border: 1px solid rgba(255, 191, 105, 0.3);
 }
 
 .meta-lang {
@@ -373,7 +373,7 @@
     gap: 6px;
     margin-top: auto;
     padding-top: 8px;
-    border-top: 1px solid #ced0ce;
+    border-top: 1px solid #2a2d32;
 }
 
 .action-btn {
@@ -387,18 +387,12 @@
     font-size: 0.85rem;
     cursor: pointer;
     transition: var(--transition);
-    background: #e6e8e6;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.85rem;
-    cursor: pointer;
-    transition: var(--transition);
-    background: #e6e8e6;
+    background: var(--bg-elevated);
     color: var(--text-dim);
 }
 
 .action-btn:hover {
-    background: #ced0ce;
+    background: var(--secondary);
     color: var(--text-main);
 }
 
@@ -419,11 +413,11 @@
 }
 
 .btn-complete {
-    color: #9c27b0;
+    color: #FFBF69;
 }
 
 .btn-complete:hover {
-    background: rgba(156, 39, 176, 0.15);
+    background: rgba(255, 191, 105, 0.15);
 }
 
 .btn-delete {
@@ -440,7 +434,7 @@
     padding: 80px 40px;
     background: var(--bg-card);
     border-radius: var(--card-radius);
-    border: 1px dashed #ced0ce;
+    border: 1px dashed #2a2d32;
 }
 
 .watchlist-empty i {