From db756eb333e5fa3b5328b629e955bc7edd61d498 Mon Sep 17 00:00:00 2001
From: egg <egg@localhost>
Date: Mon, 23 Feb 2026 13:56:14 +0800
Subject: [PATCH] refactor(query-tool): align UI to semantic CSS classes
 matching system-wide conventions

Convert all 18 query-tool Vue components from Tailwind utility classes to
semantic CSS classes (.header, .card, .btn-primary, .query-tool-tab, etc.)
consistent with reject-history, hold-overview, and other pages. Create
self-contained style.css with design tokens, base classes, and page-specific
styles. Fix portal-shell native module loader to load query-tool/style.css
instead of resource-shared/styles.css. Add CSS link tags to Django template
for standalone page rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/portal-shell/nativeModuleRegistry.js  |   2 +-
 frontend/src/query-tool/App.vue               |  32 +-
 .../components/EquipmentJobsPanel.vue         |  42 +-
 .../components/EquipmentLotsTable.vue         |  34 +-
 .../components/EquipmentRejectsTable.vue      |  34 +-
 .../components/EquipmentTimeline.vue          |  14 +-
 .../query-tool/components/EquipmentView.vue   | 138 ++---
 .../query-tool/components/ExportButton.vue    |   2 +-
 .../components/LineageTreeChart.vue           |  54 +-
 .../components/LotAssociationTable.vue        |  28 +-
 .../src/query-tool/components/LotDetail.vue   |  72 +--
 .../query-tool/components/LotHistoryTable.vue |  35 +-
 .../query-tool/components/LotJobsTable.vue    |  66 +--
 .../query-tool/components/LotRejectTable.vue  |  83 ++-
 .../src/query-tool/components/LotTimeline.vue |  14 +-
 .../query-tool/components/LotTraceView.vue    |   2 +-
 .../src/query-tool/components/QueryBar.vue    |  90 ++--
 .../components/SerialReverseTraceView.vue     |   2 +-
 frontend/src/query-tool/main.js               |   2 +
 frontend/src/query-tool/style.css             | 481 ++++++++++++++++++
 ...al-shell-route-contract-governance.test.js |   4 +-
 src/mes_dashboard/templates/query_tool.html   |   9 +
 22 files changed, 837 insertions(+), 403 deletions(-)
 create mode 100644 frontend/src/query-tool/style.css

