fix(ui): unify metadata component styles across MemoView and MemoEditor

Align header padding, text color, background tokens, and item row styles
across CodeBlock, AttachmentList, RelationList, and LocationDisplay so all
metadata panels follow the same visual pattern.

web/src/components/MemoContent/CodeBlock.tsx

@@ -115,17 +115,17 @@ export const CodeBlock = ({ children, className, node: _node, ...props }: CodeBl
   };
 
   return (
-    <pre className="relative my-2 rounded-lg border border-border bg-muted/30 overflow-hidden">
+    <pre className="relative my-2 rounded-lg border border-border bg-muted/20 overflow-hidden">
       {/* Header with language label and copy button */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-accent/50">
-        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide select-none">{language || "text"}</span>
+      <div className="flex items-center justify-between px-2 py-1 border-b border-border bg-muted/30">
+        <span className="text-xs text-foreground select-none">{language || "text"}</span>
         <button
           onClick={handleCopy}
           className={cn(
-            "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium",
-            "transition-all duration-200",
+            "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs",
+            "transition-colors duration-200",
             "hover:bg-accent active:scale-95",
-            copied ? "text-primary bg-primary/10" : "text-muted-foreground",
+            copied ? "text-primary" : "text-muted-foreground hover:text-foreground",
           )}
           aria-label={copied ? "Copied" : "Copy code"}
           title={copied ? "Copied!" : "Copy code"}

web/src/components/MemoEditor/components/AttachmentList.tsx

@@ -139,9 +139,9 @@ const AttachmentList: FC<AttachmentListProps> = ({ attachments, localFiles = [],
 
   return (
     <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
-      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
+      <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
         <PaperclipIcon className="w-3.5 h-3.5 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Attachments ({items.length})</span>
+        <span className="text-xs text-foreground">Attachments ({items.length})</span>
       </div>
 
       <div className="p-1 sm:p-1.5 flex flex-col gap-0.5">

web/src/components/MemoEditor/components/LocationDisplay.tsx

@@ -15,7 +15,7 @@ const LocationDisplay: FC<LocationDisplayProps> = ({ location, onRemove, classNa
   return (
     <div
       className={cn(
-        "relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-background hover:bg-accent/20 transition-all w-full",
+        "relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-muted/20 hover:bg-accent/20 transition-all w-full",
         className,
       )}
     >

web/src/components/MemoEditor/components/RelationList.tsx

@@ -74,9 +74,9 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
 
   return (
     <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
-      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
+      <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
         <LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Relations ({referenceRelations.length})</span>
+        <span className="text-xs text-foreground">Relations ({referenceRelations.length})</span>
       </div>
 
       <div className="p-1 sm:p-1.5 flex flex-col gap-0.5">

web/src/components/MemoView/components/metadata/AttachmentList.tsx

@@ -37,7 +37,7 @@ const DocumentItem = ({ attachment }: { attachment: Attachment }) => {
   const fileSizeLabel = attachment.size ? formatFileSize(Number(attachment.size)) : undefined;
 
   return (
-    <div className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/20 transition-colors whitespace-nowrap">
+    <div className="flex items-center gap-1 px-1 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors whitespace-nowrap">
       <div className="shrink-0 w-5 h-5 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
         <FileIcon className="w-3 h-3 text-muted-foreground" />
       </div>
@@ -136,7 +136,7 @@ const AttachmentList = ({ attachments }: AttachmentListProps) => {
       <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
         <SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
 
-        <div className="p-2 flex flex-col gap-1">
+        <div className="p-1.5 flex flex-col gap-1">
           {mediaItems.length > 0 && <MediaGrid attachments={mediaItems} onImageClick={handleImageClick} />}
 
           {mediaItems.length > 0 && docItems.length > 0 && <div className="border-t mt-1 border-border opacity-60" />}

web/src/components/MemoView/components/metadata/LocationDisplay.tsx

@@ -26,7 +26,7 @@ const LocationDisplay = ({ location, className }: LocationDisplayProps) => {
         <div
           className={cn(
             "w-auto max-w-full flex flex-row gap-2 cursor-pointer",
-            "relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background hover:bg-accent text-secondary-foreground text-xs transition-colors",
+            "relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-muted/20 hover:bg-accent/20 text-muted-foreground hover:text-foreground text-xs transition-colors",
             className,
           )}
           onClick={() => setPopoverOpen(true)}