feat(ui): add light theme with system auto-switch + Cyrene avatar

- Miuix day/night dual theme CSS variables
- themeStore: light default, follows prefers-color-scheme
- Header: sun/moon toggle button
- All components migrated to CSS variables
- Cyrene avatar image replaces 'C' logo everywhere
- Favicon added

frontend/web/src/components/chat/MessageList.tsx

@@ -19,7 +19,7 @@ function MessageBubble({ message }: { message: Message }) {
   if (isAction) {
     return (
       <div className="flex justify-center py-1">
-        <span className="text-xs text-[#4788FF] bg-[#2B3B54]/80 px-3 py-1 rounded-full">
+        <span className="text-xs text-[var(--mx-tertiary-text)] bg-[var(--mx-badge-blue)]/80 px-3 py-1 rounded-full">
           {message.content}
         </span>
       </div>
@@ -29,7 +29,7 @@ function MessageBubble({ message }: { message: Message }) {
   if (isSystem) {
     return (
       <div className="flex justify-center py-1">
-        <span className="text-xs text-[#ffdad6] bg-[#2E0603]/80 px-3 py-1 rounded-full">{message.content}</span>
+        <span className="text-xs text-[var(--mx-error-text)] bg-[var(--mx-error-container)]/80 px-3 py-1 rounded-full">{message.content}</span>
       </div>
     )
   }
@@ -38,17 +38,17 @@ function MessageBubble({ message }: { message: Message }) {
     <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
       {/* Avatar for AI */}
       {!isUser && (
-        <div className="w-8 h-8 rounded-xl bg-[#277AF7] flex items-center justify-center shrink-0 mr-2 mt-1">
-          <span className="text-xs font-bold text-white">C</span>
+        <div className="w-8 h-8 rounded-xl bg-[var(--mx-primary)] flex items-center justify-center shrink-0 mr-2 mt-1">
+          <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
         </div>
       )}
 
       <div className={`max-w-[75%] px-4 py-2.5 text-sm leading-relaxed ${
         isUser
-          ? 'bg-[#277AF7] text-white rounded-[18px] rounded-br-[6px]'
+          ? 'bg-[var(--mx-primary)] text-white rounded-[18px] rounded-br-[6px]'
           : isEmpty
             ? 'bg-transparent text-transparent'
-            : 'bg-[#000] text-[#F2F2F2] rounded-[18px] rounded-bl-[6px] border border-[#404040]'
+            : 'bg-[var(--mx-surface)] text-[var(--mx-text)] rounded-[18px] rounded-bl-[6px] border border-[var(--mx-outline)]'
       }`}>
         {isEmpty ? (
           <span className="flex gap-1.5 py-1">