Add Sonarr and Radarr request icons

frontend/app/ops-redesign.css

@@ -2323,7 +2323,22 @@ button:disabled,
 }
 .request-type-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.5); }
 .request-type-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(135deg, rgba(72, 224, 178, 0.11), rgba(14, 165, 233, 0.06)); }
-.request-type-card > span { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
+.request-type-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
+.request-type-card-top > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
+.request-service-icon {
+  display: grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  margin: -6px -4px 0 0;
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.44);
+  border-radius: 16px;
+  background: rgba(245, 248, 252, 0.94);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+}
+.request-service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.request-type-card.is-selected .request-service-icon { border-color: rgba(72, 224, 178, 0.72); box-shadow: 0 0 24px rgba(72, 224, 178, 0.18); }
 .request-type-card strong { font-size: 1.35rem; }
 .request-type-card p { max-width: 440px; margin: 0; color: var(--ops-muted); font-weight: 450; line-height: 1.5; }
 .request-type-card b { margin-top: auto; color: var(--request-green); font-size: 0.74rem; }

frontend/app/portal/requests/RequestPortalClient.tsx

@@ -56,18 +56,24 @@ const mediaChoices: Array<{
   eyebrow: string
   title: string
   description: string
+  collector: 'Radarr' | 'Sonarr'
+  icon: string
 }> = [
   {
     type: 'movie',
     eyebrow: 'Film',
     title: 'Movie',
     description: 'Find a film and send it through Seerr to Radarr.',
+    collector: 'Radarr',
+    icon: '/service-icons/radarr.svg',
   },
   {
     type: 'tv',
     eyebrow: 'Series',
     title: 'TV show',
     description: 'Choose a series, the seasons you want, and send it to Sonarr.',
+    collector: 'Sonarr',
+    icon: '/service-icons/sonarr.svg',
   },
 ]
 
@@ -333,7 +339,12 @@ export default function RequestPortalClient() {
               onClick={() => resetAfterType(choice.type)}
               aria-pressed={mediaType === choice.type}
             >
-              <span>{choice.eyebrow}</span>
+              <span className="request-type-card-top">
+                <span>{choice.eyebrow}</span>
+                <span className="request-service-icon">
+                  <img src={choice.icon} alt={`${choice.collector} logo`} />
+                </span>
+              </span>
               <strong>{choice.title}</strong>
               <p>{choice.description}</p>
               <b>{mediaType === choice.type ? 'Selected' : `Choose ${choice.title.toLowerCase()}`}</b>