feat: add click-to-close backdrop behind DetailPanel

Adds a subtle semi-transparent backdrop (rgba(0,0,0,0.15)) behind the
overlay panel. Clicking the backdrop closes the panel. Fades in with
the panel animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/composites/DetailPanel/DetailPanel.module.css

@@ -1,3 +1,16 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 .panel {
   position: fixed;
   top: 0;

src/design-system/composites/DetailPanel/DetailPanel.tsx

@@ -23,7 +23,9 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
 
   const activeContent = tabs?.find((t) => t.value === activeTab)?.content
 
-  const panel = (
+  const content = (
+    <>
+      {open && <div className={styles.backdrop} onClick={onClose} aria-hidden="true" />}
       <aside
         className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
         aria-hidden={!open}
@@ -65,9 +67,10 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
           </div>
         )}
       </aside>
+    </>
   )
 
   // Portal to AppShell level if target exists, otherwise render in place
   const portalTarget = document.getElementById('cameleer-detail-panel-root')
-  return portalTarget ? createPortal(panel, portalTarget) : panel
+  return portalTarget ? createPortal(content, portalTarget) : content
 }