diff --git a/frontend/src/components/fleet/FleetTable.tsx b/frontend/src/components/fleet/FleetTable.tsx
index 04f6689..c36ce1e 100644
--- a/frontend/src/components/fleet/FleetTable.tsx
+++ b/frontend/src/components/fleet/FleetTable.tsx
@@ -92,7 +92,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
 function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) {
   return (
     <div
-      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/50 transition-colors min-h-[44px]"
+      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/30 transition-[background-color] duration-[50ms] min-h-[44px]"
       data-testid={`device-card-${device.hostname}`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -402,7 +402,7 @@ export function FleetTable({
                             data-index={virtualRow.index}
                             ref={virtualizer.measureElement}
                             className={cn(
-                              'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                              'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                               selectedIndex === virtualRow.index && 'bg-elevated/50',
                             )}
                             style={{
@@ -460,7 +460,7 @@ export function FleetTable({
                       key={device.id}
                       data-testid={`device-row-${device.hostname}`}
                       className={cn(
-                        'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                        'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                         selectedIndex === idx && 'bg-elevated/50',
                       )}
                     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e80f222..354272b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -207,3 +207,19 @@
     font-variant-numeric: tabular-nums;
   }
 }
+
+/* ── Interaction classes ── */
+@layer components {
+  .list-item-interactive {
+    border-left: 2px solid transparent;
+    transition: border-color 50ms linear, background-color 50ms linear;
+  }
+  .list-item-interactive:hover,
+  .list-item-interactive:focus-visible {
+    border-left-color: hsl(var(--accent));
+    outline: none;
+  }
+  .list-item-interactive:active {
+    background-color: hsl(var(--elevated));
+  }
+}