feat(redesign): re-skin plugin-config editors + Loot Builder to DS (Phase D batch 3)

10 plugin-config views (LootBuilder, RaidableBases, Teleport, Kits, Gather, AutoDoors, FurnaceSplitter, BetterChat, TimedExecute, PluginConfigs landing) + 5 child components (loot sidebar/item-editor/group-editor/item-picker, teleport PermissionGroupEditor) re-skinned onto DS components + tokens. All config logic preserved (path-traversal get/set, apply-to-server, import-from-server, CRUD, multiplier logic, per-store status derivation). Presentation-only. Build green.

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

frontend/src/components/loot/LootContainerSidebar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustContainers, containerCategories } from '@/data/rust-containers'
-import { Search, Box, Cylinder, Shield, Users, HelpCircle } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const props = defineProps<{
   lootTable: Record<string, any>
@@ -14,20 +15,21 @@ const emit = defineEmits<{
 
 const searchQuery = ref('')
 
-const categoryIcons: Record<string, any> = {
-  crates: Box,
-  barrels: Cylinder,
-  military: Shield,
-  npcs: Users,
-  other: HelpCircle,
+// Map container categories to DS icon names
+const categoryIcons: Record<string, string> = {
+  crates: 'box',
+  barrels: 'flask-conical',
+  military: 'shield',
+  npcs: 'users',
+  other: 'info',
 }
 
 const categoryLabels: Record<string, string> = {
-  crates: 'CRATES',
-  barrels: 'BARRELS',
-  military: 'MILITARY',
+  crates: 'Crates',
+  barrels: 'Barrels',
+  military: 'Military',
   npcs: 'NPCs',
-  other: 'OTHER',
+  other: 'Other',
 }
 
 const filteredContainers = computed(() => {
@@ -56,48 +58,136 @@ function isConfigured(prefab: string): boolean {
 </script>
 
 <template>
-  <div class="w-64 shrink-0 bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden flex flex-col">
+  <aside class="lcs-root">
     <!-- Search -->
-    <div class="p-3 border-b border-neutral-800">
-      <div class="relative">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          placeholder="Search containers..."
-          class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200 placeholder-neutral-500"
-        />
-      </div>
+    <div class="lcs-search">
+      <DsInput
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search containers…"
+        size="sm"
+      />
     </div>
 
-    <!-- Container List -->
-    <div class="flex-1 overflow-y-auto py-2">
+    <!-- Container list -->
+    <div class="lcs-list">
       <template v-for="(containers, category) in groupedContainers" :key="category">
-        <div class="px-3 pt-3 pb-1">
-          <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-            <component :is="categoryIcons[category]" class="w-3 h-3" />
-            {{ categoryLabels[category] || category }}
-          </div>
+        <!-- Category heading -->
+        <div class="lcs-cat">
+          <Icon
+            :name="categoryIcons[category] ?? 'box'"
+            :size="12"
+            class="lcs-cat__icon"
+          />
+          <span class="lcs-cat__label">{{ categoryLabels[category] ?? category }}</span>
         </div>
+
+        <!-- Container rows -->
         <button
           v-for="c in containers"
           :key="c.prefab"
+          class="lcs-item"
+          :class="{ 'lcs-item--active': selected === c.prefab }"
           @click="emit('select', c.prefab)"
-          class="w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors"
-          :class="selected === c.prefab
-            ? 'bg-oxide-500/10 text-oxide-400'
-            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
         >
-          <span class="truncate flex-1">{{ c.name }}</span>
-          <span
-            v-if="isConfigured(c.prefab)"
-            class="w-1.5 h-1.5 rounded-full bg-oxide-500 shrink-0"
-          />
+          <span class="lcs-item__name">{{ c.name }}</span>
+          <span v-if="isConfigured(c.prefab)" class="lcs-item__dot" />
         </button>
       </template>
 
-      <div v-if="Object.keys(groupedContainers).length === 0" class="px-3 py-6 text-center text-neutral-500 text-sm">
+      <div v-if="Object.keys(groupedContainers).length === 0" class="lcs-empty">
         No containers match
       </div>
     </div>
-  </div>
+  </aside>
 </template>
+
+<style scoped>
+.lcs-root {
+  width: 240px;
+  flex: none;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.lcs-search {
+  padding: 10px 10px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.lcs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+/* Category heading */
+.lcs-cat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px 4px;
+}
+.lcs-cat__icon {
+  color: var(--text-muted);
+  flex: none;
+}
+.lcs-cat__label {
+  font-size: var(--text-2xs, 10px);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--text-muted);
+}
+
+/* Container row */
+.lcs-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-align: left;
+  transition: var(--transition-colors);
+  border-radius: 0;
+}
+.lcs-item:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lcs-item--active {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+.lcs-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lcs-item__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+}
+
+.lcs-empty {
+  padding: 20px 12px;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+</style>

frontend/src/components/loot/LootGroupEditor.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustItems } from '@/data/rust-items'
-import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 import type { LootGroupProfile } from '@/types'
 
 const props = defineProps<{
@@ -65,120 +71,260 @@ function updateGroupItemField(groupName: string, shortname: string, field: strin
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Add Group -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex gap-2">
-        <input
+  <div class="lge-root">
+    <!-- Add group panel -->
+    <Panel>
+      <div class="lge-add">
+        <DsInput
           v-model="newGroupName"
-          placeholder="New group name..."
-          class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+          placeholder="New group name…"
           @keydown.enter="addGroup"
         />
-        <button
-          @click="addGroup"
+        <Button
+          icon="plus"
           :disabled="!newGroupName.trim()"
-          class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+          @click="addGroup"
         >
-          <Plus class="w-4 h-4" />
-          Add Group
-        </button>
+          Add group
+        </Button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Group List -->
-    <div v-if="groupEntries.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
-      No loot groups defined. Groups let you create reusable item pools that can be assigned to multiple containers.
-    </div>
+    <!-- Empty state -->
+    <Panel v-if="groupEntries.length === 0">
+      <EmptyState
+        icon="layers"
+        title="No loot groups"
+        description="Groups let you create reusable item pools that can be assigned to multiple containers."
+      />
+    </Panel>
 
+    <!-- Group cards -->
     <div
       v-for="entry in groupEntries"
       :key="entry.name"
-      class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden"
+      class="lge-card"
     >
-      <!-- Group Header -->
+      <!-- Group header -->
       <button
+        class="lge-card__head"
         @click="toggleGroup(entry.name)"
-        class="w-full flex items-center justify-between px-4 py-3 hover:bg-neutral-800/50 transition-colors"
       >
-        <div class="flex items-center gap-3">
-          <component
-            :is="expandedGroup === entry.name ? ChevronDown : ChevronRight"
-            class="w-4 h-4 text-neutral-500"
-          />
-          <span class="text-neutral-200 font-medium">{{ entry.name }}</span>
-          <span class="text-xs text-neutral-500">{{ entry.itemCount }} items</span>
-        </div>
-        <button
+        <Icon
+          :name="expandedGroup === entry.name ? 'chevron-down' : 'chevron-right'"
+          :size="16"
+          class="lge-card__chevron"
+        />
+        <span class="lge-card__name">{{ entry.name }}</span>
+        <Badge tone="neutral" mono>{{ entry.itemCount }}</Badge>
+        <IconButton
+          icon="trash-2"
+          variant="danger"
+          size="sm"
+          label="Delete group"
+          class="lge-card__del"
           @click.stop="deleteGroup(entry.name)"
-          class="text-neutral-600 hover:text-red-400 transition-colors p-1"
-        >
-          <Trash2 class="w-4 h-4" />
-        </button>
+        />
       </button>
 
-      <!-- Group Items -->
-      <div v-if="expandedGroup === entry.name" class="border-t border-neutral-800 p-4">
-        <table v-if="entry.itemCount > 0" class="w-full text-sm">
+      <!-- Expanded items -->
+      <div v-if="expandedGroup === entry.name" class="lge-card__body">
+        <table v-if="entry.itemCount > 0" class="lge-table">
           <thead>
-            <tr class="border-b border-neutral-800">
-              <th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
-              <th class="w-10"></th>
+            <tr>
+              <th class="lge-th">Item</th>
+              <th class="lge-th lge-th--num">Min</th>
+              <th class="lge-th lge-th--num">Max</th>
+              <th class="lge-th lge-th--num">Prob %</th>
+              <th class="lge-th lge-th--action"></th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="(itemData, shortname) in entry.data.ItemList"
               :key="shortname"
-              class="border-b border-neutral-800/50"
+              class="lge-tr"
             >
-              <td class="py-2 px-2 text-neutral-200">{{ getItemName(shortname as string) }}</td>
-              <td class="py-2 px-2">
+              <td class="lge-td">{{ getItemName(shortname as string) }}</td>
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Min ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Min', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Max ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Max', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Probability ?? 100"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Probability', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                   max="100"
                 />
               </td>
-              <td class="py-2 px-2">
-                <button
+              <td class="lge-td lge-td--action">
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Remove item"
                   @click="removeItemFromGroup(entry.name, shortname as string)"
-                  class="text-neutral-600 hover:text-red-400"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </td>
             </tr>
           </tbody>
         </table>
-        <p v-else class="text-neutral-500 text-sm text-center py-4">
+        <p v-else class="lge-card__empty">
           No items in this group yet. Add items from the container editor.
         </p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.lge-root {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Add group row */
+.lge-add {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+.lge-add > :first-child {
+  flex: 1;
+}
+
+/* Group card */
+.lge-card {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.lge-card__head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  text-align: left;
+  transition: var(--transition-colors);
+}
+.lge-card__head:hover {
+  background: var(--surface-hover);
+}
+.lge-card__chevron {
+  color: var(--text-muted);
+  flex: none;
+}
+.lge-card__name {
+  flex: 1;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.lge-card__del {
+  margin-left: auto;
+  flex: none;
+}
+
+/* Expanded body */
+.lge-card__body {
+  border-top: 1px solid var(--border-subtle);
+  padding: 12px;
+}
+.lge-card__empty {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+  padding: 16px 0 8px;
+}
+
+/* Table */
+.lge-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.lge-th {
+  padding: 6px 10px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+.lge-th--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-th--action {
+  width: 40px;
+}
+.lge-tr {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lge-tr:last-child {
+  border-bottom: 0;
+}
+.lge-tr:hover {
+  background: var(--surface-hover);
+}
+.lge-td {
+  padding: 7px 10px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+.lge-td--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-td--action {
+  width: 40px;
+  padding: 4px 6px;
+}
+
+/* Shared number input (same as LootItemEditor) */
+.cc-num-input {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 5px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  outline: none;
+  transition: var(--transition-colors);
+}
+.cc-num-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-num-input--center {
+  text-align: center;
+}
+</style>

frontend/src/components/loot/LootItemEditor.vue

@@ -2,7 +2,12 @@
 import { computed } from 'vue'
 import { rustItems } from '@/data/rust-items'
 import { rustContainers } from '@/data/rust-containers'
-import { Trash2, Plus, Settings2 } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 import type { PrefabLoot } from '@/types'
 
 const props = defineProps<{
@@ -76,157 +81,273 @@ const ungroupedItems = computed(() => {
     ...(data as any),
   }))
 })
+
+// Computed boolean for the Switch v-model
+const isEnabled = computed({
+  get: () => containerData.value?.Enabled ?? true,
+  set: () => toggleEnabled(),
+})
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Container Header -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold text-neutral-100">{{ containerName }}</h2>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              :checked="containerData?.Enabled ?? true"
-              @change="toggleEnabled"
-              class="rounded bg-neutral-800 border-neutral-600 text-oxide-500 focus:ring-oxide-500"
-            />
-            <span class="text-sm text-neutral-400">Enabled</span>
-          </label>
-        </div>
-        <div class="flex items-center gap-2">
-          <Settings2 class="w-4 h-4 text-neutral-500" />
-          <span class="text-xs text-neutral-500 font-mono">{{ containerKey.split('/').pop() }}</span>
-        </div>
-      </div>
+  <div class="lie-root">
+    <!-- Container settings panel -->
+    <Panel :title="containerName">
+      <template #actions>
+        <Badge tone="neutral" mono class="lie-prefab">
+          {{ containerKey.split('/').pop() }}
+        </Badge>
+        <Switch v-model="isEnabled" label="Enabled" size="sm" />
+      </template>
 
-      <!-- Item Settings -->
-      <div class="grid grid-cols-4 gap-3" v-if="containerData">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Items Min</label>
+      <!-- Item settings grid -->
+      <div v-if="containerData" class="lie-settings">
+        <div class="lie-setting">
+          <label class="lie-setting__label">Items min</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.ItemsMin ?? 1"
             @input="updateSettings('ItemsMin', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Items Max</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Items max</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.ItemsMax ?? 6"
             @input="updateSettings('ItemsMax', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Min Scrap</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Min scrap</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.MinScrap ?? 0"
             @input="updateSettings('MinScrap', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Max Scrap</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Max scrap</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.MaxScrap ?? 0"
             @input="updateSettings('MaxScrap', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
       </div>
-    </div>
+      <p v-else class="lie-unconfigured">
+        Container not yet configured. Add an item to initialise its settings.
+      </p>
+    </Panel>
 
-    <!-- Ungrouped Items Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="text-sm font-semibold text-neutral-300">Ungrouped Items</h3>
-        <button
-          @click="emit('add-item')"
-          class="flex items-center gap-1 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm"
-        >
-          <Plus class="w-3.5 h-3.5" />
-          Add Item
-        </button>
-      </div>
+    <!-- Ungrouped items panel -->
+    <Panel title="Ungrouped items" :flush-body="ungroupedItems.length > 0">
+      <template #actions>
+        <Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
+          Add item
+        </Button>
+      </template>
 
-      <div v-if="ungroupedItems.length > 0" class="overflow-x-auto">
-        <table class="w-full text-sm">
+      <div v-if="ungroupedItems.length > 0" class="lie-table-wrap">
+        <table class="lie-table">
           <thead>
-            <tr class="border-b border-neutral-800">
-              <th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
-              <th class="w-10"></th>
+            <tr>
+              <th class="lie-th">Item</th>
+              <th class="lie-th lie-th--num">Min</th>
+              <th class="lie-th lie-th--num">Max</th>
+              <th class="lie-th lie-th--num">Prob %</th>
+              <th class="lie-th lie-th--action"></th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="item in ungroupedItems"
               :key="item.shortname"
-              class="border-b border-neutral-800/50 hover:bg-neutral-800/30"
+              class="lie-tr"
             >
-              <td class="py-2 px-2">
-                <div>
-                  <span class="text-neutral-200">{{ item.name }}</span>
-                  <span class="text-neutral-600 text-xs ml-2">{{ item.shortname }}</span>
-                </div>
+              <td class="lie-td">
+                <span class="lie-item-name">{{ item.name }}</span>
+                <span class="lie-item-short">{{ item.shortname }}</span>
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Min"
                   @input="updateItemField(item.shortname, 'Min', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Max"
                   @input="updateItemField(item.shortname, 'Max', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Probability ?? 100"
                   @input="updateItemField(item.shortname, 'Probability', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                   max="100"
                 />
               </td>
-              <td class="py-2 px-2">
-                <button
+              <td class="lie-td lie-td--action">
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Remove item"
                   @click="removeItem(item.shortname)"
-                  class="text-neutral-600 hover:text-red-400 transition-colors"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </td>
             </tr>
           </tbody>
         </table>
       </div>
 
-      <div v-else class="text-center py-6 text-neutral-500 text-sm">
-        No items configured for this container.
-        <button @click="emit('add-item')" class="text-oxide-400 hover:underline ml-1">Add one</button>
-      </div>
-    </div>
+      <EmptyState
+        v-else
+        icon="package"
+        title="No items configured"
+        description="Add items to configure what this container can spawn."
+      >
+        <template #action>
+          <Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
+            Add item
+          </Button>
+        </template>
+      </EmptyState>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.lie-root {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Badge for prefab key */
+.lie-prefab {
+  font-size: 10px !important;
+}
+
+.lie-unconfigured {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+/* Settings grid */
+.lie-settings {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+.lie-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.lie-setting__label {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+/* Table */
+.lie-table-wrap {
+  overflow-x: auto;
+}
+.lie-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.lie-th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+.lie-th--num {
+  text-align: center;
+  width: 80px;
+}
+.lie-th--action {
+  width: 40px;
+}
+.lie-tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.lie-tr:last-child {
+  border-bottom: 0;
+}
+.lie-tr:hover {
+  background: var(--surface-hover);
+}
+.lie-td {
+  padding: 8px 12px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+.lie-td--num {
+  text-align: center;
+  width: 80px;
+}
+.lie-td--action {
+  width: 40px;
+  padding: 4px 8px;
+}
+.lie-item-name {
+  display: block;
+  color: var(--text-primary);
+}
+.lie-item-short {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+/* Shared number input */
+.cc-num-input {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 5px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  outline: none;
+  transition: var(--transition-colors);
+}
+.cc-num-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-num-input--center {
+  text-align: center;
+}
+</style>

frontend/src/components/loot/LootItemPicker.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustItems, itemCategories } from '@/data/rust-items'
-import { Search, X } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const emit = defineEmits<{
   select: [shortname: string]
@@ -25,64 +27,200 @@ const filteredItems = computed(() => {
 </script>
 
 <template>
-  <div class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="emit('close')">
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-neutral-800 flex items-center justify-between">
-        <h2 class="text-lg font-semibold text-neutral-100">Add Item</h2>
-        <button @click="emit('close')" class="text-neutral-500 hover:text-neutral-300">
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+  <Teleport to="body">
+    <div class="lip-overlay" @click.self="emit('close')">
+      <div class="lip-modal">
+        <!-- Header -->
+        <div class="lip-head">
+          <span class="lip-head__title">Add item</span>
+          <IconButton icon="x" size="sm" label="Close" @click="emit('close')" />
+        </div>
 
-      <!-- Search + Filter -->
-      <div class="p-4 space-y-3 border-b border-neutral-800">
-        <div class="relative">
-          <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-          <input
+        <!-- Search + category filter -->
+        <div class="lip-filters">
+          <DsInput
             v-model="searchQuery"
-            placeholder="Search items..."
-            class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200"
-            autofocus
+            icon="search"
+            placeholder="Search items…"
+            size="sm"
           />
+          <div class="lip-cats">
+            <button
+              class="lip-cat"
+              :class="{ 'lip-cat--active': selectedCategory === 'all' }"
+              @click="selectedCategory = 'all'"
+            >
+              All
+            </button>
+            <button
+              v-for="cat in itemCategories"
+              :key="cat"
+              class="lip-cat"
+              :class="{ 'lip-cat--active': selectedCategory === cat }"
+              @click="selectedCategory = cat"
+            >
+              {{ cat }}
+            </button>
+          </div>
         </div>
-        <div class="flex flex-wrap gap-1">
-          <button
-            @click="selectedCategory = 'all'"
-            class="px-2 py-1 rounded text-xs"
-            :class="selectedCategory === 'all' ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
-          >
-            All
-          </button>
-          <button
-            v-for="cat in itemCategories"
-            :key="cat"
-            @click="selectedCategory = cat"
-            class="px-2 py-1 rounded text-xs capitalize"
-            :class="selectedCategory === cat ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ cat }}
-          </button>
-        </div>
-      </div>
 
-      <!-- Item Grid -->
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-          <button
-            v-for="item in filteredItems"
-            :key="item.shortname"
-            @click="emit('select', item.shortname)"
-            class="text-left px-3 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors group"
-          >
-            <div class="text-sm text-neutral-200 group-hover:text-oxide-400">{{ item.name }}</div>
-            <div class="text-xs text-neutral-500">{{ item.shortname }}</div>
-          </button>
-        </div>
-        <div v-if="filteredItems.length === 0" class="text-center py-8 text-neutral-500">
-          No items found
+        <!-- Item grid -->
+        <div class="lip-grid-wrap">
+          <div v-if="filteredItems.length > 0" class="lip-grid">
+            <button
+              v-for="item in filteredItems"
+              :key="item.shortname"
+              class="lip-item"
+              @click="emit('select', item.shortname)"
+            >
+              <span class="lip-item__name">{{ item.name }}</span>
+              <span class="lip-item__short">{{ item.shortname }}</span>
+            </button>
+          </div>
+          <div v-else class="lip-empty">
+            <Icon name="search" :size="20" class="lip-empty__icon" />
+            <span>No items found</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
+
+<style scoped>
+.lip-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.lip-modal {
+  background: var(--surface-raised);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 640px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.lip-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex: none;
+}
+.lip-head__title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Filters */
+.lip-filters {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: none;
+}
+.lip-cats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.lip-cat {
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 3px 10px;
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: var(--transition-colors);
+}
+.lip-cat:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lip-cat--active {
+  background: var(--accent);
+  color: var(--accent-contrast);
+  box-shadow: none;
+}
+.lip-cat--active:hover {
+  background: var(--accent-hover);
+}
+
+/* Grid */
+.lip-grid-wrap {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+.lip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+}
+.lip-item {
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-colors);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.lip-item:hover {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.lip-item__name {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.lip-item:hover .lip-item__name {
+  color: var(--accent-text);
+}
+.lip-item__short {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Empty */
+.lip-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 48px 0;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+.lip-empty__icon {
+  color: var(--text-muted);
+}
+</style>

frontend/src/components/teleport/PermissionGroupEditor.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Plus, Trash2 } from 'lucide-vue-next'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const props = defineProps<{
   configData: Record<string, any>
@@ -47,7 +49,6 @@ function ensurePaths(data: Record<string, any>) {
 function addGroup() {
   const name = newGroupName.value.trim()
   if (!name) return
-  // Check if already exists
   if (groups.value.some(g => g.name === name)) return
 
   const updated = { ...props.configData }
@@ -95,96 +96,95 @@ function updateField(groupName: string, field: string, value: number) {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <div class="flex items-center justify-between">
-      <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">VIP Permission Groups</h3>
+  <div class="pge">
+    <div class="pge__head">
+      <div class="pge__section-label">VIP permission groups</div>
     </div>
 
-    <!-- Add Group -->
-    <div class="flex gap-2">
+    <!-- Add group row -->
+    <div class="pge__add-row">
       <input
         v-model="newGroupName"
-        placeholder="New group name (e.g. vip, vip+, mvp)..."
-        class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+        type="text"
+        class="pge__name-input"
+        placeholder="New group name (e.g. vip, vip+, mvp)…"
         @keydown.enter="addGroup"
       />
-      <button
-        @click="addGroup"
+      <Button
+        size="sm"
+        icon="plus"
         :disabled="!newGroupName.trim()"
-        class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-      >
-        <Plus class="w-4 h-4" />
-        Add Group
-      </button>
+        @click="addGroup"
+      >Add group</Button>
     </div>
 
-    <!-- Empty State -->
-    <div v-if="groups.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
-      No VIP groups defined. Add groups to configure per-permission teleport limits, cooldowns, and countdowns.
-    </div>
+    <!-- Empty state -->
+    <EmptyState
+      v-if="groups.length === 0"
+      icon="users"
+      title="No VIP groups defined"
+      description="Add groups to configure per-permission teleport limits, cooldowns, and countdowns."
+    />
 
-    <!-- Groups Table -->
-    <div v-else class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
-      <table class="w-full text-sm">
+    <!-- Groups table -->
+    <div v-else class="pge__table-wrap">
+      <table class="pge__table">
         <thead>
-          <tr class="border-b border-neutral-800">
-            <th class="text-left py-3 px-4 text-neutral-500 font-medium">Group Name</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Homes Limit</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Cooldown (s)</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Countdown (s)</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Daily Limit</th>
-            <th class="w-12"></th>
+          <tr>
+            <th class="pge__th pge__th--left">Group name</th>
+            <th class="pge__th">Homes limit</th>
+            <th class="pge__th">Cooldown (s)</th>
+            <th class="pge__th">Countdown (s)</th>
+            <th class="pge__th">Daily limit</th>
+            <th class="pge__th pge__th--action" />
           </tr>
         </thead>
         <tbody>
           <tr
             v-for="group in groups"
             :key="group.name"
-            class="border-b border-neutral-800/50"
+            class="pge__tr"
           >
-            <td class="py-3 px-4 text-neutral-200 font-medium">{{ group.name }}</td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--name">{{ group.name }}</td>
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.homesLimit"
+                min="0"
                 @input="updateField(group.name, 'homesLimit', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
-                min="0"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.cooldown"
+                min="0"
                 @input="updateField(group.name, 'cooldown', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
-                min="0"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.countdown"
-                @input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
                 min="0"
+                @input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.dailyLimit"
-                @input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
                 min="0"
+                @input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
               />
             </td>
-            <td class="py-3 px-4">
-              <button
-                @click="removeGroup(group.name)"
-                class="text-neutral-600 hover:text-red-400 transition-colors p-1"
-              >
-                <Trash2 class="w-4 h-4" />
+            <td class="pge__td pge__td--action">
+              <button class="pge__del" type="button" @click="removeGroup(group.name)">
+                <Icon name="trash-2" :size="15" />
               </button>
             </td>
           </tr>
@@ -193,3 +193,63 @@ function updateField(groupName: string, field: string, value: number) {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shell ---------- */
+.pge { display: flex; flex-direction: column; gap: 14px; }
+
+/* ---------- Head ---------- */
+.pge__head { display: flex; align-items: center; justify-content: space-between; }
+.pge__section-label {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+
+/* ---------- Add row ---------- */
+.pge__add-row { display: flex; gap: 8px; align-items: center; }
+.pge__name-input {
+  flex: 1; height: var(--control-h-sm); padding: 0 10px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-sans);
+  font-size: var(--text-sm); color: var(--text-primary);
+}
+.pge__name-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.pge__name-input::placeholder { color: var(--text-muted); }
+
+/* ---------- Table ---------- */
+.pge__table-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--ring-default); }
+.pge__table { width: 100%; border-collapse: collapse; }
+.pge__th {
+  padding: 9px 12px; font-size: var(--text-xs); font-weight: 600;
+  color: var(--text-tertiary); text-align: center;
+  background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle);
+}
+.pge__th--left { text-align: left; }
+.pge__th--action { width: 44px; }
+.pge__tr { border-bottom: 1px solid var(--border-subtle); }
+.pge__tr:last-child { border-bottom: 0; }
+.pge__tr:hover { background: var(--surface-hover); }
+.pge__td { padding: 8px 12px; font-size: var(--text-sm); color: var(--text-primary); }
+.pge__td--name { font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.pge__td--num { text-align: center; }
+.pge__td--action { text-align: center; }
+
+/* ---------- Number input (table cell) ---------- */
+.pge__num-input {
+  width: 80px; height: 28px; padding: 0 8px; text-align: center;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-mono);
+  font-size: var(--text-sm); color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.pge__num-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* ---------- Delete button ---------- */
+.pge__del {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  transition: var(--transition-colors);
+}
+.pge__del:hover { color: var(--danger); background: var(--status-offline-soft); }
+</style>

frontend/src/views/admin/AutoDoorsView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useAutoDoorsStore } from '@/stores/autodoors'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  DoorOpen,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useAutoDoorsStore()
 
@@ -21,13 +17,13 @@ const importConfigName = ref('')
 
 // Door types from the AutoDoors plugin
 const doorTypes = [
-  { key: 'door.hinged.wood', label: 'Wooden Door', displayName: 'Wooden Door' },
-  { key: 'door.hinged.metal', label: 'Sheet Metal Door', displayName: 'Sheet Metal Door' },
-  { key: 'door.hinged.toptier', label: 'Armored Door', displayName: 'Armored Door' },
-  { key: 'door.double.hinged.wood', label: 'Double Wooden Door', displayName: 'Double Wooden Door' },
-  { key: 'door.double.hinged.metal', label: 'Double Sheet Metal Door', displayName: 'Double Sheet Metal Door' },
-  { key: 'door.double.hinged.toptier', label: 'Double Armored Door', displayName: 'Double Armored Door' },
-  { key: 'floor.ladder.hatch', label: 'Ladder Hatch', displayName: 'Ladder Hatch' },
+  { key: 'door.hinged.wood', label: 'Wooden door', displayName: 'Wooden Door' },
+  { key: 'door.hinged.metal', label: 'Sheet metal door', displayName: 'Sheet Metal Door' },
+  { key: 'door.hinged.toptier', label: 'Armored door', displayName: 'Armored Door' },
+  { key: 'door.double.hinged.wood', label: 'Double wooden door', displayName: 'Double Wooden Door' },
+  { key: 'door.double.hinged.metal', label: 'Double sheet metal door', displayName: 'Double Sheet Metal Door' },
+  { key: 'door.double.hinged.toptier', label: 'Double armored door', displayName: 'Double Armored Door' },
+  { key: 'floor.ladder.hatch', label: 'Ladder hatch', displayName: 'Ladder Hatch' },
 ]
 
 onMounted(async () => {
@@ -154,442 +150,472 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// Helper: coerce getConfigValue result to boolean for Switch
+function getBool(path: string, def: boolean): boolean {
+  return !!getConfigValue(path, def)
+}
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Auto Doors</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="adv">
+    <!-- Page head -->
+    <div class="adv__head">
+      <div class="adv__head-id">
+        <div class="adv__head-chip">
+          <Icon name="door-open" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="adv__title">Auto doors</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="adv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="adv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="adv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="adv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="adv__loading">
+      <span class="adv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <DoorOpen class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No AutoDoors Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="door-open"
+        title="No AutoDoors config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Settings Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <SettingsIcon class="w-4 h-4 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Global Settings</h3>
-        </div>
-
-        <!-- Delay Settings -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Default Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Time before door auto-closes</p>
-            <div class="flex items-center gap-3">
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Global settings -->
+      <Panel title="Global settings">
+        <!-- Delay sliders -->
+        <div class="adv__delay-grid">
+          <div class="adv__field">
+            <div class="adv__field-label">Default delay (seconds)</div>
+            <div class="adv__field-hint">Time before door auto-closes</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('DefaultDelay', 5)"
-                @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('DefaultDelay', 5)"
+                min="1"
+                max="30"
+                class="cc-num-input adv__delay-num"
                 @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
-                min="1"
-                max="30"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Minimum Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Lowest delay a player can set</p>
-            <div class="flex items-center gap-3">
+          <div class="adv__field">
+            <div class="adv__field-label">Minimum delay (seconds)</div>
+            <div class="adv__field-hint">Lowest delay a player can set</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('MinimumDelay', 5)"
-                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('MinimumDelay', 5)"
-                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input adv__delay-num"
+                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Maximum Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Highest delay a player can set</p>
-            <div class="flex items-center gap-3">
+          <div class="adv__field">
+            <div class="adv__field-label">Maximum delay (seconds)</div>
+            <div class="adv__field-hint">Highest delay a player can set</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('MaximumDelay', 30)"
-                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="60"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('MaximumDelay', 30)"
-                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="60"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input adv__delay-num"
+                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
         </div>
 
-        <!-- Global Toggles -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="flex items-center justify-between">
+        <!-- Global toggles -->
+        <div class="adv__toggles adv__mt">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Default Enabled</label>
-              <p class="text-xs text-neutral-500">Auto-close enabled for new players by default</p>
+              <div class="adv__toggle-label">Default enabled</div>
+              <div class="adv__toggle-sub">Auto-close enabled for new players by default</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.defaultEnabled', !getConfigValue('GlobalSettings.defaultEnabled', true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.defaultEnabled', true)"
+              @update:model-value="v => setConfigValue('GlobalSettings.defaultEnabled', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Allow Unowned Doors</label>
-              <p class="text-xs text-neutral-500">Auto-close doors that the player does not own</p>
+              <div class="adv__toggle-label">Allow unowned doors</div>
+              <div class="adv__toggle-sub">Auto-close doors that the player does not own</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.useUnownedDoor', !getConfigValue('GlobalSettings.useUnownedDoor', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.useUnownedDoor', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.useUnownedDoor', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Exclude Door Controller</label>
-              <p class="text-xs text-neutral-500">Skip doors that have a Code Lock or Key Lock</p>
+              <div class="adv__toggle-label">Exclude door controller</div>
+              <div class="adv__toggle-sub">Skip doors that have a code lock or key lock</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.excludeDoorController', !getConfigValue('GlobalSettings.excludeDoorController', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.excludeDoorController', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.excludeDoorController', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Cancel on Player Death</label>
-              <p class="text-xs text-neutral-500">Cancel auto-close if the player dies</p>
+              <div class="adv__toggle-label">Cancel on player death</div>
+              <div class="adv__toggle-sub">Cancel auto-close if the player dies</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.cancelOnKill', !getConfigValue('GlobalSettings.cancelOnKill', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.cancelOnKill', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.cancelOnKill', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Use Permissions</label>
-              <p class="text-xs text-neutral-500">Require Oxide permission to use auto-close</p>
+              <div class="adv__toggle-label">Use permissions</div>
+              <div class="adv__toggle-sub">Require Oxide permission to use auto-close</div>
             </div>
-            <button
-              @click="setConfigValue('UsePermissions', !getConfigValue('UsePermissions', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('UsePermissions', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('UsePermissions', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('UsePermissions', false)"
+              @update:model-value="v => setConfigValue('UsePermissions', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Clear Data on Map Wipe</label>
-              <p class="text-xs text-neutral-500">Reset all player preferences on map wipe</p>
+              <div class="adv__toggle-label">Clear data on map wipe</div>
+              <div class="adv__toggle-sub">Reset all player preferences on map wipe</div>
             </div>
-            <button
-              @click="setConfigValue('ClearDataOnWipe', !getConfigValue('ClearDataOnWipe', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('ClearDataOnWipe', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('ClearDataOnWipe', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('ClearDataOnWipe', false)"
+              @update:model-value="v => setConfigValue('ClearDataOnWipe', v)"
+            />
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Door Types Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <div class="flex items-center gap-2">
-          <DoorOpen class="w-4 h-4 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Door Types</h3>
-        </div>
-        <p class="text-xs text-neutral-500">Enable or disable auto-close for each door type.</p>
-
-        <div class="space-y-3">
+      <!-- Door types -->
+      <Panel title="Door types" subtitle="Enable or disable auto-close for each door type.">
+        <div class="adv__toggles">
           <div
             v-for="door in doorTypes"
             :key="door.key"
-            class="flex items-center justify-between py-2 border-b border-neutral-800 last:border-0"
+            class="adv__toggle-row"
           >
             <div>
-              <label class="text-sm text-neutral-200">{{ door.label }}</label>
-              <p class="text-xs text-neutral-500 font-mono">{{ door.key }}</p>
+              <div class="adv__toggle-label">{{ door.label }}</div>
+              <div class="adv__toggle-sub adv__mono">{{ door.key }}</div>
             </div>
-            <button
-              @click="setConfigValue(`DoorSettings.${door.key}.enabled`, !getConfigValue(`DoorSettings.${door.key}.enabled`, true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool(`DoorSettings.${door.key}.enabled`, true)"
+              @update:model-value="v => setConfigValue(`DoorSettings.${door.key}.enabled`, v)"
+            />
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Permission Groups Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <SettingsIcon class="w-4 h-4 text-neutral-400" />
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission Group Overrides</h3>
-          </div>
-          <button
-            @click="addPermissionGroup"
-            class="flex items-center gap-1 px-3 py-1 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-3 h-3" />
-            Add Group
-          </button>
-        </div>
-        <p class="text-xs text-neutral-500">Override the default delay for specific Oxide permission groups.</p>
+      <!-- Permission group overrides -->
+      <Panel title="Permission group overrides" subtitle="Override the default delay for specific Oxide permission groups.">
+        <template #actions>
+          <Button size="sm" icon="plus" variant="secondary" @click="addPermissionGroup">Add group</Button>
+        </template>
 
-        <div v-if="getPermissionGroups().length === 0" class="text-sm text-neutral-500 text-center py-4">
+        <div v-if="getPermissionGroups().length === 0" class="adv__perm-empty">
           No permission group overrides configured.
         </div>
 
-        <div v-else class="space-y-3">
+        <div v-else class="adv__perm-list">
           <div
             v-for="(group, index) in getPermissionGroups()"
             :key="index"
-            class="flex items-center gap-3"
+            class="adv__perm-row"
           >
             <input
               :value="group.name"
-              @input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)"
+              type="text"
+              class="cc-text-input adv__perm-name"
               placeholder="Group name (e.g. vip)"
-              class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              @input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)"
             />
             <input
               type="number"
               :value="group.delay"
-              @input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
               min="1"
               max="60"
-              class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-2 text-neutral-200 text-sm text-center"
+              class="cc-num-input adv__perm-delay"
+              @input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
             />
-            <span class="text-xs text-neutral-500">sec</span>
-            <button
-              @click="removePermissionGroup(group.name)"
-              class="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors"
-            >
-              <Trash2 class="w-4 h-4" />
+            <span class="adv__unit">sec</span>
+            <button class="adv__del-btn" title="Remove group" @click="removePermissionGroup(group.name)">
+              <Icon name="trash-2" :size="15" />
             </button>
           </div>
         </div>
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New AutoDoors Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="adv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="adv__modal">
+        <h2 class="adv__modal-title">New AutoDoors config</h2>
+        <div class="adv__modal-body">
+          <div class="adv__field">
+            <label class="adv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. 5 Second Close"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. 5 second close"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="adv__field">
+            <label class="adv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="adv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current AutoDoors config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="adv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="adv__modal">
+        <h2 class="adv__modal-title">Import from server</h2>
+        <p class="adv__modal-desc">Import the current AutoDoors config from your live server. This will create a new config profile.</p>
+        <div class="adv__modal-body">
+          <div class="adv__field">
+            <label class="adv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="adv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.adv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.adv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.adv__head-id { display: flex; align-items: center; gap: 12px; }
+.adv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.adv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.adv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.adv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.adv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.adv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.adv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.adv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.adv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: adv-spin 0.6s linear infinite;
+}
+@keyframes adv-spin { to { transform: rotate(360deg); } }
+
+/* Delay grid */
+.adv__delay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+@media (max-width: 700px) { .adv__delay-grid { grid-template-columns: 1fr; } }
+.adv__slider-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+.adv__slider { flex: 1; cursor: pointer; }
+.adv__delay-num { width: 60px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.adv__unit { font-size: var(--text-xs); color: var(--text-tertiary); flex: none; }
+.adv__mt { margin-top: 20px; }
+
+/* Fields */
+.adv__field { display: flex; flex-direction: column; gap: 4px; }
+.adv__field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.adv__field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* Toggle rows */
+.adv__toggles { display: flex; flex-direction: column; }
+.adv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
+}
+.adv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.adv__toggle-row:first-child { padding-top: 0; }
+.adv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.adv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.adv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Permission groups */
+.adv__perm-empty { font-size: var(--text-sm); color: var(--text-tertiary); text-align: center; padding: 20px 0; }
+.adv__perm-list { display: flex; flex-direction: column; gap: 8px; }
+.adv__perm-row { display: flex; align-items: center; gap: 8px; }
+.adv__perm-name { flex: 1; }
+.adv__perm-delay { width: 72px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.adv__del-btn {
+  width: 34px; height: 34px; border-radius: var(--radius-sm); border: none; background: transparent;
+  color: var(--danger); display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: var(--transition-colors); flex: none;
+}
+.adv__del-btn:hover { background: var(--status-offline-soft); }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Modal */
+.adv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.adv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.adv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.adv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.adv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.adv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>

frontend/src/views/admin/FurnaceSplitterView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Flame,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useFurnaceSplitterStore()
 
@@ -57,13 +53,13 @@ function setConfigValue(path: string, value: any) {
 
 // Furnace types with display names
 const furnaceTypes = [
-  { key: 'furnace', label: 'Small Furnace', description: 'Standard furnace for smelting ores' },
-  { key: 'furnace.large', label: 'Large Furnace', description: 'Large furnace with more slots' },
+  { key: 'furnace', label: 'Small furnace', description: 'Standard furnace for smelting ores' },
+  { key: 'furnace.large', label: 'Large furnace', description: 'Large furnace with more slots' },
   { key: 'campfire', label: 'Campfire', description: 'Basic campfire for cooking' },
-  { key: 'refinery_small_deployed', label: 'Small Oil Refinery', description: 'Refines crude oil into low grade fuel' },
-  { key: 'skull_fire_pit', label: 'Skull Fire Pit', description: 'Decorative fire pit for cooking' },
-  { key: 'hobobarrel_static', label: 'Hobo Barrel', description: 'Barrel fire for cooking' },
-  { key: 'electricfurnace.deployed', label: 'Electric Furnace', description: 'Electricity-powered furnace' },
+  { key: 'refinery_small_deployed', label: 'Small oil refinery', description: 'Refines crude oil into low grade fuel' },
+  { key: 'skull_fire_pit', label: 'Skull fire pit', description: 'Decorative fire pit for cooking' },
+  { key: 'hobobarrel_static', label: 'Hobo barrel', description: 'Barrel fire for cooking' },
+  { key: 'electricfurnace.deployed', label: 'Electric furnace', description: 'Electricity-powered furnace' },
 ]
 
 // --- Action handlers ---
@@ -111,261 +107,334 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// Helper: coerce getConfigValue result to boolean for Switch
+function getBool(path: string, def: boolean): boolean {
+  return !!getConfigValue(path, def)
+}
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Furnace Splitter Config</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="fsv">
+    <!-- Page head -->
+    <div class="fsv__head">
+      <div class="fsv__head-id">
+        <div class="fsv__head-chip">
+          <Icon name="flame" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="fsv__title">Furnace splitter</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="fsv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="fsv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="fsv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="fsv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="fsv__loading">
+      <span class="fsv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Flame class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No FurnaceSplitter Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="flame"
+        title="No FurnaceSplitter config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Furnace Splitter Settings -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <SettingsIcon class="w-5 h-5 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Splitter Settings</h3>
-        </div>
-
-        <!-- Global enabled -->
-        <div class="flex items-center justify-between">
-          <div>
-            <label class="text-sm text-neutral-200">Enabled</label>
-            <p class="text-xs text-neutral-500">Globally enable or disable furnace splitting</p>
-          </div>
-          <button
-            @click="setConfigValue('Enabled', !getConfigValue('Enabled', true))"
-            class="relative w-11 h-6 rounded-full transition-colors"
-            :class="getConfigValue('Enabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <span
-              class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-              :class="getConfigValue('Enabled', true) ? 'translate-x-5' : 'translate-x-0'"
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Splitter settings -->
+      <Panel title="Splitter settings">
+        <div class="fsv__toggles">
+          <div class="fsv__toggle-row">
+            <div>
+              <div class="fsv__toggle-label">Enabled</div>
+              <div class="fsv__toggle-sub">Globally enable or disable furnace splitting</div>
+            </div>
+            <Switch
+              :model-value="getBool('Enabled', true)"
+              @update:model-value="v => setConfigValue('Enabled', v)"
             />
-          </button>
+          </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Per-Furnace Type Settings -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <Flame class="w-5 h-5 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Furnace Type Settings</h3>
-        </div>
-
-        <div class="space-y-4">
+      <!-- Per-furnace type settings -->
+      <Panel title="Furnace type settings">
+        <div class="fsv__furnace-list">
           <div
             v-for="furnace in furnaceTypes"
             :key="furnace.key"
-            class="bg-neutral-800/50 border border-neutral-700/50 rounded-lg p-4"
+            class="fsv__furnace-card"
           >
-            <div class="flex items-center justify-between mb-3">
+            <div class="fsv__furnace-head">
               <div>
-                <h4 class="text-sm font-medium text-neutral-200">{{ furnace.label }}</h4>
-                <p class="text-xs text-neutral-500">{{ furnace.description }}</p>
+                <div class="fsv__furnace-name">{{ furnace.label }}</div>
+                <div class="fsv__furnace-desc">{{ furnace.description }}</div>
               </div>
-              <button
-                @click="setConfigValue(`Furnaces.${furnace.key}.Enabled`, !getConfigValue(`Furnaces.${furnace.key}.Enabled`, true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getBool(`Furnaces.${furnace.key}.Enabled`, true)"
+                @update:model-value="v => setConfigValue(`Furnaces.${furnace.key}.Enabled`, v)"
+              />
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-xs text-neutral-500 mb-1">Default Split Stacks</label>
+            <div class="fsv__furnace-fields">
+              <div class="fsv__field">
+                <label class="fsv__field-label">Default split stacks</label>
                 <input
                   type="number"
+                  class="cc-num-input"
                   :value="getConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, 0)"
-                  @input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm"
                   placeholder="0 = fill all slots"
+                  @input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
-              <div>
-                <label class="block text-xs text-neutral-500 mb-1">Fuel Multiplier</label>
+              <div class="fsv__field">
+                <label class="fsv__field-label">Fuel multiplier</label>
                 <input
                   type="number"
                   step="0.1"
+                  class="cc-num-input fsv__mono"
                   :value="getConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, 1.0)"
-                  @input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm"
+                  @input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Permission Groups -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission</h3>
-        <p class="text-xs text-neutral-500">
-          The permission <code class="text-neutral-300 bg-neutral-800 px-1 rounded">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
+      <!-- Permission -->
+      <Panel title="Permission">
+        <p class="fsv__perm-text">
+          The permission <code class="fsv__code">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
         </p>
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New FurnaceSplitter Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="fsv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="fsv__modal">
+        <h2 class="fsv__modal-title">New FurnaceSplitter config</h2>
+        <div class="fsv__modal-body">
+          <div class="fsv__field">
+            <label class="fsv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. Default Furnace Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Default furnace settings"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="fsv__field">
+            <label class="fsv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="fsv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current FurnaceSplitter config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="fsv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="fsv__modal">
+        <h2 class="fsv__modal-title">Import from server</h2>
+        <p class="fsv__modal-desc">Import the current FurnaceSplitter config from your live server. This will create a new config profile.</p>
+        <div class="fsv__modal-body">
+          <div class="fsv__field">
+            <label class="fsv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="fsv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.fsv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.fsv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.fsv__head-id { display: flex; align-items: center; gap: 12px; }
+.fsv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.fsv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.fsv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.fsv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.fsv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.fsv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.fsv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.fsv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.fsv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: fsv-spin 0.6s linear infinite;
+}
+@keyframes fsv-spin { to { transform: rotate(360deg); } }
+
+/* Toggles */
+.fsv__toggles { display: flex; flex-direction: column; }
+.fsv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
+}
+.fsv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.fsv__toggle-row:first-child { padding-top: 0; }
+.fsv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.fsv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+
+/* Furnace cards */
+.fsv__furnace-list { display: flex; flex-direction: column; gap: 12px; }
+.fsv__furnace-card {
+  background: var(--surface-raised-2); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px; display: flex; flex-direction: column; gap: 12px;
+}
+.fsv__furnace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.fsv__furnace-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.fsv__furnace-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.fsv__furnace-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 500px) { .fsv__furnace-fields { grid-template-columns: 1fr; } }
+
+/* Fields */
+.fsv__field { display: flex; flex-direction: column; gap: 6px; }
+.fsv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* Permission text */
+.fsv__perm-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
+.fsv__code {
+  font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
+  background: var(--surface-raised-2); color: var(--text-primary); padding: 1px 6px;
+  border-radius: var(--radius-sm); box-shadow: var(--ring-default);
+}
+.fsv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Modal */
+.fsv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.fsv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.fsv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.fsv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.fsv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.fsv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>

frontend/src/views/admin/GatherManagerView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useGatherStore } from '@/stores/gather'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Pickaxe,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useGatherStore()
 
@@ -20,51 +16,51 @@ const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'resources', label: 'Resource Rates', icon: Pickaxe },
-  { key: 'advanced', label: 'Advanced', icon: SettingsIcon },
+const tabItems = [
+  { value: 'resources', label: 'Resource rates', icon: 'pickaxe' },
+  { value: 'advanced', label: 'Advanced', icon: 'settings' },
 ]
 
 // Resource definitions for the main gather tab
 const gatherResources = [
   { key: 'Wood', label: 'Wood' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
-  { key: 'HQM Ore', label: 'HQM Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
   { key: 'Cloth', label: 'Cloth' },
   { key: 'Leather', label: 'Leather' },
-  { key: 'Animal Fat', label: 'Animal Fat' },
-  { key: 'Bone Fragments', label: 'Bone Fragments' },
+  { key: 'Animal Fat', label: 'Animal fat' },
+  { key: 'Bone Fragments', label: 'Bone fragments' },
 ]
 
 // Advanced resource categories
 const pickupResources = [
   { key: 'Wood', label: 'Wood' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
 ]
 
 const quarryResources = [
-  { key: 'HQM Ore', label: 'HQM Ore' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
 ]
 
 const excavatorResources = [
-  { key: 'HQM Ore', label: 'HQM Ore' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
 ]
 
 const surveyResources = [
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'HQM Ore', label: 'HQM Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
 ]
 
 const presets = [
@@ -167,368 +163,428 @@ async function handleImport() {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Gather Rates</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="gv">
+    <!-- Page head -->
+    <div class="gv__head">
+      <div class="gv__head-id">
+        <div class="gv__head-chip">
+          <Icon name="pickaxe" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="gv__title">Gather rates</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="gv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="gv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="gv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="gv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="gv__loading">
+      <span class="gv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Pickaxe class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Gather Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="pickaxe"
+        title="No gather config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Resource Rates Tab -->
-      <div v-if="activeTab === 'resources'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Gather Resource Modifiers</h3>
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-neutral-500 mr-2">Presets:</span>
+      <!-- Resource rates tab -->
+      <Panel v-if="activeTab === 'resources'" title="Gather resource modifiers">
+        <template #actions>
+          <div class="gv__presets">
+            <span class="gv__presets-label">Presets:</span>
             <button
               v-for="preset in presets"
               :key="preset.value"
+              class="gv__preset-btn"
               @click="applyPreset(preset.value)"
-              class="px-3 py-1 text-xs bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 hover:text-white transition-colors"
-            >
-              {{ preset.label }}
-            </button>
+            >{{ preset.label }}</button>
           </div>
-        </div>
+        </template>
 
-        <div class="space-y-4">
+        <div class="gv__rate-list">
           <div
             v-for="resource in gatherResources"
             :key="resource.key"
-            class="flex items-center gap-4"
+            class="gv__rate-row"
           >
-            <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+            <label class="gv__rate-label">{{ resource.label }}</label>
             <input
               type="range"
               :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
-              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               min="0.1"
               max="100"
               step="0.1"
-              class="flex-1 accent-oxide-500"
+              class="gv__slider"
+              style="accent-color: var(--accent)"
+              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
             />
             <input
               type="number"
               :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
-              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               min="0.1"
               max="1000"
               step="0.1"
-              class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+              class="cc-num-input gv__rate-num"
+              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
             />
-            <span class="text-xs text-neutral-500 w-4">x</span>
+            <span class="gv__rate-unit">x</span>
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Advanced Tab -->
-      <div v-else-if="activeTab === 'advanced'" class="space-y-6">
-        <!-- Pickup Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Pickup Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Modify rates for resources picked up from the ground (small rocks, wood piles).</p>
-          <div class="space-y-4">
+      <!-- Advanced tab -->
+      <template v-else-if="activeTab === 'advanced'">
+        <!-- Pickup -->
+        <Panel title="Pickup resource modifiers" subtitle="Modify rates for resources picked up from the ground (small rocks, wood piles).">
+          <div class="gv__rate-list">
             <div
               v-for="resource in pickupResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Quarry Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Quarry Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Scale resource output from Mining Quarries.</p>
-          <div class="space-y-4">
+        <!-- Quarry -->
+        <Panel title="Quarry resource modifiers" subtitle="Scale resource output from mining quarries.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in quarryResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Excavator Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Excavator Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Scale resource output from the Giant Excavator.</p>
-          <div class="space-y-4">
+        <!-- Excavator -->
+        <Panel title="Excavator resource modifiers" subtitle="Scale resource output from the giant excavator.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in excavatorResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Survey Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Survey Charge Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Modify resource amounts from Survey Charge grenades.</p>
-          <div class="space-y-4">
+        <!-- Survey -->
+        <Panel title="Survey charge resource modifiers" subtitle="Modify resource amounts from survey charge grenades.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in surveyResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
+        </Panel>
+      </template>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Gather Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="gv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="gv__modal">
+        <h2 class="gv__modal-title">New gather config</h2>
+        <div class="gv__modal-body">
+          <div class="gv__field">
+            <label class="gv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. 3x Gather Rates"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. 3x gather rates"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="gv__field">
+            <label class="gv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="gv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current GatherManager config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="gv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="gv__modal">
+        <h2 class="gv__modal-title">Import from server</h2>
+        <p class="gv__modal-desc">Import the current GatherManager config from your live server. This will create a new config profile.</p>
+        <div class="gv__modal-body">
+          <div class="gv__field">
+            <label class="gv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="gv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.gv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.gv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.gv__head-id { display: flex; align-items: center; gap: 12px; }
+.gv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.gv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.gv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.gv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.gv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.gv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.gv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.gv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.gv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: gv-spin 0.6s linear infinite;
+}
+@keyframes gv-spin { to { transform: rotate(360deg); } }
+
+/* Presets */
+.gv__presets { display: flex; align-items: center; gap: 6px; }
+.gv__presets-label { font-size: var(--text-xs); color: var(--text-tertiary); }
+.gv__preset-btn {
+  height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
+  background: var(--surface-raised-2); color: var(--text-secondary);
+  font-size: var(--text-xs); font-weight: 600; cursor: pointer;
+  box-shadow: var(--ring-default); transition: var(--transition-colors);
+}
+.gv__preset-btn:hover { background: var(--surface-active); color: var(--text-primary); }
+
+/* Rate rows */
+.gv__rate-list { display: flex; flex-direction: column; gap: 12px; }
+.gv__rate-row { display: flex; align-items: center; gap: 12px; }
+.gv__rate-label { font-size: var(--text-sm); color: var(--text-primary); width: 120px; flex: none; }
+.gv__slider { flex: 1; cursor: pointer; }
+.gv__rate-num {
+  width: 72px; height: var(--control-h-sm); flex: none;
+  text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+}
+.gv__rate-unit { font-size: var(--text-xs); color: var(--text-tertiary); width: 12px; flex: none; }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Fields */
+.gv__field { display: flex; flex-direction: column; gap: 6px; }
+.gv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* Modal */
+.gv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.gv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.gv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.gv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.gv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.gv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>

frontend/src/views/admin/LootBuilderView.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useLootStore } from '@/stores/loot'
 import { useToastStore } from '@/stores/toast'
 import LootContainerSidebar from '@/components/loot/LootContainerSidebar.vue'
 import LootItemEditor from '@/components/loot/LootItemEditor.vue'
 import LootGroupEditor from '@/components/loot/LootGroupEditor.vue'
 import LootItemPicker from '@/components/loot/LootItemPicker.vue'
-import { Save, Upload, Download, Play, Copy, Trash2, Plus, Layers } from 'lucide-vue-next'
+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 EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import DsSelect from '@/components/ds/forms/Select.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const loot = useLootStore()
 const toast = useToastStore()
@@ -24,6 +31,20 @@ const activeTab = ref<'items' | 'groups'>('items')
 
 const multipliers = [1, 2, 5, 10]
 
+const tabItems = [
+  { value: 'items', label: 'Container items' },
+  { value: 'groups', label: 'Loot groups', icon: 'layers' },
+]
+
+// Profile selector options for DS Select
+const profileOptions = computed(() =>
+  loot.profiles.map(p => ({
+    value: p.id,
+    label: p.profile_name + (p.is_active ? ' (active)' : ''),
+  }))
+)
+const currentProfileId = computed(() => loot.currentProfile?.id ?? '')
+
 onMounted(async () => {
   await loot.fetchProfiles()
   if (loot.profiles.length > 0 && loot.profiles[0]) {
@@ -130,145 +151,139 @@ function handleAddItem(shortname: string) {
 </script>
 
 <template>
-  <div class="p-6 space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-neutral-100">Loot Builder</h1>
-      <div class="flex items-center gap-2">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Profile
-        </button>
+  <div class="lb-root">
+    <!-- Page header -->
+    <div class="lb-header">
+      <div class="lb-header__left">
+        <h1 class="lb-title">Loot builder</h1>
+        <Badge v-if="loot.isDirty" tone="warn">Unsaved changes</Badge>
       </div>
+      <Button size="sm" variant="secondary" icon="plus" @click="showCreateModal = true">
+        New profile
+      </Button>
     </div>
 
-    <!-- Profile Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Profile Selector -->
-        <select
-          v-if="loot.profiles.length > 0"
-          :value="loot.currentProfile?.id || ''"
-          @change="handleProfileChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
-        >
-          <option v-for="p in loot.profiles" :key="p.id" :value="p.id">
-            {{ p.profile_name }}
-            <template v-if="p.is_active"> (Active)</template>
-          </option>
-        </select>
-        <span v-else class="text-neutral-500 text-sm">No profiles yet</span>
-
-        <!-- Save -->
-        <button
-          @click="loot.saveCurrentProfile()"
-          :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ loot.isSaving ? 'Saving...' : 'Save' }}
-        </button>
-
-        <!-- Apply Dropdown -->
-        <div class="relative">
-          <button
-            @click="showApplyDropdown = !showApplyDropdown"
-            :disabled="!loot.currentProfile || loot.isApplying"
-            class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-          >
-            <Play class="w-4 h-4" />
-            {{ loot.isApplying ? 'Applying...' : 'Apply to Server' }}
-          </button>
-          <div
-            v-if="showApplyDropdown"
-            class="absolute top-full mt-1 right-0 bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-10 py-1 min-w-[140px]"
-          >
-            <button
-              v-for="m in multipliers"
-              :key="m"
-              @click="handleApply(m)"
-              class="w-full text-left px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-700"
-            >
-              {{ m }}x Multiplier
-            </button>
-          </div>
+    <!-- Profile toolbar -->
+    <Panel>
+      <div class="lb-toolbar">
+        <!-- Profile selector -->
+        <div class="lb-toolbar__profile">
+          <DsSelect
+            v-if="loot.profiles.length > 0"
+            :options="profileOptions"
+            :model-value="currentProfileId"
+            @update:model-value="(v: string | undefined) => { if (v) handleProfileChange(v) }"
+          />
+          <span v-else class="lb-toolbar__empty">No profiles yet</span>
         </div>
 
-        <!-- Duplicate -->
-        <button
-          @click="handleDuplicate"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
-        >
-          <Copy class="w-4 h-4" />
-          Duplicate
-        </button>
+        <div class="lb-toolbar__actions">
+          <!-- Save -->
+          <Button
+            size="sm"
+            variant="primary"
+            icon="save"
+            :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
+            :loading="loot.isSaving"
+            @click="loot.saveCurrentProfile()"
+          >
+            {{ loot.isSaving ? 'Saving…' : 'Save' }}
+          </Button>
 
-        <!-- Import -->
-        <button
-          @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Upload class="w-4 h-4" />
-          Import
-        </button>
+          <!-- Apply to server with multiplier dropdown -->
+          <div class="lb-apply-wrap">
+            <Button
+              size="sm"
+              variant="outline"
+              icon="play"
+              :disabled="!loot.currentProfile || loot.isApplying"
+              :loading="loot.isApplying"
+              @click="showApplyDropdown = !showApplyDropdown"
+            >
+              {{ loot.isApplying ? 'Applying…' : 'Apply to server' }}
+            </Button>
+            <div v-if="showApplyDropdown" class="lb-dropdown">
+              <button
+                v-for="m in multipliers"
+                :key="m"
+                class="lb-dropdown__item"
+                @click="handleApply(m)"
+              >
+                {{ m }}x multiplier
+              </button>
+            </div>
+          </div>
 
-        <!-- Export -->
-        <button
-          @click="handleExport"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Export
-        </button>
+          <!-- Duplicate -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="copy"
+            :disabled="!loot.currentProfile"
+            @click="handleDuplicate"
+          >
+            Duplicate
+          </Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteProfile"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          <!-- Import -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="upload"
+            @click="showImportModal = true"
+          >
+            Import
+          </Button>
+
+          <!-- Export -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="download"
+            :disabled="!loot.currentProfile"
+            @click="handleExport"
+          >
+            Export
+          </Button>
+
+          <!-- Delete -->
+          <Button
+            size="sm"
+            variant="danger-soft"
+            icon="trash-2"
+            :disabled="!loot.currentProfile"
+            @click="handleDeleteProfile"
+          >
+            Delete
+          </Button>
+        </div>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="loot.isLoading" class="lb-loading">
+      <Icon name="loader" :size="28" class="lb-spin" />
     </div>
 
-    <!-- Main Content -->
-    <div v-if="loot.currentProfile" class="flex gap-4" style="height: calc(100vh - 250px)">
-      <!-- Sidebar -->
+    <!-- Main editor layout -->
+    <div v-else-if="loot.currentProfile" class="lb-workspace">
+      <!-- Container sidebar -->
       <LootContainerSidebar
         :loot-table="loot.currentProfile.loot_table"
         :selected="loot.selectedContainer"
         @select="loot.selectedContainer = $event"
       />
 
-      <!-- Editor Area -->
-      <div class="flex-1 flex flex-col min-w-0">
-        <!-- Tabs -->
-        <div class="flex border-b border-neutral-800 mb-4">
-          <button
-            @click="activeTab = 'items'"
-            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-            :class="activeTab === 'items' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-          >
-            Container Items
-          </button>
-          <button
-            @click="activeTab = 'groups'"
-            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2"
-            :class="activeTab === 'groups' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-          >
-            <Layers class="w-4 h-4" />
-            Loot Groups
-          </button>
-        </div>
+      <!-- Editor area -->
+      <div class="lb-editor">
+        <Tabs
+          v-model="activeTab"
+          :items="tabItems"
+          variant="line"
+          class="lb-tabs"
+        />
 
-        <div class="flex-1 overflow-y-auto">
+        <div class="lb-editor__body">
           <LootItemEditor
             v-if="activeTab === 'items' && loot.selectedContainer"
             :container-key="loot.selectedContainer"
@@ -276,8 +291,12 @@ function handleAddItem(shortname: string) {
             @dirty="loot.markDirty()"
             @add-item="showItemPicker = true"
           />
-          <div v-else-if="activeTab === 'items'" class="flex items-center justify-center h-full text-neutral-500">
-            Select a container from the sidebar
+          <div v-else-if="activeTab === 'items'" class="lb-editor__placeholder">
+            <EmptyState
+              icon="box"
+              title="No container selected"
+              description="Select a container from the sidebar to configure its loot."
+            />
           </div>
 
           <LootGroupEditor
@@ -289,98 +308,103 @@ function handleAddItem(shortname: string) {
       </div>
     </div>
 
-    <!-- Empty State -->
-    <div v-else-if="!loot.isLoading" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Layers class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Loot Profile Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new profile or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
-      >
-        Create First Profile
-      </button>
+    <!-- Empty state — no profile -->
+    <div v-else class="lb-empty-wrap">
+      <Panel>
+        <EmptyState
+          icon="layers"
+          title="No loot profile selected"
+          description="Create a new profile or select one above."
+        >
+          <template #action>
+            <Button icon="plus" @click="showCreateModal = true">Create first profile</Button>
+          </template>
+        </EmptyState>
+      </Panel>
     </div>
 
-    <!-- Loading -->
-    <div v-if="loot.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- Create Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Loot Profile</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
-            <input
+    <!-- Create profile modal -->
+    <Teleport to="body">
+      <div v-if="showCreateModal" class="lb-overlay" @click.self="showCreateModal = false">
+        <div class="lb-modal">
+          <div class="lb-modal__head">
+            <span class="lb-modal__title">New loot profile</span>
+            <button class="lb-modal__close" @click="showCreateModal = false" aria-label="Close">
+              <Icon name="x" :size="16" />
+            </button>
+          </div>
+          <div class="lb-modal__body">
+            <DsInput
               v-model="newProfileName"
+              label="Profile name"
               placeholder="e.g. Vanilla 2x"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               @keydown.enter="handleCreateProfile"
             />
+            <div class="lb-field">
+              <label class="lb-field__label">Description <span class="lb-field__opt">(optional)</span></label>
+              <textarea
+                v-model="newProfileDesc"
+                rows="2"
+                placeholder="What is this profile for?"
+                class="cc-textarea"
+              />
+            </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
-            <textarea
-              v-model="newProfileDesc"
-              rows="2"
-              placeholder="What is this profile for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateProfile"
+          <div class="lb-modal__foot">
+            <Button variant="ghost" size="sm" @click="showCreateModal = false">Cancel</Button>
+            <Button
+              size="sm"
               :disabled="!newProfileName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+              @click="handleCreateProfile"
             >
               Create
-            </button>
+            </Button>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Import Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-lg">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import Loot Profile</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
-            <input
+    <!-- Import modal -->
+    <Teleport to="body">
+      <div v-if="showImportModal" class="lb-overlay" @click.self="showImportModal = false">
+        <div class="lb-modal lb-modal--wide">
+          <div class="lb-modal__head">
+            <span class="lb-modal__title">Import loot profile</span>
+            <button class="lb-modal__close" @click="showImportModal = false" aria-label="Close">
+              <Icon name="x" :size="16" />
+            </button>
+          </div>
+          <div class="lb-modal__body">
+            <DsInput
               v-model="importName"
+              label="Profile name"
               placeholder="Name for imported profile"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
+            <div class="lb-field">
+              <label class="lb-field__label">BetterLoot JSON</label>
+              <textarea
+                v-model="importJson"
+                rows="10"
+                placeholder="Paste LootTables.json content here…"
+                class="cc-textarea cc-textarea--mono"
+              />
+            </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">BetterLoot JSON</label>
-            <textarea
-              v-model="importJson"
-              rows="10"
-              placeholder="Paste LootTables.json content here..."
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm font-mono resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
+          <div class="lb-modal__foot">
+            <Button variant="ghost" size="sm" @click="showImportModal = false">Cancel</Button>
+            <Button
+              size="sm"
               :disabled="!importName.trim() || !importJson.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+              @click="handleImport"
             >
               Import
-            </button>
+            </Button>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Item Picker Modal -->
+    <!-- Item picker modal -->
     <LootItemPicker
       v-if="showItemPicker"
       @select="handleAddItem"
@@ -388,6 +412,255 @@ function handleAddItem(shortname: string) {
     />
 
     <!-- Click-away for apply dropdown -->
-    <div v-if="showApplyDropdown" class="fixed inset-0 z-0" @click="showApplyDropdown = false" />
+    <div v-if="showApplyDropdown" class="lb-clickaway" @click="showApplyDropdown = false" />
   </div>
 </template>
+
+<style scoped>
+.lb-root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  min-height: 0;
+}
+
+/* Header */
+.lb-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.lb-header__left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.lb-title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* Toolbar inside Panel */
+.lb-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.lb-toolbar__profile {
+  min-width: 200px;
+  flex: none;
+}
+.lb-toolbar__empty {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+.lb-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Apply dropdown */
+.lb-apply-wrap {
+  position: relative;
+}
+.lb-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 40;
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+}
+.lb-dropdown__item {
+  background: transparent;
+  border: 0;
+  padding: 8px 12px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors);
+}
+.lb-dropdown__item:hover {
+  background: var(--surface-hover);
+}
+
+/* Loading */
+.lb-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0;
+  color: var(--accent);
+}
+.lb-spin {
+  animation: lb-spin 0.7s linear infinite;
+}
+@keyframes lb-spin { to { transform: rotate(360deg); } }
+
+/* Workspace (sidebar + editor) */
+.lb-workspace {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - 260px);
+}
+
+/* Editor column */
+.lb-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.lb-tabs {
+  margin-bottom: 4px;
+}
+.lb-editor__body {
+  flex: 1;
+  overflow-y: auto;
+  padding-top: 12px;
+}
+.lb-editor__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* Empty state wrapper */
+.lb-empty-wrap {}
+
+/* Click-away backdrop */
+.lb-clickaway {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+}
+
+/* Modal overlay */
+.lb-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+.lb-modal {
+  background: var(--surface-raised);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.lb-modal--wide {
+  max-width: 560px;
+}
+.lb-modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lb-modal__title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.lb-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition-colors);
+}
+.lb-modal__close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lb-modal__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.lb-modal__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px 16px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* Field (textarea wrapper) */
+.lb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.lb-field__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.lb-field__opt {
+  font-weight: 400;
+  color: var(--text-muted);
+  margin-left: 3px;
+}
+
+/* Bare textarea with token styling */
+.cc-textarea {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 11px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  resize: none;
+  outline: none;
+  transition: var(--transition-colors);
+  line-height: var(--leading-relaxed);
+}
+.cc-textarea::placeholder {
+  color: var(--text-muted);
+}
+.cc-textarea:focus-within,
+.cc-textarea:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-textarea--mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+</style>

frontend/src/views/admin/PluginConfigsView.vue

@@ -11,19 +11,13 @@ import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
 import { useBetterChatStore } from '@/stores/betterchat'
 import { useTimedExecuteStore } from '@/stores/timedexecute'
 import { useRaidableBasesStore } from '@/stores/raidablebases'
-import {
-  Crosshair,
-  Navigation2,
-  Pickaxe,
-  DoorOpen,
-  Gift,
-  Flame,
-  MessageSquare,
-  Clock,
-  Swords,
-  Search,
-  ArrowRight,
-} from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -45,7 +39,7 @@ interface PluginDef {
   key: string
   name: string
   description: string
-  icon: any
+  icon: string
   path: string
   permission: string
   getConfigs: () => any[]
@@ -53,15 +47,15 @@ interface PluginDef {
 }
 
 const plugins: PluginDef[] = [
-  { key: 'loot', name: 'Loot Tables', description: 'Configure loot container drop tables and item probabilities', icon: Crosshair, path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
-  { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: Navigation2, path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
-  { key: 'gather', name: 'Gather Rates', description: 'Resource gathering multipliers and pickup rates', icon: Pickaxe, path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
-  { key: 'autodoors', name: 'Auto Doors', description: 'Automatic door closing delays and permissions', icon: DoorOpen, path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
-  { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: Gift, path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
-  { key: 'furnacesplitter', name: 'Furnace Splitter', description: 'Automatic furnace ore splitting and smelting config', icon: Flame, path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
-  { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: MessageSquare, path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
-  { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: Clock, path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
-  { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: Swords, path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
+  { key: 'loot', name: 'Loot tables', description: 'Configure loot container drop tables and item probabilities', icon: 'crosshair', path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
+  { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: 'navigation', path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
+  { key: 'gather', name: 'Gather rates', description: 'Resource gathering multipliers and pickup rates', icon: 'pickaxe', path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
+  { key: 'autodoors', name: 'Auto doors', description: 'Automatic door closing delays and permissions', icon: 'door-open', path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
+  { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: 'gift', path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
+  { key: 'furnacesplitter', name: 'Furnace splitter', description: 'Automatic furnace ore splitting and smelting config', icon: 'flame', path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
+  { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: 'message-square', path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
+  { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: 'clock', path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
+  { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: 'swords', path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
 ]
 
 const visiblePlugins = computed(() =>
@@ -76,12 +70,12 @@ const filteredPlugins = computed(() => {
   )
 })
 
-function getStatus(plugin: PluginDef): { label: string; color: string } {
+function getStatus(plugin: PluginDef): { label: string; tone: 'online' | 'info' | 'neutral' } {
   const configs = plugin.getConfigs()
-  if (!configs || configs.length === 0) return { label: 'Not Configured', color: 'neutral' }
+  if (!configs || configs.length === 0) return { label: 'Not configured', tone: 'neutral' }
   const hasActive = configs.some((c: any) => c.is_active)
-  if (hasActive) return { label: 'Active', color: 'green' }
-  return { label: 'Configured', color: 'blue' }
+  if (hasActive) return { label: 'Active', tone: 'online' }
+  return { label: 'Configured', tone: 'info' }
 }
 
 function getConfigCount(plugin: PluginDef): string {
@@ -90,6 +84,12 @@ function getConfigCount(plugin: PluginDef): string {
   return `${configs.length} profile${configs.length !== 1 ? 's' : ''}`
 }
 
+// Search model — DS Input uses string v-model
+const searchModel = computed<string>({
+  get: () => searchQuery.value,
+  set: (v: string | undefined) => { searchQuery.value = v ?? '' },
+})
+
 onMounted(async () => {
   const fetches = visiblePlugins.value.map(p => p.fetchFn().catch(() => {}))
   await Promise.all(fetches)
@@ -98,88 +98,142 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-6 max-w-7xl mx-auto">
-    <!-- Header -->
-    <div class="mb-6">
-      <h1 class="text-2xl font-bold text-white">Plugin Configs</h1>
-      <p class="text-neutral-400 mt-1">Configure and manage your server plugins</p>
+  <div class="pc">
+    <!-- Page head -->
+    <div class="pc__head">
+      <div class="pc__head-id">
+        <div class="pc__head-chip">
+          <Icon name="puzzle" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin management</div>
+          <h1 class="pc__title">Plugin configs</h1>
+        </div>
+      </div>
     </div>
 
     <!-- Search -->
-    <div class="relative mb-6">
-      <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 plugins..."
-        class="w-full pl-10 pr-4 py-2 bg-neutral-900 border border-neutral-800 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-oxide-500 transition-colors"
-      />
-    </div>
+    <Input
+      v-model="searchModel"
+      icon="search"
+      placeholder="Search plugins…"
+    />
 
-    <!-- Loading -->
-    <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Loading skeleton -->
+    <div v-if="loading" class="pc__grid">
       <div
         v-for="i in visiblePlugins.length"
         :key="i"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 animate-pulse"
+        class="pc__skeleton"
       >
-        <div class="flex items-center gap-3 mb-3">
-          <div class="w-10 h-10 bg-neutral-800 rounded-lg" />
-          <div class="flex-1">
-            <div class="h-4 w-24 bg-neutral-800 rounded" />
-            <div class="h-3 w-16 bg-neutral-800 rounded mt-2" />
-          </div>
+        <div class="pc__skel-icon" />
+        <div class="pc__skel-lines">
+          <div class="pc__skel-line pc__skel-line--name" />
+          <div class="pc__skel-line pc__skel-line--sub" />
         </div>
-        <div class="h-3 w-full bg-neutral-800 rounded mt-3" />
-        <div class="h-3 w-2/3 bg-neutral-800 rounded mt-2" />
       </div>
     </div>
 
-    <!-- Cards -->
-    <div v-else-if="filteredPlugins.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Cards grid -->
+    <div v-else-if="filteredPlugins.length" class="pc__grid">
       <div
         v-for="plugin in filteredPlugins"
         :key="plugin.key"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-neutral-700 transition-colors group"
+        class="pc__card"
       >
-        <div class="flex items-start justify-between mb-3">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center group-hover:bg-oxide-500/10 transition-colors">
-              <component :is="plugin.icon" class="w-5 h-5 text-neutral-400 group-hover:text-oxide-400 transition-colors" />
+        <!-- Card head -->
+        <div class="pc__card-head">
+          <div class="pc__card-id">
+            <div class="pc__card-icon">
+              <Icon :name="plugin.icon" :size="18" :stroke-width="2" />
             </div>
             <div>
-              <h3 class="text-sm font-semibold text-white">{{ plugin.name }}</h3>
-              <span class="text-xs text-neutral-500">{{ getConfigCount(plugin) }}</span>
+              <div class="pc__card-name">{{ plugin.name }}</div>
+              <div class="pc__card-count">{{ getConfigCount(plugin) }}</div>
             </div>
           </div>
-          <!-- Status badge -->
-          <span
-            class="text-[10px] font-medium px-2 py-0.5 rounded-full"
-            :class="{
-              'bg-green-500/10 text-green-400': getStatus(plugin).color === 'green',
-              'bg-blue-500/10 text-blue-400': getStatus(plugin).color === 'blue',
-              'bg-neutral-800 text-neutral-500': getStatus(plugin).color === 'neutral',
-            }"
-          >
-            {{ getStatus(plugin).label }}
-          </span>
+          <Badge :tone="getStatus(plugin).tone">{{ getStatus(plugin).label }}</Badge>
         </div>
 
-        <p class="text-xs text-neutral-400 mb-4 line-clamp-2">{{ plugin.description }}</p>
+        <!-- Description -->
+        <p class="pc__card-desc">{{ plugin.description }}</p>
 
-        <button
+        <!-- Configure button -->
+        <Button
+          variant="secondary"
+          size="sm"
+          icon-right="chevron-right"
+          :block="true"
           @click="router.push(plugin.path)"
-          class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-neutral-800 hover:bg-oxide-500/10 text-neutral-300 hover:text-oxide-400 text-xs font-medium rounded-lg transition-colors"
-        >
-          Configure
-          <ArrowRight class="w-3 h-3" />
-        </button>
+        >Configure</Button>
       </div>
     </div>
 
-    <!-- Empty state -->
-    <div v-else class="text-center py-12">
-      <p class="text-neutral-500">No plugins match your search.</p>
-    </div>
+    <!-- Empty state (search miss) -->
+    <Panel v-else>
+      <EmptyState
+        icon="search"
+        title="No plugins match"
+        description="Try a different search term."
+      />
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+/* ---- Page shell ---- */
+.pc { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---- Page head ---- */
+.pc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.pc__head-id { display: flex; align-items: center; gap: 12px; }
+.pc__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pc__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* ---- Grid ---- */
+.pc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+@media (max-width: 900px)  { .pc__grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 540px)  { .pc__grid { grid-template-columns: 1fr; } }
+
+/* ---- Card ---- */
+.pc__card {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
+  transition: var(--transition-colors);
+}
+.pc__card:hover { background: var(--surface-raised); }
+
+.pc__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.pc__card-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.pc__card-icon {
+  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-tertiary); background: var(--surface-raised-2);
+  box-shadow: var(--ring-default); transition: var(--transition-colors);
+}
+.pc__card:hover .pc__card-icon { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.pc__card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.pc__card-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
+.pc__card-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; flex: 1; }
+
+/* ---- Skeleton ---- */
+.pc__skeleton {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  padding: 16px; display: flex; align-items: flex-start; gap: 12px;
+  animation: pc-pulse 1.4s ease-in-out infinite;
+}
+@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
+.pc__skel-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-raised-2); flex: none; }
+.pc__skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
+.pc__skel-line { height: 10px; border-radius: var(--radius-sm); background: var(--surface-raised-2); }
+.pc__skel-line--name { width: 60%; }
+.pc__skel-line--sub { width: 40%; }
+</style>

frontend/src/views/admin/TimedExecuteView.vue

@@ -1,32 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useTimedExecuteStore } from '@/stores/timedexecute'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Clock,
-  Settings as SettingsIcon,
-  UserPlus,
-  UserMinus,
-} from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useTimedExecuteStore()
 
-const activeTab = ref<'timed' | 'realtime' | 'connect' | 'disconnect'>('timed')
+const activeTab = ref<string>('timed')
 const showCreateModal = ref(false)
 const showImportModal = ref(false)
 const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'timed', label: 'Timed Commands', icon: Clock },
-  { key: 'realtime', label: 'Real-Time', icon: SettingsIcon },
-  { key: 'connect', label: 'On Connect', icon: UserPlus },
-  { key: 'disconnect', label: 'On Disconnect', icon: UserMinus },
+const tabItems = [
+  { value: 'timed', label: 'Timed commands', icon: 'clock' },
+  { value: 'realtime', label: 'Real-time', icon: 'settings' },
+  { value: 'connect', label: 'On connect', icon: 'user' },
+  { value: 'disconnect', label: 'On disconnect', icon: 'user' },
 ]
 
 onMounted(async () => {
@@ -228,428 +226,438 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// DS Select model
+const selectedConfigId = computed<string>({
+  get: () => store.currentConfig?.id ?? '',
+  set: (v: string | undefined) => { handleConfigChange(v ?? '') },
+})
+const configSelectOptions = computed(() =>
+  store.configs.map(c => ({
+    value: c.id,
+    label: c.config_name + (c.is_active ? ' (active)' : ''),
+  }))
+)
+
+// Switch wrappers
+const enableTimerRepeat = computed<boolean>({
+  get: () => getConfigValue('EnableTimerRepeat', true) as boolean,
+  set: (v: boolean) => setConfigValue('EnableTimerRepeat', v),
+})
+const enableRealTimeTimer = computed<boolean>({
+  get: () => getConfigValue('EnableRealTime-Timer', false) as boolean,
+  set: (v: boolean) => setConfigValue('EnableRealTime-Timer', v),
+})
+
+// Modal bindings
+const newConfigNameModel = computed<string>({
+  get: () => newConfigName.value,
+  set: (v: string | undefined) => { newConfigName.value = v ?? '' },
+})
+const importConfigNameModel = computed<string>({
+  get: () => importConfigName.value,
+  set: (v: string | undefined) => { importConfigName.value = v ?? '' },
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Timed Execute</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="te">
+    <!-- Page head -->
+    <div class="te__head">
+      <div class="te__head-id">
+        <div class="te__head-chip">
+          <Icon name="clock" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin configuration</div>
+          <h1 class="te__title">Timed Execute</h1>
+        </div>
+      </div>
+      <div class="te__head-actions">
+        <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
       </div>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
-        <select
+    <!-- Toolbar panel -->
+    <Panel>
+      <div class="te__toolbar">
+        <Select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
-          @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
-        >
-          <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
-          </option>
-        </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+          v-model="selectedConfigId"
+          :options="configSelectOptions"
+          size="sm"
+          style="min-width: 200px"
+        />
+        <span v-else class="te__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
-          :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+        <div class="te__toolbar-actions">
+          <Button
+            size="sm"
+            icon="save"
+            :loading="store.isSaving"
+            :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
+            @click="store.saveCurrentConfig()"
+          >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
-          :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          <Button
+            size="sm"
+            variant="outline"
+            icon="play"
+            :loading="store.isApplying"
+            :disabled="!store.currentConfig || store.isApplying"
+            @click="handleApply"
+          >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
-          @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+          <Button
+            size="sm"
+            variant="secondary"
+            icon="download"
+            @click="showImportModal = true"
+          >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
-          :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          <Button
+            size="sm"
+            variant="danger-soft"
+            icon="trash-2"
+            :disabled="!store.currentConfig"
+            @click="handleDeleteConfig"
+          >Delete</Button>
+        </div>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="te__loading">
+      <span class="te__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Clock class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No TimedExecute Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty — no config -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="clock"
+        title="No TimedExecute config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Timed Commands Tab -->
-      <div v-if="activeTab === 'timed'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Timer Repeat</h3>
-              <p class="text-xs text-neutral-500 mt-1">Commands executed repeatedly at set intervals (seconds)</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <!-- Enable toggle -->
-              <span class="text-xs text-neutral-400 mr-2">Enabled</span>
-              <button
-                @click="setConfigValue('EnableTimerRepeat', !getConfigValue('EnableTimerRepeat', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('EnableTimerRepeat', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('EnableTimerRepeat', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
+      <!-- Timed commands tab -->
+      <Panel v-if="activeTab === 'timed'" title="Timer repeat" subtitle="Commands executed repeatedly at set intervals (seconds)">
+        <template #actions>
+          <Switch v-model="enableTimerRepeat" label="Enabled" size="sm" />
+        </template>
 
-          <!-- Preset Buttons -->
-          <div class="flex items-center gap-2 flex-wrap">
-            <span class="text-xs text-neutral-500">Quick add:</span>
-            <button
-              @click="addPresetTimer('server.save', 300)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              server.save (5m)
-            </button>
-            <button
-              @click="addPresetTimer('say Server restart warning!', 3600)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              Restart warning (1h)
-            </button>
-            <button
-              @click="addPresetTimer('oxide.reload *', 7200)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              Reload plugins (2h)
-            </button>
-          </div>
+        <!-- Preset quick-add -->
+        <div class="te__presets">
+          <span class="te__presets-label">Quick add:</span>
+          <button class="te__preset" @click="addPresetTimer('server.save', 300)">server.save (5 min)</button>
+          <button class="te__preset" @click="addPresetTimer('say Server restart warning!', 3600)">Restart warning (1 h)</button>
+          <button class="te__preset" @click="addPresetTimer('oxide.reload *', 7200)">Reload plugins (2 h)</button>
+        </div>
 
-          <!-- Entries -->
-          <div v-if="timerRepeatEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No timed commands configured. Add a command or use a preset above.
-          </div>
+        <EmptyState
+          v-if="timerRepeatEntries.length === 0"
+          icon="clock"
+          description="No timed commands configured. Add a command or use a preset above."
+        />
 
-          <div v-else class="space-y-2">
-            <div
-              v-for="(entry, index) in timerRepeatEntries"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
+        <div v-else class="te__entries">
+          <div
+            v-for="(entry, index) in timerRepeatEntries"
+            :key="index"
+            class="te__entry"
+          >
+            <div class="te__entry-cmd">
               <input
                 :value="entry.command"
                 @change="updateTimerRepeatCommand(entry.command, ($event.target as HTMLInputElement).value)"
                 placeholder="console command"
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
+                class="cc-input-raw te__input-grow"
               />
-              <div class="flex items-center gap-1">
-                <input
-                  :value="entry.interval"
-                  @input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
-                  type="number"
-                  min="1"
-                  class="w-24 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-neutral-200 text-sm text-right"
-                />
-                <span class="text-xs text-neutral-500">sec</span>
-              </div>
-              <button
-                @click="removeTimerRepeat(entry.command)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
             </div>
-          </div>
-
-          <button
-            @click="addTimerRepeat"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
-        </div>
-      </div>
-
-      <!-- Real-Time Tab -->
-      <div v-else-if="activeTab === 'realtime'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Real-Time Timer</h3>
-              <p class="text-xs text-neutral-500 mt-1">Commands executed at specific times of day (HH:MM:SS)</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-xs text-neutral-400 mr-2">Enabled</span>
-              <button
-                @click="setConfigValue('EnableRealTime-Timer', !getConfigValue('EnableRealTime-Timer', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('EnableRealTime-Timer', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('EnableRealTime-Timer', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div v-if="realTimeEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No real-time commands configured. Add a time-based command below.
-          </div>
-
-          <div v-else class="space-y-2">
-            <div
-              v-for="(entry, index) in realTimeEntries"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
+            <div class="te__entry-interval">
               <input
-                :value="entry.time"
-                @change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)"
-                placeholder="HH:MM:SS"
-                class="w-32 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
+                :value="entry.interval"
+                @input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
+                type="number"
+                min="1"
+                class="cc-input-raw cc-input-raw--mono te__input-interval"
               />
-              <input
-                :value="entry.command"
-                @change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
-                placeholder="console command"
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeRealTimeEntry(entry.time)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
+              <span class="te__unit">sec</span>
             </div>
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeTimerRepeat(entry.command)" />
           </div>
-
-          <button
-            @click="addRealTimeEntry"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Time Entry
-          </button>
         </div>
-      </div>
 
-      <!-- On Connect Tab -->
-      <div v-else-if="activeTab === 'connect'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div>
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Connect</h3>
-            <p class="text-xs text-neutral-500 mt-1">Commands executed when a player joins the server</p>
-          </div>
-
-          <div v-if="connectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No connect commands configured. Add a command below.
-          </div>
-
-          <div v-else class="space-y-2">
-            <div
-              v-for="(cmd, index) in connectCommands"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
-              <input
-                :value="cmd"
-                @change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
-                placeholder='e.g. say Welcome {player.name}!'
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeConnectCommand(index)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            @click="addConnectCommand"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addTimerRepeat">Add command</Button>
         </div>
-      </div>
+      </Panel>
 
-      <!-- On Disconnect Tab -->
-      <div v-else-if="activeTab === 'disconnect'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div>
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Disconnect</h3>
-            <p class="text-xs text-neutral-500 mt-1">Commands executed when a player leaves the server</p>
-          </div>
+      <!-- Real-time tab -->
+      <Panel v-else-if="activeTab === 'realtime'" title="Real-time timer" subtitle="Commands executed at specific times of day (HH:MM:SS)">
+        <template #actions>
+          <Switch v-model="enableRealTimeTimer" label="Enabled" size="sm" />
+        </template>
 
-          <div v-if="disconnectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No disconnect commands configured. Add a command below.
-          </div>
+        <EmptyState
+          v-if="realTimeEntries.length === 0"
+          icon="clock"
+          description="No real-time commands configured. Add a time-based command below."
+        />
 
-          <div v-else class="space-y-2">
-            <div
-              v-for="(cmd, index) in disconnectCommands"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
-              <input
-                :value="cmd"
-                @change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
-                placeholder='e.g. say {player.name} has left'
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeDisconnectCommand(index)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            @click="addDisconnectCommand"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
+        <div v-else class="te__entries">
+          <div
+            v-for="(entry, index) in realTimeEntries"
+            :key="index"
+            class="te__entry"
           >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New TimedExecute Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
             <input
-              v-model="newConfigName"
-              placeholder="e.g. Default Timer Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
+              :value="entry.time"
+              @change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)"
+              placeholder="HH:MM:SS"
+              class="cc-input-raw cc-input-raw--mono te__input-time"
             />
+            <input
+              :value="entry.command"
+              @change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
+              placeholder="console command"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeRealTimeEntry(entry.time)" />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addRealTimeEntry">Add time entry</Button>
+        </div>
+      </Panel>
+
+      <!-- On connect tab -->
+      <Panel v-else-if="activeTab === 'connect'" title="On player connect" subtitle="Commands executed when a player joins the server">
+        <EmptyState
+          v-if="connectCommands.length === 0"
+          icon="user"
+          description="No connect commands configured. Add a command below."
+        />
+
+        <div v-else class="te__entries">
+          <div
+            v-for="(cmd, index) in connectCommands"
+            :key="index"
+            class="te__entry"
+          >
+            <input
+              :value="cmd"
+              @change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
+              placeholder="e.g. say Welcome {player.name}!"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeConnectCommand(index)" />
+          </div>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addConnectCommand">Add command</Button>
+        </div>
+      </Panel>
+
+      <!-- On disconnect tab -->
+      <Panel v-else-if="activeTab === 'disconnect'" title="On player disconnect" subtitle="Commands executed when a player leaves the server">
+        <EmptyState
+          v-if="disconnectCommands.length === 0"
+          icon="user"
+          description="No disconnect commands configured. Add a command below."
+        />
+
+        <div v-else class="te__entries">
+          <div
+            v-for="(cmd, index) in disconnectCommands"
+            :key="index"
+            class="te__entry"
+          >
+            <input
+              :value="cmd"
+              @change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
+              placeholder="e.g. say {player.name} has left"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeDisconnectCommand(index)" />
+          </div>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addDisconnectCommand">Add command</Button>
+        </div>
+      </Panel>
+    </template>
+
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="te__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="te__modal">
+        <div class="te__modal-head">
+          <h2 class="te__modal-title">New TimedExecute config</h2>
+        </div>
+        <div class="te__modal-body">
+          <Input
+            v-model="newConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Default Timer Settings"
+            @keydown.enter="handleCreateConfig"
+          />
+          <div class="te__field">
+            <span class="te__field-label">Description (optional)</span>
             <textarea
               v-model="newConfigDesc"
               rows="2"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
+              class="cc-textarea"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="te__modal-foot">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current TimedExecute config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="te__modal-backdrop" @click.self="showImportModal = false">
+      <div class="te__modal">
+        <div class="te__modal-head">
+          <h2 class="te__modal-title">Import from server</h2>
+        </div>
+        <div class="te__modal-body">
+          <p class="te__modal-desc">Import the current TimedExecute config from your live server. This will create a new config profile.</p>
+          <Input
+            v-model="importConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Imported server config"
+            @keydown.enter="handleImport"
+          />
+        </div>
+        <div class="te__modal-foot">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ---- Page shell ---- */
+.te { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---- Page head ---- */
+.te__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.te__head-id { display: flex; align-items: center; gap: 12px; }
+.te__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.te__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.te__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---- Toolbar ---- */
+.te__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.te__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
+.te__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* ---- Loading ---- */
+.te__loading { display: flex; justify-content: center; padding: 48px 0; }
+.te__spinner {
+  width: 28px; height: 28px; border-radius: 50%;
+  border: 2px solid var(--accent); border-top-color: transparent;
+  animation: te-spin 0.6s linear infinite;
+}
+@keyframes te-spin { to { transform: rotate(360deg); } }
+
+/* ---- Presets ---- */
+.te__presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
+.te__presets-label { font-size: var(--text-xs); color: var(--text-muted); }
+.te__preset {
+  height: var(--control-h-sm); padding: 0 10px; border: 0; cursor: pointer;
+  border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-sans);
+  font-weight: 500; color: var(--text-secondary);
+  background: var(--surface-raised-2); box-shadow: var(--ring-default);
+  transition: var(--transition-colors);
+}
+.te__preset:hover { background: var(--surface-active); color: var(--text-primary); }
+
+/* ---- Entry rows ---- */
+.te__entries { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.te__entry {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; border-radius: var(--radius-md);
+  background: var(--surface-raised-2); box-shadow: var(--ring-default);
+}
+.te__entry-cmd { flex: 1; min-width: 0; }
+.te__entry-interval { display: flex; align-items: center; gap: 6px; }
+.te__unit { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
+
+/* ---- Inline raw inputs (entries) ---- */
+.cc-input-raw {
+  height: var(--control-h-sm); padding: 0 9px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); outline: 0;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  transition: var(--transition-colors);
+}
+.cc-input-raw::placeholder { color: var(--text-muted); }
+.cc-input-raw:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-input-raw--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.te__input-grow { width: 100%; }
+.te__input-interval { width: 72px; text-align: right; }
+.te__input-time { width: 90px; }
+
+/* ---- Add row ---- */
+.te__add-row { padding-top: 2px; }
+
+/* ---- Modal ---- */
+.te__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.te__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; display: flex; flex-direction: column;
+}
+.te__modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
+}
+.te__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.te__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.te__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.te__modal-foot {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 14px 20px; border-top: 1px solid var(--border-subtle);
+}
+.te__field { display: flex; flex-direction: column; gap: 6px; }
+.te__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* ---- Textarea ---- */
+.cc-textarea {
+  background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  transition: var(--transition-colors);
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+</style>