diff --git a/frontend/zhihu-hotlist-echarts.html b/frontend/zhihu-hotlist-echarts.html
index 1a56b4b..bbe0885 100644
--- a/frontend/zhihu-hotlist-echarts.html
+++ b/frontend/zhihu-hotlist-echarts.html
@@ -171,7 +171,8 @@
       height: 100vh;
       padding: 20px 24px 14px;
       display: grid;
-      grid-template-rows: 88px 120px 380px minmax(0, 1fr) 44px;
+      /* V2 height contract: header / KPI / charts / table / footer */
+      grid-template-rows: 92px 140px 380px minmax(0, 1fr) 44px;
       gap: 14px;
     }
 
@@ -215,7 +216,7 @@
 
     .screen-header {
       display: grid;
-      grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
+      grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1.15fr);
       gap: 18px;
       align-items: center;
       padding: 0 24px;
@@ -272,26 +273,115 @@
       min-width: 0;
     }
 
-    .header-meta {
+    .header-chip-row {
       display: flex;
-      align-items: center;
+      align-items: stretch;
       justify-content: flex-end;
-      flex-wrap: wrap;
-      gap: 10px 18px;
-      font-size: 12px;
-      color: var(--muted);
+      flex-wrap: nowrap;
+      gap: 14px;
+      width: 100%;
+      min-width: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-gutter: stable both-edges;
+      padding-bottom: 4px;
     }
 
-    .header-meta strong {
+    /* Ensure horizontal scroll works (no forced shrink-to-fit that overflows header). */
+    .header-chip-row > * {
+      flex: 0 0 auto;
+      min-width: 0;
+    }
+
+    .chip-group {
+      display: flex;
+      align-items: stretch;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .chip-group-meta {
+      flex: 1 1 auto;
+      justify-content: flex-end;
+      min-width: max-content;
+    }
+
+    .chip-group-actions {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      min-width: max-content;
+    }
+
+    .meta-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 52px;
+      padding: 10px 14px;
+      border-radius: 14px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      color: var(--muted);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
+      font-size: 12px;
+      min-width: 0;
+      max-width: 100%;
+      flex: 0 1 auto;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+
+    .meta-chip strong {
       color: var(--text);
       font-weight: 600;
+      font-family: var(--font-number);
+      letter-spacing: 0.02em;
+    }
+
+    .meta-chip.status-chip {
+      border-color: rgba(116, 198, 157, 0.32);
+      color: rgba(234, 244, 255, 0.92);
+      background: linear-gradient(180deg, rgba(116, 198, 157, 0.16) 0%, rgba(116, 198, 157, 0.08) 100%);
+    }
+
+    .meta-chip.status-chip strong {
+      color: var(--success);
+      font-family: var(--font-main);
+      letter-spacing: 0;
+    }
+
+    .status-dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: var(--success);
+      box-shadow: 0 0 0 4px rgba(116, 198, 157, 0.12), 0 0 10px rgba(116, 198, 157, 0.28);
+      flex: 0 0 auto;
+    }
+
+    .meta-chip.action-chip {
+      padding: 8px 12px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.028) 100%);
+    }
+
+    .meta-chip.action-chip .theme-switcher {
+      gap: 8px;
+    }
+
+    #snapshotId {
+      display: inline-block;
+      min-width: 0;
+      max-width: 18ch;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     .theme-switcher {
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       justify-content: flex-end;
       gap: 10px;
+      min-width: max-content;
     }
 
     .theme-btn,
@@ -354,30 +444,99 @@
       outline-offset: 2px;
     }
 