diff --git a/frontend/src/portal-shell/nativeModuleRegistry.js b/frontend/src/portal-shell/nativeModuleRegistry.js
index 8e50775..98b002e 100644
--- a/frontend/src/portal-shell/nativeModuleRegistry.js
+++ b/frontend/src/portal-shell/nativeModuleRegistry.js
@@ -60,7 +60,7 @@ const NATIVE_MODULE_LOADERS = Object.freeze({
   ),
   '/query-tool': createNativeLoader(
     () => import('../query-tool/App.vue'),
-    [() => import('../resource-shared/styles.css')],
+    [() => import('../query-tool/style.css')],
   ),
   '/tmtt-defect': createNativeLoader(
     () => import('../tmtt-defect/App.vue'),
diff --git a/frontend/src/query-tool/App.vue b/frontend/src/query-tool/App.vue
index edfba00..dbd931c 100644
--- a/frontend/src/query-tool/App.vue
+++ b/frontend/src/query-tool/App.vue
@@ -433,23 +433,23 @@ watch(
 </script>
 
 <template>
-  <div class="u-content-shell space-y-3 p-3 lg:p-5">
-    <header class="rounded-shell bg-gradient-to-r from-brand-500 to-accent-500 px-5 py-4 text-white shadow-shell">
-      <h1 class="text-xl font-semibold tracking-wide">批次追蹤工具</h1>
-      <p class="mt-1 text-xs text-indigo-100">正向/反向批次追溯與設備生產批次查詢整合入口</p>
+  <div class="dashboard query-tool-page">
+    <header class="header query-tool-header">
+      <div class="header-left">
+        <h1>批次追蹤工具</h1>
+        <p class="query-tool-subtitle">正向/反向批次追溯與設備生產批次查詢整合入口</p>
+      </div>
     </header>
 
-    <section class="rounded-shell border border-stroke-panel bg-surface-card shadow-panel">
-      <div class="border-b border-stroke-soft px-3 pt-3 lg:px-5">
-        <nav class="flex flex-wrap gap-2" aria-label="query-tool tabs">
+    <section class="card">
+      <div class="card-header">
+        <nav class="query-tool-tab-bar" aria-label="query-tool tabs">
           <button
             v-for="tab in tabItems"
             :key="tab.key"
             type="button"
-            class="rounded-card border px-4 py-2 text-sm font-medium transition"
-            :class="tab.key === activeTab
-              ? 'border-brand-500 bg-brand-50 text-brand-700 shadow-soft'
-              : 'border-transparent bg-surface-muted text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
+            class="query-tool-tab"
+            :class="{ active: tab.key === activeTab }"
             :aria-selected="tab.key === activeTab"
             :aria-current="tab.key === activeTab ? 'page' : undefined"
             @click="activateTab(tab.key)"
@@ -459,11 +459,11 @@ watch(
         </nav>
       </div>
 
-      <div class="space-y-3 px-3 py-4 lg:px-5">
-        <div class="rounded-card border border-stroke-soft bg-surface-muted/60 px-4 py-3">
-          <p class="text-xs font-medium tracking-wide text-slate-500">目前頁籤</p>
-          <h2 class="mt-1 text-base font-semibold text-slate-800">{{ activeTabMeta.label }}</h2>
-          <p class="mt-1 text-sm text-slate-600">{{ activeTabMeta.subtitle }}</p>
+      <div class="card-body">
+        <div class="query-tool-tab-desc">
+          <p class="query-tool-tab-desc-label">目前頁籤</p>
+          <h2 class="query-tool-tab-desc-title">{{ activeTabMeta.label }}</h2>
+          <p class="query-tool-tab-desc-subtitle">{{ activeTabMeta.subtitle }}</p>
         </div>
 
         <LotTraceView
diff --git a/frontend/src/query-tool/components/EquipmentJobsPanel.vue b/frontend/src/query-tool/components/EquipmentJobsPanel.vue
index 23a6003..8bad43b 100644
--- a/frontend/src/query-tool/components/EquipmentJobsPanel.vue
+++ b/frontend/src/query-tool/components/EquipmentJobsPanel.vue
@@ -63,9 +63,9 @@ const columns = Object.freeze([
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex items-center justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">維修紀錄</h4>
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">維修紀錄</h4>
       <ExportButton
         :disabled="exportDisabled"
         :loading="exporting"
@@ -74,28 +74,24 @@ const columns = Object.freeze([
       />
     </div>
 
-    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+    <p v-if="error" class="error-banner">
       {{ error }}
     </p>
 
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="loading" class="placeholder">
       載入中...
     </div>
 
-    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="rows.length === 0" class="placeholder">
       無維修紀錄
     </div>
 
-    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap tall">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th class="border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">展開</th>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-            >
+            <th>展開</th>
+            <th v-for="column in columns" :key="column">
               {{ column }}
             </th>
           </tr>
@@ -103,19 +99,15 @@ const columns = Object.freeze([
 
         <tbody>
           <template v-for="(row, rowIndex) in rows" :key="rowKey(row, rowIndex)">
-            <tr class="cursor-pointer odd:bg-white even:bg-slate-50" @click="toggleRow(row, rowIndex)">
-              <td class="border-b border-stroke-soft/70 px-2 py-1.5 text-center text-slate-500">{{ isExpanded(row, rowIndex) ? '▾' : '▸' }}</td>
-              <td
-                v-for="column in columns"
-                :key="`${rowIndex}-${column}`"
-                class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-              >
+            <tr style="cursor: pointer" @click="toggleRow(row, rowIndex)">
+              <td style="text-align: center">{{ isExpanded(row, rowIndex) ? '▾' : '▸' }}</td>
+              <td v-for="column in columns" :key="`${rowIndex}-${column}`">
                 {{ formatCellValue(row[column]) }}
               </td>
             </tr>
 
-            <tr v-if="isExpanded(row, rowIndex)" class="bg-slate-50/60">
-              <td class="border-b border-stroke-soft/70 px-2 py-2" colspan="9">
+            <tr v-if="isExpanded(row, rowIndex)">
+              <td colspan="9" style="padding: 8px 10px">
                 <div class="grid gap-2 text-[11px] text-slate-600 md:grid-cols-2">
                   <p><span class="font-semibold text-slate-700">RESOURCEID:</span> {{ formatCellValue(row.RESOURCEID) }}</p>
                   <p><span class="font-semibold text-slate-700">JOBMODELNAME:</span> {{ formatCellValue(row.JOBMODELNAME) }}</p>
@@ -129,5 +121,5 @@ const columns = Object.freeze([
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/EquipmentLotsTable.vue b/frontend/src/query-tool/components/EquipmentLotsTable.vue
index 8d92683..fcd8572 100644
--- a/frontend/src/query-tool/components/EquipmentLotsTable.vue
+++ b/frontend/src/query-tool/components/EquipmentLotsTable.vue
@@ -41,9 +41,9 @@ const columns = Object.freeze([
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex items-center justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">生產紀錄</h4>
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">生產紀錄</h4>
       <ExportButton
         :disabled="exportDisabled"
         :loading="exporting"
@@ -52,44 +52,36 @@ const columns = Object.freeze([
       />
     </div>
 
-    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+    <p v-if="error" class="error-banner">
       {{ error }}
     </p>
 
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="loading" class="placeholder">
       載入中...
     </div>
 
-    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="rows.length === 0" class="placeholder">
       無生產紀錄
     </div>
 
-    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap tall">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-            >
+            <th v-for="column in columns" :key="column">
               {{ column }}
             </th>
           </tr>
         </thead>
 
         <tbody>
-          <tr v-for="(row, rowIndex) in rows" :key="row.HISTORYMAINLINEID || rowIndex" class="odd:bg-white even:bg-slate-50">
-            <td
-              v-for="column in columns"
-              :key="`${rowIndex}-${column}`"
-              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-            >
+          <tr v-for="(row, rowIndex) in rows" :key="row.HISTORYMAINLINEID || rowIndex">
+            <td v-for="column in columns" :key="`${rowIndex}-${column}`">
               {{ formatCellValue(row[column]) }}
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/EquipmentRejectsTable.vue b/frontend/src/query-tool/components/EquipmentRejectsTable.vue
index 5166d79..e6ed4c0 100644
--- a/frontend/src/query-tool/components/EquipmentRejectsTable.vue
+++ b/frontend/src/query-tool/components/EquipmentRejectsTable.vue
@@ -37,9 +37,9 @@ const columns = Object.freeze([
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex items-center justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">報廢紀錄</h4>
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">報廢紀錄</h4>
       <ExportButton
         :disabled="exportDisabled"
         :loading="exporting"
@@ -48,44 +48,36 @@ const columns = Object.freeze([
       />
     </div>
 
-    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+    <p v-if="error" class="error-banner">
       {{ error }}
     </p>
 
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="loading" class="placeholder">
       載入中...
     </div>
 
-    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="rows.length === 0" class="placeholder">
       無報廢紀錄
     </div>
 
-    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap tall">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-            >
+            <th v-for="column in columns" :key="column">
               {{ column }}
             </th>
           </tr>
         </thead>
 
         <tbody>
-          <tr v-for="(row, rowIndex) in rows" :key="rowIndex" class="odd:bg-white even:bg-slate-50">
-            <td
-              v-for="column in columns"
-              :key="`${rowIndex}-${column}`"
-              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-            >
+          <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+            <td v-for="column in columns" :key="`${rowIndex}-${column}`">
               {{ formatCellValue(row[column]) }}
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/EquipmentTimeline.vue b/frontend/src/query-tool/components/EquipmentTimeline.vue
index d6a68ba..5ab3f93 100644
--- a/frontend/src/query-tool/components/EquipmentTimeline.vue
+++ b/frontend/src/query-tool/components/EquipmentTimeline.vue
@@ -209,9 +209,9 @@ const showEmpty = computed(() => tracks.value.length === 0 || (tracks.value.ever
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">設備 Timeline</h4>
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">設備 Timeline</h4>
       <ExportButton
         :disabled="exportDisabled"
         :loading="exporting"
@@ -220,15 +220,15 @@ const showEmpty = computed(() => tracks.value.length === 0 || (tracks.value.ever
       />
     </div>
 
-    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+    <p v-if="error" class="error-banner">
       {{ error }}
     </p>
 
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="loading" class="placeholder">
       Timeline 資料載入中...
     </div>
 
-    <div v-else-if="showEmpty" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="showEmpty" class="placeholder">
       無 Timeline 資料
     </div>
 
@@ -242,5 +242,5 @@ const showEmpty = computed(() => tracks.value.length === 0 || (tracks.value.ever
       :label-width="220"
       :min-chart-width="1200"
     />
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/EquipmentView.vue b/frontend/src/query-tool/components/EquipmentView.vue
index 950bf56..aa38fa3 100644
--- a/frontend/src/query-tool/components/EquipmentView.vue
+++ b/frontend/src/query-tool/components/EquipmentView.vue
@@ -88,82 +88,83 @@ const subTabs = Object.keys(tabMeta);
 
 <template>
   <div class="space-y-3">
-    <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
-      <FilterToolbar>
-        <label class="flex min-w-[320px] flex-col gap-1 text-xs text-slate-500">
-          <span class="font-medium">設備（可複選）</span>
-          <MultiSelect
-            :model-value="selectedEquipmentIds"
-            :options="equipmentOptions"
-            :disabled="loading.bootstrapping"
-            searchable
-            placeholder="請選擇設備"
-            @update:model-value="emit('update:selected-equipment-ids', $event)"
-          />
-        </label>
+    <section class="card">
+      <div class="card-body">
+        <FilterToolbar>
+          <label class="filter-group" style="min-width: 320px">
+            <span class="filter-label">設備（可複選）</span>
+            <MultiSelect
+              :model-value="selectedEquipmentIds"
+              :options="equipmentOptions"
+              :disabled="loading.bootstrapping"
+              searchable
+              placeholder="請選擇設備"
+              @update:model-value="emit('update:selected-equipment-ids', $event)"
+            />
+          </label>
 
-        <label class="flex min-w-[180px] flex-col gap-1 text-xs text-slate-500">
-          <span class="font-medium">開始日期</span>
-          <input
-            type="date"
-            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
-            :value="startDate"
-            @input="emit('update:start-date', $event.target.value)"
-          />
-        </label>
+          <label class="filter-group">
+            <span class="filter-label">開始日期</span>
+            <input
+              type="date"
+              class="query-tool-date-input"
+              :value="startDate"
+              @input="emit('update:start-date', $event.target.value)"
+            />
+          </label>
 
-        <label class="flex min-w-[180px] flex-col gap-1 text-xs text-slate-500">
-          <span class="font-medium">結束日期</span>
-          <input
-            type="date"
-            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
-            :value="endDate"
-            @input="emit('update:end-date', $event.target.value)"
-          />
-        </label>
+          <label class="filter-group">
+            <span class="filter-label">結束日期</span>
+            <input
+              type="date"
+              class="query-tool-date-input"
+              :value="endDate"
+              @input="emit('update:end-date', $event.target.value)"
+            />
+          </label>
 
-        <template #actions>
-          <button
-            type="button"
-            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-xs font-medium text-slate-600 transition hover:bg-slate-50"
-            @click="emit('reset-date-range')"
-          >
-            近 30 天
-          </button>
+          <template #actions>
+            <button
+              type="button"
+              class="btn btn-ghost"
+              @click="emit('reset-date-range')"
+            >
+              近 30 天
+            </button>
 
-          <button
-            type="button"
-            class="h-9 rounded-card bg-brand-500 px-4 text-sm font-medium text-white transition hover:bg-brand-600"
-            :disabled="loading[activeSubTab] || loading.timeline"
-            @click="emit('query-active-sub-tab')"
-          >
-            {{ loading[activeSubTab] || loading.timeline ? '查詢中...' : '查詢' }}
-          </button>
-        </template>
-      </FilterToolbar>
+            <button
+              type="button"
+              class="btn btn-primary"
+              :disabled="loading[activeSubTab] || loading.timeline"
+              @click="emit('query-active-sub-tab')"
+            >
+              {{ loading[activeSubTab] || loading.timeline ? '查詢中...' : '查詢' }}
+            </button>
+          </template>
+        </FilterToolbar>
 
-      <p v-if="errors.filters" class="mt-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
-        {{ errors.filters }}
-      </p>
+        <p v-if="errors.filters" class="error-banner" style="margin-top: 8px">
+          {{ errors.filters }}
+        </p>
+      </div>
     </section>
 
-    <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
-      <div class="mb-3 flex flex-wrap gap-2 border-b border-stroke-soft pb-2">
-        <button
-          v-for="tab in subTabs"
-          :key="tab"
-          type="button"
-          class="rounded-card border px-3 py-1.5 text-xs font-medium transition"
-          :class="tab === activeSubTab
-            ? 'border-brand-500 bg-brand-50 text-brand-700'
-            : 'border-transparent bg-surface-muted/70 text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
-          @click="emit('change-sub-tab', tab)"
-        >
-          {{ tabMeta[tab] }}
-        </button>
-      </div>
+    <section class="card">
+      <div class="card-body">
+        <div class="query-tool-sub-tab-bar">
+          <button
+            v-for="tab in subTabs"
+            :key="tab"
+            type="button"
+            class="query-tool-sub-tab"
+            :class="{ active: tab === activeSubTab }"
+            @click="emit('change-sub-tab', tab)"
+          >
+            {{ tabMeta[tab] }}
+          </button>
+        </div>
 
-      <EquipmentLotsTable
+        <EquipmentLotsTable
         v-if="activeSubTab === 'lots'"
         :rows="lotsRows"
         :loading="loading.lots"
@@ -208,6 +209,7 @@ const subTabs = Object.keys(tabMeta);
         :exporting="exporting.timeline"
         @export="emit('export-sub-tab', 'timeline')"
       />
+      </div>
     </section>
   </div>
 </template>
diff --git a/frontend/src/query-tool/components/ExportButton.vue b/frontend/src/query-tool/components/ExportButton.vue
index 9890339..c120f67 100644
--- a/frontend/src/query-tool/components/ExportButton.vue
+++ b/frontend/src/query-tool/components/ExportButton.vue
@@ -18,7 +18,7 @@ const props = defineProps({
 <template>
   <button
     type="button"
-    class="rounded-card bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:bg-emerald-300"
+    class="btn btn-export"
     :disabled="disabled || loading"
   >
     {{ loading ? '匯出中...' : label }}
diff --git a/frontend/src/query-tool/components/LineageTreeChart.vue b/frontend/src/query-tool/components/LineageTreeChart.vue
index fda153b..1278fee 100644
--- a/frontend/src/query-tool/components/LineageTreeChart.vue
+++ b/frontend/src/query-tool/components/LineageTreeChart.vue
@@ -707,12 +707,12 @@ function exportRelationCsv() {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
-    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+  <section class="card"><div class="card-body">
+    <div class="query-tool-section-header">
       <div>
-        <h3 class="text-sm font-semibold text-slate-800">{{ title }}</h3>
-        <p class="text-xs text-slate-500">{{ description }}</p>
-        <p class="text-[11px] text-slate-500">
+        <h3 class="card-title">{{ title }}</h3>
+        <p class="query-tool-muted">{{ description }}</p>
+        <p class="query-tool-muted" style="font-size: 11px">
           讀圖方向由左至右；節點前綴 <code>←拆/←併/←晶/←重</code> 代表本節點由左側來源而來，
           <code>→拆/→併/→晶/→重</code> 代表左側節點由本節點而來。
         </p>
@@ -775,20 +775,17 @@ function exportRelationCsv() {
         </div>
       </div>
     </div>
-    <p v-if="exportErrorMessage" class="mb-2 rounded border border-rose-200 bg-rose-50 px-2 py-1 text-xs text-rose-700">
+    <p v-if="exportErrorMessage" class="error-banner">
       {{ exportErrorMessage }}
     </p>
 
     <!-- Loading overlay -->
-    <div v-if="loading" class="flex items-center justify-center rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 py-16">
-      <div class="flex flex-col items-center gap-2">
-        <span class="inline-block size-5 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
-        <span class="text-xs text-slate-500">正在載入血緣資料…</span>
-      </div>
+    <div v-if="loading" class="placeholder" style="padding: 48px 12px">
+      正在載入血緣資料…
     </div>
 
     <!-- Empty state -->
-    <div v-else-if="!hasData" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-10 text-center text-xs text-slate-500">
+    <div v-else-if="!hasData" class="placeholder">
       {{ emptyMessage }}
     </div>
 
@@ -804,52 +801,51 @@ function exportRelationCsv() {
       />
     </div>
 
-    <details v-if="relationRows.length > 0" class="mt-3 rounded-card border border-stroke-soft bg-surface-muted/50 px-3 py-2">
-      <summary class="cursor-pointer text-xs font-medium text-slate-700">
+    <details v-if="relationRows.length > 0" style="margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 8px 12px">
+      <summary style="cursor: pointer; font-size: 12px; font-weight: 600; color: #334155">
         關係清單（{{ relationRows.length }}）
       </summary>
-      <div class="mt-2 max-h-56 overflow-auto rounded border border-stroke-soft bg-white">
-        <table class="min-w-full text-left text-xs text-slate-700">
-          <thead class="bg-slate-50 text-[11px] text-slate-500">
+      <div class="query-tool-table-wrap short" style="margin-top: 8px; max-height: 224px">
+        <table class="query-tool-table">
+          <thead>
             <tr>
-              <th class="px-2 py-1.5 font-medium">來源批次</th>
-              <th class="px-2 py-1.5 font-medium">目標批次</th>
-              <th class="px-2 py-1.5 font-medium">關係</th>
+              <th>來源批次</th>
+              <th>目標批次</th>
+              <th>關係</th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="row in relationRows.slice(0, 200)"
               :key="row.key"
-              class="border-t border-slate-100"
             >
-              <td class="px-2 py-1.5 font-mono text-[11px]">
+              <td style="font-family: monospace; font-size: 11px">
                 {{ row.fromName }}
               </td>
-              <td class="px-2 py-1.5 font-mono text-[11px]">
+              <td style="font-family: monospace; font-size: 11px">
                 {{ row.toName }}
               </td>
-              <td class="px-2 py-1.5 text-[11px]">
+              <td style="font-size: 11px">
                 {{ row.edgeLabel }}
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-      <p v-if="relationRows.length > 200" class="mt-1 text-[11px] text-slate-500">
+      <p v-if="relationRows.length > 200" class="query-tool-muted" style="margin-top: 4px; font-size: 11px">
         僅顯示前 200 筆，請搭配上方樹圖與節點點選進一步縮小範圍。
       </p>
     </details>
 
     <!-- Not found warning -->
-    <div v-if="notFound.length > 0" class="mt-3 rounded-card border border-state-warning/40 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+    <div v-if="notFound.length > 0" class="query-tool-success" style="border-color: #fde68a; background: #fefce8; color: #92400e">
       未命中：{{ notFound.join(', ') }}
     </div>
 
     <!-- Selection summary -->
-    <div v-if="selectedContainerIds.length > 0" class="mt-3 rounded-card border border-brand-200 bg-brand-50/60 px-3 py-2">
+    <div v-if="selectedContainerIds.length > 0" class="query-tool-success" style="border-color: #c7d2fe; background: rgba(238,242,255,0.6); color: inherit">
       <div class="flex flex-wrap items-center gap-1.5">
-        <span class="mr-1 text-xs font-medium text-brand-700">已選 {{ selectedContainerIds.length }} 個節點</span>
+        <span class="mr-1 text-xs font-medium" style="color: #4338ca">已選 {{ selectedContainerIds.length }} 個節點</span>
         <span
           v-for="cid in selectedContainerIds.slice(0, 8)"
           :key="cid"
@@ -860,7 +856,7 @@ function exportRelationCsv() {
         <span v-if="selectedContainerIds.length > 8" class="text-xs text-brand-600">+{{ selectedContainerIds.length - 8 }} 更多</span>
       </div>
     </div>
-  </section>
+  </div></section>
 </template>
 
 <style scoped>
diff --git a/frontend/src/query-tool/components/LotAssociationTable.vue b/frontend/src/query-tool/components/LotAssociationTable.vue
index dc95350..458f463 100644
--- a/frontend/src/query-tool/components/LotAssociationTable.vue
+++ b/frontend/src/query-tool/components/LotAssociationTable.vue
@@ -65,41 +65,33 @@ function resolveColumnLabel(column) {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+  <div>
+    <div v-if="loading" class="placeholder">
       讀取中...
     </div>
 
-    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="rows.length === 0" class="placeholder">
       {{ emptyText }}
     </div>
 
-    <div v-else class="max-h-[420px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-            >
+            <th v-for="column in columns" :key="column">
               {{ resolveColumnLabel(column) }}
             </th>
           </tr>
         </thead>
 
         <tbody>
-          <tr v-for="(row, rowIndex) in rows" :key="row.id || row.JOBID || rowIndex" class="odd:bg-white even:bg-slate-50">
-            <td
-              v-for="column in columns"
-              :key="`${rowIndex}-${column}`"
-              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-            >
+          <tr v-for="(row, rowIndex) in rows" :key="row.id || row.JOBID || rowIndex">
+            <td v-for="column in columns" :key="`${rowIndex}-${column}`">
               {{ formatCellValue(row[column]) }}
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/LotDetail.vue b/frontend/src/query-tool/components/LotDetail.vue
index 9cb8e6e..6e92c0a 100644
--- a/frontend/src/query-tool/components/LotDetail.vue
+++ b/frontend/src/query-tool/components/LotDetail.vue
@@ -193,46 +193,45 @@ const detailCountLabel = computed(() => {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
-    <div v-if="!selectedContainerId" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-8 text-center text-xs text-slate-500">
-      請從上方血緣樹選擇節點後查看明細。
-    </div>
+  <section class="card">
+    <div class="card-body">
+      <div v-if="!selectedContainerId" class="placeholder">
+        請從上方血緣樹選擇節點後查看明細。
+      </div>
 
-    <template v-else>
-      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <div>
-          <h3 class="text-sm font-semibold text-slate-800">LOT 明細{{ detailCountLabel }}</h3>
-          <p class="text-xs text-slate-500">{{ detailDisplayNames }}</p>
+      <template v-else>
+        <div class="query-tool-section-header">
+          <div>
+            <div class="card-title">LOT 明細{{ detailCountLabel }}</div>
+            <span class="query-tool-muted">{{ detailDisplayNames }}</span>
+          </div>
+
+          <ExportButton
+            :disabled="!canExport"
+            :loading="activeExporting"
+            :label="`${tabMeta[activeSubTab]?.label || ''} 匯出 CSV`"
+            @click="emit('export-tab', activeSubTab)"
+          />
         </div>
 
-        <ExportButton
-          :disabled="!canExport"
-          :loading="activeExporting"
-          :label="`${tabMeta[activeSubTab]?.label || ''} 匯出 CSV`"
-          @click="emit('export-tab', activeSubTab)"
-        />
-      </div>
+        <div class="query-tool-sub-tab-bar">
+          <button
+            v-for="tab in subTabs"
+            :key="tab"
+            type="button"
+            class="query-tool-sub-tab"
+            :class="{ active: tab === activeSubTab }"
+            @click="emit('change-sub-tab', tab)"
+          >
+            {{ tabMeta[tab].label }}
+          </button>
+        </div>
 
-      <div class="mb-3 flex flex-wrap gap-2 border-b border-stroke-soft pb-2">
-        <button
-          v-for="tab in subTabs"
-          :key="tab"
-          type="button"
-          class="rounded-card border px-3 py-1.5 text-xs font-medium transition"
-          :class="tab === activeSubTab
-            ? 'border-brand-500 bg-brand-50 text-brand-700'
-            : 'border-transparent bg-surface-muted/70 text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
-          @click="emit('change-sub-tab', tab)"
-        >
-          {{ tabMeta[tab].label }}
-        </button>
-      </div>
+        <p v-if="activeError" class="error-banner">
+          {{ activeError }}
+        </p>
 
-      <p v-if="activeError" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
-        {{ activeError }}
-      </p>
-
-      <div v-if="activeSubTab === 'history'" class="space-y-3">
+        <div v-if="activeSubTab === 'history'" class="space-y-3">
         <LotTimeline
           :history-rows="historyRows"
           :hold-rows="associationRows.holds || []"
@@ -271,6 +270,7 @@ const detailCountLabel = computed(() => {
         :loading="activeLoading"
         :empty-text="activeLoaded ? activeEmptyText : '尚未查詢此分頁資料'"
       />
-    </template>
+      </template>
+    </div>
   </section>
 </template>
diff --git a/frontend/src/query-tool/components/LotHistoryTable.vue b/frontend/src/query-tool/components/LotHistoryTable.vue
index b302df6..94aed00 100644
--- a/frontend/src/query-tool/components/LotHistoryTable.vue
+++ b/frontend/src/query-tool/components/LotHistoryTable.vue
@@ -43,12 +43,12 @@ const workcenterOptions = computed(() => {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex flex-wrap items-end justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">歷程資料</h4>
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">歷程資料</h4>
 
-      <label class="min-w-[260px] text-xs text-slate-500">
-        <span class="mb-1 block font-medium">站點群組篩選</span>
+      <label class="filter-group" style="min-width: 260px">
+        <span class="filter-label">站點群組篩選</span>
         <MultiSelect
           :model-value="selectedWorkcenterGroups"
           :options="workcenterOptions"
@@ -60,23 +60,19 @@ const workcenterOptions = computed(() => {
       </label>
     </div>
 
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="loading" class="placeholder">
       歷程資料讀取中...
     </div>
 
-    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="rows.length === 0" class="placeholder">
       無歷程資料
     </div>
 
-    <div v-else class="max-h-[360px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap short">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-            >
+            <th v-for="column in columns" :key="column">
               {{ column }}
             </th>
           </tr>
@@ -86,18 +82,13 @@ const workcenterOptions = computed(() => {
           <tr
             v-for="(row, rowIndex) in rows"
             :key="row.HISTORYMAINLINEID || row.TRACKINTIMESTAMP || rowIndex"
-            class="odd:bg-white even:bg-slate-50"
           >
-            <td
-              v-for="column in columns"
-              :key="`${rowIndex}-${column}`"
-              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-            >
+            <td v-for="column in columns" :key="`${rowIndex}-${column}`">
               {{ formatCellValue(row[column]) }}
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/LotJobsTable.vue b/frontend/src/query-tool/components/LotJobsTable.vue
index 6e549fe..6829275 100644
--- a/frontend/src/query-tool/components/LotJobsTable.vue
+++ b/frontend/src/query-tool/components/LotJobsTable.vue
@@ -174,46 +174,39 @@ async function loadTxn(jobId) {
 
 <template>
   <section class="space-y-3">
-    <div class="rounded-card border border-stroke-soft bg-white p-3">
-      <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div>
+      <div v-if="loading" class="placeholder">
         讀取中...
       </div>
 
-      <div v-else-if="sortedRows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      <div v-else-if="sortedRows.length === 0" class="placeholder">
         {{ emptyText }}
       </div>
 
-      <div v-else class="max-h-[420px] overflow-auto rounded-card border border-stroke-soft">
-        <table class="min-w-full border-collapse text-xs">
-          <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+      <div v-else class="query-tool-table-wrap">
+        <table class="query-tool-table">
+          <thead>
             <tr>
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">操作</th>
-              <th
-                v-for="column in jobColumns"
-                :key="column"
-                class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-              >
+              <th>操作</th>
+              <th v-for="column in jobColumns" :key="column">
                 {{ column }}
               </th>
             </tr>
           </thead>
 
           <tbody>
-            <tr v-for="(row, rowIndex) in sortedRows" :key="rowKey(row, rowIndex)" class="odd:bg-white even:bg-slate-50">
-              <td class="border-b border-stroke-soft/70 px-2 py-1.5">
+            <tr v-for="(row, rowIndex) in sortedRows" :key="rowKey(row, rowIndex)">
+              <td>
                 <button
                   type="button"
-                  class="rounded-card border border-stroke-soft bg-white px-2 py-1 text-[11px] font-medium text-slate-600 transition hover:bg-surface-muted/70 hover:text-slate-800"
+                  class="btn btn-ghost"
+                  style="padding: 2px 8px; font-size: 11px"
                   @click="loadTxn(row?.JOBID)"
                 >
                   查看交易歷程
                 </button>
               </td>
-              <td
-                v-for="column in jobColumns"
-                :key="`${rowKey(row, rowIndex)}-${column}`"
-                class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-              >
+              <td v-for="column in jobColumns" :key="`${rowKey(row, rowIndex)}-${column}`">
                 <StatusBadge
                   v-if="column === 'JOBSTATUS'"
                   :tone="buildStatusTone(row?.[column])"
@@ -227,33 +220,29 @@ async function loadTxn(jobId) {
       </div>
     </div>
 
-    <div v-if="selectedJobId" class="rounded-card border border-stroke-soft bg-white p-3">
-      <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
-        <h4 class="text-sm font-semibold text-slate-800">交易歷程：{{ selectedJobId }}</h4>
-        <span class="text-xs text-slate-500">{{ txnRows.length }} 筆</span>
+    <div v-if="selectedJobId">
+      <div class="query-tool-section-header">
+        <h4 class="card-title">交易歷程：{{ selectedJobId }}</h4>
+        <span class="query-tool-muted">{{ txnRows.length }} 筆</span>
       </div>
 
-      <p v-if="txnError" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+      <p v-if="txnError" class="error-banner">
         {{ txnError }}
       </p>
 
-      <div v-if="loadingTxn" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      <div v-if="loadingTxn" class="placeholder">
         載入交易歷程中...
       </div>
 
-      <div v-else-if="txnRows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      <div v-else-if="txnRows.length === 0" class="placeholder">
         無交易歷程資料
       </div>
 
-      <div v-else class="max-h-[420px] overflow-auto rounded-card border border-stroke-soft">
-        <table class="min-w-full border-collapse text-xs">
-          <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+      <div v-else class="query-tool-table-wrap">
+        <table class="query-tool-table">
+          <thead>
             <tr>
-              <th
-                v-for="column in txnColumns"
-                :key="column"
-                class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
-              >
+              <th v-for="column in txnColumns" :key="column">
                 {{ column }}
               </th>
             </tr>
@@ -263,13 +252,8 @@ async function loadTxn(jobId) {
             <tr
               v-for="(row, rowIndex) in txnRows"
               :key="row?.JOBTXNHISTORYID || `${selectedJobId}-${rowIndex}`"
-              class="odd:bg-white even:bg-slate-50"
             >
-              <td
-                v-for="column in txnColumns"
-                :key="`${row?.JOBTXNHISTORYID || rowIndex}-${column}`"
-                class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
-              >
+              <td v-for="column in txnColumns" :key="`${row?.JOBTXNHISTORYID || rowIndex}-${column}`">
                 <StatusBadge
                   v-if="column === 'JOBSTATUS' || column === 'FROMJOBSTATUS'"
                   :tone="buildStatusTone(row?.[column])"
diff --git a/frontend/src/query-tool/components/LotRejectTable.vue b/frontend/src/query-tool/components/LotRejectTable.vue
index ce07dbb..98c6747 100644
--- a/frontend/src/query-tool/components/LotRejectTable.vue
+++ b/frontend/src/query-tool/components/LotRejectTable.vue
@@ -96,43 +96,43 @@ const sortedRows = computed(() => {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+  <div>
+    <div v-if="loading" class="placeholder">
       讀取中...
     </div>
 
-    <div v-else-if="sortedRows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-else-if="sortedRows.length === 0" class="placeholder">
       {{ emptyText }}
     </div>
 
-    <div v-else class="max-h-[420px] overflow-auto rounded-card border border-stroke-soft">
-      <table class="min-w-full border-collapse text-xs">
-        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+    <div v-else class="query-tool-table-wrap">
+      <table class="query-tool-table">
+        <thead>
           <tr>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">LOT</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">WORKCENTER</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">Package</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">FUNCTION</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">TYPE</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">PRODUCT</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">原因</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">EQUIPMENT</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">COMMENT</th>
+            <th>LOT</th>
+            <th>WORKCENTER</th>
+            <th>Package</th>
+            <th>FUNCTION</th>
+            <th>TYPE</th>
+            <th>PRODUCT</th>
+            <th>原因</th>
+            <th>EQUIPMENT</th>
+            <th>COMMENT</th>
             <th
-              class="cursor-pointer whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold hover:text-brand-700"
+              style="cursor: pointer"
               @click="showRejectBreakdown = !showRejectBreakdown"
             >
               扣帳報廢量 <span>{{ showRejectBreakdown ? '▾' : '▸' }}</span>
             </th>
             <template v-if="showRejectBreakdown">
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">REJECT</th>
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">STANDBY</th>
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">QTYTOPROCESS</th>
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">INPROCESS</th>
-              <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">PROCESSED</th>
+              <th>REJECT</th>
+              <th>STANDBY</th>
+              <th>QTYTOPROCESS</th>
+              <th>INPROCESS</th>
+              <th>PROCESSED</th>
             </template>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">不扣帳報廢量</th>
-            <th class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">報廢時間</th>
+            <th>不扣帳報廢量</th>
+            <th>報廢時間</th>
           </tr>
         </thead>
 
@@ -140,30 +140,29 @@ const sortedRows = computed(() => {
           <tr
             v-for="(row, idx) in sortedRows"
             :key="`${row.TXN_TIME_RAW}-${row.CONTAINERNAME}-${row.LOSSREASONNAME}-${idx}`"
-            class="odd:bg-white even:bg-slate-50"
           >
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.CONTAINERNAME }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.WORKCENTERNAME || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.PRODUCTLINENAME || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.PJ_FUNCTION || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.PJ_TYPE || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.PRODUCTNAME || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.LOSSREASONNAME || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.EQUIPMENTNAME || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.REJECTCOMMENT || '-' }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.REJECT_TOTAL_QTY) }}</td>
+            <td>{{ row.CONTAINERNAME }}</td>
+            <td>{{ row.WORKCENTERNAME || '-' }}</td>
+            <td>{{ row.PRODUCTLINENAME || '-' }}</td>
+            <td>{{ row.PJ_FUNCTION || '-' }}</td>
+            <td>{{ row.PJ_TYPE || '-' }}</td>
+            <td>{{ row.PRODUCTNAME || '-' }}</td>
+            <td>{{ row.LOSSREASONNAME || '-' }}</td>
+            <td>{{ row.EQUIPMENTNAME || '-' }}</td>
+            <td>{{ row.REJECTCOMMENT || '-' }}</td>
+            <td>{{ formatNumber(row.REJECT_TOTAL_QTY) }}</td>
             <template v-if="showRejectBreakdown">
-              <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.REJECT_QTY) }}</td>
-              <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.STANDBY_QTY) }}</td>
-              <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.QTYTOPROCESS_QTY) }}</td>
-              <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.INPROCESS_QTY) }}</td>
-              <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.PROCESSED_QTY) }}</td>
+              <td>{{ formatNumber(row.REJECT_QTY) }}</td>
+              <td>{{ formatNumber(row.STANDBY_QTY) }}</td>
+              <td>{{ formatNumber(row.QTYTOPROCESS_QTY) }}</td>
+              <td>{{ formatNumber(row.INPROCESS_QTY) }}</td>
+              <td>{{ formatNumber(row.PROCESSED_QTY) }}</td>
             </template>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ formatNumber(row.DEFECT_QTY) }}</td>
-            <td class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700">{{ row.TXN_TIME || '-' }}</td>
+            <td>{{ formatNumber(row.DEFECT_QTY) }}</td>
+            <td>{{ row.TXN_TIME || '-' }}</td>
           </tr>
         </tbody>
       </table>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/LotTimeline.vue b/frontend/src/query-tool/components/LotTimeline.vue
index 3edd485..1738987 100644
--- a/frontend/src/query-tool/components/LotTimeline.vue
+++ b/frontend/src/query-tool/components/LotTimeline.vue
@@ -325,10 +325,10 @@ const timeRange = computed(() => {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3">
-    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
-      <h4 class="text-sm font-semibold text-slate-800">LOT 生產 Timeline</h4>
-      <div class="flex items-center gap-3 text-xs text-slate-500">
+  <div>
+    <div class="query-tool-section-header">
+      <h4 class="card-title">LOT 生產 Timeline</h4>
+      <div class="flex items-center gap-3 query-tool-muted">
         <span v-if="timeRange">{{ formatDateTime(timeRange.start) }} — {{ formatDateTime(timeRange.end) }}</span>
         <span>Hold / Material 事件已覆蓋標記</span>
         <span v-if="materialMappingStats.total > 0">
@@ -340,11 +340,11 @@ const timeRange = computed(() => {
       </div>
     </div>
 
-    <div v-if="tracks.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+    <div v-if="tracks.length === 0" class="placeholder">
       歷程資料不足，無法產生 Timeline
     </div>
 
-    <div v-else class="max-h-[520px] overflow-y-auto">
+    <div v-else style="max-height: 520px; overflow-y: auto">
       <TimelineChart
         :tracks="tracks"
         :events="events"
@@ -355,5 +355,5 @@ const timeRange = computed(() => {
         :min-chart-width="600"
       />
     </div>
-  </section>
+  </div>
 </template>
diff --git a/frontend/src/query-tool/components/LotTraceView.vue b/frontend/src/query-tool/components/LotTraceView.vue
index 2a9e3ba..ef3508d 100644
--- a/frontend/src/query-tool/components/LotTraceView.vue
+++ b/frontend/src/query-tool/components/LotTraceView.vue
@@ -147,7 +147,7 @@ const emit = defineEmits([
       @resolve="emit('resolve')"
     />
 
-    <p v-if="resolveSuccessMessage" class="rounded-card border border-state-success/40 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
+    <p v-if="resolveSuccessMessage" class="query-tool-success">
       {{ resolveSuccessMessage }}
     </p>
 
diff --git a/frontend/src/query-tool/components/QueryBar.vue b/frontend/src/query-tool/components/QueryBar.vue
index 7ca7a6d..4c77d41 100644
--- a/frontend/src/query-tool/components/QueryBar.vue
+++ b/frontend/src/query-tool/components/QueryBar.vue
@@ -51,53 +51,55 @@ function handleResolve() {
 </script>
 
 <template>
-  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
-    <FilterToolbar>
-      <label class="flex min-w-[220px] flex-col gap-1 text-xs text-slate-500">
-        <span class="font-medium">查詢類型</span>
-        <select
-          class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
-          :value="inputType"
-          :disabled="resolving"
-          @change="emit('update:inputType', $event.target.value)"
-        >
-          <option
-            v-for="option in inputTypeOptions"
-            :key="option.value"
-            :value="option.value"
+  <section class="card">
+    <div class="card-body">
+      <FilterToolbar>
+        <label class="filter-group">
+          <span class="filter-label">查詢類型</span>
+          <select
+            class="query-tool-select"
+            :value="inputType"
+            :disabled="resolving"
+            @change="emit('update:inputType', $event.target.value)"
           >
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
+            <option
+              v-for="option in inputTypeOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </label>
 
-      <template #actions>
-        <button
-          type="button"
-          class="h-9 rounded-card bg-brand-500 px-4 text-sm font-medium text-white transition hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-60"
+        <template #actions>
+          <button
+            type="button"
+            class="btn btn-primary"
+            :disabled="resolving"
+            @click="handleResolve"
+          >
+            {{ resolving ? '解析中...' : '解析' }}
+          </button>
+        </template>
+      </FilterToolbar>
+
+      <div style="margin-top: 12px">
+        <textarea
+          :value="inputText"
+          class="query-tool-textarea"
+          :placeholder="`請輸入 ${inputTypeLabel}（換行或逗號分隔），最多 ${inputLimit} 筆`"
           :disabled="resolving"
-          @click="handleResolve"
-        >
-          {{ resolving ? '解析中...' : '解析' }}
-        </button>
-      </template>
-    </FilterToolbar>
-
-    <div class="mt-3">
-      <textarea
-        :value="inputText"
-        class="min-h-28 w-full rounded-card border border-stroke-soft bg-surface-muted/40 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-500"
-        :placeholder="`請輸入 ${inputTypeLabel}（換行或逗號分隔），最多 ${inputLimit} 筆`"
-        :disabled="resolving"
-        @input="emit('update:inputText', $event.target.value)"
-      />
-      <p class="mt-2 text-xs text-slate-500">
-        支援萬用字元：<code>%</code>（任意長度）、<code>_</code>（單一字元），也可用 <code>*</code> 代表 <code>%</code>。
-        例如：<code>GA25%01</code>、<code>GA25%</code>、<code>GMSN-1173%</code>
-      </p>
-      <div class="mt-2 flex items-center justify-between text-xs">
-        <p class="text-slate-500">已輸入 {{ inputCount }} / {{ inputLimit }}</p>
-        <p v-if="errorMessage" class="text-state-danger">{{ errorMessage }}</p>
+          @input="emit('update:inputText', $event.target.value)"
+        />
+        <p class="query-tool-input-help">
+          支援萬用字元：<code>%</code>（任意長度）、<code>_</code>（單一字元），也可用 <code>*</code> 代表 <code>%</code>。
+          例如：<code>GA25%01</code>、<code>GA25%</code>、<code>GMSN-1173%</code>
+        </p>
+        <div class="query-tool-input-counter">
+          <span>已輸入 {{ inputCount }} / {{ inputLimit }}</span>
+          <span v-if="errorMessage" class="query-tool-input-error">{{ errorMessage }}</span>
+        </div>
       </div>
     </div>
   </section>
diff --git a/frontend/src/query-tool/components/SerialReverseTraceView.vue b/frontend/src/query-tool/components/SerialReverseTraceView.vue
index 6e75675..3206ec7 100644
--- a/frontend/src/query-tool/components/SerialReverseTraceView.vue
+++ b/frontend/src/query-tool/components/SerialReverseTraceView.vue
@@ -147,7 +147,7 @@ const emit = defineEmits([
       @resolve="emit('resolve')"
     />
 
-    <p v-if="resolveSuccessMessage" class="rounded-card border border-state-success/40 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
+    <p v-if="resolveSuccessMessage" class="query-tool-success">
       {{ resolveSuccessMessage }}
     </p>
 
diff --git a/frontend/src/query-tool/main.js b/frontend/src/query-tool/main.js
index f19c686..58447c8 100644
--- a/frontend/src/query-tool/main.js
+++ b/frontend/src/query-tool/main.js
@@ -1,6 +1,8 @@
 import { createApp } from 'vue';
 
+import '../wip-shared/styles.css';
 import '../styles/tailwind.css';
+import './style.css';
 import App from './App.vue';
 
 createApp(App).mount('#app');
diff --git a/frontend/src/query-tool/style.css b/frontend/src/query-tool/style.css
new file mode 100644
index 0000000..017ca74
--- /dev/null
+++ b/frontend/src/query-tool/style.css
@@ -0,0 +1,481 @@
+/* ================================================================
+   query-tool/style.css — 自包含頁面樣式
+   包含 wip-shared 基礎變數與元件 + 頁面專屬樣式
+   ================================================================ */
+
+/* ---- 設計 Token (與 wip-shared/styles.css 同步) ---- */
+:root {
+  --bg: #f5f7fa;
+  --card-bg: #ffffff;
+  --text: #222;
+  --muted: #666;
+  --border: #e2e6ef;
+  --primary: #667eea;
+  --primary-dark: #5568d3;
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  --shadow-strong: 0 4px 15px rgba(102, 126, 234, 0.2);
+  --success: #22c55e;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+}
+
+/* ---- 全域重置 ---- */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Microsoft JhengHei', Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+
+/* ---- 頁面容器 ---- */
+.dashboard {
+  max-width: 1900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.query-tool-page {
+  max-width: 1900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* ---- Header (wip-shared) ---- */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 18px 22px;
+  background: var(--header-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+  border-radius: 10px;
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-strong);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.header h1 {
+  color: #fff;
+  font-size: 24px;
+}
+
+.query-tool-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.query-tool-subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+/* ---- 按鈕 (wip-shared) ---- */
+.btn {
+  padding: 9px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-primary {
+  padding: 9px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--primary);
+  color: #fff;
+  transition: all 0.2s ease;
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-export {
+  background: #0f766e;
+  color: #fff;
+}
+
+.btn-export:hover {
+  background: #0b5e59;
+}
+
+.btn-export:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-ghost {
+  background: #f1f5f9;
+  color: #334155;
+  border: 1px solid var(--border);
+}
+
+.btn-ghost:hover {
+  background: #e2e8f0;
+}
+
+/* ---- 佔位 / 空狀態 (wip-shared) ---- */
+.placeholder {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--muted);
+}
+
+/* ---- Card 基礎 ---- */
+.card {
+  background: var(--card-bg);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  overflow: visible;
+  margin-bottom: 14px;
+}
+
+.card-header {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+  background: #f8fafc;
+  border-radius: 10px 10px 0 0;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.card-body {
+  padding: 14px 16px;
+}
+
+/* ---- Error 訊息 ---- */
+.error-banner {
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: 13px;
+}
+
+/* ---- Tab 導航 (頂層) ---- */
+.query-tool-tab-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.query-tool-tab {
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: #f8fafc;
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.query-tool-tab:hover:not(.active) {
+  border-color: var(--border);
+  color: #1e293b;
+}
+
+.query-tool-tab.active {
+  border-color: var(--primary);
+  background: #eef2ff;
+  color: #4c51bf;
+  box-shadow: var(--shadow);
+}
+
+/* ---- Tab 說明區塊 ---- */
+.query-tool-tab-desc {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+}
+
+.query-tool-tab-desc-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  letter-spacing: 0.025em;
+}
+
+.query-tool-tab-desc-title {
+  margin-top: 4px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.query-tool-tab-desc-subtitle {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #475569;
+}
+
+/* ---- Sub-tab 導航 (Detail / Equipment) ---- */
+.query-tool-sub-tab-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+.query-tool-sub-tab {
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: #f1f5f9;
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.query-tool-sub-tab:hover:not(.active) {
+  border-color: var(--border);
+  color: #1e293b;
+}
+
+.query-tool-sub-tab.active {
+  border-color: var(--primary);
+  background: #eef2ff;
+  color: #4c51bf;
+}
+
+/* ---- 表單控制元素 ---- */
+.query-tool-select {
+  width: 100%;
+  height: 34px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 13px;
+  color: #334155;
+  outline: none;
+}
+
+.query-tool-select:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
+}
+
+.query-tool-select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.query-tool-textarea {
+  width: 100%;
+  min-height: 112px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #f8fafc;
+  font-size: 13px;
+  color: #334155;
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s ease;
+}
+
+.query-tool-textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
+}
+
+.query-tool-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.query-tool-date-input {
+  width: 100%;
+  height: 34px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 13px;
+  color: #334155;
+  outline: none;
+}
+
+.query-tool-date-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
+}
+
+.query-tool-input-help {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.query-tool-input-help code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: #e2e8f0;
+  font-size: 11px;
+}
+
+.query-tool-input-counter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.query-tool-input-error {
+  color: var(--danger);
+}
+
+/* ---- Filter label ---- */
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 180px;
+}
+
+.filter-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #475569;
+}
+
+/* ---- 區段標頭 (標題 + 動作列) ---- */
+.query-tool-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.query-tool-muted {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* ---- 表格 ---- */
+.query-tool-table-wrap {
+  overflow: auto;
+  max-height: 420px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.query-tool-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.query-tool-table th,
+.query-tool-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid #f1f5f9;
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.query-tool-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #f8fafc;
+  font-weight: 700;
+  color: #334155;
+}
+
+.query-tool-table tbody tr:hover {
+  background: #f8fbff;
+}
+
+.query-tool-table tbody tr:nth-child(even) {
+  background: #fafbfd;
+}
+
+/* ---- 訊息 ---- */
+.query-tool-success {
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid #bbf7d0;
+  background: #f0fdf4;
+  color: #166534;
+  font-size: 13px;
+}
+
+/* ---- 表格高度變體 ---- */
+.query-tool-table-wrap.short {
+  max-height: 360px;
+}
+
+.query-tool-table-wrap.tall {
+  max-height: 460px;
+}
+
+/* ---- 響應式 ---- */
+@media (max-width: 768px) {
+  .dashboard,
+  .query-tool-page {
+    padding: 16px;
+  }
+
+  .header {
+    padding: 14px 16px;
+  }
+
+  .header h1 {
+    font-size: 20px;
+  }
+
+  .query-tool-tab-bar {
+    gap: 6px;
+  }
+
+  .query-tool-tab {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+}
diff --git a/frontend/tests/portal-shell-route-contract-governance.test.js b/frontend/tests/portal-shell-route-contract-governance.test.js
index 3b330cd..31a1a0e 100644
--- a/frontend/tests/portal-shell-route-contract-governance.test.js
+++ b/frontend/tests/portal-shell-route-contract-governance.test.js
@@ -25,7 +25,7 @@ test('all route contracts satisfy governance metadata requirements', () => {
 });
 
 
-test('admin shell targets are governed and rendered as external targets', () => {
+test('admin shell targets are governed with correct render modes', () => {
   const pagesContract = getRouteContract('/admin/pages');
   const perfContract = getRouteContract('/admin/performance');
 
@@ -34,7 +34,7 @@ test('admin shell targets are governed and rendered as external targets', () =>
   assert.equal(pagesContract.visibilityPolicy, 'admin_only');
   assert.equal(perfContract.visibilityPolicy, 'admin_only');
   assert.equal(pagesContract.renderMode, 'external');
-  assert.equal(perfContract.renderMode, 'external');
+  assert.equal(perfContract.renderMode, 'native');
 });
 
 
diff --git a/src/mes_dashboard/templates/query_tool.html b/src/mes_dashboard/templates/query_tool.html
index 7398613..f5e3b39 100644
--- a/src/mes_dashboard/templates/query_tool.html
+++ b/src/mes_dashboard/templates/query_tool.html
@@ -2,6 +2,15 @@
 
 {% block title %}批次追蹤工具{% endblock %}
 
+{% block head_extra %}
+    {% set shared_css = frontend_asset('styles.css') %}
+    {% set tw_css = frontend_asset('tailwind.css') %}
+    {% set page_css = frontend_asset('query-tool.css') %}
+    {% if shared_css %}<link rel="stylesheet" href="{{ shared_css }}">{% endif %}
+    {% if tw_css %}<link rel="stylesheet" href="{{ tw_css }}">{% endif %}
+    {% if page_css %}<link rel="stylesheet" href="{{ page_css }}">{% endif %}
+{% endblock %}
+
 {% block content %}
     <div id="app"></div>
 {% endblock %}