diff --git a/html/index.html b/html/index.html
index 7a7c6d4..c0f9a96 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+﻿<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
@@ -15,6 +15,12 @@
     <script src="../public/js/qrcode.js"></script>
   </head>
   <body>
+    <div class="indexTopAppsinBigBox">
+      <div class="indexTopAppsinBox">
+        <img src="../images/xz.png" class="indexTopAppImg">
+        <div class="indexTopAppText">APP下载</div>
+      </div>
+    </div>
     <nav class="topbar" id="navbar">
       <div class="topbar__inner">
         <a href="./" class="topbar__brand">
@@ -58,10 +64,30 @@
     <main class="page-shell">
       <section class="hero">
         <div class="hero__inner">
+          <aside class="hero__side hero__side--left">
+            <div class="sidebar-card">
+              <div class="sidebar-card__head sidebar-card__head--navy">
+                <span>平台公告</span>
+                <a href="gonggaolist.html" class="sidebar-card__more">更多</a>
+              </div>
+              <ul class="notice-list" id="noticeList"></ul>
+            </div>
+
+            <div class="sidebar-card sidebar-card-bom">
+              <div class="sidebar-card__head sidebar-card__head--gold">
+                <span>APP下载</span>
+              </div>
+              <div class="qrcode-box">
+                <img id="downloadQrImg" alt="二维码" />
+                <p>打开手机下载二维码</p>
+              </div>
+            </div>
+          </aside>
+
           <div class="hero__main">
             <!-- <div class="panel-head panel-head--hero">
               <div>
-                <h1>神彩算 PC 预测首页</h1>
+                <h1>福彩购彩平台 - 精彩开奖首页</h1>
               </div>
               <button
                 class="hero__history-btn"
@@ -79,17 +105,31 @@
             </div>
           </div>
 
-            <aside class="hero__side">
-            <div class="hero-card hero-card--focus">
-              <div class="hero-card__title">
-                <img src="../images/home-icon-calendar.png" alt="" />
-                <span>开奖焦点</span>
+          <aside class="hero__side hero__side--right">
+            <div class="sidebar-card">
+              <div class="sidebar-card__head sidebar-card__head--teal">
+                <span>走势图工具</span>
+              </div>
+              <div class="trend-grid" id="trendGrid"></div>
+            </div>
+
+            <div class="sidebar-card combo-tool-card sidebar-card-bom">
+              <div class="sidebar-card__head sidebar-card__head--gold">
+                <span>组合工具</span>
+              </div>
+              <div class="combo-tool-grid">
+                <a href="duanzuhe.html" class="combo-tool-item">
+                  <img src="../images/icon-duanzuhe.png" alt="断组" />
+                  <span>断组</span>
+                </a>
+                <a href="shazuhe.html" class="combo-tool-item">
+                  <img src="../images/icon-shazuhe.png" alt="杀组合" />
+                  <span>杀组合</span>
+                </a>
               </div>
-              <div class="hero-focus-list" id="heroFocusList"></div>
             </div>
           </aside>
         </div>
-      </section>
 
       <div class="section-divider section-divider--blue">
         <span>彩票分类导航</span>
@@ -121,48 +161,6 @@
 
       <section class="content">
         <div class="content__inner">
