From 1b76fdeda1bc36192c375869ab3b2dfc42c4e55d Mon Sep 17 00:00:00 2001
From: kaireewu <kaireewu@gmail.com>
Date: Sun, 1 Nov 2026 23:18:39 +0800
Subject: [PATCH] refactor: optimize video & upper rank page

---
 reaction_board/web/static/app.js            |   2 +-
 reaction_board/web/static/components.js     |   6 +-
 reaction_board/web/static/style.css         | 232 ++++++++++----------
 reaction_board/web/static/views/rankings.js |  17 +-
 4 files changed, 132 insertions(+), 125 deletions(-)

diff --git a/reaction_board/web/static/app.js b/reaction_board/web/static/app.js
index 195e0b6..67a17a3 100644
--- a/reaction_board/web/static/app.js
+++ b/reaction_board/web/static/app.js
@@ -74,7 +74,7 @@ function icon(name) {
     info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="7.5" r="1"/>',
   };
   return `<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ""}</svg>`;
+    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ""}</svg>`;
 }
 
 function renderNav() {
diff --git a/reaction_board/web/static/components.js b/reaction_board/web/static/components.js
index 09dd471..2112530 100644
--- a/reaction_board/web/static/components.js
+++ b/reaction_board/web/static/components.js
@@ -36,9 +36,11 @@ export function videoCard(item, {
 } = {}) {
   const metrics = item.metrics || {};
   const hasMetric = Object.prototype.hasOwnProperty.call(metrics, primary);
-  const primaryValue = primaryText !== null
+  const raw = primaryText !== null
     ? primaryText
     : (hasMetric ? metrics[primary] : item[primary]);
+  // 指标排序直接返回原始计数，统一走 formatCount，避免同一列混排 “36375” 与 “1.1万”。
+  const primaryValue = typeof raw === "number" ? formatCount(raw) : raw;
   const label = primaryLabel || metricLabel(primary);
   const growth = item.growth;
   const delta = growth?.available ? growth.delta : null;
@@ -69,7 +71,6 @@ export function videoCard(item, {
           <span class="secondary-stat">互动 ${formatPercent(item.interaction_rate)}</span>
         </div>
       </div>
-      <span class="card-arrow" aria-hidden="true">›</span>
     </a>`;
 }
 
