diff --git a/pwuniapp/App.vue b/pwuniapp/App.vue
index ff08db4..f7013e9 100644
--- a/pwuniapp/App.vue
+++ b/pwuniapp/App.vue
@@ -390,4 +390,47 @@ body:has(.theme-warm) uni-tabbar [class*="active"] span {
   font-weight: 700 !important;
 }
 /* #endif */
+
+/* ===== 高级感设计系统扩展（轻奢夜色 · 克制霓虹） ===== */
+:root, page {
+  --surface-0: #070B14;
+  --surface-1: #0F1626;
+  --surface-2: #161F33;
+  --surface-3: #1E2942;
+  --hairline: rgba(255, 255, 255, 0.08);
+  --hairline-strong: rgba(255, 255, 255, 0.14);
+  --gold: #D9A441;
+  --emerald: #10B981;
+  --radius-sm: 12rpx;
+  --radius-md: 20rpx;
+  --radius-lg: 28rpx;
+  --radius-xl: 36rpx;
+  --sp-1: 8rpx;
+  --sp-2: 16rpx;
+  --sp-3: 24rpx;
+  --sp-4: 32rpx;
+  --sp-5: 48rpx;
+  --sp-6: 64rpx;
+  --motion-fast: 120ms;
+  --motion-base: 220ms;
+  --motion-slow: 360ms;
+  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --shadow-card: 0 12rpx 32rpx rgba(0, 0, 0, 0.26);
+  --shadow-float: 0 24rpx 60rpx rgba(0, 0, 0, 0.38);
+  --font-num: 'DIN Alternate', 'SF Pro Display', 'Helvetica Neue', monospace;
+}
+
+page:has(.theme-warm), page.theme-warm, .theme-warm {
+  --surface-0: #FDFBF7;
+  --surface-1: #FFFFFF;
+  --surface-2: #F8F5F0;
+  --surface-3: #F1ECE4;
+  --hairline: #F0ECE4;
+  --hairline-strong: #E7E5E4;
+  --gold: #C2410C;
+  --emerald: #059669;
+  --shadow-card: 0 12rpx 28rpx rgba(28, 25, 23, 0.06);
+  --shadow-float: 0 24rpx 56rpx rgba(28, 25, 23, 0.12);
+}
 </style>
diff --git a/pwuniapp/components/CustomTabBar.vue b/pwuniapp/components/CustomTabBar.vue
index 2c70c06..4742dd3 100644
--- a/pwuniapp/components/CustomTabBar.vue
+++ b/pwuniapp/components/CustomTabBar.vue
@@ -431,4 +431,86 @@ const handlePublish = () => {
     }
   }
 }