-          <aside class="content__rail">
-            <div class="sidebar-card">
-              <div class="sidebar-card__head sidebar-card__head--navy">
-                <span>平台公告</span>
-                <a href="gonggaolist.html" class="sidebar-card__more">更多</a>
-              </div>
-              <ul class="notice-list" id="noticeList"></ul>
-            </div>
-
-            <div class="sidebar-card">
-              <div class="sidebar-card__head sidebar-card__head--gold">
-                <span>APP下载</span>
-              </div>
-              <div class="qrcode-box">
-                <img id="downloadQrImg" alt="二维码" />
-                <p>打开手机浏览器扫描二维码</p>
-              </div>
-            </div>
-
-            <div class="sidebar-card">
-              <div class="sidebar-card__head sidebar-card__head--teal">
-                <span>走势图</span>
-              </div>
-              <div class="trend-grid" id="trendGrid"></div>
-            </div>
-
-            <div class="sidebar-card combo-tool-card">
-              <div class="sidebar-card__head sidebar-card__head--gold">
-                <span>组合工具</span>
-              </div>
-              <div class="combo-tool-grid">
-                <a href="duanzuhe.html" class="combo-tool-item">
-                  <img src="../images/icon-duanzuhe.png" alt="断组合" />
-                  <span>断组合</span>
-                </a>
-                <a href="shazuhe.html" class="combo-tool-item">
-                  <img src="../images/icon-shazuhe.png" alt="杀组合" />
-                  <span>杀组合</span>
-                </a>
-              </div>
-            </div>
-          </aside>
 
           <section class="content__main">
             <div class="article-matrix" id="articleGroups"></div>
@@ -237,6 +235,13 @@
         "七星彩",
       ];
       var currentLotteryMenu = [];
