diff --git a/index.html b/index.html
index d5a9dcf..0310884 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,12 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
 .container { max-width: 1200px; margin: 0 auto; }
 h1 { font-size: 22px; color: #1a1a2e; margin-bottom: 4px; }
 .subtitle { color: #666; font-size: 13px; margin-bottom: 24px; }
-.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
+.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
+.summary-cards.primary { margin-bottom: 14px; }
+.summary-cards.secondary { margin-bottom: 28px; }
 .card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
+.card.key { background: linear-gradient(135deg, #fff 0%, #f5f7ff 100%); box-shadow: 0 2px 10px rgba(59,130,246,0.15); border: 1px solid #e5ecff; }
+.card.key .value { font-size: 26px; }
 .card .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
 .card .value { font-size: 20px; font-weight: 700; margin-top: 4px; }
 .card .value.blue { color: #3b82f6; }
@@ -38,7 +42,15 @@ tr:hover td { background: #f5f9ff; }
 <div class="container">
   <h1>EG Nagwa Daily Report</h1>
   <p class="subtitle">Egypt &middot; August 2026 &middot; Install / Enroll Session / Revenue</p>
-  <div class="summary-cards" id="summary"></div>
+  <div class="summary-cards primary" id="summaryPrimary"></div>
+  <div class="summary-cards secondary" id="summarySecondary"></div>
+  <div class="table-wrap">
+    <h3>Daily Detail</h3>
+    <table>
+      <thead><tr><th>Date</th><th>Install</th><th>Spend</th><th>Enroll Session</th><th>Enroll %</th></tr></thead>
+      <tbody id="tbody"></tbody>
+    </table>
+  </div>
   <div class="charts">
     <div class="chart-box full">
       <h3>Daily Install vs Enroll Session</h3>
@@ -53,13 +65,6 @@ tr:hover td { background: #f5f9ff; }
       <canvas id="chartSpend" height="90"></canvas>
     </div>
   </div>
-  <div class="table-wrap">
-    <h3>Daily Detail</h3>
-    <table>
-      <thead><tr><th>Date</th><th>Install</th><th>Spend</th><th>Enroll Session</th><th>Enroll %</th></tr></thead>
-      <tbody id="tbody"></tbody>
-    </table>
-  </div>
   <p class="footer" id="foot"></p>
 </div>
 <script>
@@ -85,14 +90,19 @@ fetch('data.json?t='+Date.now()).then(r=>r.json()).then(({meta, daily})=>{
     if (sub) sub.innerHTML = 'Egypt &middot; ' + title + ' &middot; Install / Enroll Session / Revenue';
   }
 
-  document.getElementById('summary').innerHTML = `
-    <div class="card"><div class="label">Total Install (MTD)</div><div class="value blue">${totalInstall.toLocaleString()}</div></div>
-    <div class="card"><div class="label">Total Enroll Session</div><div class="value green">${totalEnroll.toLocaleString()}</div></div>
-    <div class="card"><div class="label">Avg Enroll Rate</div><div class="value orange">${avgRate}%</div></div>
-    <div class="card"><div class="label">Total Spend</div><div class="value purple">$${totalSpend.toFixed(2)}</div></div>
+  // 第一行：重点指标 —— Total Spend / Total Install + 预算相关
+  document.getElementById('summaryPrimary').innerHTML = `
+    <div class="card key"><div class="label">Total Spend</div><div class="value purple">$${totalSpend.toFixed(2)}</div></div>
+    <div class="card key"><div class="label">Total Install (MTD)</div><div class="value blue">${totalInstall.toLocaleString()}</div></div>
     <div class="card"><div class="label">Budget</div><div class="value">$${fmt(budget)}</div></div>
     <div class="card"><div class="label">Budget Left</div><div class="value green">$${fmt(meta.left)}</div></div>
     <div class="card"><div class="label">Budget Used</div><div class="value orange">${meta.spend_pct||'-'}</div></div>
+  `;
+
+  // 第二行：事件率、推荐日安装、总注册会话
+  document.getElementById('summarySecondary').innerHTML = `
+    <div class="card"><div class="label">Total Enroll Session</div><div class="value green">${totalEnroll.toLocaleString()}</div></div>
+    <div class="card"><div class="label">Avg Enroll Rate</div><div class="value orange">${avgRate}%</div></div>
     <div class="card"><div class="label">Rec. Daily Install</div><div class="value blue">${fmt(meta.rec_daily_install)}</div></div>
   `;