+/* ===== Premium visual layer: 玻璃悬浮导航 ===== */
+.custom-tabbar-root {
+  .tabbar-container {
+    background: rgba(13, 20, 36, 0.88);
+    backdrop-filter: blur(20px) saturate(140%);
+    border-top: 1rpx solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 -12rpx 36rpx rgba(0, 0, 0, 0.28);
+  }
+
+  .tab-item {
+    transition: transform var(--motion-fast, 120ms) var(--ease-out, ease-out);
+
+    &:active {
+      transform: scale(0.96);
+    }
+
+    .tab-icon-svg {
+      transition: transform 0.2s var(--ease-out, ease-out), opacity 0.2s ease;
+    }
+
+    .tab-label {
+      letter-spacing: 0.2rpx;
+    }
+
+    &.active .tab-icon-svg {
+      transform: translateY(-2rpx) scale(1.04);
+    }
+
+    &.active::after {
+      content: '';
+      position: absolute;
+      bottom: 8rpx;
+      left: 50%;
+      width: 24rpx;
+      height: 4rpx;
+      border-radius: 4rpx;
+      background: linear-gradient(90deg, #818CF8, #6366F1);
+      transform: translateX(-50%);
+      box-shadow: 0 0 10rpx rgba(99, 102, 241, 0.5);
+    }
+  }
+
+  .special-item-wrap {
+    .plus-circle-btn {
+      background: linear-gradient(145deg, #818CF8 0%, #6366F1 46%, #7C3AED 100%);
+      border-width: 5rpx;
+      box-shadow:
+        0 12rpx 28rpx rgba(99, 102, 241, 0.4),
+        0 0 0 8rpx rgba(99, 102, 241, 0.08);
+    }
+
+    &:active .plus-circle-btn {
+      transform: scale(0.94);
+    }
+  }
+
+  .radar-item-wrap.active::after {
+    background: linear-gradient(90deg, #6EE7B7, #10B981);
+    box-shadow: 0 0 10rpx rgba(16, 185, 129, 0.5);
+  }
+
+  &.theme-warm {
+    .tabbar-container {
+      background: rgba(255, 255, 255, 0.9);
+      backdrop-filter: blur(20px) saturate(130%);
+      border-top-color: #F0ECE4;
+      box-shadow: 0 -12rpx 30rpx rgba(28, 25, 23, 0.07);
+    }
+
+    .tab-item.active::after {
+      background: linear-gradient(90deg, #FB923C, #EA580C);
+      box-shadow: 0 0 10rpx rgba(234, 88, 12, 0.35);
+    }
+
+    .special-item-wrap .plus-circle-btn {
+      background: linear-gradient(145deg, #FB923C 0%, #EA580C 55%, #C2410C 100%);
+      box-shadow:
+        0 12rpx 26rpx rgba(234, 88, 12, 0.32),
+        0 0 0 8rpx rgba(234, 88, 12, 0.07);
+    }
+  }
+}
 </style>
diff --git a/pwuniapp/pages/expert/radar.vue b/pwuniapp/pages/expert/radar.vue
index ec3fe36..316bf43 100644
--- a/pwuniapp/pages/expert/radar.vue
+++ b/pwuniapp/pages/expert/radar.vue
@@ -1269,4 +1269,230 @@ const handleTakeOrder = (order) => {
     }
   }
 }
+/* ===== Premium visual layer: 雷达感知舱 ===== */
+.radar-page-container {
+  background:
+    radial-gradient(110% 46% at 50% -6%, rgba(16, 185, 129, 0.14), transparent 62%),
+    radial-gradient(80% 40% at 100% 24%, rgba(217, 164, 65, 0.05), transparent 70%),
+    var(--surface-0);
+
+  .location-top-bar {
+    background: rgba(15, 22, 38, 0.82);
+    border-color: var(--hairline);
+    box-shadow:
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.05),
+      0 14rpx 34rpx rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(16px);
+  }
+
+  .radar-cockpit-card {
+    background:
+      radial-gradient(circle at 50% 42%, rgba(16, 185, 129, 0.11), transparent 62%),
+      linear-gradient(180deg, #0B1322 0%, #080E1A 100%);
+    border-color: rgba(16, 185, 129, 0.18);
+    box-shadow:
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.05),
+      0 22rpx 52rpx rgba(0, 0, 0, 0.34);
+  }
+
+  .radar-visual-stage {
+    background:
+      radial-gradient(circle at center, rgba(16, 185, 129, 0.08), transparent 66%),
+      rgba(5, 9, 18, 0.62);
+    border: 1rpx solid rgba(255, 255, 255, 0.05);
+  }
+
+  .radar-circle {
+    border-color: rgba(110, 231, 183, 0.12);
+
+    &.circle-3 {
+      border-style: solid;
+      border-color: rgba(110, 231, 183, 0.18);
+    }
+  }
+
+  .radar-sweeper {
+    background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.18) 0deg, rgba(16, 185, 129, 0) 64deg);
+    animation-duration: 4.5s;
+  }
+
+  .center-expert-avatar .expert-img {
+    border-width: 3rpx;
+    box-shadow: 0 0 18rpx rgba(16, 185, 129, 0.55);
+  }
+
+  .order-marker {
+    animation: radarMarkerIn 0.5s var(--ease-spring) both;
+
+    .marker-pin {
+      border-width: 2rpx;
+      box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.42);
+    }
+
+    .marker-tooltip {
+      background: rgba(5, 9, 18, 0.72);
+      border-color: rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(8px);
+    }
+
+    &.selected .marker-pin {
+      border-color: #F1C878;
+      box-shadow: 0 0 0 4rpx rgba(241, 200, 120, 0.12), 0 0 20rpx rgba(241, 200, 120, 0.45);
+    }
+  }
+
+  .cruise-switch-box {
+    background: rgba(15, 22, 38, 0.72);
+    border-color: var(--hairline);
+  }
+
+  .nearby-section {
+    .section-head .sec-title {
+      letter-spacing: 0.3rpx;
+    }
+
+    .orders-stream {
+      gap: 22rpx;
+
+      .nearby-card {
+        position: relative;
+        overflow: hidden;
+        background: linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%);
+        border: 1rpx solid var(--hairline);
+        border-radius: 24rpx;
+        box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.22);
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 26rpx;
+          bottom: 26rpx;
+          width: 4rpx;
+          border-radius: 4rpx;
+          background: linear-gradient(180deg, #6EE7B7, #10B981);
+          opacity: 0.75;
+        }
+
+        &.highlighted {
+          border-color: rgba(16, 185, 129, 0.38);
+          background: linear-gradient(180deg, rgba(25, 40, 61, 0.98) 0%, rgba(14, 24, 42, 0.98) 100%);
+          box-shadow:
+            0 0 0 1rpx rgba(16, 185, 129, 0.2),
+            0 18rpx 40rpx rgba(0, 0, 0, 0.26);
+        }
+
+        .card-title {
+          font-size: 29rpx;
+          letter-spacing: 0.2rpx;
+        }
+
+        .demand-desc-box {
+          background: rgba(255, 255, 255, 0.035);
+          border: 1rpx solid rgba(255, 255, 255, 0.045);
+        }
+
+        .price-val {
+          font-size: 34rpx;
+          font-family: var(--font-num, monospace);
+        }
+
+        .btn-take-order {
+          border-radius: 999rpx;
+          padding: 13rpx 30rpx;
+          box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.28);
+        }
+      }
+
+      .pool-empty {
+        background: rgba(255, 255, 255, 0.02);
+        border-color: rgba(255, 255, 255, 0.09);
+      }
+    }
+  }
+}
+
+.radar-page-container.theme-warm {
+  background:
+    radial-gradient(100% 44% at 50% -6%, rgba(16, 185, 129, 0.08), transparent 62%),
+    #FDFBF7;
+
+  .location-top-bar {
+    background: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
+  }
+
+  .radar-cockpit-card {
+    background:
+      radial-gradient(circle at 50% 42%, rgba(16, 185, 129, 0.07), transparent 62%),
+      #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 18rpx 40rpx rgba(28, 25, 23, 0.06);
+  }
+
+  .radar-visual-stage {
+    background:
+      radial-gradient(circle at center, rgba(16, 185, 129, 0.06), transparent 66%),
+      #FAF8F4;
+    border-color: #F0ECE4;
+  }
+
+  .radar-circle {
+    border-color: rgba(5, 150, 105, 0.12);
+
+    &.circle-3 {
+      border-color: rgba(5, 150, 105, 0.18);
+    }
+  }
+
+  .radar-axis-x,
+  .radar-axis-y {
+    background: rgba(5, 150, 105, 0.12);
+  }
+
+  .cruise-switch-box {
+    background: #F8F5F0;
+    border-color: #F0ECE4;
+  }
+
+  .nearby-section .orders-stream .nearby-card {
+    background: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
+
+    &.highlighted {
+      background: #FFFDF8;
+      border-color: rgba(234, 88, 12, 0.28);
+    }
+
+    .card-title {
+      color: #1C1917;
+    }
+
+    .demand-desc-box {
+      background: #FAF8F4;
+      border-color: #F0ECE4;
+
+      .demand-text {
+        color: #78716C;
+      }
+    }
+
+    .buyer-name {
+      color: #44403C;
+    }
+  }
+}
+
+@keyframes radarMarkerIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
 </style>
