's'

app/vip/components/vip.module.css

@@ -71,6 +71,72 @@
   padding: 1.5rem 0;
 }
 
+/* PC 首页：Hero + 统计 模块上方 */
+.heroSection {
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+  .heroSection {
+    padding-top: 3rem;
+    padding-bottom: 1.5rem;
+  }
+  .heroSection p:first-of-type {
+    margin-bottom: 1.25rem;
+  }
+  .heroSection h1 {
+    font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
+    margin-bottom: 0.75rem;
+  }
+  .heroSection p:last-of-type {
+    font-size: 1.25rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heroSection {
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.statsSection {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+  .statsSection {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .statsSection {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+.topicsSection .sectionTitle {
+  margin-bottom: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .topicsSection {
+    padding-top: 2.5rem;
+  }
+  .topicsSection .sectionTitle {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
 .sectionTitle {
   font-size: 1.25rem;
   font-weight: 600;
@@ -174,7 +240,7 @@
 
 @media (min-width: 640px) {
   .statsGrid {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 
@@ -204,9 +270,11 @@
 }
 
 .topicCard {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 0.5rem;
   padding: 1.25rem 1rem;
   background: var(--card);
@@ -217,6 +285,14 @@
   transition: border-color 0.2s, transform 0.2s;
 }
 
+.topicCardInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 .topicCard:hover {
   border-color: rgba(245, 158, 11, 0.4);
   transform: translateY(-2px);
@@ -238,6 +314,14 @@
   color: var(--muted-foreground);
 }
 
+.topicLock {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  font-size: 0.85rem;
+  opacity: 0.85;
+}
+
 /* Loading */
 .loading {
   min-height: 100vh;