+      var articleLargeLotteries = {
+        大乐透: true,
+        快乐8: true,
+        排列3: true,
+        排列三: true,
+        七星彩: true,
+      };
       var lotteryAliasMap = {
         排列3: "排列三",
         排列三: "排列三",
@@ -316,6 +321,11 @@
       function normalizeLotteryName(name) {
         return lotteryAliasMap[name] || name || "";
       }
+      function getFreeArticleLimit(lotteryName) {
+        return articleLargeLotteries[normalizeLotteryName(lotteryName)]
+          ? 10
+          : 5;
+      }
       function escapeHtml(text) {
         return String(text || "").replace(/[&<>"']/g, function (char) {
           return {
@@ -432,7 +442,10 @@
       function renderHeroSummary(menuList, noticeList) {
         var articleCount = 0;
         $.each(menuList, function (_, item) {
-          articleCount += (item.freeArticleList || []).slice(0, 5).length;
+          articleCount += (item.freeArticleList || []).slice(
+            0,
+            getFreeArticleLimit(item.name),
+          ).length;
         });
         $("#heroLotteryCount").text(menuList.length);
         $("#heroArticleCount").text(articleCount);
@@ -442,7 +455,7 @@
             '<div class="hero-meta"><span>彩种排序</span><strong>8 组固定顺序</strong><em>双色球至七星彩</em></div>',
             '<div class="hero-meta"><span>免费文章</span><strong>' +
               articleCount +
-              " 篇</strong><em>每组展示 5 篇以内</em></div>",
+              " 篇</strong><em>默认 5 篇，部分彩种 10 篇</em></div>",
             '<div class="hero-meta"><span>数据来源</span><strong>/api/web/index</strong><em>首页主数据接口</em></div>',
           ].join(""),
         );
@@ -520,6 +533,7 @@
         $.each(sortLotteries(menuList), function (_, item) {
           var cfg = lotteryIconMap[item.name] || lotteryIconMap["双色球"];
           var result = item.lotteryResult || {};
+          var drawTimeText = result.drawTimeText || item.drawTimeText || "";
           var compact = item.name === "快乐8";
           $grid.append(
             '<div class="draw-card" style="--accent:' +
@@ -538,13 +552,17 @@
               (compact ? " draw-card__balls--compact" : "") +
               '">' +
               buildBallHtml(result.openCode || "", cfg, compact) +
-              '</div><div class="draw-card__foot"><span>开奖日期</span><strong>' +
-              escapeHtml(
+              '</div><div class="draw-card__foot"><div class="draw-card__foot_left">' 
+               + '<div class="draw-card__foot_left_left">开奖日期</div>' + '<div class="draw-card__foot_left_right">' + 
+                escapeHtml(drawTimeText)
+                + '</div>' +
+              '</div>'+
+              '<div class="draw-card__foot_right">'+ escapeHtml(
                 formatDateLabel(
                   result.time || result.createTime || result.date || "",
                 ),
-              ) +
-              "</strong></div></div>",
+              )+ '</div>'
+              +'</div>',
           );
         });
       }
@@ -565,39 +583,90 @@
             '<li class="notice-item notice-item--empty">暂无公告</li>',
           );
       }
-      function renderChannelSections(menuList) {
+      function getAdGroups(adList) {
+        var validAds = CommonUtil.filterValidAds(adList || []);
+        var groups = [];
+        for (var i = 0; i < validAds.length; i += 8) {
+          groups.push(validAds.slice(i, i + 8));
+        }
+        return groups;
+      }
+      function renderAdStrip(adItems) {
+        var html = "";
+        $.each(adItems, function (_, ad) {
+          html +=
+            '<a href="' +
+            escapeHtml(ad.link || "#") +
+            '" target="_blank" rel="noopener noreferrer" class="ad-item"><img src="' +
+            escapeHtml(ad.touxiang || "") +
+            '" alt="' +
+            escapeHtml(ad.title || "广告") +
+            '" loading="lazy" /></a>';
+        });
+        return (
+          '<section class="article-ad-strip"><section class="ad-group"><div class="ad-group__grid">' +
+          html +
+          "</div></section></section>"
+        );
+      }
+      function renderChannelSections(menuList, adList) {
         var $container = $("#articleGroups");
         $container.empty();
+        var adGroups = getAdGroups(adList);
+        var insertAfter = [2, 6, 8];
+        var adCursor = 0;
+        var cardCount = 0;
         $.each(sortLotteries(menuList), function (index, lottery) {
-          var articles = (lottery.freeArticleList || []).slice(0, 5);
+          var limit = getFreeArticleLimit(lottery.name);
+          var articles = (lottery.freeArticleList || []).slice(0, limit);
           var cfg = lotteryIconMap[lottery.name] || lotteryIconMap["双色球"];
-          var listHtml = "";
-          $.each(articles, function (_, article) {
-            listHtml +=
-              `<li class="article-item"><img src="${article.accountAvatar || article.expertAvatar}" alt="" class="article-item__icon" /><a class="article-item__link" href="` +
-              CommonUtil.freeArticleHref(article.id || "") +
-              '" target="_blank">' +
-              escapeHtml(article.title || "文章标题") +
-              "</a></li>";
-          });
-          if (!listHtml)
-            listHtml =
-              '<li class="article-item article-item--empty"><span>暂无免费文章</span></li>';
-          $container.append(
-            '<section class="article-cluster" style="--accent:' +
-              cfg.accent +
-              '"><div class="article-cluster__head"><div class="article-cluster__title"><img src="' +
-              cfg.icon +
-              '" alt="' +
-              escapeHtml(lottery.name) +
-              '" /><div><strong>' +
-              escapeHtml(lottery.name) +
-              '</strong></div></div><a class="article-cluster__more" href="mianfeilist.html?id=' +
-              escapeHtml(lottery.id || "") +
-              '">更多文章</a></div><ul class="article-cluster__list">' +
-              listHtml +
-              "</ul></section>",
-          );
+          if (!articles.length) articles = [null];
+          for (var start = 0; start < articles.length; start += 5) {
+            var chunk = articles.slice(start, start + 5);
+            var listHtml = "";
+            $.each(chunk, function (_, article) {
+              if (!article) return;
+              var rawDateText = article.dateText || "";
+              var itemDateText = rawDateText ? formatDateLabel(rawDateText) : "";
+              listHtml +=
+                '<li class="article-item"><a class="article-item__link" href="' +
+                CommonUtil.freeArticleHref(article.id || "") +
+                '" target="_blank"><img src="' +
+                escapeHtml(article.accountAvatar || article.expertAvatar) +
+                '" alt="" class="article-item__icon" /><span class="article-item__title">' +
+                escapeHtml(article.title || "文章标题") +
+                "</span>" +
+                (itemDateText ? '<span class="article-item__date">' + itemDateText + "</span>" : "") +
+                "</a>" +
+                "</li>";
+            });
+            if (!listHtml)
+              listHtml =
+                '<li class="article-item article-item--empty"><span>暂无免费文章</span></li>';
+            $container.append(
+              '<section class="article-cluster" style="--accent:' +
+                cfg.accent +
+                '"><div class="article-cluster__head"><div class="article-cluster__title"><img src="' +
+                cfg.icon +
+                '" alt="' +
+                escapeHtml(lottery.name) +
+                '" /><div><strong>' +
+                escapeHtml(lottery.name) +
+                "</strong></div></div><a class=\"article-cluster__more\" href=\"mianfeilist.html?id=" +
+                escapeHtml(lottery.id || "") +
+                '">更多文章</a></div><ul class="article-cluster__list">' +
+                listHtml +
+                "</ul></section>",
+            );
+            cardCount++;
+            if (
+              adGroups[adCursor] &&
+              cardCount === insertAfter[adCursor]
+            ) {
+              $container.append(renderAdStrip(adGroups[adCursor]));
+              adCursor++;
+            }
+          }
         });
       }
       function renderResourceLinks($container, list) {
@@ -645,32 +714,16 @@
       function renderAdGroups(adList) {
         var $container = $("#sidebarAdContainer");
         $container.empty();
-        var validAds = CommonUtil.filterValidAds(adList || []);
-        if (!validAds.length) {
+        var adGroups = getAdGroups(adList);
+        if (!adGroups.length) {
           $container.html(
             '<div class="ad-group ad-group--empty">暂无广告数据</div>',
           );
           return;
         }
-        for (var i = 0; i < validAds.length; i += 8) {
-          var html = "";
-          $.each(validAds.slice(i, i + 8), function (_, ad) {
-            html +=
-              '<a href="' +
-              escapeHtml(ad.link || "#") +
-              '" target="_blank" rel="noopener noreferrer" class="ad-item"><img src="' +
-              escapeHtml(ad.touxiang || "") +
-              '" alt="' +
-              escapeHtml(ad.title || "广告") +
-              '" loading="lazy" /></a>';
-          });
-          $container.append(
-            '<section class="ad-group">' +
-              '<div class="ad-group__grid">' +
-              html +
-              "</div></section>",
-          );
-        }
+        $.each(adGroups, function (_, items) {
+          $container.append(renderAdStrip(items));
+        });
       }
       function getDefaultHistoryRange() {
         var end = new Date();
@@ -828,7 +881,7 @@
         renderBannerImages(data.bannerList || []);
         renderDynamicNav(sortedMenu);
         updateResultsGrid(sortedMenu);
-        renderChannelSections(sortedMenu);
+        renderChannelSections(sortedMenu, data.adList || []);
         renderHeroSummary(sortedMenu, data.noticeList || []);
         renderNoticeList(data.noticeList || []);
         renderAdGroups(data.adList || []);
diff --git a/images/xz.png b/images/xz.png
new file mode 100644
index 0000000..d81832d
Binary files /dev/null and b/images/xz.png differ
diff --git a/public/css/index.css b/public/css/index.css
index de8a009..dd63174 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2,8 +2,39 @@
    index.css - Homepage-specific styles
    ============================================================ */
 
+.indexTopAppsinBigBox {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.indexTopAppsinBox {
+  height: 75px;
+  width: min(var(--max-width), 100%);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.indexTopAppImg {
+  width: 23px;
+}
+
+.indexTopAppText {
+  margin-left: 10px;
+  font-size: 16px;
+}
+
+.topbar {
+  /* margin-top: 75px; */
+}
+
+body {
+  --max-width: 1400px;
+}
+
 .page-shell {
-  padding-bottom: 56px;
+  padding-bottom: 10px;
 }
 
 .hero,
@@ -12,18 +43,19 @@
 .content,
 .resource-section,
 .site-footer {
-  width: min(var(--max-width), calc(100% - 48px));
+  width: min(var(--max-width), 100%);
   margin: 0 auto;
 }
 
 .hero {
-  padding-top: 28px;
+  padding-top: 10px;
 }
 
 .hero__inner {
-  display: grid;
-  grid-template-columns: minmax(0, 1.45fr) 360px;
-  gap: 22px;
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  margin-top: 4px;
 }
 
 .hero__main,
@@ -52,6 +84,16 @@
   animation: cxz-fade-up .58s ease both;
 }
 
+.content__main {
+  flex: 1;
+  min-width: 0;
+}
+
+
+.content__ads {
+  display: none;
+}
+
 .hero-card {
   animation-delay: .06s;
 }
@@ -75,6 +117,8 @@
 }
 
 .hero__main {
+  flex: 1 1 52%;
+  min-width: 0;
   padding: 20px;
   background:
     radial-gradient(circle at top right, rgba(253, 185, 51, .14), transparent 22%),
@@ -82,6 +126,11 @@
     rgba(255, 255, 255, .96);
 }
 
+.hero__side--right {
+  flex: 0 0 360px;
+  max-width: 360px;
+}
+
 .panel-head,
 .draw__header,
 .content-head,
@@ -145,9 +194,10 @@
 
 .hero__carousel-wrap {
   height: 420px;
-  border-radius: 22px;
-  overflow: hidden;
   background: linear-gradient(135deg, #0f2b68, #12367c, #164d86);
+  min-height: 100%;
+  border-radius: 16px;
+  overflow: hidden;
 }
 
 .hero__carousel-wrap .layui-carousel,
@@ -237,10 +287,16 @@
   font-size: 12px;
 }
 
-.hero__side {
-  /* display: grid;
-  grid-template-rows: 1fr 1fr;
-  gap: 22px; */
+.hero__side .sidebar-card {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 10px 26px rgba(9, 24, 64, 0.08),
+    0 2px 6px rgba(9, 24, 64, 0.04);
+}
+
+.sidebar-card-bom {
+  margin-top: 10px;
 }
 
 .hero-card {
@@ -410,8 +466,8 @@
 }
 
 .section-divider {
-  width: min(var(--max-width), calc(100% - 48px));
-  margin: 28px auto 18px;
+  width: min(var(--max-width), 100%);
+  margin: 10px auto 10px;
   padding: 16px 24px;
   border-radius: 22px;
   color: var(--white);
@@ -494,7 +550,7 @@
 }
 
 .draw {
-  margin-top: 18px;
+  margin-top: 10px;
   padding: 24px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98));
 }
@@ -571,8 +627,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin: 18px 0 14px;
-  min-height: 74px;
+  margin: 8px 0 2px;
+  min-height: 68px;
   align-content: flex-start;
 }
 
@@ -589,20 +645,31 @@
   border-top: 1px dashed rgba(16, 43, 106, .1);
 }
 
+.draw-card__foot_left {
+  display: flex;
+  align-items: center;
+}
+
+.draw-card__foot_left_left {
+  color: var(--text-soft);
+  font-size: 12px;
+}
+
+.draw-card__foot_left_right {
+  color: var(--navy);
+  font-size: 13px;
+  margin-left: 8px;
+}
+
 .draw-card__date {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.draw-card__foot span {
-  color: var(--text-soft);
-  font-size: 12px;
-}
-
-.draw-card__foot strong {
-  color: var(--navy);
+.draw-card__foot_right {
   font-size: 13px;
+  margin-left: 8px;
 }
 
 .draw-card__link--button {
@@ -626,18 +693,13 @@
 }
 
 .content {
-  margin-top: 24px;
+  margin-top: 10px;
 }
 
 .content__inner {
-  display: grid;
-  grid-template-columns: 280px minmax(0, 1fr) 332px;
-  gap: 22px;
-  align-items: start;
-}
-
-.sidebar-card {
-  margin-bottom: 18px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
 }
 
 .sidebar-card__head {
@@ -742,7 +804,7 @@
 }
 
 .qrcode-box {
-  padding: 24px;
+  padding: 8px;
   text-align: center;
 }
 
@@ -788,10 +850,7 @@
   color: var(--text);
   font-size: 13px;
   font-weight: 700;
-}
-
-.combo-tool-card {
-  margin-top: 34px;
+  white-space: nowrap;
 }
 
 .combo-tool-grid {
@@ -842,7 +901,15 @@
 .article-matrix {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
+  gap: 10px;
+}
+
+.article-ad-strip {
+  grid-column: 1 / -1;
+}
+
+.article-ad-strip .ad-group {
+  margin: 0;
 }
 
 .article-cluster__head {
@@ -888,6 +955,11 @@
 }
 
 .article-item {
+  margin: 0;
+  padding: 0;
+}
+
+.article-item__link {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -896,13 +968,14 @@
   transition: transform .2s ease, background .2s ease, padding .2s ease;
 }
 
-.article-item:hover {
+.article-item:hover .article-item__link {
   padding-left: 6px;
   background: linear-gradient(90deg, rgba(16, 43, 106, .045), transparent);
   transform: translateX(2px);
 }
 
-.article-item:last-child {
+.article-item:last-child .article-item__link,
+.article-item.article-item--empty {
   border-bottom: none;
 }
 
@@ -913,7 +986,7 @@
   flex: 0 0 auto;
 }
 
-.article-item__link {
+.article-item__title {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -922,6 +995,13 @@
   font-size: 14px;
 }
 
+.article-item__date {
+  color: var(--text-soft);
+  font-size: 12px;
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .ad-group {
   margin-bottom: 18px;
 }
@@ -951,7 +1031,7 @@
 }
 
 .ad-item img {
-  width: 139px;
+  width: 157.7px;
   height: 94px;
   object-fit: cover;
   background: #fff;
@@ -965,7 +1045,7 @@
 .resource-section__inner {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 22px;
+  gap: 10px;
 }
 
 .resource-card {
@@ -992,7 +1072,7 @@
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  min-width: calc(50% - 6px);
+  min-width: calc(23% - 6px);
   padding: 14px 16px;
   border-radius: 18px;
   background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96));
@@ -1009,6 +1089,7 @@
     opacity: 0;
     transform: translateY(14px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1020,9 +1101,11 @@
     opacity: 0;
     transform: scale(.72);
   }
+
   70% {
     transform: scale(1.08);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -1035,6 +1118,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   *,
   *::before,
   *::after {
@@ -1088,3 +1172,39 @@
   color: var(--text);
   font-size: 13px;
 }
+
+
+@media (max-width: 1200px) {
+  .hero__inner {
+    flex-direction: column;
+  }
+
+  .hero__side {
+    flex: 0 1 auto;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .hero__main {
+    order: -1;
+  }
+
+  .content__inner {
+    flex-direction: column;
+  }
+
+  .content__ads {
+    flex-basis: auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero__inner {
+    gap: 12px;
+  }
+
+  .hero__side {
+    gap: 10px;
+  }
+}
diff --git a/public/css/public.css b/public/css/public.css
index 5ea6749..a918c7c 100644
--- a/public/css/public.css
+++ b/public/css/public.css
@@ -111,7 +111,7 @@ select {
 }
 
 .topbar__inner {
-  width: min(var(--max-width), calc(100% - 48px));
+  width: min(var(--max-width), 100%);
   margin: 0 auto;
   min-height: 82px;
   display: flex;
@@ -244,7 +244,7 @@ select {
    3. Site Footer (unified footer)
    ---------------------------------------------------------- */
 .site-footer {
-  width: min(var(--max-width), calc(100% - 48px));
+  width: min(var(--max-width), 100%);
   margin: 0 auto;
   margin-top: 28px;
 }
@@ -290,8 +290,8 @@ select {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 32px;
+  height: 32px;
   padding: 0 10px;
   border-radius: 999px;
   color: var(--white);
@@ -300,8 +300,8 @@ select {
 }
 
 .ball--compact {
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   font-size: 12px;
   padding: 0 8px;
 }
diff --git a/tmp/trend-compat-regression.js b/tmp/trend-compat-regression.js
new file mode 100644
index 0000000..dcb61d8
--- /dev/null
+++ b/tmp/trend-compat-regression.js
@@ -0,0 +1,79 @@
+const fs = require("fs");
+const path = require("path");
+const vm = require("vm");
+const assert = require("assert");
+
+const apiClientPath = path.join(__dirname, "..", "utils", "ApiClient.js");
+const source =
+  fs.readFileSync(apiClientPath, "utf8") + "\nglobalThis.__ApiClient = ApiClient;\n";
+
+const context = {
+  console,
+  window: { CURRENT_CONFIG: {} },
+  localStorage: {
+    getItem() {
+      return "";
+    },
+  },
+};
+
+vm.createContext(context);
+vm.runInContext(source, context, { filename: apiClientPath });
+
+const ApiClient = context.__ApiClient;
+
+async function assertLegacyDataArrayFromTrendObject() {
+  const rows = [
+    { issue: "2026001", openCode: "1,2,3" },
+    { issue: "2026002", openCode: "4,5,6" },
+  ];
+
+  let trendRequest;
+  ApiClient.get = async function (url, params) {
+    trendRequest = { url, params };
+    return { code: 0, data: { records: rows, total: rows.length } };
+  };
+
+  ApiClient.requestWithMenu = async function () {
+    throw new Error("trend response should not fall back");
+  };
+
+  const res = await ApiClient.requestLegacyLotteryResultCompat({ suoxie: "pl3" });
+  assert.strictEqual(trendRequest.url, ApiClient.API.lotteryTrend);
+  assert.strictEqual(trendRequest.params.code, "pl3");
+  assert.strictEqual(trendRequest.params.pageSize, 100);
+  assert.ok(Array.isArray(res.data), "legacy trend data should be an array");
+  assert.deepStrictEqual(res.data.slice(0, 1), rows.slice(0, 1));
+  assert.deepStrictEqual(res.data.records, rows);
+  assert.deepStrictEqual(res.data.rows, rows);
+  assert.strictEqual(res.data.total, rows.length);
+}
+
+async function assertLegacyDataArrayFromFallbackObject() {
+  const rows = [{ issue: "2026003", openCode: "7,8,9" }];
+
+  ApiClient.API.lotteryTrend = "";
+  ApiClient.requestWithMenu = async function (url, data) {
+    assert.strictEqual(url, "/api/web/lottery/result/list");
+    assert.deepStrictEqual(data, { suoxie: "pl3" });
+    return { code: 0, data: { rows, totalRow: rows.length } };
+  };
+
+  const res = await ApiClient.requestLegacyLotteryResultCompat({ suoxie: "pl3" });
+  assert.ok(Array.isArray(res.data), "legacy fallback data should be an array");
+  assert.deepStrictEqual(res.data.slice(0, 1), rows);
+  assert.deepStrictEqual(res.data.records, rows);
+  assert.deepStrictEqual(res.data.rows, rows);
+  assert.strictEqual(res.data.totalRow, rows.length);
+}
+
+Promise.resolve()
+  .then(assertLegacyDataArrayFromTrendObject)
+  .then(assertLegacyDataArrayFromFallbackObject)
+  .then(() => {
+    console.log("trend compat regression passed");
+  })
+  .catch((error) => {
+    console.error(error && error.stack ? error.stack : error);
+    process.exit(1);
+  });
