feat(listing): 优化优质号主发布与极品专区体验

frontend/src/features/seller/views/MobileSellerListingCreateView.css

@@ -706,6 +706,19 @@
   gap: 8px;
 }
 
+.ratio-mode-grid.has-quality-owner .ratio-mode-btn:nth-of-type(1) {
+  order: 1;
+}
+
+.ratio-mode-grid.has-quality-owner .ratio-mode-btn:nth-of-type(2) {
+  order: 3;
+  grid-column: 1 / -1;
+}
+
+.ratio-mode-grid.has-quality-owner .ratio-mode-btn:nth-of-type(3) {
+  order: 2;
+}
+
 .ratio-mode-btn {
   display: grid;
   gap: 5px;
@@ -737,6 +750,44 @@
   line-height: 1.25;
 }
 
+.ratio-mode-btn em {
+  width: max-content;
+  margin: 0 auto;
+  padding: 2px 7px;
+  border-radius: 9px;
+  background: #fff3d6;
+  color: #91600d;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.ratio-mode-btn--quality {
+  border-color: #dfc98c;
+  background: linear-gradient(135deg, #fffaf0 0%, #faf6ff 100%);
+  text-align: left;
+}
+
+.ratio-mode-btn--quality strong {
+  color: #7a4b0d;
+}
+
+.ratio-mode-btn.ratio-mode-btn--quality.active {
+  border-color: #b7791f;
+  background: linear-gradient(135deg, #fff4d8 0%, #f5edff 100%);
+  box-shadow: 0 0 0 2px rgba(183, 121, 31, 0.12);
+  color: #7a4b0d;
+}
+
+.ratio-mode-btn.ratio-mode-btn--quality.active em {
+  background: #b7791f;
+  color: #fff;
+}
+
+.ratio-mode-btn.ratio-mode-btn--quality.active span {
+  color: #7a4b0d;
+}
+
 .ratio-mode-btn.active {
   border-color: #ff6a00;
   background: #fff7f0;
@@ -880,6 +931,16 @@
   background: #f8fafc;
 }
 
+.premium-coverage-card.is-quality-owner {
+  border-color: #e6d7b5;
+  background: linear-gradient(145deg, #fffdf8 0%, #faf8ff 100%);
+}
+
+.premium-coverage-card.is-premium-active {
+  border-color: #d4ad5e;
+  box-shadow: 0 8px 20px rgba(139, 92, 20, 0.08);
+}
+
 .premium-zone-row,
 .coverage-heading {
   display: flex;
@@ -888,6 +949,34 @@
   gap: 12px;
 }
 
+.premium-zone-copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.premium-zone-title {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.premium-zone-title em {
+  padding: 2px 7px;
+  border-radius: 9px;
+  background: #fff3d6;
+  color: #8b5a0d;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.premium-zone-title em.is-locked {
+  background: #f1f3f6;
+  color: #7b8492;
+}
+
 .premium-zone-row strong,
 .coverage-heading strong {
   display: block;
@@ -905,16 +994,46 @@
   line-height: 1.45;
 }
 
-.quality-owner-link {
-  justify-self: start;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: #7c3aed;
-  font-size: 12px;
+.premium-zone-action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 7px;
+}
+
+.premium-zone-action > span {
+  margin: 0;
+  font-size: 10px;
   font-weight: 800;
 }
 
+.premium-zone-action.is-active > span {
+  color: #6d35c7;
+}
+
+.premium-zone-action :deep(.van-switch--on) {
+  background: #7c3aed;
+}
+
+.premium-zone-action :deep(.van-switch--disabled) {
+  opacity: 0.78;
+}
+
+.quality-owner-link {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 4px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid #ddd0f2;
+  border-radius: 15px;
+  background: #faf5ff;
+  color: #6d35c7;
+  font-size: 12px;
+  font-weight: 900;
+}
+
 .coverage-option-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -939,6 +1058,32 @@
   font-weight: 800;
 }
 
+.coverage-option > .coverage-option-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  color: inherit;
+  font-size: inherit;
+  line-height: normal;
+}
+
+.coverage-option .coverage-rate {
+  flex-shrink: 0;
+  padding: 2px 6px;
+  border-radius: 8px;
+  background: #f0f2f5;
+  color: #505a68;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.coverage-option .coverage-rate.is-insurance {
+  background: #f3ebff;
+  color: #6d35c7;
+}
+
 .coverage-option span {
   color: #858c96;
   font-size: 10px;
@@ -952,6 +1097,13 @@
   font-weight: 800;
 }
 
+.coverage-option .coverage-special-rate {
+  width: max-content;
+  padding: 2px 6px;
+  border-radius: 8px;
+  background: #f3ebff;
+}
+
 .coverage-option.active {
   border-color: #7c3aed;
   background: #faf5ff;