feat(settings): create shared DangerZone component

components/settings/unified/DangerZone.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { Button } from '@ciphera-net/ui'
+
+interface DangerZoneItem {
+  title: string
+  description: string
+  buttonLabel: string
+  /** 'outline' = bordered button (Reset Data style), 'solid' = red filled button (Delete style) */
+  variant: 'outline' | 'solid'
+  onClick: () => void
+  disabled?: boolean
+}
+
+interface DangerZoneProps {
+  items: DangerZoneItem[]
+  children?: React.ReactNode
+}
+
+export function DangerZone({ items, children }: DangerZoneProps) {
+  return (
+    <div className="space-y-4 pt-6 border-t border-neutral-800">
+      <div>
+        <h3 className="text-base font-semibold text-red-500 mb-1">Danger Zone</h3>
+        <p className="text-xs text-neutral-500">Irreversible actions.</p>
+      </div>
+
+      {items.map((item) => (
+        <div key={item.title} className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-white">{item.title}</p>
+              <p className="text-xs text-neutral-400">{item.description}</p>
+            </div>
+            {item.variant === 'outline' ? (
+              <Button
+                variant="secondary"
+                className="text-sm text-red-400 border-red-900 hover:bg-red-900/20"
+                onClick={item.onClick}
+                disabled={item.disabled}
+              >
+                {item.buttonLabel}
+              </Button>
+            ) : (
+              <button
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+                onClick={item.onClick}
+                disabled={item.disabled}
+              >
+                {item.buttonLabel}
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {children}
+    </div>
+  )
+}