fix: 优化能源订单班Bento Grid为3列等宽并排布局

详细说明:
- 将Bento Grid从不规则布局改为3列等宽并排
- 移除bento-large/medium的大小差异，统一为等宽卡片
- 增大卡片间距至spacing-2xl，视觉更舒适
- 优化响应式断点：>1200px三列，768-1200px两列，<768px单列
- 修复用户反馈的卡片布局不美观问题

web_frontend/web_result/order-classes/energy/css/styles.css

@@ -1049,55 +1049,33 @@ body:not(.dark-theme) .visual-divider::before {
     }
 }
 
-/* ========== Bento Grid布局 - 不等大小网格 ========== */
+/* ========== Bento Grid布局 - 3列等宽并排布局 ========== */
 .bento-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-xl);
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-2xl);
     margin-bottom: var(--spacing-xl);
 }
 
-.bento-large {
-    grid-column: span 2;
-    grid-row: span 2;
-}
-
-.bento-medium {
-    grid-column: span 2;
-    grid-row: span 1;
-}
-
+.bento-large,
+.bento-medium,
 .bento-small {
     grid-column: span 1;
     grid-row: span 1;
 }
 
 /* Bento Grid响应式 */
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
     .bento-grid {
         grid-template-columns: repeat(2, 1fr);
-    }
-
-    .bento-large {
-        grid-column: span 2;
-        grid-row: span 1;
-    }
-
-    .bento-medium {
-        grid-column: span 1;
+        gap: var(--spacing-xl);
     }
 }
 
 @media (max-width: 768px) {
     .bento-grid {
         grid-template-columns: 1fr;
-    }
-
-    .bento-large,
-    .bento-medium,
-    .bento-small {
-        grid-column: span 1;
-        grid-row: span 1;
+        gap: var(--spacing-lg);
     }
 }