chore: update screenshots in readme and sso icon

public/css/main.css

@@ -1866,6 +1866,21 @@ kbd {
   animation: spin 0.8s linear infinite;
 }
 
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  color: var(--color-text-muted);
+  width: 100%;
+}
+
+.horizontal-scroll .empty-state {
+  padding: var(--space-xl);
+  min-height: 150px;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -4109,7 +4124,6 @@ kbd {
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
-  margin-left: 10px;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   display: inline-flex;
@@ -4139,6 +4153,30 @@ kbd {
   pointer-events: none;
 }
 
+/* Badge Container for right alignment */
+.player-badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  /* Fallback for cases without flex-grow middle element */
+}
+
+/* Quality Badge */
+.quality-badge {
+  display: inline-block;
+  background: rgba(158, 158, 158, 0.8);
+  color: white;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.quality-badge.hidden {
+  display: none;
+}
+
 /* Watch Header Bar (Title + Transcode Status) */
 /* Moved to original definition around line 3311 */