feat(spa): shared Add-to dialogs + MediaPosterCard actions slot (#208 #209)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/src/shell.css

@@ -2559,6 +2559,67 @@
   z-index: 2;
 }
 
+.ctv-media-card-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 3;
+  display: inline-flex;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.ctv-media-card:hover .ctv-media-card-actions,
+.ctv-media-card:focus-within .ctv-media-card-actions {
+  opacity: 1;
+}
+
+/* Always keep the actions reachable by keyboard even when not hovered. */
+.ctv-media-card-actions:focus-within {
+  opacity: 1;
+}
+
+/* Add-to menu popover */
+.ctv-addto-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+.ctv-addto-menu-popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 40;
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-hairline);
+  background: var(--ctv-surface-3, var(--surface-card));
+  box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / 0.35));
+}
+
+.ctv-addto-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: var(--radius-xs, 6px);
+  background: transparent;
+  color: var(--text-primary);
+  font: var(--text-xs) / 1.2 var(--font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ctv-addto-menu-item:hover,
+.ctv-addto-menu-item:focus-visible {
+  background: var(--ctv-surface-2, var(--surface-hover));
+}
+
 .ctv-media-card-body {
   padding: 8px 10px 10px;
 }