@@ -100,7 +101,6 @@ export function upCard(item, {
           <span class="secondary-stat">${escapeHtml(secondaryLabel)} ${escapeHtml(secondary)}</span>
         </div>
       </div>
-      <span class="card-arrow" aria-hidden="true">›</span>
     </a>`;
 }
 
diff --git a/reaction_board/web/static/style.css b/reaction_board/web/static/style.css
index 55b6c90..d874cce 100644
--- a/reaction_board/web/static/style.css
+++ b/reaction_board/web/static/style.css
@@ -23,7 +23,8 @@
   --success: #5f7a4e;
   --radius: 16px;
   --radius-small: 10px;
-  --shadow: 0 10px 30px rgba(42, 32, 26, 0.08);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.14);
   --nav-width: 220px;
   --nav-height: 64px;
 }
@@ -51,7 +52,8 @@
     --warning-soft: #e9b97c1f;
     --danger: #e3958c;
     --success: #a7b98f;
-    --shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
   }
 }
 
@@ -68,6 +70,7 @@ body {
     "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   font-size: 15px;
   line-height: 1.5;
+  font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -75,6 +78,7 @@ a { color: inherit; text-decoration: none; }
 button, input, select { font: inherit; color: inherit; }
 img { max-width: 100%; }
 h1, h2, h3, p { margin: 0; }
+h1, h2, h3, strong, b { font-weight: 600; }
 
 :focus-visible {
   outline: 2px solid var(--accent);
@@ -105,15 +109,14 @@ h1, h2, h3, p { margin: 0; }
   width: 34px;
   height: 34px;
   flex: 0 0 auto;
-  border-radius: 11px;
-  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
+  border-radius: 10px;
+  background: var(--accent);
   color: var(--accent-contrast);
-  font-weight: 800;
+  font-weight: 700;
   font-size: 17px;
-  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
 }
 .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
-.brand-text strong { font-size: 15px; letter-spacing: 0.2px; white-space: nowrap; }
+.brand-text strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
 .brand-text small { color: var(--muted); font-size: 11px; white-space: nowrap; }
 .topbar-hint {
   flex: 0 0 auto;
@@ -157,10 +160,10 @@ h1, h2, h3, p { margin: 0; }
   position: sticky;
   top: 60px;
   z-index: 19;
-  padding: 8px 14px;
+  padding: 6px 12px;
   text-align: center;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--accent-contrast);
   background: var(--accent);
 }
@@ -175,7 +178,7 @@ h1, h2, h3, p { margin: 0; }
 .page {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
   max-width: 1120px;
   margin: 0 auto;
 }
@@ -185,10 +188,10 @@ h1, h2, h3, p { margin: 0; }
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
-  padding: 4px 2px;
+  padding: 4px 0;
 }
-.page-head h1 { font-size: 24px; letter-spacing: -0.4px; }
-.page-sub { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
+.page-head h1 { font-size: 24px; font-weight: 600; }
+.page-sub { margin-top: 4px; color: var(--muted); font-size: 13px; }
 .page-head h1 .page-sub { margin-top: 0; margin-left: 8px; font-weight: 400; }
 .home-head { align-items: center; }
 .back-link { color: var(--muted); font-size: 13px; }
@@ -207,7 +210,7 @@ h1, h2, h3, p { margin: 0; }
   background: var(--accent);
   color: var(--accent-contrast);
   font-size: 13px;
-  font-weight: 650;
+  font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
 }
@@ -257,14 +260,14 @@ h1, h2, h3, p { margin: 0; }
   gap: 2px;
   border-radius: 10px;
   color: var(--muted);
-  font-size: 10.5px;
+  font-size: 11px;
 }
 .nav-item.active { color: var(--accent); background: var(--accent-soft); }
-.nav-icon { width: 21px; height: 21px; }
+.nav-icon { width: 18px; height: 18px; }
 .nav-label { line-height: 1; }
 
 .panel {
-  padding: 14px;
+  padding: 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
@@ -275,10 +278,10 @@ h1, h2, h3, p { margin: 0; }
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
-.section-head h2 { font-size: 16px; letter-spacing: -0.2px; }
-.section-note { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
+.section-head h2 { font-size: 16px; font-weight: 600; }
+.section-note { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
 .warning-text { color: var(--warning); }
 .danger { color: var(--danger); }
 .up { color: var(--success); }
@@ -296,7 +299,7 @@ h1, h2, h3, p { margin: 0; }
   background: var(--surface);
 }
 .live-chip span { display: block; color: var(--muted); font-size: 11px; }
-.live-chip strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.2px; }
+.live-chip strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
 a.live-chip { text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
 a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
 .live-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
@@ -308,7 +311,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   align-items: center;
   justify-content: space-between;
   gap: 4px 12px;
-  padding: 11px 14px;
+  padding: 12px 16px;
   border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
   border-radius: 13px;
   background: var(--accent-soft);
@@ -324,20 +327,23 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .video-card, .up-card {
   position: relative;
   display: grid;
-  grid-template-columns: 26px 96px minmax(0, 1fr) 12px;
+  grid-template-columns: 24px 96px minmax(0, 1fr);
   align-items: start;
-  gap: 9px;
-  padding: 9px;
+  gap: 12px;
+  padding: 10px;
   border: 1px solid var(--border);
-  border-radius: 13px;
+  border-radius: 16px;
   background: var(--surface);
-  transition: border-color 0.15s, transform 0.15s;
+  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
-.video-card:hover, .up-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
-.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr) 12px; }
+.video-card:hover, .up-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
+}
+.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr); }
 .video-card.no-rank .video-thumb, .up-card.no-rank .video-thumb { grid-column: 1; }
 .video-card.no-rank .video-card-body, .up-card.no-rank .up-card-body { grid-column: 2; }
-.video-card.no-rank .card-arrow, .up-card.no-rank .card-arrow { grid-column: 3; }
 .rank-badge {
   grid-column: 1;
   grid-row: 1;
@@ -346,19 +352,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   place-items: center;
   width: 24px;
   height: 24px;
-  border-radius: 8px;
-  background: var(--surface-2);
+  border-radius: 6px;
+  background: transparent;
   color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 13px;
+  font-weight: 600;
 }
 .rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
-.rank-badge.rank-2 { background: var(--accent-soft); color: var(--accent-strong); }
-.rank-badge.rank-3 { background: var(--surface-3); color: var(--muted); }
+.rank-badge.rank-2, .rank-badge.rank-3 { background: var(--surface-2); color: var(--text); }
 .video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
   position: relative;
   overflow: hidden;
-  border-radius: 9px;
+  border-radius: 6px;
   background: var(--surface-2);
 }
 .video-thumb {
@@ -368,10 +373,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   aspect-ratio: 16 / 9;
 }
 .video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
+.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
 .cover-placeholder img.image-error { opacity: 0; }
-.video-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
-.up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
+.video-card-body, .up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
 .up-avatar {
   grid-column: 2;
   grid-row: 1;
@@ -386,7 +390,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   place-items: center;
   color: var(--muted);
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 600;
 }
 .up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .up-card.no-rank > .up-avatar { grid-column: 1; }
@@ -398,13 +402,14 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   overflow: hidden;
   font-size: 14px;
   line-height: 1.35;
-  font-weight: 650;
-  letter-spacing: -0.1px;
+  font-weight: 600;
 }
+/* 标题固定占两行高度（line-height 1.35 × 2），让单行与两行标题的行高一致。 */
+.video-card .video-title, .media-title { min-height: 2.7em; }
 .video-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 3px 9px;
+  gap: 4px 10px;
   margin-top: 4px;
   color: var(--muted);
   font-size: 11px;
@@ -413,45 +418,39 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 4px 9px;
-  margin-top: 5px;
+  gap: 4px 10px;
+  margin-top: 6px;
   color: var(--muted);
   font-size: 11px;
 }
-.primary-stat { display: inline-flex; align-items: baseline; gap: 3px; color: var(--text); }
-.primary-stat b { font-size: 15px; letter-spacing: -0.3px; }
-.primary-stat small { color: var(--muted); font-size: 10px; }
+.primary-stat { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text); }
+.primary-stat b { font-size: 15px; font-weight: 600; }
+.primary-stat small { color: var(--muted); font-size: 11px; }
 .secondary-stat { white-space: nowrap; }
 .secondary-stat.optional { display: none; }
-.delta { font-weight: 650; font-size: 11px; }
+.delta { font-weight: 600; font-size: 11px; }
 .delta.up { color: var(--success); }
 .delta.down { color: var(--danger); }
-.card-arrow {
-  grid-column: 4;
-  grid-row: 1;
-  align-self: center;
-  color: var(--muted);
-  font-size: 18px;
-}
 
 /* 统一的响应式媒体网格：移动端 2 列（图片自动缩放），PC 端 3 列。 */
-.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 @media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 /* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
 .media-card {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  padding: 9px;
+  gap: 6px;
+  padding: 10px;
   border: 1px solid var(--border);
-  border-radius: 13px;
+  border-radius: 16px;
   background: var(--surface);
-  transition: border-color 0.15s, transform 0.15s;
+  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .media-card:hover {
-  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
 }
 .media-rank {
   position: absolute;
@@ -460,13 +459,13 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   z-index: 1;
   display: grid;
   place-items: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 7px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
   background: rgba(0, 0, 0, 0.62);
   color: #fff;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 600;
 }
 .media-thumb { width: 100%; aspect-ratio: 16 / 9; }
 .media-title {
@@ -474,12 +473,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: 12.5px;
+  font-size: 13px;
   line-height: 1.35;
-  font-weight: 650;
+  font-weight: 600;
 }
-.media-meta { color: var(--muted); font-size: 10.5px; }
-.media-highlight { color: var(--accent); font-size: 10.5px; font-weight: 650; }
+.media-meta { color: var(--muted); font-size: 11px; }
+.media-highlight { color: var(--accent-strong); font-size: 11px; font-weight: 600; }
 
 .status-grid {
   display: grid;
@@ -491,8 +490,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   border-radius: 10px;
   background: var(--surface-2);
 }
-.status-grid span { display: block; color: var(--muted); font-size: 10.5px; }
-.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 650; }
+.status-grid span { display: block; color: var(--muted); font-size: 11px; }
+.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }
 /* 预计下次运行等 3 项：PC 与移动端都保持一行 */
 .status-grid.status-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 
@@ -531,7 +530,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   white-space: nowrap;
   cursor: pointer;
 }
-.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; }
+.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
 .chip-label { color: var(--muted); font-size: 11px; padding-right: 2px; }
 .range-row { margin-top: 8px; }
 
@@ -539,10 +538,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   overflow-x: auto;
   scrollbar-width: none;
-  padding-bottom: 2px;
+  /* 为键盘焦点环留出绘制空间；负外边距抵消内边距，保持与标题、列表左对齐。 */
+  padding: 4px;
+  margin: -4px;
 }
 .rank-toolbar::-webkit-scrollbar { display: none; }
 .rank-toolbar .select-label {
@@ -587,8 +588,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .search-button svg { width: 18px; height: 18px; }
 .search-button:hover { color: var(--accent); }
 .search-input, .select {
-  min-height: 38px;
-  padding: 8px 11px;
+  min-height: 36px;
+  padding: 8px 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface);
@@ -643,7 +644,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-float);
 }
 .range-popover-head {
   display: flex;
@@ -689,7 +690,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .range-day:hover { background: var(--surface-2); }
 .range-day.in-range { background: var(--accent-soft); color: var(--accent-strong); }
 .range-day.is-start,
-.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 650; }
+.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
 .range-popover-foot {
   display: flex;
   align-items: center;
@@ -699,13 +700,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 }
 .range-hint { color: var(--muted); font-size: 11.5px; }
 
-.rank-list { display: flex; flex-direction: column; gap: 8px; }
+.rank-list {
+  display: grid;
+  /* 桌面端自动两列；单列时最低 440px，避免整行过宽。 */
+  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
+  gap: 8px;
+}
 .pager {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  padding: 8px 0;
+  padding: 16px 0;
   color: var(--muted);
   font-size: 12px;
 }
@@ -715,9 +721,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  padding: 28px 16px;
+  padding: 32px 16px;
   border: 1px dashed var(--border);
-  border-radius: 13px;
+  border-radius: 16px;
   text-align: center;
   color: var(--muted);
 }
@@ -748,10 +754,10 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   place-items: center;
   color: var(--muted);
   font-size: 26px;
-  font-weight: 700;
+  font-weight: 600;
 }
 .hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.detail-hero-body h1 { font-size: 19px; line-height: 1.35; letter-spacing: -0.3px; }
+.detail-hero-body h1 { font-size: 19px; line-height: 1.35; }
 .detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
 .compact-hero { padding: 18px; }
 
@@ -762,7 +768,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   border-radius: 999px;
   background: var(--surface-2);
   color: var(--muted);
-  font-size: 10.5px;
+  font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
 }
@@ -775,33 +781,33 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .metric-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 7px;
+  gap: 8px;
 }
 .metric-cell {
-  padding: 10px;
+  padding: 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface);
 }
-.metric-label { display: block; color: var(--muted); font-size: 10.5px; }
-.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.3px; }
-.metric-delta { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 650; }
+.metric-label { display: block; color: var(--muted); font-size: 11px; }
+.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
+.metric-delta { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; }
 .metric-delta.up { color: var(--success); }
 .metric-delta.down { color: var(--danger); }
 
 .mini-stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 7px;
+  gap: 8px;
 }
 .mini-stats > div {
-  padding: 9px 10px;
+  padding: 10px 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface);
 }
-.mini-stats span { display: block; color: var(--muted); font-size: 10.5px; }
-.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; }
+.mini-stats span { display: block; color: var(--muted); font-size: 11px; }
+.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
 .up-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
 .chart-panel .chart { width: 100%; height: 240px; margin-top: 8px; }
@@ -824,7 +830,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   color: var(--accent-contrast);
 }
 .hero-number span { display: block; font-size: 12px; opacity: 0.72; }
-.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -1px; }
+.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -0.02em; }
 .hero-number small { opacity: 0.68; font-size: 11px; }
 
 .candidate-list { display: flex; flex-direction: column; gap: 10px; }
@@ -844,8 +850,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 .score-badge {
   padding: 2px 7px;
   border-radius: 999px;
-  font-size: 10.5px;
-  font-weight: 700;
+  font-size: 11px;
+  font-weight: 600;
   background: var(--surface-2);
   color: var(--muted);
 }
@@ -906,8 +912,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   .detail-hero { flex-direction: row; align-items: flex-start; }
   .hero-cover { width: 300px; flex: 0 0 300px; }
   .video-thumb { width: 112px; }
-  .video-card, .up-card { grid-template-columns: 28px 112px minmax(0, 1fr) 14px; }
-  .video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr) 14px; }
+  .video-card, .up-card { grid-template-columns: 24px 112px minmax(0, 1fr); }
+  .video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr); }
   .secondary-stat.optional { display: inline; }
 }
 
@@ -917,7 +923,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
   .preview-banner { top: 0; margin-left: var(--nav-width); }
   .main-shell {
     margin-left: var(--nav-width);
-    padding: 16px 28px 40px;
+    padding: 16px 24px 40px;
   }
   .bottom-nav {
     top: 0;
@@ -941,12 +947,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
     flex-direction: row;
     justify-content: flex-start;
     gap: 10px;
-    padding: 11px 14px;
+    padding: 10px 12px;
     font-size: 13px;
-    border-radius: 11px;
+    border-radius: 10px;
   }
   .nav-item.active { background: var(--accent-soft); }
-  .nav-icon { width: 20px; height: 20px; }
+  .nav-icon { width: 18px; height: 18px; }
   .video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .detail-hero .hero-cover { width: 360px; flex-basis: 360px; }
   .toast { left: calc(50% + var(--nav-width) / 2); bottom: 28px; }
@@ -954,18 +960,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
 }
 
 @media (min-width: 1280px) {
-  .main-shell { padding-left: 36px; padding-right: 36px; }
+  .main-shell { padding-left: 32px; padding-right: 32px; }
   .video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .metric-grid { gap: 9px; }
+  .metric-grid { gap: 8px; }
 }
 
 @media (max-width: 380px) {
-  .video-card, .up-card { grid-template-columns: 22px 82px minmax(0, 1fr) 10px; gap: 7px; }
-  .video-card.no-rank, .up-card.no-rank { grid-template-columns: 82px minmax(0, 1fr) 10px; }
-  .video-thumb { width: 82px; }
+  .video-card, .up-card { grid-template-columns: 20px 80px minmax(0, 1fr); gap: 8px; }
+  .video-card.no-rank, .up-card.no-rank { grid-template-columns: 80px minmax(0, 1fr); }
+  .video-thumb { width: 80px; }
   .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .candidate-card { grid-template-columns: 84px minmax(0, 1fr); }
-  .candidate-thumb { width: 84px; }
+  .candidate-card { grid-template-columns: 80px minmax(0, 1fr); }
+  .candidate-thumb { width: 80px; }
 }
 .about-page .panel + .panel { margin-top: 12px; }
 .about-page .panel h2 { font-size: 15px; margin-bottom: 8px; }
diff --git a/reaction_board/web/static/views/rankings.js b/reaction_board/web/static/views/rankings.js
index a18f839..fdf2c98 100644
--- a/reaction_board/web/static/views/rankings.js
+++ b/reaction_board/web/static/views/rankings.js
@@ -81,7 +81,7 @@ function controls({ scope, sort, within, year, growthDays, q, years }) {
           <input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
             placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
           <button class="search-button" type="submit" aria-label="搜索" title="搜索">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
               stroke-linecap="round" aria-hidden="true">
               <circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path>
             </svg>
@@ -100,10 +100,10 @@ function controls({ scope, sort, within, year, growthDays, q, years }) {
 
 function videoPrimary(item, sort) {
   if (sort === "efficiency") {
-    return { primary: "efficiency_score", label: "播放/小时·收缩", text: formatCount(item.efficiency_score) };
+    return { primary: "efficiency_score", label: "播放/小时", text: formatCount(item.efficiency_score) };
   }
   if (sort === "interaction_efficiency") {
-    return { primary: "interaction_efficiency_score", label: "互动/小时·收缩", text: formatCount(item.interaction_efficiency_score) };
+    return { primary: "interaction_efficiency_score", label: "互动/小时", text: formatCount(item.interaction_efficiency_score) };
   }
   if (sort === "interaction") {
     return { primary: "view", label: "互动率", text: formatPercent(item.interaction_rate) };
@@ -143,9 +143,11 @@ function upSecondary(item, sort) {
 
 function listHtml(data, scope, sort, startRank) {
   if (!data.items.length) {
+    const unavailable = data.available === false;
+    const hint = "换个筛选条件或清空搜索关键词试试。";
     return emptyState(
-      data.available === false ? "当前榜单暂不可用" : (scope === "up" ? "没有匹配的 UP" : "没有匹配的视频"),
-      data.reason || "换个筛选条件或清空搜索关键词试试。",
+      unavailable ? "当前榜单暂不可用" : (scope === "up" ? "没有匹配的 UP" : "没有匹配的视频"),
+      unavailable ? hint : (data.reason || hint),
     );
   }
   if (scope === "up") {
@@ -172,10 +174,9 @@ function durationNote(data) {
   const filter = data.duration_filter;
   if (!filter) return "";
   const shrink = filter.shrink_minutes
-    ? `并按 ${filter.shrink_minutes} 分钟的先验暴露量向全库均值收缩`
+    ? `，按 ${filter.shrink_minutes} 分钟先验向全库均值收缩`
     : "";
-  return `<div class="section-note">内容效率与互动效率仅统计时长 ≥ ${filter.min_duration_seconds} 秒、
-    发布满 ${filter.maturity_days} 天、播放 ≥ ${filter.min_view} 的视频${shrink}；时长缺失的视频不参与排序。</div>`;
+  return `<div class="section-note">内容效率与互动效率：时长 ≥ ${filter.min_duration_seconds} 秒、发布满 ${filter.maturity_days} 天、播放 ≥ ${filter.min_view}${shrink}；时长缺失不参与。</div>`;
 }
 
 function bindControls(root) {