feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)

18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/admin/ModuleStoreView.vue

@@ -3,8 +3,17 @@ import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import type { Module } from '@/types'
-import { ShoppingCart, Package, Search, Filter, X, Check, Download, AlertCircle } from 'lucide-vue-next'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
 
 const api = useApi()
 const auth = useAuthStore()
@@ -22,17 +31,22 @@ const isPurchasing = ref(false)
 const purchaseError = ref('')
 
 const categories = [
-  { value: 'all', label: 'All Modules' },
+  { value: 'all', label: 'All modules' },
   { value: 'loot', label: 'Loot' },
   { value: 'events', label: 'Events' },
   { value: 'economy', label: 'Economy' },
   { value: 'kits', label: 'Kits' },
-  { value: 'admin', label: 'Admin Tools' },
+  { value: 'admin', label: 'Admin tools' },
   { value: 'pvp', label: 'PVP' },
   { value: 'pve', label: 'PVE' },
   { value: 'building', label: 'Building' },
 ]
 
+const tabItems = computed(() => [
+  { value: 'catalog', label: 'Catalog', icon: 'package' },
+  { value: 'my-modules', label: `My modules (${myModules.value.length})`, icon: 'download' },
+])
+
 const filteredModules = computed(() => {
   let result = activeTab.value === 'catalog' ? modules.value : myModules.value
 
@@ -51,6 +65,21 @@ const filteredModules = computed(() => {
   return result
 })
 
+type BadgeTone = 'info' | 'accent' | 'warn' | 'online' | 'neutral' | 'offline'
+function categoryTone(category: string): BadgeTone {
+  const map: Record<string, BadgeTone> = {
+    loot: 'warn',
+    events: 'accent',
+    economy: 'online',
+    kits: 'info',
+    admin: 'accent',
+    pvp: 'offline',
+    pve: 'info',
+    building: 'warn',
+  }
+  return map[category] ?? 'neutral'
+}
+
 async function loadCatalog() {
   isLoading.value = true
   try {
@@ -94,10 +123,8 @@ async function confirmPurchase() {
     })
 
     if (response.payment_url) {
-      // Redirect to external payment provider
       window.location.href = response.payment_url
     } else if (response.success) {
-      // Instant purchase confirmed
       showPurchaseModal.value = false
       selectedModule.value = null
       await loadCatalog()
@@ -131,20 +158,6 @@ function closeModals() {
   purchaseError.value = ''
 }
 
-function categoryBadgeClass(category: string): string {
-  const colors: Record<string, string> = {
-    loot: 'bg-yellow-500/15 text-yellow-400',
-    events: 'bg-purple-500/15 text-purple-400',
-    economy: 'bg-green-500/15 text-green-400',
-    kits: 'bg-blue-500/15 text-blue-400',
-    admin: 'bg-oxide-500/15 text-oxide-400',
-    pvp: 'bg-red-500/15 text-red-400',
-    pve: 'bg-indigo-500/15 text-indigo-400',
-    building: 'bg-orange-500/15 text-orange-400',
-  }
-  return colors[category] || 'bg-neutral-700/50 text-neutral-400'
-}
-
 onMounted(() => {
   loadCatalog()
   loadMyModules()
@@ -152,323 +165,371 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <ShoppingCart class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Module Store</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            Extend your server with premium gameplay modules
-          </p>
-        </div>
-      </div>
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          @click="activeTab = 'catalog'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="activeTab === 'catalog' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          <span class="flex items-center gap-2">
-            <Package class="w-4 h-4" />
-            Catalog
-          </span>
-        </button>
-        <button
-          @click="activeTab = 'my-modules'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="activeTab === 'my-modules' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          <span class="flex items-center gap-2">
-            <Download class="w-4 h-4" />
-            My Modules ({{ myModules.length }})
-          </span>
-        </button>
+  <div class="ms-page">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management</div>
+        <h1 class="page__title">Module store</h1>
+        <p class="page__sub">Extend your server with premium gameplay modules.</p>
       </div>
+      <Tabs v-model="activeTab" :items="tabItems" />
     </div>
 
-    <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-md">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search modules..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div class="flex items-center gap-2">
-        <Filter class="w-4 h-4 text-neutral-500" />
-        <select
-          v-model="selectedCategory"
-          class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        >
-          <option v-for="cat in categories" :key="cat.value" :value="cat.value">
-            {{ cat.label }}
-          </option>
-        </select>
-      </div>
+    <!-- Filters bar -->
+    <div class="ms-filters">
+      <Input
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search modules…"
+        class="ms-filters__search"
+      />
+      <Select
+        v-model="selectedCategory"
+        :options="categories"
+        size="md"
+        class="ms-filters__cat"
+      />
     </div>
 
     <!-- Loading state -->
-    <div v-if="isLoading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading modules...</div>
+    <div v-if="isLoading" class="ms-loading">
+      <EmptyState icon="loader" title="Loading modules…" />
     </div>
 
     <!-- Module grid -->
-    <div v-else-if="filteredModules.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div
+    <div v-else-if="filteredModules.length > 0" class="ms-grid">
+      <article
         v-for="module in filteredModules"
         :key="module.id"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden hover:border-oxide-500/30 transition-all group"
+        class="ms-card"
       >
-        <!-- Preview Image -->
-        <div class="relative h-40 bg-neutral-800 overflow-hidden">
+        <!-- Preview image -->
+        <div class="ms-card__img">
           <img
             v-if="module.preview_image_url"
             :src="module.preview_image_url"
             :alt="module.name"
-            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            class="ms-card__img-el"
           />
-          <div v-else class="w-full h-full flex items-center justify-center">
-            <Package class="w-12 h-12 text-neutral-700" />
+          <div v-else class="ms-card__img-placeholder">
+            <Icon name="package" :size="36" :stroke-width="1.5" />
           </div>
-          <div class="absolute top-2 right-2">
-            <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(module.category)">
-              {{ module.category }}
-            </span>
+          <div class="ms-card__img-badges">
+            <Badge :tone="categoryTone(module.category)" size="md">{{ module.category }}</Badge>
           </div>
-          <div v-if="module.is_purchased" class="absolute top-2 left-2">
-            <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-500/20 text-green-400 flex items-center gap-1">
-              <Check class="w-3 h-3" />
-              Purchased
-            </span>
+          <div v-if="module.is_purchased" class="ms-card__img-owned">
+            <Badge tone="online" icon="check" size="md">Purchased</Badge>
           </div>
         </div>
 
         <!-- Content -->
-        <div class="p-4 space-y-3">
-          <div>
-            <div class="flex items-start justify-between gap-2 mb-1">
-              <h3 class="text-base font-semibold text-neutral-100">{{ module.name }}</h3>
-              <span class="text-lg font-bold text-oxide-400 shrink-0">${{ safeFixed(module.price, 2) }}</span>
-            </div>
-            <p class="text-sm text-neutral-500 line-clamp-2">{{ module.description }}</p>
+        <div class="ms-card__body">
+          <div class="ms-card__header">
+            <span class="ms-card__name">{{ module.name }}</span>
+            <span class="ms-price">${{ safeFixed(module.price, 2) }}</span>
           </div>
+          <p class="ms-card__desc">{{ module.description }}</p>
 
           <!-- Features -->
-          <div class="flex flex-wrap gap-1.5">
-            <span
+          <div class="ms-card__features">
+            <Badge
               v-for="(feature, idx) in module.features.slice(0, 3)"
               :key="idx"
-              class="text-xs text-neutral-400 bg-neutral-800 px-2 py-0.5 rounded"
-            >
-              {{ feature }}
-            </span>
-            <span v-if="module.features.length > 3" class="text-xs text-neutral-500">
-              +{{ module.features.length - 3 }} more
-            </span>
+              tone="neutral"
+            >{{ feature }}</Badge>
+            <span v-if="module.features.length > 3" class="ms-card__more">+{{ module.features.length - 3 }} more</span>
           </div>
 
           <!-- Actions -->
-          <div class="flex gap-2 pt-2">
-            <button
-              @click="openDetailModal(module)"
-              class="flex-1 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg transition-colors"
-            >
-              Details
-            </button>
-            <button
+          <div class="ms-card__actions">
+            <Button variant="secondary" size="sm" :block="false" @click="openDetailModal(module)">Details</Button>
+            <Button
               v-if="!module.is_purchased"
+              size="sm"
               @click="initiatePurchase(module)"
-              class="flex-1 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-            >
-              Purchase
-            </button>
-            <button
+            >Purchase</Button>
+            <Button
               v-else-if="!module.is_installed"
+              size="sm"
+              variant="outline"
+              icon="download"
               @click="installModule(module)"
-              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
-            >
-              <Download class="w-3.5 h-3.5" />
-              Install
-            </button>
-            <button
+            >Install</Button>
+            <Button
               v-else
-              disabled
-              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 border border-green-500/20 rounded-lg cursor-default"
-            >
-              <Check class="w-3.5 h-3.5" />
-              Installed
-            </button>
+              size="sm"
+              variant="outline"
+              icon="check"
+              :disabled="true"
+            >Installed</Button>
           </div>
         </div>
-      </div>
+      </article>
     </div>
 
     <!-- Empty state -->
-    <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <Package class="w-12 h-12 text-neutral-600 mx-auto mb-3" />
-      <h3 class="text-lg font-medium text-neutral-300 mb-1">
-        {{ activeTab === 'catalog' ? 'No modules found' : 'No purchased modules' }}
-      </h3>
-      <p class="text-sm text-neutral-500">
-        {{ activeTab === 'catalog' ? 'Try adjusting your filters.' : 'Browse the catalog to purchase modules.' }}
-      </p>
-    </div>
+    <Panel v-else>
+      <EmptyState
+        icon="package"
+        :title="activeTab === 'catalog' ? 'No modules found' : 'No purchased modules'"
+        :description="activeTab === 'catalog' ? 'Try adjusting your search or category filter.' : 'Browse the catalog to purchase modules.'"
+      />
+    </Panel>
 
-    <!-- Detail Modal -->
+    <!-- ===== Detail modal ===== -->
     <div
       v-if="showDetailModal && selectedModule"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="ms-modal-backdrop"
       @click.self="closeModals"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
-        <!-- Modal Header -->
-        <div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-start justify-between">
-          <div class="flex-1">
-            <div class="flex items-center gap-3 mb-2">
-              <h2 class="text-xl font-bold text-neutral-100">{{ selectedModule.name }}</h2>
-              <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(selectedModule.category)">
-                {{ selectedModule.category }}
-              </span>
+      <div class="ms-modal ms-modal--wide">
+        <div class="ms-modal__head ms-modal__head--sticky">
+          <div class="ms-modal__head-content">
+            <div class="ms-modal__title-row">
+              <h2 class="ms-modal__title">{{ selectedModule.name }}</h2>
+              <Badge :tone="categoryTone(selectedModule.category)" size="md">{{ selectedModule.category }}</Badge>
             </div>
-            <p class="text-sm text-neutral-400">Version {{ selectedModule.version }}</p>
+            <p class="ms-modal__ver">Version {{ selectedModule.version }}</p>
           </div>
-          <button
-            @click="closeModals"
-            class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
-          >
-            <X class="w-5 h-5" />
-          </button>
+          <IconButton icon="x" label="Close" @click="closeModals" />
         </div>
 
-        <!-- Modal Body -->
-        <div class="p-6 space-y-6">
+        <div class="ms-modal__body">
           <!-- Screenshots -->
-          <div v-if="selectedModule.screenshots.length > 0" class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Screenshots</h3>
-            <div class="grid grid-cols-2 gap-3">
+          <div v-if="selectedModule.screenshots.length > 0" class="ms-detail-section">
+            <div class="ms-detail-section__label">Screenshots</div>
+            <div class="ms-screenshots">
               <img
                 v-for="(screenshot, idx) in selectedModule.screenshots"
                 :key="idx"
                 :src="screenshot"
                 :alt="`Screenshot ${idx + 1}`"
-                class="w-full h-48 object-cover rounded-lg border border-neutral-800"
+                class="ms-screenshot"
               />
             </div>
           </div>
 
           <!-- Description -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Description</h3>
-            <p class="text-sm text-neutral-400 leading-relaxed">{{ selectedModule.description }}</p>
+          <div class="ms-detail-section">
+            <div class="ms-detail-section__label">Description</div>
+            <p class="ms-detail-desc">{{ selectedModule.description }}</p>
           </div>
 
           <!-- Features -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Features</h3>
-            <ul class="space-y-2">
-              <li
-                v-for="(feature, idx) in selectedModule.features"
-                :key="idx"
-                class="flex items-start gap-2 text-sm text-neutral-400"
-              >
-                <Check class="w-4 h-4 text-oxide-500 shrink-0 mt-0.5" />
+          <div class="ms-detail-section">
+            <div class="ms-detail-section__label">Features</div>
+            <ul class="ms-features">
+              <li v-for="(feature, idx) in selectedModule.features" :key="idx" class="ms-feature">
+                <Icon name="check" :size="14" :stroke-width="2.5" class="ms-feature__icon" />
                 {{ feature }}
               </li>
             </ul>
           </div>
 
-          <!-- Price and Purchase -->
-          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-center justify-between">
+          <!-- Price and action -->
+          <div class="ms-detail-cta">
             <div>
-              <p class="text-sm text-neutral-400 mb-1">One-time purchase</p>
-              <p class="text-2xl font-bold text-oxide-400">${{ safeFixed(selectedModule.price, 2) }}</p>
+              <p class="ms-detail-cta__label">One-time purchase</p>
+              <p class="ms-price ms-price--lg">${{ safeFixed(selectedModule.price, 2) }}</p>
             </div>
-            <button
+            <Button
               v-if="!selectedModule.is_purchased"
               @click="initiatePurchase(selectedModule)"
-              class="px-6 py-3 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-            >
-              Purchase Now
-            </button>
-            <button
+            >Purchase now</Button>
+            <Button
               v-else-if="!selectedModule.is_installed"
+              variant="outline"
+              icon="download"
               @click="installModule(selectedModule)"
-              class="flex items-center gap-2 px-6 py-3 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
-            >
-              <Download class="w-4 h-4" />
-              Install
-            </button>
-            <div v-else class="flex items-center gap-2 text-green-400">
-              <Check class="w-5 h-5" />
-              <span class="text-sm font-medium">Installed</span>
+            >Install</Button>
+            <div v-else class="ms-installed">
+              <Icon name="check" :size="18" :stroke-width="2.5" />
+              <span>Installed</span>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Purchase Confirmation Modal -->
+    <!-- ===== Purchase confirmation modal ===== -->
     <div
       v-if="showPurchaseModal && selectedModule"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="ms-modal-backdrop"
       @click.self="closeModals"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-md w-full">
-        <!-- Header -->
-        <div class="border-b border-neutral-800 px-6 py-4">
-          <h2 class="text-xl font-bold text-neutral-100">Confirm Purchase</h2>
+      <div class="ms-modal">
+        <div class="ms-modal__head">
+          <h2 class="ms-modal__title">Confirm purchase</h2>
+          <IconButton icon="x" label="Close" @click="closeModals" />
         </div>
 
-        <!-- Body -->
-        <div class="p-6 space-y-4">
-          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 space-y-2">
-            <div class="flex items-center justify-between">
-              <span class="text-sm text-neutral-400">Module</span>
-              <span class="text-sm font-medium text-neutral-100">{{ selectedModule.name }}</span>
+        <div class="ms-modal__body">
+          <div class="ms-purchase-summary">
+            <div class="ms-purchase-row">
+              <span class="ms-purchase-row__label">Module</span>
+              <span class="ms-purchase-row__value">{{ selectedModule.name }}</span>
             </div>
-            <div class="flex items-center justify-between">
-              <span class="text-sm text-neutral-400">License</span>
-              <span class="text-sm font-medium text-neutral-100">{{ auth.license?.license_key }}</span>
+            <div class="ms-purchase-row">
+              <span class="ms-purchase-row__label">License</span>
+              <span class="ms-purchase-row__value ms-mono">{{ auth.license?.license_key }}</span>
             </div>
-            <div class="border-t border-neutral-700 pt-2 mt-2 flex items-center justify-between">
-              <span class="text-base font-medium text-neutral-300">Total</span>
-              <span class="text-2xl font-bold text-oxide-400">${{ safeFixed(selectedModule.price, 2) }}</span>
+            <div class="ms-purchase-divider" />
+            <div class="ms-purchase-row ms-purchase-row--total">
+              <span class="ms-purchase-row__label">Total</span>
+              <span class="ms-price ms-price--lg">${{ safeFixed(selectedModule.price, 2) }}</span>
             </div>
           </div>
 
-          <div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-            <AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
-            <p class="text-sm text-red-400">{{ purchaseError }}</p>
-          </div>
+          <Alert v-if="purchaseError" tone="danger">{{ purchaseError }}</Alert>
 
-          <p class="text-xs text-neutral-500 leading-relaxed">
+          <p class="ms-purchase-terms">
             By confirming this purchase, you agree to the module license terms. This purchase is non-refundable once the module is installed.
           </p>
         </div>
 
-        <!-- Footer -->
-        <div class="border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
-          <button
-            @click="closeModals"
-            :disabled="isPurchasing"
-            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50"
-          >
-            Cancel
-          </button>
-          <button
-            @click="confirmPurchase"
-            :disabled="isPurchasing"
-            class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50"
-          >
-            {{ isPurchasing ? 'Processing...' : 'Confirm Purchase' }}
-          </button>
+        <div class="ms-modal__foot">
+          <Button variant="secondary" :disabled="isPurchasing" @click="closeModals">Cancel</Button>
+          <Button :loading="isPurchasing" @click="confirmPurchase">Confirm purchase</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.ms-page { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+
+.page__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px;
+}
+.page__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 3px; }
+
+/* Filters */
+.ms-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.ms-filters__search { flex: 1; min-width: 200px; max-width: 380px; }
+.ms-filters__cat { min-width: 160px; }
+
+.ms-loading { padding: 20px 0; }
+
+/* Module grid */
+.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
+
+/* Module card */
+.ms-card {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default); overflow: hidden; display: flex; flex-direction: column;
+  transition: box-shadow var(--dur-base) var(--ease-standard);
+}
+.ms-card:hover { box-shadow: inset 0 0 0 1px var(--accent-border), var(--ring-default); }
+
+.ms-card__img {
+  position: relative; height: 160px; overflow: hidden;
+  background: var(--surface-inset);
+}
+.ms-card__img-el {
+  width: 100%; height: 100%; object-fit: cover;
+  transition: transform 300ms var(--ease-standard);
+}
+.ms-card:hover .ms-card__img-el { transform: scale(1.04); }
+.ms-card__img-placeholder {
+  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+  color: var(--text-muted);
+}
+.ms-card__img-badges { position: absolute; top: 8px; right: 8px; }
+.ms-card__img-owned { position: absolute; top: 8px; left: 8px; }
+
+.ms-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
+.ms-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.ms-card__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.ms-card__desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.ms-card__features { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.ms-card__more { font-size: var(--text-xs); color: var(--text-muted); }
+.ms-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
+
+/* Price — mono + tabular */
+.ms-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-base); color: var(--accent-text); }
+.ms-price--lg { font-size: var(--text-2xl); }
+.ms-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+
+/* Modal */
+.ms-modal-backdrop {
+  position: fixed; inset: 0; z-index: 60;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 16px;
+}
+.ms-modal {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl, var(--ring-default)); max-width: 480px; width: 100%;
+  display: flex; flex-direction: column; max-height: 90vh;
+}
+.ms-modal--wide { max-width: 760px; }
+
+.ms-modal__head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); flex: none;
+}
+.ms-modal__head--sticky { position: sticky; top: 0; background: var(--surface-base); z-index: 1; }
+.ms-modal__head-content { flex: 1; min-width: 0; }
+.ms-modal__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.ms-modal__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.ms-modal__ver { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
+
+.ms-modal__body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
+.ms-modal__foot {
+  display: flex; align-items: center; justify-content: flex-end;
+  gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); flex: none;
+}
+
+/* Detail modal content */
+.ms-detail-section { display: flex; flex-direction: column; gap: 10px; }
+.ms-detail-section__label {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+.ms-detail-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
+
+.ms-screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.ms-screenshot { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--ring-default); }
+
+.ms-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.ms-feature { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); }
+.ms-feature__icon { flex: none; color: var(--accent-text); margin-top: 2px; }
+
+.ms-detail-cta {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px 16px;
+}
+.ms-detail-cta__label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
+
+.ms-installed {
+  display: flex; align-items: center; gap: 8px;
+  font-size: var(--text-sm); font-weight: 500; color: var(--status-online);
+}
+
+/* Purchase summary */
+.ms-purchase-summary {
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px 16px;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.ms-purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.ms-purchase-row--total { margin-top: 2px; }
+.ms-purchase-row__label { font-size: var(--text-sm); color: var(--text-tertiary); }
+.ms-purchase-row__value { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.ms-purchase-divider { height: 1px; background: var(--border-subtle); }
+
+.ms-purchase-terms { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .ms-grid { grid-template-columns: 1fr; }
+  .ms-filters__search { max-width: 100%; }
+}
+</style>