diff --git a/pwuniapp/pages/index/index.vue b/pwuniapp/pages/index/index.vue
index 7094561..31b9916 100644
--- a/pwuniapp/pages/index/index.vue
+++ b/pwuniapp/pages/index/index.vue
@@ -70,7 +70,10 @@
       <view class="section-title-wrap">
         <view class="section-title">
           <view class="title-line"></view>
-          <text>精选大神</text>
+          <view class="title-copy">
+            <text class="title-main">精选大神</text>
+            <text class="title-sub">DISCOVER · 同城高评分陪伴</text>
+          </view>
         </view>
         <view class="section-more btn-active" @click="startInstantMatch">
           <view class="pulse-point"></view>
@@ -117,9 +120,10 @@
       <!-- 陪玩大神卡片网格 -->
       <view class="expert-grid">
         <view
-          v-for="expert in filteredExperts"
+          v-for="(expert, index) in filteredExperts"
           :key="expert.id"
           class="expert-card card-active"
+          :style="{ animationDelay: `${Math.min(index, 8) * 40}ms` }"
           @click="goToExpert(expert.id)"
         >
           <!-- 封面图构图优化：高保真黄金比例与底部流光渐变 -->
@@ -141,6 +145,7 @@
               <view class="gender-tag" :class="expert.gender">
                 <image class="gender-svg" :src="expert.gender === 'female' ? ICONS.female : ICONS.male" mode="aspectFit" />
               </view>
