feat(listings): 订单和账号详情展示可租时长与每日消耗

租客在订单列表和详情标题能看到每个号的租期、消耗。账号详情把这两项拆成独立格子。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/features/listings/views/MobileListingDetailView.css

@@ -262,14 +262,27 @@
   line-height: 1.5;
 }
 
-/* 核心资产四大微卡 (2x2 网格对齐移动端体验) */
+/* 核心资产：有币比时上三下二，没有币比时两列 */
 .core-assets-bar {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   margin-top: 10px;
 }
 
+.core-assets-bar.has-ratio {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.core-assets-bar.has-ratio .asset-tile {
+  grid-column: span 2;
+}
+
+.core-assets-bar.has-ratio .rental-tile,
+.core-assets-bar.has-ratio .loss-tile {
+  grid-column: span 3;
+}
+
 .asset-tile {
   display: flex;
   flex-direction: column;
@@ -290,6 +303,16 @@
   border-color: #fed7aa;
 }
 
+.rental-tile {
+  background: #f0fdf4;
+  border-color: #86efac;
+}
+
+.loss-tile {
+  background: #fff7ed;
+  border-color: #fdba74;
+}
+
 .tile-label {
   font-size: 11px;
   font-weight: 500;
@@ -303,6 +326,10 @@
   letter-spacing: -0.02em;
 }
 
+.core-assets-bar.has-ratio .tile-value {
+  font-size: 16px;
+}
+
 .text-orange {
   color: #ea580c;
 }
@@ -311,32 +338,12 @@
   color: #0f172a;
 }
 
-.tile-subvalues {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-}
-
-.val-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.val-pill.green {
-  background: #f0fdf4;
-  border: 1px solid #dcfce7;
+.text-green {
   color: #15803d;
 }
 
-.val-pill.warm {
-  background: #fffbeb;
-  border: 1px solid #fef3c7;
-  color: #b45309;
+.text-warm {
+  color: #c2410c;
 }
 
 /* ========== 2. 验号多图互动展台 (Gallery Stage) ========== */