feat: apply B-147 visual tokens to remaining market data pages

Unify ladder, themes, rotation, auction, dragon-tiger and popularity with shared tokens, left-aligned first columns, and table density.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

app/frontend/pages/ladder/foundation.css

@@ -14,7 +14,7 @@
 
   padding: 9px 4px;
 
-  border-bottom: 1px solid rgb(232, 236, 239);
+  border-bottom: 1px solid var(--border);
 
   cursor: pointer;
 }
@@ -128,7 +128,7 @@
 
   gap: 5px;
 
-  background: rgb(247, 249, 250);
+  background: var(--surface-muted);
 
   cursor: pointer;
 
@@ -140,11 +140,11 @@
 
   border: 1px dashed var(--border-strong);
 
-  border-radius: 6px;
+  border-radius: 8px;
 
   color: var(--text-secondary);
 
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 
   white-space: nowrap;
 }
@@ -152,7 +152,7 @@
 .ladder-gap {
   min-height: 68px;
 
-  background: repeating-linear-gradient(135deg, rgb(255, 255, 255), rgb(255, 255, 255) 9px, rgb(250, 251, 252) 9px, rgb(250, 251, 252) 18px);
+  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 9px, var(--surface-subtle) 9px, var(--surface-subtle) 18px);
 }
 
 .ladder-gap-note {
@@ -353,6 +353,12 @@
   box-shadow: none;
 }
 
+.ladder-page-head .section-title-group h2 {
+  font-size: var(--font-size-page-title);
+
+  font-weight: var(--font-weight-semibold);
+}
+
 .ladder-page-head {
   margin-bottom: 12px;
 }
@@ -384,13 +390,15 @@
 }
 
 .ladder-sort-segment button {
+  min-height: 28px;
+
   padding: 4px 12px;
 
   border-radius: 6px;
 
   color: var(--r2-sub);
 
-  font-size: 12px;
+  font-size: var(--font-size-label);
 }
 
 .ladder-sort-segment button.active {
@@ -448,11 +456,11 @@
 
   border-right: 1px solid var(--r2-line-soft);
 
-  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 8%, #fff), #fff);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 8%, var(--surface)), var(--surface));
 }
 
 .market-ladder-tier.is-gap .market-ladder-label {
-  background: repeating-linear-gradient(45deg, rgb(250, 250, 250), rgb(250, 250, 250) 8px, rgb(243, 244, 246) 8px, rgb(243, 244, 246) 16px);
+  background: repeating-linear-gradient(45deg, var(--surface-subtle), var(--surface-subtle) 8px, var(--surface-muted) 8px, var(--surface-muted) 16px);
 }
 
 .market-ladder-level {
@@ -571,9 +579,9 @@
 
   white-space: nowrap;
 
-  font-size: 13px;
+  font-size: var(--font-size-table);
 
-  font-weight: 800;
+  font-weight: var(--font-weight-semibold);
 }
 
 .market-ladder-stock-first .stock-code {
@@ -613,7 +621,7 @@
 .market-ladder-tag.one-price {
   background: var(--r2-up-soft);
 
-  color: rgb(194, 46, 46);
+  color: var(--r2-up);
 
   font-weight: 700;
 }
@@ -762,9 +770,9 @@
 .market-ladder-insight-card > header h3 {
   margin: 0px;
 
-  font-size: 13.5px;
+  font-size: var(--font-size-card-title);
 
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
 }
 
 .market-ladder-insight-card > header span {
@@ -796,9 +804,9 @@
 .market-ladder-apex strong {
   color: var(--r2-up);
 
-  font-size: 26px;
+  font-size: var(--font-size-metric);
 
-  font-weight: 800;
+  font-weight: var(--font-weight-semibold);
 }
 
 .market-ladder-apex em {
@@ -900,7 +908,7 @@
 }
 
 .market-ladder-pyramid-row.is-gap > i {
-  background: repeating-linear-gradient(45deg, rgb(229, 231, 235), rgb(229, 231, 235) 4px, rgb(243, 244, 246) 4px, rgb(243, 244, 246) 8px);
+  background: repeating-linear-gradient(45deg, var(--border), var(--border) 4px, var(--surface-muted) 4px, var(--surface-muted) 8px);
 }
 
 .market-ladder-pyramid-row.is-gap > i b {
@@ -968,11 +976,11 @@
 }
 
 .market-ladder-rate-list > div > i b.is-low {
-  background: rgb(245, 158, 11);
+  background: var(--r2-amber);
 }
 
 .market-ladder-rate-list > div > i b.is-zero {
-  background: rgb(209, 213, 219);
+  background: var(--border-strong);
 }
 
 .market-ladder-rate-list > div > strong {

app/frontend/pages/ladder/page.js

@@ -51,7 +51,7 @@ function renderLadderBoard(ladders) {
     const stocks = expanded ? groupStocks : groupStocks.slice(0, limit);
     const remaining = Math.max(0, groupStocks.length - stocks.length);
     const label = group.label || (level === 1 ? "首板" : level === 5 && maxLevel < 5 ? "5板+" : `${level}板`);
-    const color = { 1: "#2563eb", 2: "#16a34a", 3: "#d97706", 4: "#e04536" }[level] || "#9ca3af";
+    const color = { 1: "#3370ff", 2: "#16a34a", 3: "#b45309", 4: "#e04536" }[level] || "#8f959e";
     return `
       <section class="market-ladder-tier ${number(group.count) ? "" : "is-gap"}" data-ladder-level-card="${level}">
         <div class="market-ladder-label" style="--tier-color:${color}"><div class="market-ladder-level"><span class="market-ladder-dot"></span>${escapeHtml(label)}</div><div class="market-ladder-count">${number(group.count)} 只</div>${number(group.count) && level > 1 ? `<div class="market-ladder-rate">${escapeHtml(label)} · <b>${formatNumber(number(group.count) / Math.max(number(groupMap.get(level - 1)?.count), 1) * 100, 1)}%</b></div>` : ""}</div>