-    .kpi-row {
+    /*
+      KPI track is fixed (140px) in the V2 screen grid contract, so the KPI layout
+      must be deterministic and never wrap.
+
+      Spec: 2 large + 3 small cards in one row.
+      We use a 5-column grid where the first two columns are wider.
+    */
+    .kpi-grid {
       display: grid;
-      grid-template-columns: repeat(5, minmax(0, 1fr));
+      grid-template-columns: 2fr 2fr 1.2fr 1.2fr 1.2fr;
       gap: 14px;
+      align-items: stretch;
     }
 
     .kpi-card {
       border-radius: 16px;
       padding: 18px 20px;
       display: grid;
-      gap: 8px;
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-rows: auto auto auto;
+      gap: 8px 12px;
+      min-width: 0;
+      grid-column: auto;
+      align-content: start;
+    }
+
+    /* V2 KPI tiers (kept for typography differences, not layout spans). */
+    .kpi-card.kpi-card-large {
+      min-height: 124px;
+      align-content: center;
+    }
+
+    .kpi-card.kpi-card-small {
+      min-height: 0;
+    }
+
+    .kpi-label,
+    .kpi-sub,
+    .kpi-value {
+      grid-column: 1 / 2;
       min-width: 0;
     }
 
-    .kpi-label {
-      font-size: 12px;
+    .kpi-badge-slot {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+      justify-self: end;
+      align-self: start;
+      min-width: 0;
+      min-height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .kpi-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      max-width: 120px;
+      min-height: 28px;
+      padding: 0 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text);
+      font-size: 11px;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .kpi-badge.is-muted {
       color: var(--muted);
-      letter-spacing: 0.14em;
-      text-transform: uppercase;
+    }
+
+    .kpi-badge.has-tone {
+      border-color: currentColor;
+      background: transparent;
+    }
+
+    .kpi-badge-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex: 0 0 auto;
+      box-shadow: 0 0 10px currentColor;
     }
 
     .kpi-value {
       font-family: var(--font-number);
-      font-size: clamp(24px, 2.3vw, 34px);
+      font-size: clamp(20px, 2vw, 24px);
       line-height: 1.15;
       font-weight: 700;
       color: var(--text);
@@ -386,8 +545,18 @@
       text-overflow: ellipsis;
     }
 
-    .kpi-value.long {
-      font-size: clamp(18px, 1.45vw, 24px);
+    .kpi-card.kpi-card-large .kpi-value {
+      font-size: clamp(30px, 2.6vw, 36px);
+    }
+
+    /* 最高热话题：2-line clamp */
+    .kpi-card.kpi-card-small .kpi-value.long {
+      font-size: clamp(20px, 1.75vw, 24px);
+      white-space: normal;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
     }
 
     .kpi-sub {
@@ -398,6 +567,15 @@
       text-overflow: ellipsis;
     }
 
+    .kpi-label {
+      font-size: 12px;
+      color: var(--muted);
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+
+    /* KPI typography handled by V2 tier rules above. */
+
     .kpi-status-normal { color: var(--success); }
     .kpi-status-warning { color: var(--warning); }
     .kpi-status-danger { color: var(--danger); }
@@ -416,17 +594,65 @@
     }
 
     .panel-head {
+      position: relative;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       gap: 12px;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
+      padding: 0 0 14px 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .panel-head::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 2px;
+      width: 4px;
+      height: 22px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
+      opacity: 0.9;
+    }
+
+    .panel-head::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 84px;
+      height: 24px;
+      border-radius: 999px;
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      background: rgba(255, 255, 255, 0.025);
+      opacity: 0.85;
+      pointer-events: none;
     }
 
     .panel-title-wrap {
       min-width: 0;
     }
 
+    .panel-kicker {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--accent);
+    }
+
+    .panel-kicker::before {
+      content: "";
+      width: 22px;
+      height: 1px;
+      background: linear-gradient(90deg, var(--accent) 0%, rgba(216, 179, 106, 0.08) 100%);
+    }
+
     .panel-title {
       margin: 0;
       font-size: 20px;
@@ -461,10 +687,23 @@
     }
 
     .insight-section {
-      border: 1px solid rgba(255, 255, 255, 0.06);
-      background: rgba(255, 255, 255, 0.03);
+      position: relative;
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
       border-radius: 14px;
-      padding: 14px;
+      padding: 14px 14px 14px 16px;
+    }
+
+    .insight-section::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 14px;
+      bottom: 14px;
+      width: 3px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, var(--accent) 0%, rgba(255, 255, 255, 0.1) 100%);
+      opacity: 0.9;
     }
 
     .insight-section h3 {
@@ -538,7 +777,7 @@
       height: 6px;
       border-radius: 50%;
       background: var(--accent-2);
-      box-shadow: 0 0 8px rgba(62, 199, 255, 0.35);
+      box-shadow: none;
     }
 
     .insight-empty,
@@ -564,23 +803,28 @@
 
     .category-pills {
       display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      flex-wrap: nowrap;
+      gap: 10px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-bottom: 4px;
+      scrollbar-width: thin;
     }
 
     .category-pill,
     .category-tag {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
-      min-width: 0;
-      border-radius: 999px;
-      padding: 6px 12px;
+      gap: 10px;
+      min-width: max-content;
+      border-radius: 14px;
+      padding: 10px 14px;
       font-size: 12px;
       font-weight: 600;
       color: var(--text);
       background: rgba(255, 255, 255, 0.06);
       border: 1px solid rgba(255, 255, 255, 0.08);
+      white-space: nowrap;
     }
 
     .swatch {
@@ -588,21 +832,23 @@
       height: 10px;
       border-radius: 50%;
       flex: 0 0 auto;
-      box-shadow: 0 0 10px currentColor;
+      box-shadow: none;
     }
 
     .table-wrap {
       min-height: 0;
       overflow: auto;
       border-radius: 14px;
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.09);
       background: rgba(2, 10, 22, 0.24);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
     }
 
     table {
       width: 100%;
       min-width: 1020px;
-      border-collapse: collapse;
+      border-collapse: separate;
+      border-spacing: 0;
     }
 
     thead th {
@@ -614,10 +860,11 @@
       font-size: 12px;
       color: var(--muted);
       background: var(--table-header);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       letter-spacing: 0.1em;
       text-transform: uppercase;
       white-space: nowrap;
+      backdrop-filter: blur(10px);
     }
 
     tbody td {
@@ -631,9 +878,10 @@
       background: rgba(255, 255, 255, 0.03);
     }
 
-    tbody tr.top-1 { background: rgba(255, 215, 128, 0.06); }
-    tbody tr.top-2 { background: rgba(207, 219, 232, 0.05); }
-    tbody tr.top-3 { background: rgba(201, 145, 89, 0.05); }
+    /* weak highlight for Top3 only */
+    tbody tr.top-1 { background: rgba(255, 215, 128, 0.038); }
+    tbody tr.top-2 { background: rgba(207, 219, 232, 0.032); }
+    tbody tr.top-3 { background: rgba(201, 145, 89, 0.032); }
 
     .rank-badge {
       display: inline-flex;
@@ -705,6 +953,12 @@
       color: var(--muted);
     }
 
