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/pages/admin/DashboardPage.tsx

@@ -18,22 +18,22 @@ export default function DashboardPage() {
 
       {/* Stats */}
       <div className="grid grid-cols-4 gap-3">
-        <StatCard label="服务" value={`${serviceCount}/${totalServices}`} sub="运行中/总数" color="#4788FF" />
-        <StatCard label="插件" value="11" sub="已加载" color="#277AF7" />
-        <StatCard label="运行时间" value={data?.uptime_sec ? formatUptime(data.uptime_sec) : '...'} sub="since start" color="#F2F2F2" />
-        <StatCard label="版本" value="2.0.0-dev" sub="" color="rgba(255,255,255,0.5)" />
+        <StatCard label="服务" value={`${serviceCount}/${totalServices}`} sub="运行中/总数" color='var(--mx-tertiary-text)' />
+        <StatCard label="插件" value="11" sub="已加载" color='var(--mx-primary)' />
+        <StatCard label="运行时间" value={data?.uptime_sec ? formatUptime(data.uptime_sec) : '...'} sub="since start" color='var(--mx-stat-value)' />
+        <StatCard label="版本" value="2.0.0-dev" sub="" color="var(--mx-text-dim)" />
       </div>
 
       {/* Service Status */}
       <Section title="服务状态">
-        <div className="bg-[#000] rounded-[18px] border border-[#404040] divide-y divide-[#393939]">
+        <div className="bg-[var(--mx-surface)] rounded-[18px] border border-[var(--mx-outline)] divide-y divide-[var(--mx-divider)]">
           {['ai_core', 'memory', 'voice'].map(name => (
             <div key={name} className="flex items-center justify-between px-4 py-3">
               <div className="flex items-center gap-3">
-                <span className={`w-2.5 h-2.5 rounded-full ${services[name] ? 'bg-[#4788FF]' : 'bg-[#404040]'}`} />
-                <span className="text-sm text-[#F2F2F2]">{name}</span>
+                <span className={`w-2.5 h-2.5 rounded-full ${services[name] ? 'bg-[var(--mx-tertiary-text)]' : 'bg-[var(--mx-outline)]'}`} />
+                <span className="text-sm text-[var(--mx-text)]">{name}</span>
               </div>
-              <span className="text-xs text-white/40">{services[name] ? '运行中' : '未启动'}</span>
+              <span className="text-xs text-[var(--mx-text-dim)]">{services[name] ? '运行中' : '未启动'}</span>
             </div>
           ))}
         </div>
@@ -54,10 +54,10 @@ export default function DashboardPage() {
 
 function StatCard({ label, value, sub, color }: { label:string; value:string; sub:string; color:string }) {
   return (
-    <div className="bg-[#000] border border-[#404040] rounded-[18px] px-4 py-3">
-      <p className="text-xs text-white/40 mb-1">{label}</p>
-      <p className="text-xl font-bold" style={{color}}>{value}</p>
-      {sub && <p className="text-xs text-white/30 mt-0.5">{sub}</p>}
+    <div className="bg-[var(--mx-surface)] border border-[var(--mx-outline)] rounded-[18px] px-4 py-3">
+      <p className="text-xs text-[var(--mx-text-dim)] mb-1">{label}</p>
+      <p className="text-xl font-bold" style={{ color }}>{value}</p>
+      {sub && <p className="text-xs text-[var(--mx-text-dim)] mt-0.5">{sub}</p>}
     </div>
   )
 }
@@ -65,7 +65,7 @@ function StatCard({ label, value, sub, color }: { label:string; value:string; su
 function Section({ title, children }: { title:string; children:React.ReactNode }) {
   return (
     <div>
-      <h3 className="text-sm font-medium text-white/60 mb-3">{title}</h3>
+      <h3 className="text-sm font-medium text-[var(--mx-text-secondary)] mb-3">{title}</h3>
       {children}
     </div>
   )
@@ -76,10 +76,10 @@ import { Link } from 'react-router-dom'
 function QuickLink({ to, label, desc }: { to:string; label:string; desc:string }) {
   return (
     <Link to={to}
-      className="block bg-[#000] border border-[#404040] rounded-[18px] px-4 py-3 hover:border-[#277AF7]/50 transition-colors"
+      className="block bg-[var(--mx-surface)] border border-[var(--mx-outline)] rounded-[18px] px-4 py-3 hover:border-[var(--mx-primary)]/50 transition-colors"
     >
-      <p className="text-sm text-[#F2F2F2] font-medium">{label}</p>
-      <p className="text-xs text-white/30 mt-1">{desc}</p>
+      <p className="text-sm text-[var(--mx-text)] font-medium">{label}</p>
+      <p className="text-xs text-[var(--mx-text-dim)] mt-1">{desc}</p>
     </Link>
   )
 }