feat(ui): overhaul frontend with IMPHNEN visual identity

- Update CSS foundation: HSL→oklch color tokens, Poppins font, new utilities
- Replace Three.js sakura particles with CSS glow orbs
- Rebrand Header with IMPHNEN logo and gradient text
- Update all UI components (Button, Card, Badge, Input, Select, Tabs, Toast)
- Apply IMPHNEN design patterns (glass, gradient, grid) to layout
- Remove all hardcoded #7EC8E3/#FFB7C5/#FCA5A5 references
- Standardize rounded-xl across all components
- Replace emoji toasts with Lucide icons

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

services/frontend/src/features/messages/components/ImageGrid.tsx

@@ -12,7 +12,7 @@ interface ImageItem {
 function kindBadge(kind: ImageItem["kind"]): string {
   switch (kind) {
     case "sticker":
-      return "bg-pink-100 text-pink-700 border-pink-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "attachment":
       return "bg-primary-soft text-primary border-primary/30";
     case "embed":
@@ -82,7 +82,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
             href={image.url}
             target="_blank"
             rel="noreferrer"
-            className="group overflow-hidden rounded-2xl border border-primary/20 bg-white shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
+            className="group overflow-hidden rounded-xl border border-primary/20 bg-white shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
           >
             <div className="relative aspect-video overflow-hidden">
               {image.kind === "sticker" ? (

services/frontend/src/features/messages/components/MessageCard.tsx

@@ -376,8 +376,8 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
 
   return (
     <article
-      className={`group rounded-2xl border bg-white shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
-        firstMsg.deleted_at ? "border-red-200 opacity-60" : "border-primary/20"
+      className={`group rounded-xl border bg-card shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
+        firstMsg.deleted_at ? "border-red-200 opacity-60" : "border-border"
       }`}
     >
       <div className="flex gap-3 p-4">
@@ -437,7 +437,7 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
 
 export function MessageCardSkeleton() {
   return (
-    <article className="rounded-2xl border border-primary/20 bg-white p-4 shadow-sm">
+    <article className="rounded-xl border border-border bg-card p-4 shadow-sm">
       <div className="flex gap-3">
         <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
         <div className="min-w-0 flex-1 space-y-3">