Fix SSO banner: force horizontal layout with smaller elements

Use higher specificity selectors to override base card styles.
Smaller icon, font sizes, and tighter padding for compact banner.

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

style.css

@@ -127,20 +127,39 @@ main {
 }
 
 /* ===== Banner Card (Auth) ===== */
-.card-banner {
-    flex-direction: row;
+.card.card-banner {
+    flex-direction: row !important;
     align-items: center;
     gap: 1rem;
-    padding: 0.5rem 1.5rem;
+    padding: 0.75rem 1.5rem;
     margin-bottom: 1.25rem;
     animation: fadeInUp 0.5s ease backwards;
 }
 
-.card-banner .card-content {
+.card.card-banner .card-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+}
+
+.card.card-banner .card-icon svg {
+    width: 18px;
+    height: 18px;
+}
+
+.card.card-banner .card-content {
     flex: 1;
 }
 
-.card-banner .card-domain {
+.card.card-banner .card-content h2 {
+    font-size: 0.95rem;
+}
+
+.card.card-banner .card-content p {
+    font-size: 0.75rem;
+}
+
+.card.card-banner .card-domain {
     border-top: none;
     padding-top: 0;
     border-left: 1px solid var(--border);