diff --git a/apps/admin-web/src/components/kol/KolPackageCard.vue b/apps/admin-web/src/components/kol/KolPackageCard.vue
new file mode 100644
index 0000000..4d50d9e
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolPackageCard.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { UserOutlined, TagOutlined, TeamOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
+import type { KolPackageSummary } from "@geo/shared-types";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+  package: KolPackageSummary;
+}>();
+
+const emit = defineEmits<{
+  (e: "click", id: number): void;
+}>();
+
+const { t } = useI18n();
+
+function handleClick() {
+  emit("click", props.package.id);
+}
+</script>
+
+<template>
+  <a-card hoverable class="kol-package-card" @click="handleClick">
+    <template #cover>
+      <div v-if="props.package.cover_url" class="card-cover-image">
+        <img alt="cover" :src="props.package.cover_url" />
+      </div>
+      <div v-else class="card-cover-fallback">
+        <ThunderboltOutlined class="fallback-icon" />
+      </div>
+    </template>
+    <a-card-meta>
+      <template #title>
+        <div class="card-title">
+          {{ props.package.name }}
+        </div>
+      </template>
+      <template #description>
+        <div class="card-description">
+          <div class="kol-info">
+            <a-avatar :src="props.package.kol_avatar_url" size="small">
+              <template #icon><UserOutlined /></template>
+            </a-avatar>
+            <span class="kol-name">{{ props.package.kol_display_name }}</span>
+          </div>
+          <div class="industry-badge" v-if="props.package.industry">
+            <a-tag color="blue">
+              <template #icon><TagOutlined /></template>
+              {{ props.package.industry }}
+            </a-tag>
+          </div>
+          <div class="stats">
+            <span class="stat-item">
+              <ThunderboltOutlined />
+              {{ t('kol.marketplace.prompts', { count: props.package.prompt_count }) }}
+            </span>
+            <span class="stat-item">
+              <TeamOutlined />
+              {{ t('kol.marketplace.subscribers', { count: props.package.subscriber_count }) }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </a-card-meta>
+  </a-card>
+</template>
+
+<style scoped>
+.kol-package-card {
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s;
+  height: 100%;
+}
+
+.kol-package-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+.card-cover-image {
+  height: 160px;
+  overflow: hidden;
+}
+
+.card-cover-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-cover-fallback {
+  height: 160px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fallback-icon {
+  font-size: 48px;
+  color: #bae0ff;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-description {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.kol-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kol-name {
+  font-size: 14px;
+  color: #595959;
+}
+
+.industry-badge {
+  margin-top: 4px;
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #8c8c8c;
+  margin-top: 4px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:deep(.ant-card-body) {
+  padding: 16px;
+}
+
+:deep(.ant-card-meta-title) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/admin-web/src/lib/api.ts b/apps/admin-web/src/lib/api.ts
index 96dac48..3990c7d 100644
--- a/apps/admin-web/src/lib/api.ts
+++ b/apps/admin-web/src/lib/api.ts
@@ -32,6 +32,9 @@ import type {
   KolAssistSubmitResponse,
   KolAssistTask,
   KolPackageSummary,
+  KolPackageDetail,
+  KolSubscription,
+  KolSubscriptionPromptCard,
   KolProfile,
   KolPromptDetail,
   KolPromptRevision,
@@ -333,6 +336,29 @@ export const kolManageApi = {
   },
 };
 
+export const kolMarketplaceApi = {
+  list(params: { industry?: string; keyword?: string; limit?: number; offset?: number }) {
+    return apiClient.get<KolPackageSummary[]>("/api/tenant/kol/marketplace", { params });
+  },
+  detail(id: number) {
+    return apiClient.get<KolPackageDetail>(`/api/tenant/kol/marketplace/packages/${id}`);
+  },
+  subscribe(id: number) {
+    return apiClient.post<KolSubscription, Record<string, never>>(
+      `/api/tenant/kol/marketplace/packages/${id}/subscribe`,
+      {},
+    );
+  },
+  mySubscriptions() {
+    return apiClient.get<KolSubscription[]>("/api/tenant/kol/marketplace/my-subscriptions");
+  },
+  mySubscriptionPrompts() {
+    return apiClient.get<KolSubscriptionPromptCard[]>(
+      "/api/tenant/kol/marketplace/my-subscription-prompts",
+    );
+  },
+};
+
 export const articlesApi = {
   list(params: ArticleListParams) {
     return apiClient.get<ArticleListResponse>("/api/tenant/articles", { params });
diff --git a/apps/admin-web/src/router/future-kol-views.d.ts b/apps/admin-web/src/router/future-kol-views.d.ts
index 8cbe11f..9aad9c1 100644
--- a/apps/admin-web/src/router/future-kol-views.d.ts
+++ b/apps/admin-web/src/router/future-kol-views.d.ts
@@ -5,20 +5,6 @@ declare module "@/views/KolDashboardView.vue" {
   export default component;
 }
 
-declare module "@/views/KolMarketplaceView.vue" {
-  import type { DefineComponent } from "vue";
-
-  const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-  export default component;
-}
-
-declare module "@/views/KolPackageDetailView.vue" {
-  import type { DefineComponent } from "vue";
-
-  const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-  export default component;
-}
-
 declare module "@/views/KolGenerateView.vue" {
   import type { DefineComponent } from "vue";
 
diff --git a/apps/admin-web/src/views/KolMarketplaceView.vue b/apps/admin-web/src/views/KolMarketplaceView.vue
new file mode 100644
index 0000000..41620e0
--- /dev/null
+++ b/apps/admin-web/src/views/KolMarketplaceView.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useQuery } from "@tanstack/vue-query";
+import { SearchOutlined } from "@ant-design/icons-vue";
+import KolPackageCard from "@/components/kol/KolPackageCard.vue";
+import { kolMarketplaceApi } from "@/lib/api";
+
+const router = useRouter();
+const { t } = useI18n();
+
+const filters = reactive({
+  industry: undefined as string | undefined,
+  keyword: "",
+});
+
+const debouncedKeyword = ref("");
+let debounceTimer: number | null = null;
+
+watch(() => filters.keyword, (newVal) => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = window.setTimeout(() => {
+    debouncedKeyword.value = newVal;
+  }, 300);
+});
+
+const marketplaceParams = computed(() => ({
+  industry: filters.industry === 'all' ? undefined : filters.industry,
+  keyword: debouncedKeyword.value || undefined,
+}));
+
+const marketplaceQuery = useQuery({
+  queryKey: computed(() => ["kol", "marketplace", marketplaceParams.value]),
+  queryFn: () => kolMarketplaceApi.list(marketplaceParams.value),
+});
+
+const industryOptions = computed(() => [
+  { label: t("kol.marketplace.filter.all"), value: "all" },
+  { label: "科技", value: "科技" },
+  { label: "生活", value: "生活" },
+  { label: "财经", value: "财经" },
+  { label: "教育", value: "教育" },
+  { label: "娱乐", value: "娱乐" },
+  { label: "其他", value: "其他" },
+]);
+
+function handleCardClick(id: number) {
+  void router.push({ name: "kol-package-detail", params: { id: String(id) } });
+}
+</script>
+
+<template>
+  <div class="kol-marketplace">
+    <div class="page-header">
+      <div class="header-content">
+        <h1>{{ t("kol.marketplace.title") }}</h1>
+        <p class="description">{{ t("route.templates.description") }}</p>
+      </div>
+    </div>
+
+    <div class="filters-card">
+      <div class="filter-item">
+        <label>{{ t("kol.marketplace.filter.industry") }}</label>
+        <a-select
+          v-model:value="filters.industry"
+          style="width: 160px"
+          :options="industryOptions"
+          :placeholder="t('common.selectPlease')"
+          allow-clear
+        />
+      </div>
+      <div class="filter-item">
+        <label>{{ t("kol.marketplace.filter.keyword") }}</label>
+        <a-input-search
+          v-model:value="filters.keyword"
+          style="width: 280px"
+          :placeholder="t('common.search')"
+          allow-clear
+        >
+          <template #enterButton>
+            <a-button type="primary">
+              <template #icon><SearchOutlined /></template>
+            </a-button>
+          </template>
+        </a-input-search>
+      </div>
+    </div>
+
+    <div class="marketplace-grid" v-if="marketplaceQuery.data.value?.length">
+      <a-row :gutter="[24, 24]">
+        <a-col
+          v-for="pkg in marketplaceQuery.data.value"
+          :key="pkg.id"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+        >
+          <KolPackageCard :package="pkg" @click="handleCardClick" />
+        </a-col>
+      </a-row>
+    </div>
+
+    <div v-else-if="marketplaceQuery.isPending.value" class="loading-state">
+      <a-spin size="large" />
+    </div>
+
+    <div v-else class="empty-state">
+      <a-empty :description="t('kol.marketplace.empty')" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kol-marketplace {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.page-header {
+  padding: 24px;
+  background: #fff;
+  border: 1px solid #e6edf5;
+  border-radius: 12px;
+}
+
+.header-content h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.description {
+  color: #8c8c8c;
+  font-size: 14px;
+  margin: 0;
+}
+
+.filters-card {
+  padding: 20px 24px;
+  background: #fff;
+  border: 1px solid #e6edf5;
+  border-radius: 12px;
+  display: flex;
+  gap: 32px;
+  align-items: center;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-item label {
+  font-weight: 500;
+  color: #1a1a1a;
+  white-space: nowrap;
+}
+
+.marketplace-grid {
+  margin-top: 8px;
+}
+
+.loading-state,
+.empty-state {
+  margin-top: 64px;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .filters-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  
+  .filter-item :deep(.ant-select),
+  .filter-item :deep(.ant-input-search) {
+    width: 100% !important;
+  }
+}
+</style>
diff --git a/apps/admin-web/src/views/KolPackageDetailView.vue b/apps/admin-web/src/views/KolPackageDetailView.vue
new file mode 100644
index 0000000..75176d7
--- /dev/null
+++ b/apps/admin-web/src/views/KolPackageDetailView.vue
@@ -0,0 +1,450 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
+import { message } from "ant-design-vue";
+import {
+  ArrowLeftOutlined,
+  UserOutlined,
+  TagOutlined,
+  ThunderboltOutlined,
+  TeamOutlined,
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  ExclamationCircleOutlined,
+} from "@ant-design/icons-vue";
+import { kolMarketplaceApi } from "@/lib/api";
+import { formatError } from "@/lib/errors";
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const queryClient = useQueryClient();
+
+const packageId = computed(() => Number(route.params.id));
+
+const packageQuery = useQuery({
+  queryKey: computed(() => ["kol", "package", packageId.value]),
+  queryFn: () => kolMarketplaceApi.detail(packageId.value),
+  enabled: computed(() => !isNaN(packageId.value)),
+});
+
+const mySubscriptionPromptsQuery = useQuery({
+  queryKey: ["kol", "my-subscription-prompts"],
+  queryFn: () => kolMarketplaceApi.mySubscriptionPrompts(),
+});
+
+const subscribeMutation = useMutation({
+  mutationFn: (id: number) => kolMarketplaceApi.subscribe(id),
+  onSuccess: () => {
+    message.success(t("common.submit"));
+    void queryClient.invalidateQueries({ queryKey: ["kol", "package", packageId.value] });
+  },
+  onError: (error) => {
+    message.error(formatError(error) || t("common.noData"));
+  },
+});
+
+const pkg = computed(() => packageQuery.data.value);
+const subscription = computed(() => pkg.value?.subscription);
+
+const subscriptionStatusMeta = computed(() => {
+  if (!subscription.value) return null;
+  switch (subscription.value.status) {
+    case "pending":
+      return { label: t("kol.package.pending"), color: "orange", icon: ClockCircleOutlined };
+    case "active":
+      return { label: t("kol.package.subscribed"), color: "success", icon: CheckCircleOutlined };
+    case "expired":
+      return { label: t("kol.package.expired"), color: "error", icon: ExclamationCircleOutlined };
+    case "revoked":
+      return { label: t("kol.package.revoked"), color: "default", icon: ExclamationCircleOutlined };
+    default:
+      return null;
+  }
+});
+
+function handleSubscribe() {
+  if (pkg.value) {
+    subscribeMutation.mutate(pkg.value.id);
+  }
+}
+
+function handleGenerate(promptId: number) {
+  const subPrompt = mySubscriptionPromptsQuery.data.value?.find(
+    (sp) => sp.prompt_id === promptId && sp.package_id === packageId.value
+  );
+  if (subPrompt) {
+    void router.push({ name: "kol-generate", params: { subscriptionPromptId: String(subPrompt.id) } });
+  }
+}
+
+function goBack() {
+  void router.push({ name: "kol-marketplace" });
+}
+</script>
+
+<template>
+  <div class="kol-package-detail">
+    <div class="detail-header">
+      <a-button type="link" @click="goBack" class="back-btn">
+        <template #icon><ArrowLeftOutlined /></template>
+        {{ t("common.back") }}
+      </a-button>
+    </div>
+
+    <div v-if="packageQuery.isPending.value" class="loading-state">
+      <a-spin size="large" />
+    </div>
+
+    <div v-else-if="pkg" class="detail-content">
+      <a-row :gutter="24">
+        <a-col :xs="24" :lg="16">
+          <section class="main-card">
+            <div class="package-cover" v-if="pkg.cover_url">
+              <img :src="pkg.cover_url" alt="cover" />
+            </div>
+            <div class="package-info">
+              <div class="package-title-row">
+                <h1 class="package-name">{{ pkg.name }}</h1>
+                <a-tag color="blue" v-if="pkg.industry">
+                  <template #icon><TagOutlined /></template>
+                  {{ pkg.industry }}
+                </a-tag>
+              </div>
+              <div class="kol-profile">
+                <a-avatar :src="pkg.kol_avatar_url" :size="48">
+                  <template #icon><UserOutlined /></template>
+                </a-avatar>
+                <div class="kol-meta">
+                  <span class="kol-display-name">{{ pkg.kol_display_name }}</span>
+                  <p class="kol-bio" v-if="pkg.kol_bio">{{ pkg.kol_bio }}</p>
+                </div>
+              </div>
+              <div class="tags-row" v-if="pkg.tags?.length">
+                <a-tag v-for="tag in pkg.tags" :key="tag">{{ tag }}</a-tag>
+              </div>
+              <a-divider />
+              <div class="description-section">
+                <h3>{{ t("common.description") }}</h3>
+                <p class="description-text">{{ pkg.description || t("common.noData") }}</p>
+              </div>
+              <div class="price-section" v-if="pkg.price_note">
+                <h3>费用说明</h3>
+                <p class="price-text">{{ pkg.price_note }}</p>
+              </div>
+            </div>
+          </section>
+
+          <section class="prompts-section">
+            <h3 class="section-title">
+              <ThunderboltOutlined />
+              {{ t("kol.marketplace.prompts", { count: pkg.prompts?.length || 0 }) }}
+            </h3>
+            <div class="prompts-list">
+              <div v-for="prompt in pkg.prompts" :key="prompt.id" class="prompt-item">
+                <div class="prompt-info">
+                  <span class="prompt-name">{{ prompt.name }}</span>
+                  <a-tag v-if="prompt.platform_hint" color="cyan" size="small">{{ prompt.platform_hint }}</a-tag>
+                </div>
+                <div class="prompt-action">
+                  <a-tooltip :title="subscription?.status !== 'active' ? '订阅后可用' : ''">
+                    <a-button
+                      type="primary"
+                      size="small"
+                      :disabled="subscription?.status !== 'active'"
+                      @click="handleGenerate(prompt.id)"
+                    >
+                      {{ t("kol.marketplace.prompts", { count: "" }).trim() }} 生成
+                    </a-button>
+                  </a-tooltip>
+                </div>
+              </div>
+              <div v-if="!pkg.prompts?.length" class="empty-prompts">
+                <a-empty :description="t('common.noData')" />
+              </div>
+            </div>
+          </section>
+        </a-col>
+
+        <a-col :xs="24" :lg="8">
+          <a-card class="subscription-card">
+            <h3 class="card-title">订阅状态</h3>
+            <div v-if="!subscription" class="not-subscribed">
+              <p class="status-text">您尚未订阅该 KOL 提示词包。</p>
+              <a-button
+                type="primary"
+                block
+                size="large"
+                :loading="subscribeMutation.isPending.value"
+                @click="handleSubscribe"
+              >
+                {{ t("kol.package.subscribe") }}
+              </a-button>
+            </div>
+            <div v-else class="subscription-info">
+              <div class="status-badge">
+                <a-tag :color="subscriptionStatusMeta?.color" class="status-tag">
+                  <template #icon><component :is="subscriptionStatusMeta?.icon" /></template>
+                  {{ subscriptionStatusMeta?.label }}
+                </a-tag>
+              </div>
+              <div class="subscription-dates" v-if="subscription.status === 'active'">
+                <div class="date-item">
+                  <span class="label">到期时间：</span>
+                  <span class="value">{{ subscription.end_at || '永不过期' }}</span>
+                </div>
+              </div>
+              <a-button
+                v-if="subscription.status === 'expired' || subscription.status === 'revoked'"
+                type="primary"
+                block
+                size="large"
+                :loading="subscribeMutation.isPending.value"
+                @click="handleSubscribe"
+              >
+                重新订阅
+              </a-button>
+            </div>
+            <a-divider />
+            <div class="package-stats">
+              <div class="stat-row">
+                <span class="stat-label"><TeamOutlined /> 已有订阅</span>
+                <span class="stat-value">{{ pkg.subscriber_count }}</span>
+              </div>
+              <div class="stat-row">
+                <span class="stat-label"><ThunderboltOutlined /> 包含 Prompt</span>
+                <span class="stat-value">{{ pkg.prompt_count }}</span>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kol-package-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.detail-header {
+  margin-bottom: 8px;
+}
+
+.back-btn {
+  padding: 0;
+  color: #595959;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 100px;
+}
+
+.main-card {
+  background: #fff;
+  border: 1px solid #e6edf5;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.package-cover {
+  width: 100%;
+  height: 240px;
+  overflow: hidden;
+}
+
+.package-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.package-info {
+  padding: 24px;
+}
+
+.package-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.package-name {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.kol-profile {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kol-meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.kol-display-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.kol-bio {
+  font-size: 14px;
+  color: #8c8c8c;
+  margin: 4px 0 0;
+}
+
+.tags-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.description-section h3,
+.price-section h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+
+.description-text,
+.price-text {
+  font-size: 14px;
+  color: #595959;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.prompts-section {
+  margin-top: 24px;
+  background: #fff;
+  border: 1px solid #e6edf5;
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prompts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.prompt-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #f7f9fc;
+  border-radius: 8px;
+  border: 1px solid #f0f3fa;
+}
+
+.prompt-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-right: 12px;
+}
+
+.subscription-card {
+  border-radius: 12px;
+  border: 1px solid #e6edf5;
+  position: sticky;
+  top: 24px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 20px;
+}
+
+.status-text {
+  color: #8c8c8c;
+  margin-bottom: 24px;
+}
+
+.status-badge {
+  margin-bottom: 20px;
+}
+
+.status-tag {
+  font-size: 14px;
+  padding: 6px 12px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.subscription-dates {
+  margin-bottom: 24px;
+}
+
+.date-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.date-item .label {
+  color: #8c8c8c;
+}
+
+.date-item .value {
+  color: #1a1a1a;
+  font-weight: 500;
+}
+
+.package-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-label {
+  color: #595959;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+</style>