<!-- Smart Solar Power Flow Matrix -->
<div class="smart-solar-power-flow p-5 rounded-3xl bg-gradient-to-b from-slate-900 to-slate-950 border border-slate-800 shadow-xl space-y-4">
  <div class="flex items-center justify-between">
    <span class="text-[10px] font-black uppercase tracking-widest text-amber-400">Solar Energy Flow Matrix</span>
    <span class="text-[10px] font-bold text-emerald-400">● 100% Clean</span>
  </div>
  <div class="grid grid-cols-2 gap-3 text-center">
    <div class="p-3 rounded-2xl bg-amber-500/10 border border-amber-500/30">
      <span class="text-xl">☀️</span>
      <span class="text-xs font-bold text-slate-300 block mt-1">Solar PV</span>
      <span class="text-base font-black text-amber-400">5.8 kW</span>
    </div>
    <div class="p-3 rounded-2xl bg-emerald-500/10 border border-emerald-500/30">
      <span class="text-xl">🔋</span>
      <span class="text-xs font-bold text-slate-300 block mt-1">Powerwall</span>
      <span class="text-base font-black text-emerald-400">3.2 kW</span>
    </div>
    <div class="p-3 rounded-2xl bg-indigo-500/10 border border-indigo-500/30">
      <span class="text-xl">🏠</span>
      <span class="text-xs font-bold text-slate-300 block mt-1">Home Load</span>
      <span class="text-base font-black text-indigo-400">2.1 kW</span>
    </div>
    <div class="p-3 rounded-2xl bg-slate-800/60 border border-slate-700/60">
      <span class="text-xl">⚡</span>
      <span class="text-xs font-bold text-slate-300 block mt-1">Grid Export</span>
      <span class="text-base font-black text-slate-300">0.5 kW</span>
    </div>
  </div>
</div>