+              <text v-if="expert.levelTag" class="verified-chip">{{ expert.levelTag }}</text>
             </view>
             <view class="city-badge" v-if="expert.city">
               <image class="city-pin-svg" :src="ICONS.mapPin" mode="aspectFit" />
@@ -213,7 +218,7 @@
     </view>
 
     <!-- 雷达即时速配在线大神弹窗 -->
-    <view class="price-modal-mask" v-if="showMatchModal" @click="closeMatchModal">
+    <view class="price-modal-mask match-modal-mask" v-if="showMatchModal" @click="closeMatchModal">
       <view class="price-modal-box match-modal-box" @click.stop>
         <view class="modal-title-row">
           <text class="modal-title">在线大神即时匹配</text>
@@ -1880,4 +1885,388 @@ const navTo = (url) => {
     }
   }
 }
+/* ===== Premium visual layer: 轻奢夜色 · 克制霓虹 ===== */
+.index-container {
+  background:
+    radial-gradient(110% 48% at 50% -8%, rgba(99, 102, 241, 0.20), transparent 62%),
+    radial-gradient(90% 40% at 110% 28%, rgba(217, 164, 65, 0.06), transparent 70%),
+    var(--surface-0);
+}
+
+.index-container .header-search {
+  background: rgba(7, 11, 20, 0.88);
+  backdrop-filter: blur(18px);
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.04);
+  padding-bottom: 24rpx;
+
+  .search-box {
+    height: 84rpx;
+    background: rgba(22, 31, 51, 0.9);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow:
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.06),
+      0 10rpx 28rpx rgba(0, 0, 0, 0.18);
+
+    &:focus-within {
+      border-color: rgba(129, 140, 248, 0.65);
+      box-shadow:
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.08),
+        0 0 0 4rpx rgba(99, 102, 241, 0.12);
+    }
+  }
+
+  .hot-tag {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1rpx solid rgba(255, 255, 255, 0.07);
+    color: #A7B3CB;
+  }
+}
+
+.index-container .banner-swiper {
+  height: 236rpx;
+  margin-bottom: 26rpx;
+
+  .banner-card {
+    border-radius: 28rpx;
+    padding: 30rpx 32rpx;
+    box-shadow: 0 18rpx 44rpx rgba(0, 0, 0, 0.32);
+  }
+
+  .banner-overlay {
+    background: linear-gradient(100deg, rgba(5, 9, 18, 0.88) 0%, rgba(5, 9, 18, 0.42) 55%, rgba(5, 9, 18, 0.18) 100%);
+  }
+
+  .banner-content {
+    .banner-tag {
+      background: rgba(7, 11, 20, 0.42);
+      border-color: rgba(255, 255, 255, 0.2);
+      letter-spacing: 1rpx;
+    }
+    .banner-title {
+      font-size: 34rpx;
+      letter-spacing: 0.5rpx;
+      line-height: 1.35;
+    }
+    .banner-sub {
+      color: rgba(255, 255, 255, 0.78);
+      letter-spacing: 0.3rpx;
+    }
+  }
+}
+
+.index-container .quick-grid.grid-card {
+  background: rgba(15, 22, 38, 0.78);
+  border: 1rpx solid var(--hairline);
+  border-radius: 26rpx;
+  box-shadow:
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.05),
+    0 14rpx 36rpx rgba(0, 0, 0, 0.2);
+
+  .quick-icon-bg {
+    border-radius: 26rpx;
+    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.06);
+  }
+
+  .quick-title {
+    font-size: 21rpx;
+    color: #CBD5E1;
+    font-weight: 600;
+    letter-spacing: 0.2rpx;
+  }
+
+  .quick-badge {
+    background: linear-gradient(135deg, #D9A441, #B7791F);
+    box-shadow: 0 3rpx 10rpx rgba(217, 164, 65, 0.3);
+  }
+}
+
+.index-container .section-title-wrap {
+  padding-bottom: 18rpx;
+
+  .section-title {
+    .title-line {
+      width: 6rpx;
+      height: 36rpx;
+      border-radius: 3rpx;
+      background: linear-gradient(180deg, #F1C878, #D9A441);
+      box-shadow: 0 0 14rpx rgba(217, 164, 65, 0.25);
+    }
+
+    .title-copy {
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+    }
+
+    .title-main {
+      font-size: 32rpx;
+      line-height: 1.2;
+      font-weight: 800;
+      letter-spacing: 0.3rpx;
+    }
+
+    .title-sub {
+      font-size: 17rpx;
+      line-height: 1.2;
+      color: #64748B;
+      letter-spacing: 2rpx;
+      font-weight: 500;
+    }
+  }
+
+  .section-more {
+    background: rgba(16, 185, 129, 0.08);
+    border: 1rpx solid rgba(16, 185, 129, 0.22);
+    border-radius: 999rpx;
+    padding: 8rpx 18rpx;
+    font-weight: 600;
+  }
+}
+
+.index-container .filter-toolbar {
+  padding: 0 32rpx 20rpx;
+  gap: 12rpx;
+  flex-wrap: wrap;
+
+  .filter-pill {
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1rpx solid var(--hairline);
+    border-radius: 999rpx;
+    padding: 10rpx 20rpx;
+    color: #A7B3CB;
+
+    &.active {
+      background: rgba(99, 102, 241, 0.14);
+      border-color: rgba(129, 140, 248, 0.38);
+      color: #C7D2FE;
+    }
+  }
+}
+
+.index-container .expert-grid {
+  gap: 22rpx;
+
+  .expert-card {
+    background: linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%);
+    border: 1rpx solid var(--hairline);
+    border-radius: 24rpx;
+    box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.24);
+    animation: premiumCardEnter 0.5s var(--ease-out) both;
+
+    .card-cover-wrap {
+      height: 300rpx;
+    }
+
+    .card-cover {
+      transition: transform 0.45s var(--ease-out);
+    }
+
+    &:active .card-cover {
+      transform: scale(1.035);
+    }
+
+    .cover-gradient {
+      background: linear-gradient(180deg, transparent 45%, rgba(5, 9, 18, 0.72) 100%);
+    }
+
+    .status-tag {
+      background: rgba(7, 11, 20, 0.55);
+      border: 1rpx solid rgba(255, 255, 255, 0.16);
+      backdrop-filter: blur(10px);
+
+      &.online {
+        color: #6EE7B7;
+      }
+    }
+
+    .game-badge {
+      background: rgba(7, 11, 20, 0.48);
+      border: 1rpx solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(8px);
+    }
+
+    .card-body {
+      padding: 20rpx 18rpx 18rpx;
+    }
+
+    .nickname {
+      font-size: 28rpx;
+      font-weight: 700;
+      letter-spacing: 0.2rpx;
+    }
+
+    .verified-chip {
+      flex-shrink: 0;
+      font-size: 15rpx;
+      color: #F1C878;
+      background: rgba(217, 164, 65, 0.1);
+      border: 1rpx solid rgba(217, 164, 65, 0.3);
+      border-radius: 6rpx;
+      padding: 2rpx 8rpx;
+      font-weight: 600;
+    }
+
+    .rank-badge,
+    .city-badge {
+      color: #94A3B8;
+    }
+
+    .voice-bar {
+      background: rgba(99, 102, 241, 0.09);
+      border: 1rpx solid rgba(99, 102, 241, 0.16);
+      border-radius: 12rpx;
+    }
+
+    .price-val {
+      font-size: 36rpx;
+      letter-spacing: 0.3rpx;
+    }
+
+    .order-count {
+      color: #7C89A6;
+    }
+  }
+}
+
+.index-container .match-modal-mask {
+  align-items: flex-end;
+}
+
+.index-container .match-modal-mask .match-modal-box {
+  width: 100%;
+  max-width: 450px;
+  border-radius: 32rpx 32rpx 0 0;
+  border-bottom: none;
+  padding: 22rpx 36rpx calc(38rpx + env(safe-area-inset-bottom));
+  animation: premiumSheetUp 0.32s var(--ease-out) both;
+}
+
+.index-container .match-modal-mask .match-modal-box::before {
+  content: '';
+  display: block;
+  width: 72rpx;
+  height: 8rpx;
+  border-radius: 8rpx;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 auto 20rpx;
+}
+
+/* 暖色主题 */
+.index-container.theme-warm {
+  background:
+    radial-gradient(100% 46% at 50% -8%, rgba(249, 115, 22, 0.10), transparent 62%),
+    #FDFBF7;
+
+  .header-search {
+    background: rgba(253, 251, 247, 0.92);
+    border-bottom-color: rgba(28, 25, 23, 0.05);
+
+    .search-box {
+      background: #FFFFFF;
+      border-color: #EEEAE3;
+      box-shadow: 0 10rpx 26rpx rgba(28, 25, 23, 0.05);
+    }
+
+    .hot-tag {
+      background: #F7F3EC;
+      border-color: #EEEAE3;
+      color: #78716C;
+    }
+  }
+
+  .quick-grid.grid-card {
+    background: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
+  }
+
+  .section-title-wrap {
+    .title-main {
+      color: #1C1917;
+    }
+    .title-sub {
+      color: #A8A29E;
+    }
+  }
+
+  .filter-toolbar .filter-pill {
+    background: #F8F5F0;
+    border-color: #EEEAE3;
+    color: #78716C;
+
+    &.active {
+      background: #FFF7ED;
+      border-color: rgba(234, 88, 12, 0.35);
+      color: #C2410C;
+    }
+  }
+
+  .expert-grid .expert-card {
+    background: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 12rpx 30rpx rgba(28, 25, 23, 0.06);
+
+    .cover-gradient {
+      background: linear-gradient(180deg, transparent 50%, rgba(28, 25, 23, 0.55) 100%);
+    }
+
+    .status-tag {
+      background: rgba(255, 255, 255, 0.82);
+      border-color: rgba(28, 25, 23, 0.08);
+      color: #57534E;
+      backdrop-filter: blur(10px);
+
+      &.online {
+        color: #047857;
+      }
+    }
+
+    .game-badge {
+      background: rgba(255, 255, 255, 0.84);
+      border-color: rgba(28, 25, 23, 0.08);
+      color: #57534E;
+    }
+
+    .voice-bar {
+      background: #FFF7ED;
+      border-color: #FED7AA;
+    }
+
+    .nickname {
+      color: #1C1917;
+    }
+  }
+
+  .match-modal-mask .match-modal-box {
+    background: #FFFFFF;
+    border-color: #E7E5E4;
+  }
+
+  .match-modal-mask .match-modal-box::before {
+    background: rgba(28, 25, 23, 0.14);
+  }
+}
+
+@keyframes premiumCardEnter {
+  from {
+    opacity: 0;
+    transform: translateY(16rpx) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes premiumSheetUp {
+  from {
+    opacity: 0;
+    transform: translateY(48rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>