fix: banner/avatar overlap in settings preview and refine profile color system

Move bg-surface-channel from info section to card wrapper in AccountPanel
so the avatar's negative margin overlaps into the banner correctly. Replace
accent color presets with 7×3 banner color palette, remove accent color
tinting from display names in popout/modal, and refactor gradient entries
to expose from/to hex stops.

packages/web/src/components/ui/UserProfilePopout.tsx

@@ -97,7 +97,7 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
       />
 
       {/* Body */}
-      <div className="px-4 pb-4">
+      <div className="px-4 pb-4 relative">
         {/* Avatar */}
         <div
           className="mt-[-40px] mb-3 w-fit rounded-full"
@@ -117,7 +117,6 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
           <Username
             username={user.displayName ?? baseName}
             className="text-[16px] font-semibold leading-tight"
-            style={user.accentColor ? { color: user.accentColor } : undefined}
           />
           <div className="text-[13px] text-txt-tertiary">
             {domain ? (