+    #footerNote {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .footer-meta {
       display: flex;
       gap: 18px;
@@ -811,9 +1065,18 @@
     }
 
     @media (max-width: 1600px) {
+      body {
+        height: auto;
+        min-height: 100%;
+        overflow-y: auto;
+      }
+
       .screen {
+        height: auto;
+        min-height: 1080px;
         padding: 16px;
         gap: 12px;
+        grid-template-rows: auto auto auto auto auto;
       }
 
       .screen-header {
@@ -826,12 +1089,31 @@
         justify-items: start;
       }
 
-      .theme-switcher,
-      .header-meta {
+      .header-chip-row {
+        flex-wrap: wrap;
+      }
+
+      .chip-group {
+        flex-wrap: wrap;
+      }
+
+      .header-chip-row,
+      .chip-group-meta,
+      .chip-group-actions,
+      .theme-switcher {
         justify-content: flex-start;
       }
 
-      .kpi-row,
+      .kpi-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .kpi-card,
+      .kpi-card.kpi-card-large,
+      .kpi-card.kpi-card-small {
+        grid-column: auto;
+      }
+
       .main-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
@@ -841,11 +1123,11 @@
       }
     }
 
-    @media (max-width: 1280px), (max-height: 900px) {
+    @media (max-height: 900px) {
       body {
         height: auto;
         min-height: 100%;
-        overflow: auto;
+        overflow-y: auto;
       }
 
       .screen {
@@ -853,11 +1135,19 @@
         min-height: 1080px;
         grid-template-rows: auto auto auto auto auto;
       }
+    }
 
-      .kpi-row {
+    @media (max-width: 1280px), (max-height: 900px) {
+      .kpi-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
 
+      .kpi-card,
+      .kpi-card.kpi-card-large,
+      .kpi-card.kpi-card-small {
+        grid-column: span 1;
+      }
+
       .main-grid {
         grid-template-columns: 1fr;
       }
@@ -878,10 +1168,16 @@
         padding: 12px;
       }
 
-      .kpi-row {
+      .kpi-grid {
         grid-template-columns: 1fr;
       }
 
+      .kpi-card,
+      .kpi-card.kpi-card-large,
+      .kpi-card.kpi-card-small {
+        grid-column: span 1;
+      }
+
       .header-title {
         font-size: 28px;
       }
@@ -895,7 +1191,8 @@
       .drawer-actions,
       .theme-switcher,
       .footer-meta,
-      .header-meta {
+      .header-chip-row,
+      .chip-group {
         gap: 8px;
       }
     }
@@ -910,29 +1207,52 @@
         <p class="header-subtitle">基于知乎热榜快照，按主题分类汇总热度与互动指标，适配国企汇报场景的一页式监测大屏。</p>
       </div>
       <div class="header-side">
-        <div class="header-meta">
-          <span>当前时间 <strong id="currentTime">-</strong></span>
-          <span>数据源 <strong id="snapshotId">demo-snapshot</strong></span>
-          <span>生成时间 <strong id="generatedAt">-</strong></span>
-        </div>
-        <div class="theme-switcher" id="themeSwitcher">
-          <button class="theme-btn active" type="button" data-theme="gov_blue_gold">政务蓝金</button>
-          <button class="theme-btn" type="button" data-theme="tech_cyan_blue">科技青蓝</button>
-          <button class="theme-btn" type="button" data-theme="industry_ink_green">工业墨绿</button>
-          <button class="theme-btn" type="button" data-theme="meeting_red_gold">会议红金</button>
-          <button class="drawer-toggle primary" type="button" id="drawerToggle">数据输入</button>
+        <div class="header-chip-row">
+          <div class="chip-group chip-group-meta">
+            <div class="meta-chip" id="metaCurrentTime">
+              <span>当前时间</span>
+              <strong id="currentTime">-</strong>
+            </div>
+            <div class="meta-chip" id="metaSnapshot">
+              <span>快照</span>
+              <strong id="snapshotId">demo-snapshot</strong>
+            </div>
+            <div class="meta-chip" id="metaGeneratedAt">
+              <span>生成时间</span>
+              <strong id="generatedAt">-</strong>
+            </div>
+            <div class="meta-chip status-chip" id="metaStatus">
+              <span class="status-dot" aria-hidden="true"></span>
+              <span>状态</span>
+              <strong>在线</strong>
+            </div>
+          </div>
+          <div class="chip-group chip-group-actions">
+            <div class="meta-chip action-chip" id="metaThemeSwitcher">
+              <div class="theme-switcher" id="themeSwitcher">
+                <button class="theme-btn active" type="button" data-theme="gov_blue_gold">政务蓝金</button>
+                <button class="theme-btn" type="button" data-theme="tech_cyan_blue">科技青蓝</button>
+                <button class="theme-btn" type="button" data-theme="industry_ink_green">工业墨绿</button>
+                <button class="theme-btn" type="button" data-theme="meeting_red_gold">会议红金</button>
+              </div>
+            </div>
+            <div class="meta-chip action-chip" id="metaDrawerAction">
+              <button class="drawer-toggle primary" type="button" id="drawerToggle">数据输入</button>
+            </div>
+          </div>
         </div>
       </div>
     </header>
 
-    <section class="kpi-row" id="summaryGrid"></section>
+    <section class="kpi-grid" id="summaryGrid"></section>
 
     <section class="main-grid">
       <article class="panel chart-panel">
         <div class="panel-head">
           <div class="panel-title-wrap">
-            <h2 class="panel-title">分类条目数量对比</h2>
-            <p class="panel-desc">比较各主题在当前热榜中的条目数量，识别内容分布重心。</p>
+            <div class="panel-kicker">Chart 01</div>
+            <h2 class="panel-title">分类条目分布</h2>
+            <p class="panel-desc">按主题统计上榜条目数量，呈现当前热榜内容覆盖结构。</p>
           </div>
         </div>
         <div class="chart-box" id="categoryCountChart"></div>
@@ -941,8 +1261,9 @@
       <article class="panel chart-panel">
         <div class="panel-head">
           <div class="panel-title-wrap">
-            <h2 class="panel-title">分类总热度对比</h2>
-            <p class="panel-desc">按主题汇总热度，突出最高热度类目，辅助快速研判舆论集中点。</p>
+            <div class="panel-kicker">Chart 02</div>
+            <h2 class="panel-title">分类热度分布</h2>
+            <p class="panel-desc">按主题汇总热度规模，突出当前热榜关注度集中方向。</p>
           </div>
         </div>
         <div class="chart-box" id="categoryHeatChart"></div>
@@ -957,7 +1278,7 @@
         </div>
         <div class="insights-body">
           <section class="insight-section">
-            <h3>TOP3 热点话题</h3>
+            <h3>Top3 话题</h3>
             <div class="insight-list" id="insightTopList"></div>
           </section>
           <section class="insight-section">
@@ -966,11 +1287,7 @@
           </section>
           <section class="insight-section">
             <h3>提示说明</h3>
-            <div class="conclusion-list">
-              <div class="conclusion-item">默认使用示例数据，支持直接粘贴 `zhihu_hotlist_report` 的 `echarts` JSON。</div>
-              <div class="conclusion-item">输入抽屉为覆盖层，不挤压大屏布局；适合汇报时快速切换数据快照。</div>
-              <div class="conclusion-item">类别颜色在图表、摘要、表格标签之间保持一致。</div>
-            </div>
+            <div class="conclusion-list" id="insightTipsList"></div>
           </section>
         </div>
       </aside>
@@ -988,7 +1305,7 @@
     </section>
 
     <footer class="screen-footer">
-      <div id="footerNote">热度来自热榜展示值；互动指标来自问题页抓取的快照（若为空则显示 0）。</div>
+      <div id="footerNote">数据说明：热度来自热榜展示值；互动指标为空则显示 0。</div>
       <div class="footer-meta">
         <span>生成时间 <strong id="footerGeneratedAt">-</strong></span>
         <span>当前皮肤 <strong id="footerSkin">政务蓝金</strong></span>
@@ -1219,6 +1536,9 @@
     const drawerBackdrop = document.getElementById("drawerBackdrop")
     const dataDrawer = document.getElementById("dataDrawer")
     const themeSwitcher = document.getElementById("themeSwitcher")
+    const metaStatus = document.getElementById("metaStatus")
+    const metaStatusDot = metaStatus ? metaStatus.querySelector(".status-dot") : null
+    const metaStatusText = metaStatus ? metaStatus.querySelector("strong") : null
 
     const hexagonSymbol = "path://M12 2 L36 2 L46 18 L36 34 L12 34 L2 18 Z"
 
@@ -1242,14 +1562,55 @@
       if (!timestamp) return "-"
       const date = new Date(timestamp)
       if (Number.isNaN(date.getTime())) return "-"
-      return date.toLocaleString("zh-CN", { hour12: false })
+      return new Intl.DateTimeFormat("zh-CN", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+      }).format(date)
     }
 
     function formatClock(timestamp) {
       if (!timestamp) return "-"
       const date = new Date(timestamp)
       if (Number.isNaN(date.getTime())) return "-"
-      return date.toLocaleTimeString("zh-CN", { hour12: false })
+      return new Intl.DateTimeFormat("zh-CN", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+      }).format(date)
+    }
+
+    function displayStructural(value) {
+      const text = String(value ?? "").trim()
+      if (!text) return "-"
+      if (text === "#" || text === "null" || text === "undefined") return "-"
+      return text
+    }
+
+    function displaySnapshotId(value) {
+      const text = String(value ?? "").trim()
+      if (!text || text === "null" || text === "undefined") return "未命名快照"
+      return text
+    }
+
+    function formatHeatDisplay(heatText, heatValue) {
+      const text = String(heatText ?? "").trim()
+      if (text) return text
+      return formatNumber(heatValue)
+    }
+
+    function getGeneratedAtDisplay(payload) {
+      if (!payload) return "-"
+      const generatedAtLocal = String(payload.generatedAtLocal ?? "").trim()
+      if (generatedAtLocal && generatedAtLocal !== "-") return generatedAtLocal
+      const formatted = formatTime(payload.generated_at_ms)
+      if (!formatted || formatted === "-") return "-"
+      return formatted
     }
 
     function formatCompactHeat(value) {
@@ -1354,7 +1715,8 @@
 
       return {
         snapshot_id: String(payload.snapshot_id || "未命名快照"),
-        generated_at_ms: normalizeNumber(payload.generated_at_ms) || Date.now(),
+        generated_at_ms: normalizeNumber(payload.generated_at_ms),
+        generatedAtLocal: formatTime(payload.generated_at_ms),
         categories,
         table
       }
@@ -1375,21 +1737,51 @@
     }
 
     function getStatusMeta(statusText) {
-      if (statusText === "解析失败" || statusText === "ECharts 未加载") {
-        return { className: "kpi-status-danger" }
+      const canonicalStatus = String(statusText || "").trim() || "正常"
+      if (canonicalStatus === "解析失败" || canonicalStatus === "ECharts 未加载") {
+        return { text: canonicalStatus, className: "kpi-status-danger", cssVar: "--danger" }
       }
-      if (statusText === "无数据") {
-        return { className: "kpi-status-warning" }
+      if (canonicalStatus === "无数据") {
+        return { text: canonicalStatus, className: "kpi-status-warning", cssVar: "--warning" }
       }
-      return { className: "kpi-status-normal" }
+      return { text: canonicalStatus, className: "kpi-status-normal", cssVar: "--success" }
+    }
+
+    function resolveDashboardStatus(payload, overrideStatus) {
+      if (overrideStatus) return getStatusMeta(overrideStatus).text
+      if (!window.echarts) return getStatusMeta("ECharts 未加载").text
+      if (!payload || !Array.isArray(payload.table) || payload.table.length === 0) return getStatusMeta("无数据").text
+      return getStatusMeta("正常").text
+    }
+
+    function compareTextAsc(left, right) {
+      return String(left || "").localeCompare(String(right || ""), "zh-CN")
+    }
+
+    function compareTopCategory(left, right) {
+      return Number(right?.item_count || 0) - Number(left?.item_count || 0)
+        || Number(right?.total_heat || 0) - Number(left?.total_heat || 0)
+        || compareTextAsc(left?.category_label, right?.category_label)
+    }
+
+    function compareHottestItem(left, right) {
+      return Number(right?.heat_value || 0) - Number(left?.heat_value || 0)
+        || Number(left?.rank || 0) - Number(right?.rank || 0)
+        || compareTextAsc(left?.title, right?.title)
+    }
+
+    function compareCapsuleCategory(left, right) {
+      return Number(right?.total_heat || 0) - Number(left?.total_heat || 0)
+        || Number(right?.item_count || 0) - Number(left?.item_count || 0)
+        || compareTextAsc(left?.category_label, right?.category_label)
     }
 
     function getTopCategory(categories) {
-      return categories.slice().sort((a, b) => Number(b.item_count || 0) - Number(a.item_count || 0))[0]
+      return categories.slice().sort(compareTopCategory)[0]
     }
 
     function getHottestItem(table) {
-      return table.slice().sort((a, b) => Number(b.heat_value || 0) - Number(a.heat_value || 0))[0]
+      return table.slice().sort(compareHottestItem)[0]
     }
 
     function buildSummaryCards(payload, statusText) {
@@ -1399,42 +1791,85 @@
       const hottestItem = getHottestItem(payload.table)
       const statusMeta = getStatusMeta(statusText)
       const cards = [
-        {
-          label: "热榜条数",
-          value: formatNumber(totalItems),
-          sub: "当前展示条数"
-        },
         {
           label: "总热度",
           value: formatNumber(totalHeat),
-          sub: "分类汇总热度"
+          sub: `汇总 ${formatNumber(payload.categories.length)} 个分类`,
+          large: true,
+          badge: {
+            text: `${formatNumber(totalItems)} 条`,
+            title: `热榜条数 ${formatNumber(totalItems)}`
+          }
         },
         {
           label: "主导类别",
-          value: topCategory ? topCategory.category_label : "-",
-          sub: topCategory ? `共 ${formatNumber(topCategory.item_count)} 条` : "暂无数据"
+          value: topCategory ? displayStructural(topCategory.category_label) : "-",
+          sub: topCategory ? `共 ${formatNumber(topCategory.item_count)} 条，热度 ${formatNumber(topCategory.total_heat)}` : "暂无数据",
+          large: true,
+          badge: topCategory ? {
+            text: formatCompactHeat(topCategory.total_heat),
+            title: `主导类别总热度 ${formatNumber(topCategory.total_heat)}`
+          } : {
+            text: "暂无数据",
+            title: "暂无数据",
+            muted: true
+          }
+        },
+        {
+          label: "热榜条数",
+          value: formatNumber(totalItems),
+          sub: `覆盖 ${formatNumber(payload.categories.length)} 个类别`,
+          badge: {
+            text: "条目",
+            title: "热榜条目数",
+            muted: true
+          }
         },
         {
           label: "最高热话题",
-          value: hottestItem ? hottestItem.title : "-",
-          sub: hottestItem ? `热度 ${formatCompactHeat(hottestItem.heat_value)}` : "暂无数据",
-          long: true
+          value: hottestItem ? displayStructural(hottestItem.title) : "-",
+          sub: hottestItem ? `热度 ${formatHeatDisplay(hottestItem.heat_text, hottestItem.heat_value)}` : "暂无数据",
+          long: true,
+          badge: hottestItem ? {
+            text: displayStructural(hottestItem.category_label),
+            title: `所属类别 ${displayStructural(hottestItem.category_label)}`
+          } : {
+            text: "暂无数据",
+            title: "暂无数据",
+            muted: true
+          }
         },
         {
           label: "数据状态",
-          value: statusText,
+          value: statusMeta.text,
           sub: `上次渲染：${formatClock(state.lastRenderedAtMs)}`,
-          className: statusMeta.className
+          className: statusMeta.className,
+          badge: {
+            text: statusMeta.text,
+            title: `当前状态 ${statusMeta.text}`,
+            dotColorVar: statusMeta.cssVar
+          }
         }
       ]
 
-      summaryGrid.innerHTML = cards.map((card) => `
-        <article class="kpi-card">
-          <div class="kpi-label">${escapeHtml(card.label)}</div>
-          <div class="kpi-value ${card.long ? "long" : ""} ${card.className || ""}" title="${escapeHtml(card.value)}">${escapeHtml(card.value)}</div>
-          <div class="kpi-sub">${escapeHtml(card.sub)}</div>
-        </article>
-      `).join("")
+      summaryGrid.innerHTML = cards.map((card) => {
+        const badgeHtml = card.badge ? `
+          <div class="kpi-badge-slot">
+            <span class="kpi-badge ${card.badge.muted ? "is-muted" : ""} ${card.badge.dotColorVar ? "has-tone" : ""}" title="${escapeHtml(card.badge.title || card.badge.text)}"${card.badge.dotColorVar ? ` style="color: var(${card.badge.dotColorVar}); border-color: currentColor; background: transparent;"` : ""}>
+              ${card.badge.dotColorVar ? '<span class="kpi-badge-dot" aria-hidden="true" style="background: currentColor;"></span>' : ""}
+              <span>${escapeHtml(card.badge.text)}</span>
+            </span>
+          </div>
+        ` : '<div class="kpi-badge-slot" aria-hidden="true"></div>'
+        return `
+          <article class="kpi-card ${card.large ? "kpi-card-large" : "kpi-card-small"}">
+            <div class="kpi-label">${escapeHtml(card.label)}</div>
+            ${badgeHtml}
+            <div class="kpi-value ${card.long ? "long" : ""} ${card.className || ""}" title="${escapeHtml(card.value)}">${escapeHtml(card.value)}</div>
+            <div class="kpi-sub">${escapeHtml(card.sub)}</div>
+          </article>
+        `
+      }).join("")
     }
 
     function syncCategoryColorMap(categories) {
@@ -1474,15 +1909,18 @@
 
     function renderCategoryPills(categories) {
       if (!categories.length) {
-        categoryPills.innerHTML = '<div class="table-empty">当前没有可展示的类别汇总。</div>'
+        categoryPills.innerHTML = '<div class="table-empty">暂无分类汇总</div>'
         return
       }
-      categoryPills.innerHTML = categories.map((category) => {
+      const sorted = categories.slice().sort(compareCapsuleCategory)
+      categoryPills.innerHTML = sorted.map((category) => {
         const color = getCategoryColor(category.category_code)
         return `
           <span class="category-pill" style="border-color:${color}55;color:${color};background:${color}14;">
             <span class="swatch" style="background:${color};color:${color};"></span>
-            ${escapeHtml(category.category_label)} · ${formatNumber(category.item_count)} 条 · 热度 ${formatNumber(category.total_heat)}
+            ${escapeHtml(displayStructural(category.category_label))}
+            <span>· ${formatNumber(category.item_count)} 条</span>
+            <span>· 热度 ${formatNumber(category.total_heat)}</span>
           </span>
         `
       }).join("")
@@ -1500,25 +1938,43 @@
         insightTopList.innerHTML = '<div class="insight-empty">当前没有可展示的热点话题。</div>'
         return
       }
-      const topTopics = table.slice().sort((a, b) => b.heat_value - a.heat_value).slice(0, 3)
+      const topTopics = table.slice().sort(compareHottestItem).slice(0, 3)
       insightTopList.innerHTML = topTopics.map((row, index) => `
         <div class="insight-item">
           <div class="insight-rank ${medalClassByRank(index + 1)}">${index + 1}</div>
           <div>
-            <div class="insight-title" title="${escapeHtml(row.title)}">${escapeHtml(row.title)}</div>
-            <div class="insight-meta">${escapeHtml(row.category_label)} · 热度 ${escapeHtml(row.heat_text || formatCompactHeat(row.heat_value))}</div>
+            <div class="insight-title" title="${escapeHtml(displayStructural(row.title))}">${escapeHtml(displayStructural(row.title))}</div>
+            <div class="insight-meta">${escapeHtml(displayStructural(row.category_label))} · 热度 ${escapeHtml(formatHeatDisplay(row.heat_text, row.heat_value))}</div>
           </div>
         </div>
       `).join("")
     }
 
+    function renderTips() {
+      const tips = [
+        "数据输入：打开右上角“数据输入”，粘贴 echarts JSON（或包含 echarts 字段的 payload）后点击渲染。",
+        "颜色口径：同一类别在图表、胶囊带、表格标签中颜色一致。",
+        "数据口径：热度来自热榜展示值；互动指标为空则显示 0。"
+      ]
+      const el = document.getElementById("insightTipsList")
+      if (!el) return
+      el.innerHTML = tips.map((item) => `
+        <div class="conclusion-item" title="${escapeHtml(item)}">${escapeHtml(item)}</div>
+      `).join("")
+    }
+
     function renderConclusions(payload) {
       const topCategory = getTopCategory(payload.categories)
       const hottestItem = getHottestItem(payload.table)
+      const topCategoryLabel = topCategory ? displayStructural(topCategory.category_label) : "-"
+      const topCategoryCount = topCategory ? formatNumber(topCategory.item_count) : "0"
+      const hottestTitle = hottestItem ? displayStructural(hottestItem.title) : "-"
+      const hottestHeat = hottestItem ? formatHeatDisplay(hottestItem.heat_text, hottestItem.heat_value) : "0"
+      const generatedAtLocal = getGeneratedAtDisplay(payload)
       const conclusions = [
-        `主导类别：${topCategory ? `${topCategory.category_label}（${formatNumber(topCategory.item_count)} 条）` : "暂无数据"}`,
-        `关注度最高：${hottestItem ? `${hottestItem.title}（热度 ${formatCompactHeat(hottestItem.heat_value)}）` : "暂无数据"}`,
-        `数据更新时间：${formatTime(payload.generated_at_ms)}`
+        `主导类别：${topCategoryLabel}（${topCategoryCount} 条）`,
+        `关注度最高：${hottestTitle}（热度 ${hottestHeat}）`,
+        `数据更新时间：${generatedAtLocal}`
       ]
       insightConclusionList.innerHTML = conclusions.map((item) => `
         <div class="conclusion-item" title="${escapeHtml(item)}">${escapeHtml(item)}</div>
@@ -1556,18 +2012,18 @@
                   <td><span class="rank-badge ${medalClassByRank(rank)}">#${escapeHtml(rank)}</span></td>
                   <td>
                     <div class="topic-cell">
-                      <div class="topic-title" title="${escapeHtml(row.title)}">${escapeHtml(row.title)}</div>
-                      <a class="topic-url" href="${escapeHtml(row.url || "#")}" target="_blank" rel="noreferrer" title="${escapeHtml(row.url || "#")}">${escapeHtml(row.url || "-")}</a>
+                      <div class="topic-title" title="${escapeHtml(displayStructural(row.title))}">${escapeHtml(displayStructural(row.title))}</div>
+                      <a class="topic-url" href="${escapeHtml(displayStructural(row.url)) === "-" ? "#" : escapeHtml(displayStructural(row.url))}" target="_blank" rel="noreferrer" title="${escapeHtml(displayStructural(row.url))}">${escapeHtml(displayStructural(row.url))}</a>
                     </div>
                   </td>
                   <td>
                     <span class="category-tag" style="border-color:${themeColor}55;color:${themeColor};background:${themeColor}14;">
                       <span class="swatch" style="background:${themeColor};color:${themeColor};"></span>
-                      ${escapeHtml(row.category_label || "其他")}
+                      ${escapeHtml(displayStructural(row.category_label))}
                     </span>
                   </td>
                   <td>
-                    <div class="heat-value">${escapeHtml(row.heat_text || formatCompactHeat(row.heat_value))}</div>
+                    <div class="heat-value">${escapeHtml(formatHeatDisplay(row.heat_text, row.heat_value))}</div>
                     <div class="muted">数值 ${formatNumber(row.heat_value)}</div>
                   </td>
                   <td>${formatNumber(row.reply_count)}</td>
@@ -1609,7 +2065,7 @@
       const panelStrong = styles.getPropertyValue("--panel-strong").trim() || "rgba(14, 42, 77, 0.97)"
       return {
         backgroundColor: "transparent",
-        grid: { left: 56, right: 24, top: 36, bottom: 56 },
+        grid: { left: 56, right: 24, top: 52, bottom: 56 },
         tooltip: {
           trigger: "axis",
           backgroundColor: panelStrong,
@@ -1627,6 +2083,7 @@
             color: muted,
             fontSize: 12,
             interval: 0,
+            margin: 16,
             formatter(value) {
               return truncateLabel(value, 6)
             }
@@ -1634,6 +2091,11 @@
         },
         yAxis: {
           type: "value",
+          nameTextStyle: {
+            color: muted,
+            fontSize: 11,
+            padding: [0, 0, 8, 0]
+          },
           splitLine: { lineStyle: { color: line, type: "dashed" } },
           axisLine: { show: false },
           axisLabel: { color: muted, fontSize: 12 }
@@ -1645,14 +2107,17 @@
       if (!countChart) return
       if (!categories.length) {
         countChart.clear()
-        countChart.setOption(buildEmptyChartOption("暂无分类数据"))
+        countChart.setOption(buildEmptyChartOption("暂无分类汇总"))
         return
       }
-      const sorted = categories.slice().sort((a, b) => b.item_count - a.item_count)
+      const sorted = categories.slice().sort(compareTopCategory)
       const labels = sorted.map((item) => item.category_label)
-      const data = sorted.map((item) => item.item_count)
       countChart.setOption({
         ...chartBaseOption(labels),
+        yAxis: {
+          ...chartBaseOption(labels).yAxis,
+          name: "条目数"
+        },
         series: [
           {
             name: "热榜条数",
@@ -1670,9 +2135,11 @@
             label: {
               show: true,
               position: "top",
+              distance: 10,
               color: getComputedStyle(document.documentElement).getPropertyValue("--text").trim(),
               fontSize: 12,
-              formatter: ({ value }) => formatNumber(value)
+              fontWeight: 700,
+              formatter: ({ value }) => `${formatNumber(value)} 条`
             }
           },
           {
@@ -1703,12 +2170,13 @@
         heatChart.setOption(buildEmptyChartOption("暂无热度数据"))
         return
       }
-      const sorted = categories.slice().sort((a, b) => b.total_heat - a.total_heat)
+      const sorted = categories.slice().sort(compareCapsuleCategory)
       const labels = sorted.map((item) => item.category_label)
       heatChart.setOption({
         ...chartBaseOption(labels),
         yAxis: {
           ...chartBaseOption(labels).yAxis,
+          name: "热度值",
           axisLabel: {
             color: getComputedStyle(document.documentElement).getPropertyValue("--muted").trim(),
             fontSize: 12,
@@ -1738,9 +2206,11 @@
             label: {
               show: true,
               position: "top",
+              distance: 10,
               color: getComputedStyle(document.documentElement).getPropertyValue("--text").trim(),
               fontSize: 12,
-              formatter: ({ value }) => formatCompactHeat(value)
+              fontWeight: 700,
+              formatter: ({ value }) => `${formatCompactHeat(value)} 热度`
             },
             markPoint: {
               symbol: "pin",
@@ -1762,27 +2232,48 @@
     }
 
     function updateHeaderMeta(payload) {
-      snapshotIdEl.textContent = payload.snapshot_id || "未命名快照"
-      generatedAtEl.textContent = formatTime(payload.generated_at_ms)
+      snapshotIdEl.textContent = displaySnapshotId(payload?.snapshot_id)
+      generatedAtEl.textContent = getGeneratedAtDisplay(payload)
+    }
+
+    function updateHeaderStatus(statusText) {
+      if (!metaStatus || !metaStatusText || !metaStatusDot) return
+      const statusMeta = getStatusMeta(statusText)
+      const computed = getComputedStyle(document.documentElement)
+      const statusColor = computed.getPropertyValue(statusMeta.cssVar).trim() || computed.getPropertyValue("--success").trim()
+      metaStatusText.textContent = statusMeta.text
+      metaStatus.style.color = "rgba(234, 244, 255, 0.92)"
+      metaStatus.style.borderColor = `${statusColor}55`
+      metaStatus.style.background = `${statusColor}14`
+      metaStatusDot.style.background = statusColor
+      metaStatusDot.style.boxShadow = `0 0 10px ${statusColor}66`
+      metaStatusText.style.color = statusColor
     }
 
     function updateFooterMeta(payload) {
-      footerGeneratedAtEl.textContent = formatTime(payload.generated_at_ms)
+      const generatedAtLocal = getGeneratedAtDisplay(payload)
+      footerGeneratedAtEl.textContent = generatedAtLocal
       footerSkinEl.textContent = (themeMeta[state.theme] || themeMeta.gov_blue_gold).label
     }
 
-    function renderDashboard(payload, statusText) {
-      const nextStatus = statusText || (!window.echarts ? "ECharts 未加载" : payload.table.length === 0 ? "无数据" : "正常")
+    function renderDashboard(payload, statusText, options = {}) {
+      const resolvedStatus = resolveDashboardStatus(payload, statusText)
+      const statusMeta = getStatusMeta(resolvedStatus)
+      const shouldUpdateLastRenderedAtMs = options.updateLastRenderedAtMs !== false
       state.payload = payload
-      state.status = nextStatus
-      state.lastRenderedAtMs = Date.now()
+      state.status = statusMeta.text
+      if (shouldUpdateLastRenderedAtMs) {
+        state.lastRenderedAtMs = Date.now()
+      }
       syncCategoryColorMap(payload.categories)
       updateHeaderMeta(payload)
+      updateHeaderStatus(statusMeta.text)
       updateFooterMeta(payload)
-      buildSummaryCards(payload, nextStatus)
+      buildSummaryCards(payload, statusMeta.text)
       renderCategoryPills(payload.categories)
       renderTopTopics(payload.table)
       renderConclusions(payload)
+      renderTips()
       renderCountChart(payload.categories)
       renderHeatChart(payload.categories)
       renderTable(payload.table)
@@ -1857,15 +2348,14 @@
       try {
         const payload = parsePayloadFromInput()
         state.lastSuccessfulPayload = payload
-        renderDashboard(payload)
-        const statusText = !window.echarts ? "ECharts 未加载" : payload.table.length === 0 ? "无数据" : "正常"
+        const statusText = resolveDashboardStatus(payload)
         state.status = statusText
-        buildSummaryCards(payload, statusText)
+        renderDashboard(payload, statusText)
         setFeedback(`看板已更新：${payload.categories.length} 个类别，${payload.table.length} 条热榜。`, false)
       } catch (error) {
-        state.status = !window.echarts ? "ECharts 未加载" : "解析失败"
+        state.status = resolveDashboardStatus(state.lastSuccessfulPayload, !window.echarts ? "ECharts 未加载" : "解析失败")
         if (state.lastSuccessfulPayload) {
-          renderDashboard(state.lastSuccessfulPayload, state.status)
+          renderDashboard(state.lastSuccessfulPayload, state.status, { updateLastRenderedAtMs: false })
         }
         setFeedback(error?.message || "渲染失败，请检查 JSON 格式。", true)
       }
@@ -1940,7 +2430,7 @@
 
       const normalizedDefault = normalizePayload(defaultPayload)
       state.lastSuccessfulPayload = normalizedDefault
-      renderDashboard(normalizedDefault, !window.echarts ? "ECharts 未加载" : "正常")
+      renderDashboard(normalizedDefault, resolveDashboardStatus(normalizedDefault, !window.echarts ? "ECharts 未加载" : "正常"))
       if (!window.echarts) {
         setFeedback("ECharts 脚本加载失败，请确认当前环境可以访问 CDN。", true)
       } else {