diff --git a/.gitignore b/.gitignore
index 715f96f..7f5020f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,4 +42,5 @@ logs
 .gocache
 artifacts/
 
-frontend/coverage/
\ No newline at end of file
+frontend/coverage/
+.zcode/
\ No newline at end of file
diff --git a/frontend/src/features/listings/views/ListingDetailView.css b/frontend/src/features/listings/views/ListingDetailView.css
index acae137..274523e 100644
--- a/frontend/src/features/listings/views/ListingDetailView.css
+++ b/frontend/src/features/listings/views/ListingDetailView.css
@@ -1,594 +1,1101 @@
-.detail-back-bar {
-  /* 吸顶固定：始终显示在顶部导航栏（64px）下方，滚动时不跟随页面移走 */
-  position: sticky;
-  top: 78px;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  margin-bottom: 14px;
+/* ==========================================================================
+   PC 商品详情页全新重构样式 (对齐首页设计规范)
+   ========================================================================== */
+
+.pc-detail-page {
+  width: 100%;
+  max-width: 1720px;
+  margin: 0 auto;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
-.detail-back-btn {
+/* ---------- 顶部导航与安全保障条 ---------- */
+.top-nav-bar {
+  position: sticky;
+  top: 76px;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  padding: 2px 0;
+}
+
+.back-pill-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 36px;
-  padding: 0 14px;
-  border: 1px solid #eef1f5;
+  padding: 0 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+  transition: all 0.2s ease;
+}
+
+.back-pill-btn:hover {
+  border-color: #ff8533;
+  background: #fff7ed;
+  color: #ea580c;
+  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.12);
+  transform: translateX(-2px);
+}
+
+.safe-notice-strip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 999px;
+  background: #fffcf5;
+  border: 1px solid #fef3c7;
+  color: #92400e;
+  font-size: 12px;
+  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.06);
+}
+
+.safe-icon {
+  color: #f59e0b;
+  font-size: 16px;
+}
+
+.safe-text {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* ---------- 页面主双栏网格布局 ---------- */
+.pc-detail-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 20px;
+  align-items: start;
+}
+
+.pc-detail-main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+/* 通用详情卡片 */
+.detail-card {
+  border: 1px solid #e8edf5;
+  border-radius: 16px;
+  background: #ffffff;
+  padding: 22px 24px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.025);
+}
+
+/* 卡片头部通栏标题 */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title-left {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.title-left h2 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+}
+
+.title-tip {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.gallery-count {
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
+}
+
+/* ---------- 1. 抬头卡片 (Header Card) ---------- */
+.header-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.meta-tags-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.code-badge-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.code-badge-btn:hover {
+  background: #dbeafe;
+  border-color: #93c5fd;
+}
+
+.platform-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.platform-pill.wechat {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.platform-pill.qq {
+  background: #eff6ff;
+  color: #0284c7;
+}
+
+.platform-pill.scan {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.platform-pill.password,
+.platform-pill.default {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.platform-pill.steam {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.platform-pill.rank {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: #f0fdf4;
+  border: 1px solid #dcfce7;
+  color: #15803d;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #16a34a;
+}
+
+.status-pill.is-busy {
+  background: #fff7ed;
+  border-color: #fed7aa;
+  color: #ea580c;
+}
+
+.status-pill.is-busy .status-dot {
+  background: #ea580c;
+}
+
+.favorite-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.favorite-action-btn:hover {
+  border-color: #ff8533;
+  color: #ea580c;
+  background: #fff7ed;
+}
+
+.favorite-action-btn.is-active {
+  border-color: #fed7aa;
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.header-title-block {
+  margin-top: 14px;
+}
+
+.listing-main-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.4;
+  color: #0f172a;
+  letter-spacing: -0.015em;
+}
+
+.listing-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+/* 核心资产四大微卡 */
+.core-assets-bar {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.asset-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.coin-tile {
+  background: #fff9f5;
+  border-color: #fed7aa;
+}
+
+.tile-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.tile-value {
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.text-orange {
+  color: #ea580c;
+}
+
+.text-slate {
+  color: #0f172a;
+}
+
+.text-amber {
+  color: #475569;
+}
+
+.tile-subvalues {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.val-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.val-pill.green {
+  background: #f0fdf4;
+  border: 1px solid #dcfce7;
+  color: #15803d;
+}
+
+.val-pill.warm {
+  background: #fffbeb;
+  border: 1px solid #fef3c7;
+  color: #b45309;
+}
+
+/* ---------- 2. 验号图片展台 (Gallery Card) ---------- */
+.gallery-stage {
+  position: relative;
+  width: 100%;
+  height: 480px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.stage-viewer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-in;
+}
+
+.stage-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.stage-viewer :deep(.el-image) {
+  width: 100%;
+  height: 100%;
+}
+
+.stage-viewer :deep(.el-image__inner) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.stage-tag {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  padding: 4px 12px;
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.75);
+  backdrop-filter: blur(6px);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.stage-zoom-hint {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.65);
+  backdrop-filter: blur(6px);
+  color: #f1f5f9;
+  font-size: 12px;
+  z-index: 2;
+}
+
+.stage-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #64748b;
+  font-size: 14px;
+}
+
+/* 底部胶卷导轨 */
+.thumbnail-filmstrip {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.thumbnail-item {
+  flex: 0 0 116px;
+  height: 76px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  background: #0f172a;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.18s ease;
+}
+
+.thumbnail-item:hover {
+  border-color: #cbd5e1;
+  opacity: 0.95;
+}
+
+.thumbnail-item.is-active {
+  border-color: #ff6a00;
+  box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.25);
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnail-item :deep(.el-image) {
+  width: 100%;
+  height: 100%;
+}
+
+.thumbnail-item :deep(.el-image__inner) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(15, 23, 42, 0.78);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+  padding: 2px 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- 3. 账号档案卡片 (Specs Card) ---------- */
+.secondary-chips-flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.secondary-spec-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  font-size: 12px;
+}
+
+.pill-k {
+  color: #64748b;
+}
+
+.pill-v {
+  color: #0f172a;
+  font-weight: 700;
+}
+
+.specs-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.spec-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+}
+
+.cell-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.cell-val {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  overflow-wrap: anywhere;
+}
+
+/* ---------- 4. 精选皮肤展台 (Skin Card) ---------- */
+.skin-groups-container {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.skin-group-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skin-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.skin-group-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #334155;
+}
+
+.skin-group-count {
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.skin-pill-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skin-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 11px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #f8fafc;
+  color: #334155;
+  border: 1px solid transparent;
+}
+
+.quality-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+}
+
+.skin-type-melee {
+  background: #faf5ff;
+  color: #7e22ce;
+  border-color: #f3e8ff;
+}
+.skin-type-melee .quality-dot {
+  background: #a855f7;
+}
+
+.skin-type-operatorGold,
+.skin-type-weaponGold {
+  background: #fffbeb;
+  color: #b45309;
+  border-color: #fef3c7;
+}
+.skin-type-operatorGold .quality-dot,
+.skin-type-weaponGold .quality-dot {
+  background: #f59e0b;
+}
+
+.skin-type-operatorRed {
+  background: #fff1f2;
+  color: #be123c;
+  border-color: #ffe4e6;
+}
+.skin-type-operatorRed .quality-dot {
+  background: #f43f5e;
+}
+
+.skin-type-weapon,
+.skin-type-operator,
+.skin-type-other {
+  background: #f8fafc;
+  color: #334155;
+  border-color: #e2e8f0;
+}
+.skin-type-weapon .quality-dot,
+.skin-type-operator .quality-dot,
+.skin-type-other .quality-dot {
+  background: #94a3b8;
+}
+
+/* ---------- 5. 仓库物资专区 (Resources Card) ---------- */
+.resources-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.resource-tile {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+}
+
+.res-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.res-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.res-qty {
+  font-size: 16px;
+  font-weight: 800;
+  color: #ea580c;
+}
+
+.res-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.res-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.res-badge.gift {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.res-badge.charge {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.res-badge.standard {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+/* ---------- 6. 号主说明卡片 (Note Card) ---------- */
+.seller-note-box {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 16px 18px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border-left: 4px solid #ff8533;
+}
+
+.note-quote-icon {
+  color: #ff8533;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.note-content {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #334155;
+}
+
+/* ---------- 7. 平台安全保障卡片 (Trust Card) ---------- */
+.trust-features-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.trust-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+}
+
+.trust-icon-box {
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.trust-icon-box.orange {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.trust-icon-box.blue {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.trust-icon-box.green {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.trust-icon-box.amber {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.trust-text strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 2px;
+}
+
+.trust-text p {
+  margin: 0;
+  font-size: 11px;
+  color: #64748b;
+  line-height: 1.45;
+}
+
+/* ==========================================================================
+   右侧：常驻粘性结算下单面板 (Sticky Order Panel)
+   ========================================================================== */
+.pc-order-panel {
+  position: sticky;
+  top: 76px;
+  align-self: start;
+  z-index: 10;
+}
+
+.order-sticky-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: #ffffff;
+  border: 1px solid #e8edf5;
+  border-radius: 18px;
+  padding: 22px;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.panel-title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.panel-eyebrow {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ff6a00;
+  letter-spacing: 0.5px;
+}
+
+.panel-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+}
+
+.order-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.order-status-pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #10b981;
+}
+
+.order-status-pill.is-busy {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.order-status-pill.is-busy .dot {
+  background: #ea580c;
+}
+
+/* 结算总价卡片（高质感暖色渐变卡） */
+.checkout-price-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #fffcf5 0%, #fff7ed 100%);
+  border: 1px solid #fed7aa;
+}
+
+.price-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.price-caption {
+  font-size: 13px;
+  font-weight: 700;
+  color: #9a3412;
+}
+
+.price-total-display {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  color: #ff5500;
+}
+
+.price-total-display small {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.price-total-display strong {
+  font-size: 34px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.price-breakdown-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0;
+  border-top: 1px dashed rgba(234, 88, 12, 0.2);
+  border-bottom: 1px dashed rgba(234, 88, 12, 0.2);
+}
+
+.breakdown-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.b-label {
+  color: #7c2d12;
+}
+
+.b-val {
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.deposit-guarantee-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dep-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.dep-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #9a3412;
+}
+
+.dep-sub {
+  font-size: 10px;
+  color: #b45309;
+}
+
+.dep-val {
+  font-size: 17px;
+  font-weight: 800;
+  color: #9a3412;
+}
+
+/* 下单速览核对清单 */
+.order-quick-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+}
+
+.s-label {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.s-val {
+  font-size: 12px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.s-val.text-green {
+  color: #15803d;
+}
+
+/* 按钮组 */
+.order-cta-block {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.primary-order-btn {
+  width: 100%;
+  height: 46px;
+  border: none;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 800;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 6px 20px rgba(255, 106, 0, 0.28);
+  transition: all 0.2s ease;
+}
+
+.primary-order-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
+  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.38);
+  transform: translateY(-2px);
+}
+
+.primary-order-btn:disabled {
+  background: #cbd5e1;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.secondary-favorite-btn {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #e2e8f0;
   border-radius: 10px;
   background: #ffffff;
   color: #475569;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(23, 35, 61, 0.08);
-  transition:
-    border-color 0.2s ease,
-    color 0.2s ease,
-    background 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.detail-back-btn:hover {
-  border-color: #ff6a00;
-  background: #fff7ed;
-  color: #ff6a00;
-  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.12);
-}
-
-.pc-detail-layout {
-  grid-template-columns: minmax(0, 1fr) 420px;
-  align-items: start;
-}
-
-.pc-detail-main {
-  overflow: hidden;
-}
-
-.detail-hero-card {
-  position: relative;
-  display: grid;
-  height: 340px;
-  overflow: hidden;
-  background: #111827;
-  color: #ffffff;
-}
-
-.detail-hero-card img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.detail-hero-card > span {
-  display: grid;
-  height: 340px;
-  place-items: center;
-  font-size: 32px;
-  font-weight: 900;
-}
-
-.detail-hero-card::after {
-  position: absolute;
-  inset: 0;
-  content: '';
-  background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.58)),
-    linear-gradient(90deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.08) 62%);
-}
-
-.detail-hero-overlay {
-  position: absolute;
-  inset: auto 0 0;
-  z-index: 1;
-  max-width: 860px;
-  padding: 28px;
-}
-
-.detail-tags {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 14px;
-}
-
-.detail-tags span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 10px;
-  border: 1px solid rgba(255, 255, 255, 0.34);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.14);
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.detail-code-chip {
-  width: fit-content;
-  margin-top: 10px;
-  padding: 5px 10px;
-  border: 1px solid rgba(147, 197, 253, 0.6);
-  border-radius: 999px;
-  background: rgba(239, 246, 255, 0.92);
-  color: #2563eb;
-  font-size: 12px;
-  font-weight: 900;
-  cursor: pointer;
-}
-
-.detail-favorite-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  width: fit-content;
-  margin-top: 8px;
-  padding: 7px 12px;
-  border: 1px solid rgba(255, 106, 0, 0.42);
-  border-radius: 999px;
-  background: rgba(255, 106, 0, 0.18);
-  color: #fff7ed;
-  font-size: 12px;
-  font-weight: 900;
-  cursor: pointer;
-}
-
-.detail-hero-overlay h1 {
-  margin: 0;
-  color: #ffffff;
-  font-size: 30px;
-  line-height: 1.25;
-}
-
-.detail-hero-overlay p {
-  margin: 8px 0 0;
-  color: rgba(255, 255, 255, 0.82);
-  font-size: 16px;
-  font-weight: 800;
-}
-
-.detail-body {
-  display: grid;
-  gap: 18px;
-  padding: 24px;
-}
-
-.detail-summary-row {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.detail-metric,
-.detail-section {
-  border: 1px solid #edf0f4;
-  border-radius: 16px;
-  background: #ffffff;
-}
-
-.detail-metric {
-  padding: 18px;
-  background: #f8fafc;
-}
-
-.detail-metric span {
-  display: block;
-  color: #8b9cb5;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.detail-metric strong {
-  display: block;
-  margin-top: 8px;
-  color: #17233d;
-  font-size: 28px;
-  line-height: 1.1;
-}
-
-.detail-metric.is-coin strong {
-  color: #1477ff;
-}
-
-.detail-metric.is-price strong {
-  color: #ef4444;
-}
-
-.detail-section {
-  padding: 22px;
-}
-
-.detail-section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.detail-section-head h2 {
-  margin: 0;
-  color: #17233d;
-  font-size: 20px;
-}
-
-.detail-section-head span {
-  color: #8b9cb5;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.detail-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.detail-chip-row span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 32px;
-  padding: 0 10px;
-  border: 1px solid rgba(255, 106, 0, 0.28);
-  border-radius: 8px;
-  background: #fff7ed;
-  color: #ea580c;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.detail-info-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin: 18px 0 0;
-}
-
-.detail-info-grid div {
-  min-width: 0;
-  border-radius: 12px;
-  background: #f8fafc;
-  padding: 14px;
-}
-
-.detail-info-grid dt {
-  color: #8b9cb5;
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.detail-info-grid dd {
-  margin: 8px 0 0;
-  overflow-wrap: anywhere;
-  color: #17233d;
-  font-size: 15px;
-  font-weight: 900;
-}
-
-.detail-resource-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.detail-resource-card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px 12px;
-  border-radius: 12px;
-  background: #f8fafc;
-  padding: 14px;
-}
-
-.detail-resource-card span {
-  min-width: 0;
-  color: #475569;
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.detail-resource-card strong {
-  color: #17233d;
-  font-size: 18px;
-}
-
-.detail-resource-card em {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  grid-column: 1 / -1;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 900;
-}
-
-.detail-resource-card em b {
-  color: #ff6a00;
-}
-
-.detail-resource-card em small {
-  color: #17233d;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.skin-groups {
-  display: grid;
-  gap: 16px;
-}
-
-.skin-group h3 {
-  margin: 0 0 10px;
-  color: #475569;
-  font-size: 15px;
-}
-
-.detail-description {
-  margin: 0;
-  color: #52616f;
-  font-size: 15px;
-  line-height: 1.8;
-}
-
-.detail-screenshot-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.detail-screenshot {
-  margin: 0;
-}
-
-.detail-screenshot-image {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  overflow: hidden;
-  border-radius: 12px;
-  border: 1px solid #edf0f4;
-  background: #f8fafc;
-  cursor: zoom-in;
-}
-
-.detail-screenshot-image :deep(.el-image__inner) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.detail-screenshot figcaption {
-  margin-top: 8px;
-  color: #64748b;
-  font-size: 13px;
-  font-weight: 800;
-  text-align: center;
-}
-
-.pc-order-card {
-  max-width: none;
-  border-radius: 20px;
-  padding: 24px;
-  overflow: hidden;
-}
-
-.order-card-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 10px;
-}
-
-.order-card-head h2 {
-  margin: 4px 0 0;
-  color: #17233d;
-  font-size: 22px;
-  line-height: 1.2;
-}
-
-.order-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  border-radius: 999px;
-  background: #f1f5f9;
-  padding: 0 10px;
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.order-state {
-  display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 58px;
-  min-height: 28px;
-  border-radius: 999px;
-  background: #ecfdf5;
-  color: #16a34a;
-  font-size: 12px;
-  font-weight: 900;
-  white-space: nowrap;
+  gap: 6px;
+  transition: all 0.2s;
 }
 
-.order-state.is-busy {
-  background: #fff7ed;
+.secondary-favorite-btn:hover {
+  border-color: #ff8533;
   color: #ea580c;
-}
-
-.order-form {
-  display: grid;
-  gap: 14px;
-}
-
-.order-safe-text {
-  margin-bottom: 18px;
-  color: #7a89a5;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.order-total-box {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  margin-bottom: 0;
-  border: 1px solid rgba(245, 158, 11, 0.2);
-  background:
-    linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)), #fffbeb;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
-}
-
-.order-total-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid rgba(217, 119, 6, 0.14);
-}
-
-.order-total-head span {
-  color: #9a5a16;
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.order-total-head strong {
-  margin: 0;
-  color: #ef4444;
-  font-size: 34px;
-  line-height: 1;
-  text-align: right;
-}
-
-.order-price-breakdown {
-  display: grid;
-  gap: 10px;
-  padding: 0;
-}
-
-.order-price-breakdown div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.order-price-breakdown span,
-.order-deposit-row span {
-  color: #8a5a12;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.order-price-breakdown strong,
-.order-deposit-row strong {
-  margin: 0;
-  color: #17233d;
-  font-size: 16px;
-  line-height: 1.2;
-}
-
-.order-deposit-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(217, 119, 6, 0.14);
-}
-
-.order-deposit-row strong {
-  color: #92400e;
-  font-size: 18px;
-}
-
-.order-check-list {
-  display: grid;
-  gap: 10px;
-  margin: 0;
-}
-
-.order-check-list div {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 16px;
-  min-height: 44px;
-  border: 1px solid #eef2f7;
-  border-radius: 12px;
-  background: #f8fafc;
-  padding: 0 14px;
-}
-
-.order-check-list dt {
-  color: #8b9cb5;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.order-check-list dd {
-  margin: 0;
-  color: #17233d;
-  font-size: 14px;
-  font-weight: 900;
-  text-align: right;
-  overflow-wrap: anywhere;
-}
-
-.full-control {
-  width: 100%;
-}
-
-.order-action-group {
-  display: grid;
-  gap: 10px;
-  padding-top: 2px;
-}
-
-.order-primary-btn {
-  min-height: 48px;
-  border: 0;
-  background: #ff8a00;
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 900;
-  box-shadow: 0 12px 24px rgba(255, 106, 0, 0.24);
-}
-
-.order-primary-btn:hover,
-.order-primary-btn:focus {
-  background: #ff7a00;
-  color: #ffffff;
-}
-
-.order-primary-btn.is-disabled,
-.order-primary-btn.is-disabled:hover {
-  background: #f3a94a;
-  color: rgba(255, 255, 255, 0.86);
-  box-shadow: none;
-}
-
-.favorite-order-btn {
-  min-height: 46px;
-  margin-left: 0;
-  border-color: #ff6a00;
-  background: #ffffff;
-  color: #ff6a00;
-  font-size: 15px;
-  font-weight: 900;
-}
-
-.favorite-order-btn:hover,
-.favorite-order-btn:focus {
-  border-color: #ff6a00;
   background: #fff7ed;
-  color: #ea580c;
 }
 
+.secondary-favorite-btn.is-active {
+  border-color: #fed7aa;
+  color: #ea580c;
+  background: #fff7ed;
+}
+
+/* 信任底栏 */
+.order-panel-trust-footer {
+  padding-top: 4px;
+}
+
+.trust-badge-row {
+  display: flex;
+  justify-content: space-around;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+/* ==========================================================================
+   协议弹窗样式
+   ========================================================================== */
 .agreement-dialog-body {
   display: grid;
   gap: 14px;
@@ -598,7 +1105,7 @@
   margin: 0;
   color: #64748b;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .agreement-grid {
@@ -615,62 +1122,71 @@
 
 .agreement-panel h3 {
   margin: 0;
-  color: #17233d;
-  font-size: 16px;
-  font-weight: 900;
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 800;
 }
 
 .agreement-content {
   height: 260px;
   overflow: auto;
-  border: 1px solid #d8dee9;
+  border: 1px solid #e2e8f0;
   border-radius: 8px;
   background: #f8fafc;
   padding: 14px;
-  color: #1f2937;
+  color: #334155;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.75;
   white-space: pre-wrap;
 }
 
 .agreement-read-hint {
-  color: #f97316;
+  color: #ea580c;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
 }
 
-@media (max-width: 1180px) {
-  .pc-detail-layout,
-  .detail-screenshot-grid {
+/* ==========================================================================
+   响应式断点
+   ========================================================================== */
+@media (max-width: 1200px) {
+  .pc-detail-layout {
     grid-template-columns: 1fr;
   }
 
-  .detail-summary-row,
-  .detail-info-grid,
-  .detail-resource-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .pc-order-panel {
+    position: static;
   }
 
-  .detail-hero-card,
-  .detail-hero-card img,
-  .detail-hero-card > span {
-    height: 300px;
+  .gallery-stage {
+    height: 380px;
   }
 
-  .detail-hero-overlay {
-    padding: 24px;
-  }
-
-  .detail-hero-overlay h1 {
-    font-size: 26px;
+  .trust-features-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (max-width: 720px) {
-  .detail-summary-row,
-  .detail-info-grid,
-  .detail-resource-grid {
+@media (max-width: 768px) {
+  .top-nav-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .core-assets-bar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .specs-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .resources-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .trust-features-grid {
     grid-template-columns: 1fr;
   }
 
diff --git a/frontend/src/features/listings/views/ListingDetailView.vue b/frontend/src/features/listings/views/ListingDetailView.vue
index 5b4edf6..9b1f2fc 100644
--- a/frontend/src/features/listings/views/ListingDetailView.vue
+++ b/frontend/src/features/listings/views/ListingDetailView.vue
@@ -3,7 +3,7 @@ import { readError } from '@/shared/utils/error'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ShoppingCart, Star, StarFilled, ArrowLeft } from '@element-plus/icons-vue'
+import { ShoppingCart, Star, StarFilled, ArrowLeft, DocumentCopy } from '@element-plus/icons-vue'
 import { goBackOrHome } from '@/shared/utils/routerBack'
 
 import { fetchListing, type Listing } from '@/features/listings/api/listings'
@@ -38,6 +38,8 @@ import {
   getServerRegion,
   readAssetNumber,
   readAssetString,
+  getRatioValue,
+  type ListingDisplayResource,
 } from '@/shared/utils/listingDisplay'
 
 const route = useRoute()
@@ -56,6 +58,8 @@ const virtualAgreementRef = ref<HTMLElement | null>(null)
 const renterAgreementRef = ref<HTMLElement | null>(null)
 const { recordListingView, isFavorite, toggleFavorite } = useListingCollections()
 
+const activeImageIndex = ref(0)
+
 const canCreateOrderAfterAgreement = computed(
   () =>
     virtualAgreementRead.value &&
@@ -97,32 +101,57 @@ const orderPriceBreakdown = computed(() => {
   }
 })
 
-const coverURL = computed(() => {
+// 核心资产微卡计算（同首页设计标准）
+const hafCoinDisplay = computed(() => {
+  if (!listing.value) return '--'
+  return formatHafCoinM(getCoinWan(listing.value))
+})
+
+const insuranceSlot = computed(() => {
+  if (!listing.value) return '--'
+  return readAssetString(listing.value, 'season_insurance') || '--'
+})
+
+const ratioValue = computed(() => {
+  if (!listing.value) return 0
+  return getRatioValue(listing.value)
+})
+
+const ratioDisplay = computed(() => {
+  if (ratioValue.value <= 0) return null
+  return `1元 = ${ratioValue.value.toFixed(1)}w`
+})
+
+const rentalDuration = computed(() => {
+  if (!listing.value) return '--'
+  return formatEstimatedRentalDuration(listing.value)
+})
+
+const dailyLoss = computed(() => {
   if (!listing.value) return ''
-  return listing.value.cover_url || listing.value.screenshot_urls?.[0] || ''
+  return getDailyLoss(listing.value)
 })
 
-const detailMetrics = computed(() => {
+// 平台/区服特性徽标
+const accessTags = computed(() => {
   if (!listing.value) return []
-  const dailyLoss = getDailyLoss(listing.value)
-  const secretKD = readAssetNumber(listing.value, 'secret_kd')
-  return [
-    { label: '纯币', value: formatHafCoinM(getCoinWan(listing.value)), tone: 'coin' },
-    {
-      label: '绝密KD',
-      value: secretKD > 0 ? formatAssetNumber(secretKD) : '--',
-      tone: 'coin',
-    },
-    {
-      label: '日损耗',
-      value: dailyLoss ? `${dailyLoss}/天` : '--',
-      tone: 'coin',
-    },
-    { label: '价格', value: `¥${orderTotal.value}`, tone: 'price' },
-    { label: '押金', value: `¥${formatCent(listing.value.deposit_amount_cent)}`, tone: '' },
-  ]
+  return [getServerRegion(listing.value), getLoginMethod(listing.value)]
+    .filter(Boolean)
+    .map(item => accessBadgeMeta(item))
 })
 
+function accessBadgeMeta(value: string) {
+  const text = value.trim()
+  if (text.includes('微信')) return { label: text, icon: 'wechat', tone: 'wechat' }
+  if (text.toUpperCase().includes('QQ')) return { label: text, icon: 'qq', tone: 'qq' }
+  if (text.includes('扫码')) return { label: text, icon: 'scan', tone: 'scan' }
+  if (text.includes('账') || text.includes('密码'))
+    return { label: text, icon: 'lock', tone: 'password' }
+  if (text.includes('Steam')) return { label: text, icon: 'desktop-o', tone: 'steam' }
+  return { label: text, icon: 'bookmark-o', tone: 'default' }
+}
+
+// 截图多图展台
 const detailScreenshots = computed(() => {
   if (!listing.value) return []
   const groupedScreenshots = readGroupedScreenshots(listing.value)
@@ -135,15 +164,20 @@ const detailScreenshots = computed(() => {
 })
 const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
 
+const activeScreenshot = computed(() => {
+  if (detailScreenshots.value.length === 0) return null
+  return detailScreenshots.value[activeImageIndex.value] || detailScreenshots.value[0]
+})
+
 function readGroupedScreenshots(item: Listing) {
   const groups = item.asset_summary?.screenshot_groups
   if (typeof groups !== 'object' || groups === null) return []
   const slots = [
     { key: 'coin', label: '纯币截图' },
-    { key: 'gameId', label: '游戏ID截图' },
-    { key: 'totalAsset', label: '总资产截图' },
     { key: 'tencentSecurity', label: '腾讯安全中心截图' },
     { key: 'skin', label: '皮肤截图' },
+    { key: 'gameId', label: '游戏ID截图' },
+    { key: 'totalAsset', label: '总资产截图' },
   ]
   return slots.flatMap(slot => {
     const urls = (groups as Record<string, unknown>)[slot.key]
@@ -156,30 +190,51 @@ function readGroupedScreenshots(item: Listing) {
   })
 }
 
+// 皮肤清单（带高光品级）
 const detailSkinGroups = computed(() => {
   if (!listing.value) return []
   const groups = listing.value.asset_summary?.skin_groups
   if (typeof groups !== 'object' || groups === null) return []
-  const titles: Record<string, string> = {
-    melee: '近战皮肤',
-    operator: '干员皮肤',
-    operatorGold: '干员金皮',
-    operatorRed: '干员红皮',
-    weapon: '武器皮肤',
-    other: '其他皮肤',
-    imported: '其他皮肤',
+  const titles: Record<string, { title: string; type: string }> = {
+    melee: { title: '近战皮肤', type: 'melee' },
+    operatorRed: { title: '干员红皮', type: 'operatorRed' },
+    operatorGold: { title: '干员金皮', type: 'operatorGold' },
+    operator: { title: '干员皮肤', type: 'operator' },
+    weapon: { title: '武器皮肤', type: 'weapon' },
+    other: { title: '其他皮肤', type: 'other' },
+    imported: { title: '其他皮肤', type: 'other' },
   }
   return Object.entries(groups as Record<string, unknown>)
-    .map(([key, value]) => ({
-      key,
-      title: titles[key] || key,
-      options: Array.isArray(value)
-        ? value.filter((skin): skin is string => typeof skin === 'string')
-        : [],
-    }))
+    .map(([key, value]) => {
+      const meta = titles[key] || { title: key, type: 'other' }
+      return {
+        key,
+        type: meta.type,
+        title: meta.title,
+        options: Array.isArray(value)
+          ? value.filter((skin): skin is string => typeof skin === 'string')
+          : [],
+      }
+    })
     .filter(group => group.options.length)
 })
 
+const totalSkinCount = computed(() => {
+  return detailSkinGroups.value.reduce((acc, g) => acc + g.options.length, 0)
+})
+
+// 规格胶囊（过滤已展示的哈夫币、保险、AWM）
+const secondaryChips = computed(() => {
+  if (!listing.value) return []
+  return getListingChips(listing.value).filter(
+    chip =>
+      chip.label !== '哈夫币' &&
+      chip.label !== '保险格数' &&
+      chip.label !== 'AWM'
+  )
+})
+
+// 账号基础档案 12 宫格
 const accountRows = computed(() => {
   if (!listing.value) return []
   const regions = assetRegions(listing.value)
@@ -197,10 +252,22 @@ const accountRows = computed(() => {
     { label: '方便上号', value: getOnlineTimeText(listing.value) || '--' },
     { label: '预计可租', value: formatEstimatedRentalDuration(listing.value) },
     { label: '常用登录地', value: regions.length ? regions.join('、') : '--' },
-    { label: '封禁记录', value: readAssetString(listing.value, 'ban_record') || '无' },
+    { label: '封禁记录', value: readAssetString(listing.value, 'ban_record') || '无封禁记录' },
   ]
 })
 
+// 仓库物资
+const resourceItems = computed(() => {
+  if (!listing.value) return []
+  return getListingResources(listing.value)
+})
+
+function formatResourceQuantity(resource: ListingDisplayResource) {
+  const suffix = resource.key === 'awmAmmo' ? '发' : ''
+  const val = Number.isInteger(resource.quantity) ? String(resource.quantity) : resource.quantity.toFixed(1)
+  return `${val}${suffix}`
+}
+
 async function handleCreateOrder() {
   if (!listing.value) return
   if (!session.token) {
@@ -279,7 +346,7 @@ async function copyListingCode() {
   if (!listing.value) return
   try {
     await navigator.clipboard.writeText(formatListingCode(listing.value))
-    ElMessage.success('商品编号已复制')
+    ElMessage.success('商品编号已复制到剪贴板')
   } catch {
     ElMessage.error('复制失败')
   }
@@ -300,47 +367,33 @@ function updateAgreementReadState(type: 'virtual' | 'renter') {
   }
 }
 
-// 手动锁定/解锁背景滚动
+// 锁定/解锁背景滚动
 watch(agreementVisible, visible => {
-  // 只锁定 .pc-main 容器，不影响 body 和 sticky 导航栏
   const pcMain = document.querySelector('.pc-main') as HTMLElement
   if (!pcMain) return
 
   if (visible) {
-    // 保存当前滚动位置
     const scrollTop = pcMain.scrollTop || 0
-
-    // 锁定主容器滚动
     pcMain.style.overflow = 'hidden'
     pcMain.style.position = 'fixed'
     pcMain.style.top = `-${scrollTop}px`
     pcMain.style.left = '0'
     pcMain.style.right = '0'
     pcMain.style.width = '100%'
-
-    // 保存滚动位置供恢复使用
     pcMain.dataset.scrollTop = String(scrollTop)
   } else {
-    // 恢复主容器滚动
     const scrollTop = parseInt(pcMain.dataset.scrollTop || '0', 10)
-
     pcMain.style.overflow = ''
     pcMain.style.position = ''
     pcMain.style.top = ''
     pcMain.style.left = ''
     pcMain.style.right = ''
     pcMain.style.width = ''
-
-    // 恢复滚动位置
     pcMain.scrollTop = scrollTop
     delete pcMain.dataset.scrollTop
   }
 })
 
-function listingPrice(item: Listing) {
-  return formatMoney(getListingDisplayPrice(item))
-}
-
 function handleToggleFavorite() {
   if (!listing.value) return
   const added = toggleFavorite(listing.value)
@@ -353,228 +406,412 @@ function goBack() {
 </script>
 
 <template>
-  <section class="pc-detail page" v-loading="loading">
-    <div class="anti-fraud-strip compact">
-      <span>防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span>
-    </div>
-
-    <div class="detail-back-bar">
-      <button class="detail-back-btn" type="button" @click="goBack">
+  <section class="pc-detail-page" v-loading="loading">
+    <!-- 顶部导航与安全保障条 -->
+    <div class="top-nav-bar">
+      <button class="back-pill-btn" type="button" @click="goBack">
         <el-icon><ArrowLeft /></el-icon>
-        <span>返回列表</span>
+        <span>返回租号大厅</span>
       </button>
+
+      <div class="safe-notice-strip">
+        <van-icon name="shield-o" class="safe-icon" :size="16" />
+        <span class="safe-text">平台官方担保：下单后请严格按照平台交付流程确认收号与归还，切勿脱离平台私下交易。</span>
+      </div>
     </div>
 
+    <!-- 详情主布局：左侧详尽档案 + 右侧粘性下单面板 -->
     <div v-if="listing" class="pc-detail-layout">
-      <section class="pc-detail-main">
-        <div class="detail-hero-card">
-          <AuthImage
-            v-if="coverURL"
-            :source="coverURL"
-            :alt="getListingTitle(listing)"
-            image-class="detail-hero-img"
-            loading="eager"
-          />
-          <span v-else>HFB ACCOUNT</span>
-          <div class="detail-hero-overlay">
-            <div class="detail-tags">
-              <span>{{ getServerRegion(listing) }}</span>
-              <span v-if="getLoginMethod(listing)">{{ getLoginMethod(listing) }}</span>
-              <span v-if="listing.rank_level">{{ listing.rank_level }}</span>
-            </div>
-            <button class="detail-code-chip" type="button" @click="copyListingCode">
-              编号 {{ formatListingCode(listing) }}
-            </button>
-            <button class="detail-favorite-chip" type="button" @click="handleToggleFavorite">
-              <el-icon>
-                <component :is="listingFavorited ? StarFilled : Star" />
-              </el-icon>
-              {{ listingFavorited ? '已收藏' : '收藏账号' }}
-            </button>
-            <h1>{{ getListingTitle(listing) }}</h1>
-            <p>{{ getListingSubtitle(listing) }}</p>
-          </div>
-        </div>
+      <!-- 左侧内容流 -->
+      <div class="pc-detail-main">
+        <!-- 账号抬头与核心属性 -->
+        <section class="detail-card header-card">
+          <div class="header-meta-row">
+            <div class="meta-tags-wrap">
+              <button class="code-badge-btn" type="button" @click="copyListingCode" title="点击复制商品编号">
+                <span>{{ formatListingCode(listing) }}</span>
+                <el-icon :size="12"><DocumentCopy /></el-icon>
+              </button>
 
-        <div class="detail-body">
-          <div class="detail-summary-row">
-            <div
-              v-for="metric in detailMetrics"
-              :key="metric.label"
-              class="detail-metric"
-              :class="`is-${metric.tone}`"
-            >
-              <span>{{ metric.label }}</span>
-              <strong>{{ metric.value }}</strong>
-            </div>
-          </div>
+              <span v-for="tag in accessTags" :key="tag.label" class="platform-pill" :class="tag.tone">
+                <van-icon :name="tag.icon" :size="13" />
+                <span>{{ tag.label }}</span>
+              </span>
 
-          <section class="detail-section">
-            <div class="detail-section-head">
-              <h2>账号资料</h2>
-              <span>{{ formatGameName(listing.game_name, '三角洲') }}</span>
-            </div>
-            <div class="detail-chip-row">
-              <span v-for="chip in getListingChips(listing)" :key="chip.label">
-                {{ chip.label }}：{{ chip.value }}
+              <span v-if="listing.rank_level" class="platform-pill rank">
+                <van-icon name="diamond-o" :size="13" />
+                <span>{{ listing.rank_level }}</span>
+              </span>
+
+              <span class="status-pill" :class="{ 'is-busy': listing.in_transaction }">
+                <i class="status-dot" />
+                <span>{{ listing.in_transaction ? '交易中' : '现号可租' }}</span>
               </span>
             </div>
-            <dl class="detail-info-grid">
-              <div v-for="row in accountRows" :key="row.label">
-                <dt>{{ row.label }}</dt>
-                <dd>{{ row.value }}</dd>
-              </div>
-            </dl>
-          </section>
 
-          <section class="detail-section">
-            <div class="detail-section-head">
-              <h2>号主备注</h2>
-            </div>
-            <p class="detail-description">{{ listing.description || '号主暂未填写详细说明。' }}</p>
-          </section>
-
-          <section v-if="getListingResources(listing).length" class="detail-section">
-            <div class="detail-section-head">
-              <h2>额外消耗品</h2>
-              <span>{{ getListingResources(listing).length }} 项</span>
-            </div>
-            <div class="detail-resource-grid">
-              <div
-                v-for="resource in getListingResources(listing)"
-                :key="resource.key"
-                class="detail-resource-card"
-              >
-                <span>{{ resource.label }}</span>
-                <strong>{{ resource.quantity }}</strong>
-                <em>
-                  <b>{{ resource.mode || '--' }}</b>
-                  <small v-if="resource.amount > 0">¥{{ formatMoney(resource.amount) }}</small>
-                  <small v-else-if="resource.mode === '收费'">{{ resource.price || '¥0' }}</small>
-                  <small v-else>无额外收费</small>
-                </em>
-              </div>
-            </div>
-          </section>
-
-          <section v-if="detailSkinGroups.length" class="detail-section">
-            <div class="detail-section-head">
-              <h2>皮肤清单</h2>
-              <span>按类型展示</span>
-            </div>
-            <div class="skin-groups">
-              <div v-for="group in detailSkinGroups" :key="group.key" class="skin-group">
-                <h3>{{ group.title }}</h3>
-                <div class="detail-chip-row">
-                  <span v-for="skin in group.options" :key="skin">{{ skin }}</span>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <section v-if="detailScreenshots.length" class="detail-section">
-            <div class="detail-section-head">
-              <h2>账号截图</h2>
-              <span>{{ detailScreenshots.length }} 张</span>
-            </div>
-            <div class="detail-screenshot-grid">
-              <figure
-                v-for="(shot, index) in detailScreenshots"
-                :key="shot.url"
-                class="detail-screenshot"
-              >
-                <AuthImage
-                  :source="shot.url"
-                  :alt="shot.label"
-                  image-class="detail-screenshot-image"
-                  fallback-class="detail-screenshot-image"
-                  fit="cover"
-                  :preview-src-list="detailScreenshotUrls"
-                  :preview-initial-index="index"
-                />
-                <figcaption>{{ shot.label }}</figcaption>
-              </figure>
-            </div>
-          </section>
-        </div>
-      </section>
-
-      <aside class="order-panel pc-order-card">
-        <div class="order-card-head">
-          <div>
-            <span class="order-eyebrow">平台担保</span>
-            <h2>立即下单</h2>
-          </div>
-          <span class="order-state" :class="{ 'is-busy': listing.in_transaction }">
-            {{ listing.in_transaction ? '交易中' : '可租' }}
-          </span>
-        </div>
-        <p class="order-safe-text">平台托管订单与押金，按平台交接流程完成账号使用。</p>
-
-        <el-form label-position="top" class="order-form">
-          <div class="order-total-box">
-            <div class="order-total-head">
-              <span>租赁合计</span>
-              <strong>¥{{ listingPrice(listing) }}</strong>
-            </div>
-            <div class="order-price-breakdown">
-              <div>
-                <span>基础租金</span>
-                <strong>¥{{ formatMoney(orderPriceBreakdown.rent) }}</strong>
-              </div>
-              <div>
-                <span>额外物品</span>
-                <strong>¥{{ formatMoney(orderPriceBreakdown.consumable) }}</strong>
-              </div>
-            </div>
-            <div class="order-deposit-row">
-              <span>押金另付</span>
-              <strong>¥{{ formatCent(listing.deposit_amount_cent) }}</strong>
-            </div>
-          </div>
-
-          <dl class="order-check-list">
-            <div>
-              <dt>账号区服</dt>
-              <dd>{{ getServerRegion(listing) || '--' }}</dd>
-            </div>
-            <div>
-              <dt>上号方式</dt>
-              <dd>{{ getLoginMethod(listing) || '--' }}</dd>
-            </div>
-            <div>
-              <dt>预计可租</dt>
-              <dd>{{ formatEstimatedRentalDuration(listing) }}</dd>
-            </div>
-          </dl>
-
-          <div class="order-action-group">
-            <el-button
-              type="warning"
-              size="large"
-              :loading="ordering || agreementsLoading"
-              :disabled="listing.in_transaction"
-              class="full-control order-primary-btn"
-              @click="handleCreateOrder"
-            >
-              <el-icon><ShoppingCart /></el-icon>
-              {{ listing.in_transaction ? '交易中' : '立即下单' }}
-            </el-button>
-            <el-button
-              class="full-control favorite-order-btn"
-              size="large"
+            <button
+              class="favorite-action-btn"
+              :class="{ 'is-active': listingFavorited }"
+              type="button"
               @click="handleToggleFavorite"
             >
-              <el-icon>
+              <el-icon :size="15">
                 <component :is="listingFavorited ? StarFilled : Star" />
               </el-icon>
-              {{ listingFavorited ? '取消收藏' : '收藏账号' }}
-            </el-button>
+              <span>{{ listingFavorited ? '已收藏' : '收藏账号' }}</span>
+            </button>
           </div>
-        </el-form>
+
+          <!-- 标题与副标题 -->
+          <div class="header-title-block">
+            <h1 class="listing-main-title">{{ getListingTitle(listing) }}</h1>
+            <p v-if="getListingSubtitle(listing)" class="listing-subtitle">
+              {{ getListingSubtitle(listing) }}
+            </p>
+          </div>
+
+          <!-- 核心资产四大微卡（完全对齐首页） -->
+          <div class="core-assets-bar">
+            <!-- 哈夫币 -->
+            <div class="asset-tile coin-tile">
+              <span class="tile-label">哈夫币资产</span>
+              <strong class="tile-value text-orange">{{ hafCoinDisplay }}</strong>
+            </div>
+
+            <!-- 保险格数 -->
+            <div class="asset-tile slot-tile">
+              <span class="tile-label">安全箱格数</span>
+              <strong class="tile-value text-slate">{{ insuranceSlot }}</strong>
+            </div>
+
+            <!-- 折算币比 -->
+            <div v-if="ratioDisplay" class="asset-tile ratio-tile">
+              <span class="tile-label">折算币比</span>
+              <strong class="tile-value text-amber">{{ ratioDisplay }}</strong>
+            </div>
+
+            <!-- 租期与日耗 -->
+            <div class="asset-tile rental-tile">
+              <span class="tile-label">租用与损耗</span>
+              <div class="tile-subvalues">
+                <span class="val-pill green">可租 {{ rentalDuration }}</span>
+                <span v-if="dailyLoss" class="val-pill warm">消耗 {{ dailyLoss }}/天</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 多图互动验号展台 (Gallery Showcase) -->
+        <section class="detail-card gallery-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>验号图片展台</h2>
+              <span class="title-tip">真实游戏截图，点击可全屏高清放大查看细节</span>
+            </div>
+            <span class="gallery-count">共 {{ detailScreenshots.length }} 张截图</span>
+          </div>
+
+          <!-- 主展台主图 -->
+          <div class="gallery-stage">
+            <div v-if="activeScreenshot" class="stage-viewer">
+              <AuthImage
+                :source="activeScreenshot.url"
+                :alt="activeScreenshot.label"
+                image-class="stage-image"
+                fallback-class="stage-image"
+                fit="contain"
+                :preview-src-list="detailScreenshotUrls"
+                :preview-initial-index="activeImageIndex"
+              />
+              <!-- 左上角分类角标 -->
+              <span class="stage-tag">{{ activeScreenshot.label }}</span>
+              <!-- 右下角放大提示 -->
+              <div class="stage-zoom-hint">
+                <van-icon name="search" :size="13" />
+                <span>点击放大查看</span>
+              </div>
+            </div>
+            <div v-else class="stage-empty">
+              <span>暂无验号截图</span>
+            </div>
+          </div>
+
+          <!-- 底部缩略图胶卷导轨 -->
+          <div v-if="detailScreenshots.length > 1" class="thumbnail-filmstrip">
+            <button
+              v-for="(shot, idx) in detailScreenshots"
+              :key="shot.url + idx"
+              type="button"
+              class="thumbnail-item"
+              :class="{ 'is-active': idx === activeImageIndex }"
+              @click="activeImageIndex = idx"
+              @mouseenter="activeImageIndex = idx"
+            >
+              <AuthImage
+                :source="shot.url"
+                :alt="shot.label"
+                image-class="thumb-img"
+                fallback-class="thumb-img"
+                fit="cover"
+              />
+              <span class="thumb-label">{{ shot.label }}</span>
+            </button>
+          </div>
+        </section>
+
+        <!-- 账号核心档案参数矩阵 -->
+        <section class="detail-card specs-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>账号核心档案</h2>
+              <span class="title-tip">{{ formatGameName(listing.game_name, '三角洲行动') }} 资产详细规格</span>
+            </div>
+          </div>
+
+          <!-- 次要规格标签流 -->
+          <div v-if="secondaryChips.length > 0" class="secondary-chips-flow">
+            <span v-for="chip in secondaryChips" :key="chip.label" class="secondary-spec-pill">
+              <span class="pill-k">{{ chip.label }}</span>
+              <strong class="pill-v">{{ chip.value }}</strong>
+            </span>
+          </div>
+
+          <!-- 12 宫格档案矩阵 -->
+          <div class="specs-grid">
+            <div v-for="row in accountRows" :key="row.label" class="spec-cell">
+              <span class="cell-label">{{ row.label }}</span>
+              <strong class="cell-val">{{ row.value }}</strong>
+            </div>
+          </div>
+        </section>
+
+        <!-- 精选皮肤展台（若有） -->
+        <section v-if="detailSkinGroups.length" class="detail-card skin-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>精选皮肤展台</h2>
+              <span class="title-tip">包含近战、金皮、红皮及武器皮肤</span>
+            </div>
+            <span class="gallery-count">共 {{ totalSkinCount }} 款精选</span>
+          </div>
+
+          <div class="skin-groups-container">
+            <div v-for="group in detailSkinGroups" :key="group.key" class="skin-group-block">
+              <div class="skin-group-header">
+                <span class="skin-group-title">{{ group.title }}</span>
+                <span class="skin-group-count">{{ group.options.length }} 款</span>
+              </div>
+              <div class="skin-pill-wrap">
+                <span
+                  v-for="opt in group.options"
+                  :key="opt"
+                  class="skin-pill"
+                  :class="`skin-type-${group.type}`"
+                >
+                  <i class="quality-dot" />
+                  <span>{{ opt }}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 仓库贵重物资 & 额外消耗品（若有） -->
+        <section v-if="resourceItems.length" class="detail-card resources-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>仓库物资与消耗品</h2>
+              <span class="title-tip">随号附带的仓库高价值装备物资</span>
+            </div>
+            <span class="gallery-count">{{ resourceItems.length }} 种物资</span>
+          </div>
+
+          <div class="resources-grid">
+            <div v-for="res in resourceItems" :key="res.key" class="resource-tile">
+              <div class="res-top">
+                <span class="res-name">{{ res.label }}</span>
+                <strong class="res-qty">{{ formatResourceQuantity(res) }}</strong>
+              </div>
+              <div class="res-bottom">
+                <span v-if="res.mode === '赠送'" class="res-badge gift">随号赠送</span>
+                <span v-else-if="res.mode === '收费'" class="res-badge charge">
+                  额外收费 <small v-if="res.amount > 0">¥{{ formatMoney(res.amount) }}</small>
+                </span>
+                <span v-else class="res-badge standard">{{ res.mode || '账号包内' }}</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 号主说明与交接备注 -->
+        <section class="detail-card note-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>号主留言与说明</h2>
+            </div>
+          </div>
+          <div class="seller-note-box">
+            <van-icon name="chat-o" :size="18" class="note-quote-icon" />
+            <p class="note-content">{{ listing.description || '号主暂未填写特殊交接要求，可正常直接下单租用。' }}</p>
+          </div>
+        </section>
+
+        <!-- 平台四大安全保障 -->
+        <section class="detail-card trust-card">
+          <div class="section-title-bar">
+            <div class="title-left">
+              <h2>平台官方交易保障</h2>
+              <span class="title-tip">哈夫币租号平台全面护航您的每次交易</span>
+            </div>
+          </div>
+
+          <div class="trust-features-grid">
+            <div class="trust-item">
+              <div class="trust-icon-box orange">
+                <van-icon name="shield-o" :size="20" />
+              </div>
+              <div class="trust-text">
+                <strong>官方资金托管</strong>
+                <p>租金与押金全程平台监管，确认收号无误后才结算</p>
+              </div>
+            </div>
+
+            <div class="trust-item">
+              <div class="trust-icon-box blue">
+                <van-icon name="passed" :size="20" />
+              </div>
+              <div class="trust-text">
+                <strong>极速自动退押</strong>
+                <p>租期结束按规范归还并确认无损后，押金原路秒退</p>
+              </div>
+            </div>
+
+            <div class="trust-item">
+              <div class="trust-icon-box green">
+                <van-icon name="service-o" :size="20" />
+              </div>
+              <div class="trust-text">
+                <strong>专人客服协助</strong>
+                <p>上号交接若遇异常，平台官方客服随时介入协助</p>
+              </div>
+            </div>
+
+            <div class="trust-item">
+              <div class="trust-icon-box amber">
+                <van-icon name="certificate" :size="20" />
+              </div>
+              <div class="trust-text">
+                <strong>双向实名认证</strong>
+                <p>买卖双方均通过公安实名比对校验，杜绝欺诈</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <!-- 右侧：常驻粘性结算下单面板 -->
+      <aside class="pc-order-panel">
+        <div class="order-sticky-box">
+          <!-- 卡片头部 -->
+          <div class="panel-header">
+            <div class="panel-title-wrap">
+              <span class="panel-eyebrow">平台托管交接</span>
+              <h2 class="panel-title">立即租用</h2>
+            </div>
+            <span class="order-status-pill" :class="{ 'is-busy': listing.in_transaction }">
+              <i class="dot" />
+              <span>{{ listing.in_transaction ? '交易中' : '现号可租' }}</span>
+            </span>
+          </div>
+
+          <!-- 价格与费用结构总览（精美暖色渐变卡） -->
+          <div class="checkout-price-card">
+            <div class="price-header-row">
+              <span class="price-caption">租赁合计</span>
+              <div class="price-total-display">
+                <small>¥</small>
+                <strong>{{ orderTotal }}</strong>
+              </div>
+            </div>
+
+            <!-- 费用拆解 -->
+            <div class="price-breakdown-list">
+              <div class="breakdown-row">
+                <span class="b-label">账号基础租金</span>
+                <span class="b-val">¥{{ formatMoney(orderPriceBreakdown.rent) }}</span>
+              </div>
+              <div v-if="orderPriceBreakdown.consumable > 0" class="breakdown-row">
+                <span class="b-label">随号额外物资</span>
+                <span class="b-val">¥{{ formatMoney(orderPriceBreakdown.consumable) }}</span>
+              </div>
+            </div>
+
+            <!-- 押金行 -->
+            <div class="deposit-guarantee-row">
+              <div class="dep-left">
+                <span class="dep-title">押金另付</span>
+                <small class="dep-sub">归还验收无损自动原路退还</small>
+              </div>
+              <strong class="dep-val">
+                {{ listing.deposit_amount_cent > 0 ? `¥${formatCent(listing.deposit_amount_cent)}` : '免押金' }}
+              </strong>
+            </div>
+          </div>
+
+          <!-- 规格速览确认清单 -->
+          <div class="order-quick-summary">
+            <div class="summary-item">
+              <span class="s-label">区服方式</span>
+              <strong class="s-val">{{ getServerRegion(listing) }} · {{ getLoginMethod(listing) }}</strong>
+            </div>
+            <div class="summary-item">
+              <span class="s-label">预计可租</span>
+              <strong class="s-val text-green">{{ formatEstimatedRentalDuration(listing) }}</strong>
+            </div>
+            <div class="summary-item">
+              <span class="s-label">方便上号</span>
+              <strong class="s-val">{{ getOnlineTimeText(listing) || '--' }}</strong>
+            </div>
+          </div>
+
+          <!-- 下单操作区 -->
+          <div class="order-cta-block">
+            <button
+              type="button"
+              class="primary-order-btn"
+              :disabled="listing.in_transaction || ordering || agreementsLoading"
+              @click="handleCreateOrder"
+            >
+              <el-icon :size="18"><ShoppingCart /></el-icon>
+              <span>{{ listing.in_transaction ? '该账号交易中' : '立即下单租用' }}</span>
+            </button>
+
+            <button
+              type="button"
+              class="secondary-favorite-btn"
+              :class="{ 'is-active': listingFavorited }"
+              @click="handleToggleFavorite"
+            >
+              <el-icon :size="16">
+                <component :is="listingFavorited ? StarFilled : Star" />
+              </el-icon>
+              <span>{{ listingFavorited ? '取消收藏' : '收藏账号' }}</span>
+            </button>
+          </div>
+
+          <!-- 底部安全信任脚标 -->
+          <div class="order-panel-trust-footer">
+            <div class="trust-badge-row">
+              <span><van-icon name="passed" /> 平台托管</span>
+              <span><van-icon name="passed" /> 极速验号</span>
+              <span><van-icon name="passed" /> 秒退押金</span>
+            </div>
+          </div>
+        </div>
       </aside>
     </div>
 
+    <!-- 下单协议确认弹窗 (保持完整业务逻辑) -->
     <el-dialog
       v-model="agreementVisible"
       title="下单协议确认"
@@ -583,7 +820,7 @@ function goBack() {
       :close-on-click-modal="false"
     >
       <div v-if="agreements" class="agreement-dialog-body">
-        <p class="agreement-tip">请完整阅读并勾选以下两份协议后继续下单。</p>
+        <p class="agreement-tip">请完整阅读并勾选以下两份协议后继续下单：</p>
         <div class="agreement-grid">
           <section class="agreement-panel">
             <h3>{{ agreements.virtual_asset_purchase.title }}</h3>