From 2625d246683298dc27b90536cb24ae9b971532dd Mon Sep 17 00:00:00 2001
From: Elysia <a.elysia@proton.me>
Date: Fri, 30 Jan 2026 21:02:31 +0800
Subject: [PATCH] refactor: enhance UI components with improved styling and
 transitions

- Updated DownloadQueue.vue to use Tailwind CSS for styling and added transition effects for better user experience.
- Refactored InstalledAppsModal.vue to improve layout and responsiveness, incorporating Tailwind CSS styles.
- Enhanced ScreenPreview.vue with transitions and improved button styles for navigation.
- Revamped ThemeToggle.vue to provide a more modern toggle button design with accessibility features.
- Updated TopActions.vue to use Tailwind CSS for buttons and layout adjustments.
- Refined UpdateAppsModal.vue with a cleaner layout, improved button styles, and better handling of loading states.
---
 src/App.vue                           |  48 +-
 src/assets/css/appstyle.css           | 850 ++------------------------
 src/components/AppCard.vue            |  39 +-
 src/components/AppDetailModal.vue     | 179 +++---
 src/components/AppGrid.vue            |  28 +-
 src/components/AppHeader.vue          |  33 +-
 src/components/AppSidebar.vue         |  46 +-
 src/components/DownloadDetail.vue     | 533 +++-------------
 src/components/DownloadQueue.vue      | 330 ++--------
 src/components/InstalledAppsModal.vue | 164 ++---
 src/components/ScreenPreview.vue      |  49 +-
 src/components/ThemeToggle.vue        |  27 +-
 src/components/TopActions.vue         |  20 +-
 src/components/UpdateAppsModal.vue    | 188 +++---
 14 files changed, 529 insertions(+), 2005 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index da878172..3ee8ae4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,21 @@
 <template>
-  <div class="app-container">
-    <aside class="sidebar">
+  <div
+    class="flex min-h-screen flex-col bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100 lg:flex-row">
+    <aside
+      class="w-full border-b border-slate-200/70 bg-white/80 px-5 py-6 backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/70 lg:sticky lg:top-0 lg:flex lg:h-screen lg:w-72 lg:flex-col lg:border-b-0 lg:border-r">
       <AppSidebar :categories="categories" :active-category="activeCategory" :category-counts="categoryCounts"
         :is-dark-theme="isDarkTheme" @toggle-theme="toggleTheme" @select-category="selectCategory" />
     </aside>
 
-    <main class="main">
+    <main class="flex-1 px-4 py-6 lg:px-10">
       <AppHeader :search-query="searchQuery" :apps-count="filteredApps.length" @update-search="handleSearchInput"
         @update="handleUpdate" @list="handleList" />
       <AppGrid :apps="filteredApps" :loading="loading" @open-detail="openDetail" />
     </main>
 
-    <AppDetailModal :show="showModal" :app="currentApp" :screenshots="screenshots" :isinstalled="currentAppIsInstalled" @close="closeDetail"
-      @install="handleInstall" @remove="handleRemove" @open-preview="openScreenPreview" />
+    <AppDetailModal data-app-modal="detail" :show="showModal" :app="currentApp" :screenshots="screenshots"
+      :isinstalled="currentAppIsInstalled" @close="closeDetail" @install="handleInstall" @remove="handleRemove"
+      @open-preview="openScreenPreview" />
 
     <ScreenPreview :show="showPreview" :screenshots="screenshots" :current-screen-index="currentScreenIndex"
       @close="closeScreenPreview" @prev="prevScreen" @next="nextScreen" />
@@ -120,24 +123,18 @@ const hasSelectedUpgrades = computed(() => {
 });
 
 // 方法
+const syncThemePreference = (enabled) => {
+  document.documentElement.classList.toggle('dark', enabled);
+};
+
 const initTheme = () => {
   const savedTheme = localStorage.getItem('theme');
   isDarkTheme.value = savedTheme === 'dark';
-
-  if (isDarkTheme.value) {
-    document.documentElement.setAttribute('data-theme', 'dark');
-  }
+  syncThemePreference(isDarkTheme.value);
 };
 
 const toggleTheme = () => {
   isDarkTheme.value = !isDarkTheme.value;
-  localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light');
-
-  if (isDarkTheme.value) {
-    document.documentElement.setAttribute('data-theme', 'dark');
-  } else {
-    document.documentElement.removeAttribute('data-theme');
-  }
 };
 
 const selectCategory = (category) => {
@@ -156,7 +153,7 @@ const openDetail = (app) => {
 
   // 确保模态框显示后滚动到顶部
   nextTick(() => {
-    const modal = document.querySelector('.modal');
+    const modal = document.querySelector('[data-app-modal="detail"] .modal-panel');
     if (modal) modal.scrollTop = 0;
   });
 };
@@ -548,8 +545,8 @@ const loadApps = async () => {
   }
 };
 
-const handleSearchInput = (e) => {
-  searchQuery.value = e.target.value;
+const handleSearchInput = (value) => {
+  searchQuery.value = value;
 };
 
 // 生命周期钩子
@@ -575,15 +572,6 @@ onMounted(async () => {
 // 观察器
 watch(isDarkTheme, (newVal) => {
   localStorage.setItem('theme', newVal ? 'dark' : 'light');
-  if (newVal) {
-    document.documentElement.setAttribute('data-theme', 'dark');
-  } else {
-    document.documentElement.removeAttribute('data-theme');
-  }
+  syncThemePreference(newVal);
 });
-
-</script>
-
-<style scoped>
-/* 这里可以放组件特定样式 */
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/assets/css/appstyle.css b/src/assets/css/appstyle.css
index 447f12d5..d80fa6e2 100644
--- a/src/assets/css/appstyle.css
+++ b/src/assets/css/appstyle.css
@@ -1,824 +1,60 @@
-/* Reset */
-:root {
---bg: #f4f7fb;
---card: #ffffff;
---muted: #6b7280;
---text: #0f172a;
---accent: #2563eb;
---accent-hover: #1d4ed8;
---glass: rgba(255, 255, 255, 0.6);
---shadow: 0 6px 18px rgba(12, 14, 20, 0.08);
---shadow-hover: 0 12px 28px rgba(12, 14, 20, 0.12);
---radius: 12px;
---transition: all 0.25s ease;
---sidebar-width: 280px;
-}
-
-[data-theme="dark"] {
---bg: #0d121c;
---card: #151c2c;
---muted: #8a94a6;
---text: #e9ecf3;
---accent: #3b82f6;
---accent-hover: #2563eb;
---glass: rgba(21, 28, 44, 0.7);
---shadow: 0 10px 30px rgba(2, 6, 23, 0.5);
---shadow-hover: 0 16px 40px rgba(2, 6, 23, 0.7);
-}
+@import "tailwindcss";
 
-html,
-body {
-height: 100%;
-margin: 0;
-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-background-color: var(--bg);
-color: var(--text);
-line-height: 1.5;
-transition: background-color 0.3s ease, color 0.3s ease;
-overflow-x: hidden;
-}
+@theme {
+  --font-sans: "Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif";
 
-/* 添加固定背景层，防止滚动时背景移动 */
-body::before {
-content: '';
-position: fixed;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background: var(--bg);
-z-index: -1;
-transition: background-color 0.3s ease;
-}
-
-.app-container {
-display: flex;
-min-height: 100vh;
-}
+  --color-brand: #2563eb;
+  --color-brand-dark: #1d4ed8;
+  --color-brand-soft: #60a5fa;
 
-/* Sidebar */
-.sidebar {
-width: var(--sidebar-width);
-padding: 24px 20px;
-box-sizing: border-box;
-background: var(--glass);
-backdrop-filter: blur(12px);
-box-shadow: var(--shadow);
-position: sticky;
-top: 0;
-height: 100vh;
-overflow-y: auto;
-transition: var(--transition);
-}
+  --color-surface-light: #f5f7fb;
+  --color-surface-dark: #0b1220;
 
-.brand {
-font-weight: 700;
-font-size: 22px;
-margin-bottom: 24px;
-display: flex;
-align-items: center;
-gap: 10px;
-}
+  --color-card-light: #ffffff;
+  --color-card-dark: #151c2c;
 
-.brand::before {
-content: "";
-width: 40px;
-height: 40px;
-background-image: url('../imgs/amber-pm-logo.png');
-background-size: contain;
-background-repeat: no-repeat;
-background-position: center;
-}
+  --shadow-glass: 0 10px 30px rgba(15,23,42,0.08);
+  --shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45);
 
-/* 暗色模式切换器 - 现代样式 */
-.theme-toggle-container {
-display: flex;
-align-items: center;
-justify-content: space-between;
-margin-bottom: 24px;
-padding: 12px 16px;
-background: var(--glass);
-border-radius: var(--radius);
-transition: var(--transition);
+  --radius-xl: 1rem;
 }
 
-.theme-toggle-container:hover {
-transform: translateY(-2px);
-box-shadow: var(--shadow-hover);
-}
+@variant dark (&:where(.dark, .dark *));
 
-.theme-label {
-font-size: 14px;
-font-weight: 500;
-}
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--color-surface-light);
+    color: #0f172a;
+    min-height: 100vh;
+  }
 
-.theme-toggle {
-position: relative;
-display: inline-block;
-width: 50px;
-height: 26px;
-}
+  :root.dark body {
+    background-color: var(--color-surface-dark);
+    color: #f8fafc;
+  }
 
-.theme-toggle input {
-opacity: 0;
-width: 0;
-height: 0;
+  #app {
+    min-height: 100vh;
+  }
 }
 
-.theme-slider {
-position: absolute;
-cursor: pointer;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-background-color: #cbd5e1;
-transition: .4s;
-border-radius: 34px;
-}
+@layer utilities {
+  .scrollbar-muted {
+    scrollbar-width: thin;
+    scrollbar-color: #94a3b8 transparent;
+  }
 
-.theme-slider:before {
-position: absolute;
-content: "";
-height: 18px;
-width: 18px;
-left: 4px;
-bottom: 4px;
-background-color: white;
-transition: .4s;
-border-radius: 50%;
-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-input:checked+.theme-slider {
-background-color: var(--accent);
-}
-
-input:checked+.theme-slider:before {
-transform: translateX(24px);
-}
-
-.theme-slider i {
-position: absolute;
-top: 50%;
-transform: translateY(-50%);
-font-size: 12px;
-color: white;
-}
-
-.theme-slider .fa-sun {
-left: 7px;
-opacity: 0;
-transition: opacity 0.3s;
-}
-
-.theme-slider .fa-moon {
-right: 7px;
-opacity: 1;
-transition: opacity 0.3s;
-}
-
-input:checked+.theme-slider .fa-sun {
-opacity: 1;
-}
-
-input:checked+.theme-slider .fa-moon {
-opacity: 0;
-}
-
-.categories {
-margin-top: 8px;
-}
-
-.category {
-display: flex;
-align-items: center;
-gap: 12px;
-padding: 10px 12px;
-border-radius: var(--radius);
-cursor: pointer;
-transition: var(--transition);
-margin-bottom: 4px;
-}
-
-.category:hover,
-.category.active {
-background: var(--glass);
-transform: translateX(4px);
-}
-
-.count {
-margin-left: auto;
-font-size: 12px;
-color: var(--muted);
-background: var(--glass);
-padding: 2px 8px;
-border-radius: 20px;
-}
-
-/* Main */
-.main {
-flex: 1;
-padding: 24px;
-max-width: 100%;
-transition: var(--transition);
-}
-
-.topbar {
-display: flex;
-gap: 16px;
-align-items: center;
-margin-bottom: 24px;
-flex-wrap: wrap;
-}
-
-.search {
-flex: 1;
-display: flex;
-min-width: 0;
-max-width: 500px;
-}
-
-.search input {
-flex: 1;
-padding: 12px 16px;
-border-radius: var(--radius);
-border: 1px solid rgba(15, 23, 42, 0.06);
-box-shadow: var(--shadow);
-outline: none;
-font-size: 15px;
-transition: var(--transition);
-background: var(--card);
-color: var(--text);
-}
-
-.search input:focus {
-border-color: var(--accent);
-box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-.stats {
-font-size: 14px;
-color: var(--muted);
-margin-left: auto;
-}
-
-.grid {
-display: grid;
-grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-gap: 20px;
-}
-
-.card {
-background: var(--card);
-border-radius: var(--radius);
-padding: 16px;
-box-shadow: var(--shadow);
-display: flex;
-gap: 16px;
-align-items: flex-start;
-cursor: pointer;
-transition: var(--transition);
-height: 100%;
-box-sizing: border-box;
-}
+  .scrollbar-muted::-webkit-scrollbar {
+    width: 0.4rem;
+  }
 
-.card:hover {
-transform: translateY(-6px);
-box-shadow: var(--shadow-hover);
-}
-
-.icon {
-width: 64px;
-height: 64px;
-border-radius: 14px;
-flex: 0 0 64px;
-overflow: hidden;
-background: linear-gradient(180deg, #f0f3f8, #e6edf7);
-display: flex;
-align-items: center;
-justify-content: center;
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-}
-
-.icon img {
-width: 100%;
-height: 100%;
-object-fit: cover;
-transition: var(--transition);
-}
-
-.meta {
-flex: 1;
-min-width: 0;
-}
-
-.title {
-font-weight: 600;
-margin-bottom: 6px;
-font-size: 16px;
-white-space: nowrap;
-overflow: hidden;
-text-overflow: ellipsis;
-}
-
-.meta .muted {
-font-size: 13px;
-color: var(--muted);
-margin-bottom: 8px;
-}
-
-.description {
-font-size: 13px;
-color: var(--muted);
-display: -webkit-box;
--webkit-line-clamp: 2;
-/* 修复这里 - 删除错误的<script>标签 */
--webkit-box-orient: vertical;
-overflow: hidden;
-line-height: 1.4;
-}
-
-/* Modal */
-.modal-backdrop {
-position: fixed;
-inset: 0;
-background: rgba(2, 6, 23, 0.45);
-display: none;
-align-items: center;
-justify-content: center;
-padding: 20px;
-z-index: 1000;
-backdrop-filter: blur(4px);
-}
-
-.modal {
-width: min(1000px, calc(100% - 40px));
-max-height: 90vh;
-overflow: auto;
-background: var(--card);
-border-radius: var(--radius);
-padding: 24px;
-box-shadow: 0 20px 60px rgba(2, 6, 23, 0.5);
-position: relative;
-}
-
-.modal-header {
-display: flex;
-justify-content: space-between;
-align-items: flex-start;
-margin-bottom: 20px;
-}
-
-.modal-icon-title {
-display: flex;
-gap: 16px;
-align-items: flex-start;
-flex: 1;
-}
-
-.modal-icon {
-width: 80px;
-height: 80px;
-border-radius: 16px;
-overflow: hidden;
-flex-shrink: 0;
-background: linear-gradient(180deg, #f0f3f8, #e6edf7);
-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.modal-icon img {
-width: 100%;
-height: 100%;
-object-fit: cover;
-}
-
-.modal-title-section {
-flex: 1;
-}
-
-.modal-title {
-font-weight: 700;
-font-size: 22px;
-margin-bottom: 4px;
-}
-
-.modal-subtitle {
-color: var(--muted);
-font-size: 15px;
-margin-bottom: 16px;
-}
-
-/* 修改：安装按钮放在右上角关闭按钮左侧 */
-.modal-actions {
-display: flex;
-align-items: center;
-gap: 12px;
-}
-
-/* 新增：所有 APM 统一按钮 */
-.apm-btn {
-padding: 10px 18px;
-border-radius: var(--radius);
-background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-color: #fff;
-border: none;
-cursor: pointer;
-font-weight: 600;
-font-size: 14px;
-transition: var(--transition);
-box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
-display: inline-flex;
-align-items: center;
-gap: 8px;
-}
-
-.apm-btn:hover {
-transform: translateY(-2px);
-box-shadow: 0 6px 16px rgba(37, 99, 235, .4);
-}
-
-.apm-btn:active {
-transform: translateY(0);
-}
-
-/* 顶部动作按钮只是尺寸小一号 */
-.top-actions .apm-btn {
-padding: 8px 14px;
-/* 稍小 */
-font-size: 13px;
-}
-
-
-
-.install-btn {
-padding: 10px 18px;
-border-radius: var(--radius);
-background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-color: white;
-border: none;
-cursor: pointer;
-font-weight: 600;
-font-size: 14px;
-transition: var(--transition);
-box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
-display: flex;
-align-items: center;
-gap: 8px;
-}
-
-.install-btn:hover {
-transform: translateY(-2px);
-box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
-}
-
-
-.modal .screens {
-display: flex;
-gap: 10px;
-margin-top: 20px;
-flex-wrap: wrap;
-}
-
-.screens img {
-width: 180px;
-height: 110px;
-object-fit: cover;
-border-radius: 8px;
-transition: var(--transition);
-cursor: pointer;
-}
-
-.screens img:hover {
-transform: scale(1.03);
-}
-
-.modal .info {
-margin-top: 20px;
-display: grid;
-grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-gap: 16px;
-}
-
-.info-item {
-margin-bottom: 12px;
-}
-
-.info-label {
-font-weight: 600;
-font-size: 14px;
-margin-bottom: 4px;
-}
-
-.info-value {
-color: var(--muted);
-font-size: 14px;
-line-height: 1.4;
-}
-
-/* 更多详情部分 */
-.more-details {
-margin-top: 24px;
-border-top: 1px solid rgba(0, 0, 0, 0.1);
-padding-top: 20px;
-}
-
-[data-theme="dark"] .more-details {
-border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.more-details-title {
-font-weight: 700;
-font-size: 18px;
-margin-bottom: 12px;
-}
-
-.more-details-content {
-max-height: 200px;
-overflow-y: auto;
-padding: 12px;
-background: var(--glass);
-border-radius: var(--radius);
-font-size: 14px;
-line-height: 1.5;
-}
-
-.close-modal {
-background: none;
-border: none;
-font-size: 24px;
-cursor: pointer;
-color: var(--muted);
-padding: 0;
-width: 32px;
-height: 32px;
-display: flex;
-align-items: center;
-justify-content: center;
-border-radius: 50%;
-transition: var(--transition);
-}
-
-.close-modal:hover {
-background: var(--glass);
-color: var(--text);
-}
-
-.apm-note {
-margin-top: 20px;
-font-size: 13px;
-color: var(--muted);
-padding: 12px;
-background: var(--glass);
-border-radius: var(--radius);
-}
-
-.apm-note a {
-color: var(--accent);
-text-decoration: none;
-}
-
-.apm-note a:hover {
-text-decoration: underline;
-}
-
-/* 截图预览模态框 */
-.screen-preview-backdrop {
-position: fixed;
-inset: 0;
-background: rgba(2, 6, 23, 0.85);
-display: none;
-align-items: center;
-justify-content: center;
-z-index: 1100;
-backdrop-filter: blur(6px);
-}
-
-.screen-preview {
-max-width: 90%;
-max-height: 90%;
-position: relative;
-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-border-radius: var(--radius);
-overflow: hidden;
-}
-
-.screen-preview img {
-display: block;
-max-width: 100%;
-max-height: 100%;
-object-fit: contain;
-}
-
-.screen-preview-controls {
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-display: flex;
-justify-content: space-between;
-padding: 20px;
-box-sizing: border-box;
-z-index: 10;
-}
-
-.screen-preview-nav {
-display: flex;
-gap: 10px;
-}
-
-.screen-preview-btn {
-background: rgba(0, 0, 0, 0.5);
-color: white;
-border: none;
-width: 44px;
-height: 44px;
-border-radius: 50%;
-display: flex;
-align-items: center;
-justify-content: center;
-cursor: pointer;
-font-size: 18px;
-transition: var(--transition);
-backdrop-filter: blur(4px);
-}
-
-.screen-preview-btn:hover {
-background: rgba(0, 0, 0, 0.7);
-}
-
-.screen-preview-btn:disabled {
-opacity: 0.5;
-cursor: not-allowed;
-}
-
-.screen-preview .close-preview {
-margin-left: auto;
-}
-
-.screen-preview-counter {
-color: white;
-font-size: 14px;
-background: rgba(0, 0, 0, 0.5);
-padding: 4px 10px;
-border-radius: 20px;
-position: absolute;
-bottom: 20px;
-left: 50%;
-transform: translateX(-50%);
-backdrop-filter: blur(4px);
-}
-
-/* Responsive */
-@media (max-width: 900px) {
-.sidebar {
-display: none;
-}
-
-.app-container {
-flex-direction: column;
-}
-
-.main {
-padding: 16px;
-}
-
-.card {
-padding: 14px;
-}
-
-.icon {
-width: 56px;
-height: 56px;
-}
-
-.modal-header {
-flex-direction: column;
-gap: 16px;
-}
-
-.modal-icon-title {
-width: 100%;
-}
-
-.modal-actions {
-width: 100%;
-justify-content: space-between;
-}
-
-.screens img {
-width: 100%;
-height: auto;
-max-width: 300px;
-}
-
-.screen-preview-controls {
-padding: 10px;
-}
-
-.screen-preview-btn {
-width: 40px;
-height: 40px;
-font-size: 16px;
-}
-}
-
-/* Small helpers */
-.muted {
-color: var(--muted);
-}
-
-.pill {
-background: var(--glass);
-padding: 4px 10px;
-border-radius: 999px;
-font-size: 12px;
-display: inline-block;
-}
-
-/* Loading animation */
-.loading {
-opacity: 0.6;
-pointer-events: none;
-}
-
-@keyframes pulse {
-0% {
-opacity: 0.6;
-}
-
-50% {
-opacity: 1;
-}
-
-100% {
-opacity: 0.6;
-}
-}
-
-.loading .icon {
-animation: pulse 1.5s infinite;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-width: 8px;
-}
-
-::-webkit-scrollbar-track {
-background: var(--glass);
-border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-background: var(--muted);
-border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-background: var(--accent);
-}
-
-/* top action buttons */
-.top-actions {
-display: flex;
-gap: 8px;
-align-items: center;
-}
-
-.action-btn {
-padding: 8px 12px;
-border-radius: 10px;
-background: var(--accent);
-border: 1px solid rgba(15, 23, 42, 0.04);
-box-shadow: var(--shadow);
-cursor: pointer;
-font-weight: 600;
-transition: var(--transition);
-display: inline-flex;
-gap: 8px;
-align-items: center;
-}
-
-.action-btn:hover {
-transform: translateY(-2px);
-box-shadow: var(--shadow-hover);
-}
-
-.action-btn.secondary {
-background: transparent;
-border: 1px solid rgba(15, 23, 42, 0.06);
-}
-
-.protocol-fallback {
-margin-left: 8px;
-font-size: 13px;
-color: var(--muted);
-}
+  .scrollbar-muted::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-.protocol-fallback code {
-background: var(--glass);
-padding: 6px 8px;
-border-radius: 8px;
-display: inline-block;
+  .scrollbar-muted::-webkit-scrollbar-thumb {
+    background-color: #94a3b8;
+    border-radius: 9999px;
+  }
 }
diff --git a/src/components/AppCard.vue b/src/components/AppCard.vue
index df4c1f3d..fd0ab266 100644
--- a/src/components/AppCard.vue
+++ b/src/components/AppCard.vue
@@ -1,20 +1,15 @@
 <template>
-  <div class="card" @click="openDetail">
-    <div class="icon">
-      <img 
-        ref="iconImg"
-        :src="loadedIcon" 
-        alt="icon" 
-        class="lazy"
-        :class="{ 'loaded': isLoaded }"
-      >
+  <div @click="openDetail"
+    class="group flex h-full cursor-pointer gap-4 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm transition hover:-translate-y-1 hover:border-brand/50 hover:shadow-lg dark:border-slate-800/60 dark:bg-slate-900/60">
+    <div
+      class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700">
+      <img ref="iconImg" :src="loadedIcon" alt="icon"
+        :class="['h-full w-full object-cover transition-opacity duration-300', isLoaded ? 'opacity-100' : 'opacity-0']" />
     </div>
-    <div class="meta">
-      <div class="title">{{ app.Name || '' }}</div>
-      <div class="muted">{{ app.Pkgname || '' }} · {{ app.Version || '' }}</div>
-      <div class="description">
-        {{ description }}
-      </div>
+    <div class="flex flex-1 flex-col gap-1 overflow-hidden">
+      <div class="truncate text-base font-semibold text-slate-900 dark:text-white">{{ app.Name || '' }}</div>
+      <div class="text-sm text-slate-500 dark:text-slate-400">{{ app.Pkgname || '' }} · {{ app.Version || '' }}</div>
+      <div class="text-sm text-slate-500 dark:text-slate-400">{{ description }}</div>
     </div>
   </div>
 </template>
@@ -103,17 +98,3 @@ onBeforeUnmount(() => {
   }
 });
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-
-/* 懒加载过渡效果 */
-.lazy {
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.lazy.loaded {
-  opacity: 1;
-}
-</style>
diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 98b66b9e..148bd16a 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -1,91 +1,109 @@
 <template>
-  <div class="modal-backdrop" :style="{ display: show ? 'flex' : 'none' }" role="dialog" aria-hidden="false">
-    <div class="modal">
-      <div class="modal-header">
-        <div class="modal-icon-title" v-if="app">
-          <div class="modal-icon">
-            <img 
-              :src="iconPath" 
-              alt="icon" 
-            />
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+      leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+      <div v-if="show" v-bind="attrs"
+        class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10 backdrop-blur-sm"
+        @click.self="closeModal">
+      <div class="modal-panel relative w-full max-w-4xl overflow-hidden rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+        <button type="button"
+          class="absolute right-4 top-4 z-10 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/60 bg-white/50 text-slate-500 backdrop-blur-sm transition hover:bg-slate-100 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800/50 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white"
+          @click="closeModal" aria-label="关闭">
+          <i class="fas fa-xmark"></i>
+        </button>
+
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:pr-12">
+          <div class="flex items-center gap-4">
+            <div
+              class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700">
+              <img v-if="app" :src="iconPath" alt="icon" class="h-full w-full object-cover" />
+            </div>
+            <div class="space-y-1">
+              <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ app?.Name || '' }}</p>
+              <p class="text-sm text-slate-500 dark:text-slate-400">{{ app?.Pkgname || '' }} · {{ app?.Version || '' }}</p>
+            </div>
           </div>
-          <div class="modal-title-section">
-            <div class="modal-title">{{ app.Name || '' }}</div>
-            <div class="modal-subtitle">{{ app.Pkgname || '' }} · {{ app.Version || '' }}</div>
+          <div class="flex flex-wrap gap-3 lg:ml-auto">
+            <button v-if="!isinstalled" type="button"
+              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5"
+              @click="handleInstall">
+              <i class="fas fa-download"></i>
+              <span>安装</span>
+            </button>
+            <button v-else type="button"
+              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 transition hover:-translate-y-0.5"
+              @click="handleRemove">
+              <i class="fas fa-trash"></i>
+              <span>卸载</span>
+            </button>
           </div>
         </div>
-        <div class="modal-actions">
-          <button v-if="!isinstalled" class="install-btn" @click="handleInstall">
-            <i class="fas fa-download"></i> 安装
-          </button>
-          <button v-else class="install-btn remove" @click="handelRemove">
-            <i class="fas fa-trash"></i> 卸载
-          </button>
-          <button class="close-modal" @click="closeModal" aria-label="关闭">×</button>
+
+        <div
+          class="mt-4 rounded-2xl border border-slate-200/60 bg-slate-50/70 px-4 py-3 text-sm text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300">
+          首次安装 APM 后需要重启系统以在启动器中看到应用入口。可前往
+          <a href="https://gitee.com/amber-ce/amber-pm/releases" target="_blank"
+            class="font-semibold text-brand hover:underline">APM Releases</a>
+          获取 APM。
         </div>
-      </div>
-      
-      <div class="apm-note">
-        首次安装APM后需要重启系统以在启动器中看到应用入口。可前往 
-        <a href="https://gitee.com/amber-ce/amber-pm/releases" target="_blank">APM Releases</a> 获取 APM。
-      </div>
-      
-      <div class="screens">
-        <img 
-          v-for="(screen, index) in screenshots" 
-          :key="index" 
-          :src="screen" 
-          alt="screenshot"
-          @click="openPreview(index)"
-          @error="e => e.target.style.display = 'none'"
-        >
-      </div>
-      
-      <div class="info">
-        <div class="info-item" v-if="app?.Author">
-          <div class="info-label">作者</div>
-          <div class="info-value">{{ app.Author }}</div>
+
+        <div v-if="screenshots.length" class="mt-6 grid gap-3 sm:grid-cols-2">
+          <img v-for="(screen, index) in screenshots" :key="index" :src="screen" alt="screenshot"
+            class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
+            @click="openPreview(index)" @error="hideImage" />
         </div>
-        <div class="info-item" v-if="app?.Contributor">
-          <div class="info-label">贡献者</div>
-          <div class="info-value">{{ app.Contributor }}</div>
-        </div>
-        <div class="info-item" v-if="app?.Size">
-          <div class="info-label">大小</div>
-          <div class="info-value">{{ app.Size }}</div>
-        </div>
-        <div class="info-item" v-if="app?.Update">
-          <div class="info-label">更新时间</div>
-          <div class="info-value">{{ app.Update }}</div>
-        </div>
-        <div class="info-item" v-if="app?.Website">
-          <div class="info-label">网站</div>
-          <div class="info-value">
-            <a :href="app.Website" target="_blank">{{ app.Website }}</a>
+
+        <div class="mt-6 grid gap-4 sm:grid-cols-2">
+          <div v-if="app?.Author" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">作者</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Author }}</p>
+          </div>
+          <div v-if="app?.Contributor" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">贡献者</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Contributor }}</p>
+          </div>
+          <div v-if="app?.Size" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">大小</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Size }}</p>
+          </div>
+          <div v-if="app?.Update" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">更新时间</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Update }}</p>
+          </div>
+          <div v-if="app?.Website" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">网站</p>
+            <a :href="app.Website" target="_blank"
+              class="text-sm font-medium text-brand hover:underline">{{ app.Website }}</a>
+          </div>
+          <div v-if="app?.Version" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">版本</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Version }}</p>
+          </div>
+          <div v-if="app?.Tags" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <p class="text-xs uppercase tracking-wide text-slate-400">标签</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ app.Tags }}</p>
           </div>
         </div>
-        <div class="info-item" v-if="app?.Version">
-          <div class="info-label">版本</div>
-          <div class="info-value">{{ app.Version }}</div>
+
+        <div v-if="app?.More && app.More.trim() !== ''" class="mt-6 space-y-3">
+          <h3 class="text-lg font-semibold text-slate-900 dark:text-white">应用详情</h3>
+          <div
+            class="max-h-60 space-y-2 overflow-y-auto rounded-2xl border border-slate-200/60 bg-slate-50/80 p-4 text-sm leading-relaxed text-slate-600 dark:border-slate-800/60 dark:bg-slate-900/60 dark:text-slate-300"
+            v-html="app.More.replace(/\n/g, '<br>')"></div>
         </div>
-        <div class="info-item" v-if="app?.Tags">
-          <div class="info-label">标签</div>
-          <div class="info-value">{{ app.Tags }}</div>
-        </div>
-      </div>
-      
-      <div class="more-details" v-if="app?.More && app.More.trim() !== ''">
-        <div class="more-details-title">应用详情</div>
-        <div class="more-details-content" v-html="app.More.replace(/\n/g, '<br>')"></div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from 'vue';
+import { computed, defineProps, defineEmits, useAttrs } from 'vue';
 import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL } from '../global/storeConfig';
 
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+
 const props = defineProps({
   show: {
     type: Boolean,
@@ -119,20 +137,17 @@ const handleInstall = () => {
   emit('install');
 };
 
-const handelRemove = () => {
+const handleRemove = () => {
   emit('remove');
 };
 
 const openPreview = (index) => {
   emit('open-preview', index);
 };
-</script>
 
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-.install-btn.remove {
-  border-color: rgb(231, 76, 60);
-  box-shadow: 0 4px 12px rgb(231, 76, 60);
-  background: linear-gradient(90deg, rgb(231, 76, 60), rgb(231, 76, 60));
-}
-</style>
+const hideImage = (event) => {
+  if (event?.target) {
+    event.target.style.display = 'none';
+  }
+};
+</script>
diff --git a/src/components/AppGrid.vue b/src/components/AppGrid.vue
index 4379e5e2..14934a7f 100644
--- a/src/components/AppGrid.vue
+++ b/src/components/AppGrid.vue
@@ -1,20 +1,14 @@
 <template>
-  <div class="grid" v-if="!loading">
-    <AppCard 
-      v-for="(app, index) in apps" 
-      :key="index"
-      :app="app"
-      @open-detail="$emit('open-detail', app)"
-    />
+  <div v-if="!loading" class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+    <AppCard v-for="(app, index) in apps" :key="index" :app="app" @open-detail="$emit('open-detail', app)" />
   </div>
-  <div v-else class="loading">
-    <div class="grid">
-      <div v-for="n in 8" :key="n" class="card loading">
-        <div class="icon"></div>
-        <div class="meta">
-          <div class="title">加载中...</div>
-          <div class="muted">正在获取应用数据</div>
-        </div>
+  <div v-else class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+    <div v-for="n in 8" :key="n"
+      class="flex gap-4 rounded-2xl border border-slate-200/60 bg-white/80 p-4 shadow-sm dark:border-slate-800/60 dark:bg-slate-900/50">
+      <div class="h-16 w-16 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-800"></div>
+      <div class="flex flex-1 flex-col justify-center gap-2">
+        <div class="h-4 w-2/3 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800"></div>
+        <div class="h-3 w-1/2 animate-pulse rounded-full bg-slate-200/80 dark:bg-slate-800/80"></div>
       </div>
     </div>
   </div>
@@ -37,7 +31,3 @@ defineProps({
 
 defineEmits(['open-detail']);
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 95a7fc7f..191ce194 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="topbar">
-    <TopActions @update="$emit('update')" @list="$emit('list')" />
-    <div class="search">
-      <input 
-        id="searchBox" 
-        placeholder="搜索应用名 / 包名 / 标签（回车或自动）"
-        @input="debounceSearch"
-        v-model="localSearchQuery"
-      />
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
+      <TopActions @update="$emit('update')" @list="$emit('list')" />
+      <div class="w-full flex-1">
+        <label for="searchBox" class="sr-only">搜索应用</label>
+        <div class="relative">
+          <i class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+          <input id="searchBox" v-model="localSearchQuery"
+            class="w-full rounded-2xl border border-slate-200/70 bg-white/80 py-3 pl-12 pr-4 text-sm text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-brand/50 focus:ring-4 focus:ring-brand/10 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-200"
+            placeholder="搜索应用名 / 包名 / 标签" @input="debounceSearch" />
+        </div>
+      </div>
     </div>
-    <div class="stats" id="currentCount">
-      共 {{ appsCount }} 个应用 · 在任何主流Linux发行上安装应用
+    <div class="text-sm text-slate-500 dark:text-slate-400" id="currentCount">
+      共 {{ appsCount }} 个应用 · 在任何主流 Linux 发行上安装应用
     </div>
   </div>
 </template>
@@ -35,10 +38,10 @@ const emit = defineEmits(['update-search', 'update', 'list']);
 const localSearchQuery = ref(props.searchQuery || '');
 const timeoutId = ref(null);
 
-const debounceSearch = (e) => {
+const debounceSearch = () => {
   clearTimeout(timeoutId.value);
   timeoutId.value = setTimeout(() => {
-    emit('update-search', e);
+    emit('update-search', localSearchQuery.value);
   }, 220);
 };
 
@@ -46,7 +49,3 @@ watch(() => props.searchQuery, (newVal) => {
   localSearchQuery.value = newVal || '';
 });
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 9d154441..7a686d80 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,15 +1,34 @@
 <template>
-  <div class="brand">APM x86客户端商店</div>
-  <ThemeToggle :is-dark="isDarkTheme" @toggle="toggleTheme" />
-  <div class="categories">
-    <div class="category" :class="{ 'active': activeCategory === 'all' }" @click="selectCategory('all')">
-      <div>全部应用</div>
-      <div class="count">{{ categoryCounts.all || 0 }}</div>
+  <div class="flex h-full flex-col gap-6">
+    <div class="flex items-center gap-3">
+      <img :src="amberLogo" alt="Amber PM" class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800" />
+      <div class="flex flex-col">
+        <span class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">APM Store</span>
+        <span class="text-lg font-semibold text-slate-900 dark:text-white">APM x86 客户端商店</span>
+      </div>
     </div>
-    <div v-for="(category, key) in categories" :key="key" class="category" :class="{ 'active': activeCategory === key }"
-      @click="selectCategory(key)">
-      <div>{{ category.zh }} <span class="muted">({{ category.en }})</span></div>
-      <div class="count">{{ categoryCounts[key] || 0 }}</div>
+
+    <ThemeToggle :is-dark="isDarkTheme" @toggle="toggleTheme" />
+
+    <div class="flex-1 space-y-2 overflow-y-auto scrollbar-muted pr-2">
+      <button type="button" class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
+        :class="activeCategory === 'all' ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15' : ''"
+        @click="selectCategory('all')">
+        <span>全部应用</span>
+        <span class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">{{ categoryCounts.all || 0 }}</span>
+      </button>
+
+      <button v-for="(category, key) in categories" :key="key" type="button"
+        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
+        :class="activeCategory === key ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15' : ''"
+        @click="selectCategory(key)">
+        <span class="flex flex-col">
+          <span>
+            <div class="text-left">{{ category.zh }}</div>
+          </span>
+        </span>
+        <span class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">{{ categoryCounts[key] || 0 }}</span>
+      </button>
     </div>
   </div>
 </template>
@@ -17,8 +36,9 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import ThemeToggle from './ThemeToggle.vue';
+import amberLogo from '../assets/imgs/amber-pm-logo.png';
 
-const props = defineProps({
+defineProps({
   categories: {
     type: Object,
     required: true
@@ -47,7 +67,3 @@ const selectCategory = (category) => {
   emit('select-category', category);
 };
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/DownloadDetail.vue b/src/components/DownloadDetail.vue
index 85014c49..d1be3aee 100644
--- a/src/components/DownloadDetail.vue
+++ b/src/components/DownloadDetail.vue
@@ -1,138 +1,115 @@
 <template>
-  <transition name="modal-fade">
-    <div v-if="show" class="modal-overlay" @click="handleOverlayClick">
-      <div class="modal-content download-detail" @click.stop>
-        <!-- 头部 -->
-        <div class="detail-header">
-          <button class="close-btn" @click="close">
-            <i class="fas fa-times"></i>
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+    enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+    <div v-if="show"
+      class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10 backdrop-blur-sm"
+      @click="handleOverlayClick">
+      <div class="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+        @click.stop>
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">下载详情</p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">实时了解安装进度</p>
+          </div>
+          <button type="button"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/60 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
+            @click="close">
+            <i class="fas fa-xmark"></i>
           </button>
-          <h2>下载详情</h2>
         </div>
 
-        <!-- 内容 -->
-        <div class="detail-body" v-if="download">
-          <!-- 应用信息 -->
-          <div class="app-section">
-            <div class="app-icon-large">
-              <img :src="download.icon" :alt="download.name" />
+        <div v-if="download" class="mt-6 space-y-6">
+          <div class="flex items-center gap-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <div class="h-16 w-16 overflow-hidden rounded-2xl bg-slate-100 dark:bg-slate-800">
+              <img :src="download.icon" :alt="download.name" class="h-full w-full object-cover" />
             </div>
-            <div class="app-info-detail">
-              <h3 class="app-name">{{ download.name }}</h3>
-              <div class="app-meta">
-                <span>{{ download.pkgname }}</span>
-                <span class="separator">·</span>
-                <span>{{ download.version }}</span>
-              </div>
+            <div class="flex-1">
+              <p class="text-lg font-semibold text-slate-900 dark:text-white">{{ download.name }}</p>
+              <p class="text-sm text-slate-500 dark:text-slate-400">{{ download.pkgname }} · {{ download.version }}</p>
             </div>
           </div>
 
-          <!-- 下载状态 -->
-          <div class="status-section">
-            <div class="status-header">
-              <span class="status-label">状态</span>
-              <span class="status-value" :class="download.status">
+          <div class="space-y-4 rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium text-slate-500">状态</span>
+              <span
+                class="rounded-full px-3 py-1 text-xs font-semibold"
+                :class="{
+                  'bg-blue-100 text-blue-700': download.status === 'downloading',
+                  'bg-amber-100 text-amber-600': download.status === 'installing',
+                  'bg-emerald-100 text-emerald-700': download.status === 'completed',
+                  'bg-rose-100 text-rose-600': download.status === 'failed',
+                  'bg-slate-200 text-slate-600': download.status === 'paused'
+                }">
                 {{ getStatusText(download.status) }}
               </span>
             </div>
-            
-            <!-- 进度条 -->
-            <div v-if="download.status === 'downloading'" class="progress-section">
-              <div class="progress-bar-large">
-                <div class="progress-fill" :style="{ width: download.progress + '%' }"></div>
+
+            <div v-if="download.status === 'downloading'" class="space-y-3">
+              <div class="h-2 rounded-full bg-slate-100 dark:bg-slate-800">
+                <div class="h-full rounded-full bg-brand" :style="{ width: download.progress + '%' }"></div>
               </div>
-              <div class="progress-info">
+              <div class="flex flex-wrap items-center justify-between text-sm text-slate-500 dark:text-slate-400">
                 <span>{{ download.progress }}%</span>
                 <span v-if="download.downloadedSize && download.totalSize">
                   {{ formatSize(download.downloadedSize) }} / {{ formatSize(download.totalSize) }}
                 </span>
               </div>
-              <div v-if="download.speed" class="download-speed">
-                <i class="fas fa-tachometer-alt"></i>
-                <span>{{ formatSpeed(download.speed) }}</span>
-                <span v-if="download.timeRemaining" class="time-remaining">
-                  剩余 {{ formatTime(download.timeRemaining) }}
-                </span>
+              <div v-if="download.speed" class="flex flex-wrap gap-3 text-sm text-slate-500 dark:text-slate-300">
+                <span class="flex items-center gap-2"><i class="fas fa-tachometer-alt"></i>{{ formatSpeed(download.speed) }}</span>
+                <span v-if="download.timeRemaining">剩余 {{ formatTime(download.timeRemaining) }}</span>
               </div>
             </div>
           </div>
 
-          <!-- 下载信息 -->
-          <div class="info-section">
-            <div class="info-item">
-              <span class="info-label">下载源</span>
-              <span class="info-value">{{ download.source || 'APM Store' }}</span>
+          <div class="rounded-2xl border border-slate-200/60 p-4 text-sm text-slate-600 dark:border-slate-800/60 dark:text-slate-300">
+            <div class="flex justify-between py-1">
+              <span class="text-slate-400">下载源</span>
+              <span class="font-medium text-slate-900 dark:text-white">{{ download.source || 'APM Store' }}</span>
             </div>
-            <div class="info-item" v-if="download.startTime">
-              <span class="info-label">开始时间</span>
-              <span class="info-value">{{ formatDate(download.startTime) }}</span>
+            <div v-if="download.startTime" class="flex justify-between py-1">
+              <span class="text-slate-400">开始时间</span>
+              <span>{{ formatDate(download.startTime) }}</span>
             </div>
-            <div class="info-item" v-if="download.endTime">
-              <span class="info-label">完成时间</span>
-              <span class="info-value">{{ formatDate(download.endTime) }}</span>
+            <div v-if="download.endTime" class="flex justify-between py-1">
+              <span class="text-slate-400">完成时间</span>
+              <span>{{ formatDate(download.endTime) }}</span>
             </div>
-            <div class="info-item" v-if="download.error">
-              <span class="info-label">错误信息</span>
-              <span class="info-value error">{{ download.error }}</span>
+            <div v-if="download.error" class="flex justify-between py-1 text-rose-500">
+              <span>错误信息</span>
+              <span class="text-right">{{ download.error }}</span>
             </div>
           </div>
 
-          <!-- 日志 -->
-          <div v-if="download.logs && download.logs.length > 0" class="logs-section">
-            <div class="logs-header">
-              <span>下载日志</span>
-              <button @click="copyLogs" class="copy-logs-btn">
+          <div v-if="download.logs && download.logs.length" class="rounded-2xl border border-slate-200/60 p-4 dark:border-slate-800/60">
+            <div class="mb-3 flex items-center justify-between">
+              <span class="font-semibold text-slate-800 dark:text-slate-100">下载日志</span>
+              <button type="button"
+                class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300"
+                @click="copyLogs">
                 <i class="fas fa-copy"></i>
                 复制日志
               </button>
             </div>
-            <div class="logs-content">
-              <div v-for="(log, index) in download.logs" :key="index" class="log-entry">
-                <span class="log-time">{{ formatLogTime(log.time) }}</span>
-                <span class="log-message">{{ log.message }}</span>
+            <div class="max-h-48 space-y-2 overflow-y-auto rounded-2xl bg-slate-50/80 p-3 font-mono text-xs text-slate-600 dark:bg-slate-900/60 dark:text-slate-300">
+              <div v-for="(log, index) in download.logs" :key="index" class="flex gap-3">
+                <span class="text-slate-400">{{ formatLogTime(log.time) }}</span>
+                <span>{{ log.message }}</span>
               </div>
             </div>
           </div>
 
-          <!-- 操作按钮 -->
-          <div class="actions-section">
-            <!-- <button
-              v-if="download.status === 'downloading'"
-              @click="pause"
-              class="action-btn secondary"
-            >
-              <i class="fas fa-pause"></i>
-              暂停下载
-            </button>
-            <button
-              v-else-if="download.status === 'paused'"
-              @click="resume"
-              class="action-btn primary"
-            >
-              <i class="fas fa-play"></i>
-              继续下载
-            </button> -->
-            <button
-              v-if="download.status === 'failed'"
-              @click="retry"
-              class="action-btn primary"
-            >
+          <div class="flex flex-wrap justify-end gap-3">
+            <button v-if="download.status === 'failed'" type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border border-rose-300/60 px-4 py-2 text-sm font-semibold text-rose-500 transition hover:bg-rose-50"
+              @click="retry">
               <i class="fas fa-redo"></i>
               重试下载
             </button>
-            <!-- <button
-              v-if="download.status !== 'completed'"
-              @click="cancel"
-              class="action-btn danger"
-            >
-              <i class="fas fa-times"></i>
-              取消下载
-            </button> -->
-            <button
-              v-if="download.status === 'completed'"
-              @click="openApp"
-              class="action-btn primary"
-            >
+            <button v-if="download.status === 'completed'" type="button"
+              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg"
+              @click="openApp">
               <i class="fas fa-external-link-alt"></i>
               打开应用
             </button>
@@ -140,7 +117,7 @@
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script setup>
@@ -239,363 +216,3 @@ const copyLogs = () => {
   });
 };
 </script>
-
-<style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2000;
-  padding: 20px;
-}
-
-.modal-content {
-  background: var(--card);
-  border-radius: 16px;
-  max-width: 600px;
-  width: 100%;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.detail-header {
-  padding: 24px;
-  border-bottom: 1px solid var(--border);
-  position: relative;
-}
-
-.detail-header h2 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.close-btn {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  background: transparent;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--muted);
-  padding: 4px;
-  transition: color 0.2s;
-}
-
-.close-btn:hover {
-  color: var(--text);
-}
-
-.detail-body {
-  padding: 24px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.app-section {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.app-icon-large {
-  width: 80px;
-  height: 80px;
-  flex-shrink: 0;
-}
-
-.app-icon-large img {
-  width: 100%;
-  height: 100%;
-  border-radius: 16px;
-  object-fit: cover;
-}
-
-.app-info-detail {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.app-name {
-  margin: 0 0 8px 0;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.app-meta {
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.separator {
-  margin: 0 8px;
-}
-
-.status-section {
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.status-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.status-label {
-  font-weight: 600;
-  color: var(--muted);
-}
-
-.status-value {
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.status-value.downloading {
-  background: rgba(0, 122, 255, 0.1);
-  color: #007AFF;
-}
-
-.status-value.completed {
-  background: rgba(52, 199, 89, 0.1);
-  color: #34C759;
-}
-
-.status-value.failed {
-  background: rgba(255, 59, 48, 0.1);
-  color: #FF3B30;
-}
-
-.status-value.paused {
-  background: rgba(255, 149, 0, 0.1);
-  color: #FF9500;
-}
-
-.progress-section {
-  margin-top: 16px;
-}
-
-.progress-bar-large {
-  width: 100%;
-  height: 8px;
-  background: var(--glass);
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--primary);
-  transition: width 0.3s ease;
-}
-
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: var(--muted);
-  margin-bottom: 8px;
-}
-
-.download-speed {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: var(--text);
-}
-
-.download-speed i {
-  color: var(--primary);
-}
-
-.time-remaining {
-  margin-left: auto;
-  color: var(--muted);
-}
-
-.info-section {
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-}
-
-.info-label {
-  color: var(--muted);
-  font-weight: 500;
-}
-
-.info-value {
-  text-align: right;
-  max-width: 60%;
-  word-break: break-word;
-}
-
-.info-value.error {
-  color: #FF3B30;
-}
-
-.logs-section {
-  margin-bottom: 24px;
-}
-
-.logs-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  font-weight: 600;
-}
-
-.copy-logs-btn {
-  background: transparent;
-  border: 1px solid var(--border);
-  padding: 6px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  transition: all 0.2s;
-}
-
-.copy-logs-btn:hover {
-  background: var(--glass);
-  border-color: var(--primary);
-  color: var(--primary);
-}
-
-.logs-content {
-  background: var(--glass);
-  border-radius: 8px;
-  padding: 12px;
-  max-height: 200px;
-  overflow-y: auto;
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 12px;
-}
-
-.log-entry {
-  display: flex;
-  gap: 12px;
-  padding: 4px 0;
-  color: var(--text);
-}
-
-.log-time {
-  color: var(--muted);
-  flex-shrink: 0;
-}
-
-.log-message {
-  flex: 1;
-}
-
-.actions-section {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-}
-
-/* .action-btn {
-  flex: 1;
-  min-width: 140px;
-  padding: 12px 20px;
-  border: none;
-  border-radius: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: all 0.2s;
-} */
-
-/* .action-btn.primary {
-  background: var(--primary);
-  color: white;
-}
-
-.action-btn.primary:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-
-.action-btn.secondary {
-  background: var(--glass);
-  color: var(--text);
-} */
-
-.action-btn.primary {
-  background: rgba(255, 59, 48, 0.1);
-  color: #FF3B30;
-  min-width: 140px;
-  align-items: center;
-  justify-content: center;
-}
-
-.action-btn.danger {
-  background: rgba(255, 59, 48, 0.1);
-  color: #FF3B30;
-  width: fill-available; 
-  min-width: 140px;
-  align-items: center;
-  justify-content: center;
-}
-
-.action-btn.danger:hover {
-  background: rgba(255, 59, 48, 0.2);
-}
-
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-fade-enter-active .modal-content,
-.modal-fade-leave-active .modal-content {
-  transition: transform 0.3s ease;
-}
-
-.modal-fade-enter-from,
-.modal-fade-leave-to {
-  opacity: 0;
-}
-
-.modal-fade-enter-from .modal-content,
-.modal-fade-leave-to .modal-content {
-  transform: scale(0.9);
-}
-</style>
diff --git a/src/components/DownloadQueue.vue b/src/components/DownloadQueue.vue
index 8d74ae5b..eb4039d7 100644
--- a/src/components/DownloadQueue.vue
+++ b/src/components/DownloadQueue.vue
@@ -1,104 +1,72 @@
 <template>
-  <div class="download-queue" :class="{ 'expanded': isExpanded }">
-    <!-- 队列头部 -->
-    <div class="queue-header" @click="toggleExpand">
-      <div class="queue-info">
-        <i class="fas fa-download"></i>
-        <span class="queue-title">下载队列</span>
-        <span class="queue-count" v-if="downloads.length > 0">({{ activeDownloads }}/{{ downloads.length }})</span>
+  <div
+    class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white/95 shadow-2xl backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/90 sm:left-auto sm:right-6 sm:w-96">
+    <div class="flex items-center justify-between px-5 py-4" @click="toggleExpand">
+      <div class="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+        <i class="fas fa-download text-brand"></i>
+        <span>下载队列</span>
+        <span v-if="downloads.length"
+          class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">
+          ({{ activeDownloads }}/{{ downloads.length }})
+        </span>
       </div>
-      <div class="queue-actions">
-        <button v-if="downloads.length > 0" @click.stop="clearCompleted" class="clear-btn" title="清除已完成">
+      <div class="flex items-center gap-2">
+        <button v-if="downloads.length" type="button"
+          class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
+          title="清除已完成" @click.stop="clearCompleted">
           <i class="fas fa-broom"></i>
         </button>
-        <button @click.stop="toggleExpand" class="expand-btn">
+        <button type="button"
+          class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
+          @click.stop="toggleExpand">
           <i class="fas" :class="isExpanded ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
         </button>
       </div>
     </div>
 
-    <!-- 队列列表 -->
-    <transition name="slide">
-      <div v-show="isExpanded" class="queue-list">
-        <div v-if="downloads.length === 0" class="empty-state">
-          <i class="fas fa-inbox"></i>
-          <p>暂无下载任务</p>
+    <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0" leave-active-class="duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-2">
+      <div v-show="isExpanded" class="max-h-96 overflow-y-auto px-3 pb-4">
+        <div v-if="downloads.length === 0"
+          class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200/80 px-4 py-12 text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+          <i class="fas fa-inbox text-3xl"></i>
+          <p class="mt-3 text-sm">暂无下载任务</p>
         </div>
-        <div v-else class="download-items">
-          <div
-            v-for="download in downloads"
-            :key="download.id"
-            class="download-item"
-            :class="download.status"
-            @click="showDownloadDetail(download)"
-          >
-            <div class="download-icon">
-              <img :src="download.icon" :alt="download.name" />
+        <div v-else class="space-y-2">
+          <div v-for="download in downloads" :key="download.id"
+            class="flex cursor-pointer items-center gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-3 shadow-sm transition hover:border-brand/40 hover:shadow-lg dark:border-slate-800/70 dark:bg-slate-900"
+            :class="download.status === 'failed' ? 'border-rose-300/70 dark:border-rose-500/40' : ''"
+            @click="showDownloadDetail(download)">
+            <div class="h-12 w-12 overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800">
+              <img :src="download.icon" :alt="download.name" class="h-full w-full object-cover" />
             </div>
-            <div class="download-info">
-              <div class="download-name">{{ download.name }}</div>
-              <div class="download-status-text">
-                <!-- downloading 这部分APM用不到，留给后续的Spark Store -->
-                <span v-if="download.status === 'downloading'">
-                  下载中 {{ download.progress }}%
-                </span>
-                <span v-else-if="download.status === 'installing'">
-                  安装中...
-                </span>
-                <span v-else-if="download.status === 'completed'">
-                  已完成
-                </span>
-                <span v-else-if="download.status === 'failed'">
-                  失败: {{ download.error }}
-                </span>
-                <span v-else-if="download.status === 'paused'">
-                  已暂停
-                </span>
-                <span v-else>
-                  等待中...
-                </span>
-              </div>
-              <div v-if="download.status === 'downloading'" class="progress-bar">
-                <div class="progress-fill" :style="{ width: download.progress + '%' }"></div>
+            <div class="flex-1">
+              <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ download.name }}</p>
+              <p class="text-xs text-slate-500 dark:text-slate-400">
+                <span v-if="download.status === 'downloading'">下载中 {{ download.progress }}%</span>
+                <span v-else-if="download.status === 'installing'">安装中...</span>
+                <span v-else-if="download.status === 'completed'">已完成</span>
+                <span v-else-if="download.status === 'failed'">失败: {{ download.error }}</span>
+                <span v-else-if="download.status === 'paused'">已暂停</span>
+                <span v-else>等待中...</span>
+              </p>
+              <div v-if="download.status === 'downloading'"
+                class="mt-2 h-1.5 rounded-full bg-slate-100 dark:bg-slate-800">
+                <div class="h-full rounded-full bg-brand" :style="{ width: `${download.progress}%` }"></div>
               </div>
             </div>
-            <div class="download-actions">
-              <!-- <button
-                v-if="download.status === 'downloading'"
-                @click.stop="pauseDownload(download.id)"
-                class="action-icon"
-                title="暂停"
-              >
-                <i class="fas fa-pause"></i>
-              </button>
-              <button
-                v-else-if="download.status === 'paused'"
-                @click.stop="resumeDownload(download.id)"
-                class="action-icon"
-                title="继续"
-              >
-                <i class="fas fa-play"></i>
-              </button> -->
-              <button
-                v-if="download.status === 'failed'"
-                @click.stop="retryDownload(download.id)"
-                class="action-icon"
-                title="重试"
-              >
+            <div class="flex items-center gap-2">
+              <button v-if="download.status === 'failed'" type="button"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-rose-200/60 text-rose-500 transition hover:bg-rose-50"
+                title="重试" @click.stop="retryDownload(download.id)">
                 <i class="fas fa-redo"></i>
               </button>
-              <!-- <button
-                @click.stop="cancelDownload(download.id)"
-                class="action-icon"
-                title="取消"
-              >
-                <i class="fas fa-times"></i>
-              </button> -->
             </div>
           </div>
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 
@@ -157,201 +125,3 @@ const showDownloadDetail = (download) => {
   emit('show-detail', download);
 };
 </script>
-
-<style scoped>
-.download-queue {
-  position: fixed;
-  bottom: 0;
-  right: 20px;
-  width: 400px;
-  max-height: 500px;
-  background: var(--card);
-  border-radius: 12px 12px 0 0;
-  box-shadow: var(--shadow);
-  z-index: 1000;
-  transition: all 0.3s ease;
-}
-
-.download-queue:not(.expanded) {
-  max-height: 60px;
-}
-
-.queue-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  user-select: none;
-}
-
-.queue-header:hover {
-  background: var(--glass);
-  border-radius: 12px 12px 0 0;
-}
-
-.queue-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-}
-
-.queue-info i {
-  color: var(--primary);
-}
-
-.queue-count {
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.queue-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.clear-btn,
-.expand-btn {
-  background: transparent;
-  border: none;
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: var(--text);
-  transition: all 0.2s;
-}
-
-.clear-btn:hover,
-.expand-btn:hover {
-  background: var(--glass);
-}
-
-.queue-list {
-  max-height: 440px;
-  overflow-y: auto;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter-from,
-.slide-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-
-.empty-state {
-  padding: 40px 20px;
-  text-align: center;
-  color: var(--muted);
-}
-
-.empty-state i {
-  font-size: 48px;
-  margin-bottom: 12px;
-  opacity: 0.5;
-}
-
-.download-items {
-  padding: 8px 0;
-}
-
-.download-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 20px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.download-item:hover {
-  background: var(--glass);
-}
-
-.download-item.completed {
-  opacity: 0.7;
-}
-
-.download-item.failed {
-  background: rgba(255, 59, 48, 0.1);
-}
-
-.download-icon {
-  width: 48px;
-  height: 48px;
-  flex-shrink: 0;
-}
-
-.download-icon img {
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-  object-fit: cover;
-}
-
-.download-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.download-name {
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 4px;
-}
-
-.download-status-text {
-  font-size: 13px;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 4px;
-  background: var(--glass);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--primary);
-  transition: width 0.3s ease;
-}
-
-.download-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.action-icon {
-  background: transparent;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: var(--text);
-  transition: all 0.2s;
-}
-
-.action-icon:hover {
-  background: var(--glass);
-  color: var(--primary);
-}
-
-@media (max-width: 768px) {
-  .download-queue {
-    right: 10px;
-    width: calc(100% - 20px);
-    max-width: 400px;
-  }
-}
-</style>
diff --git a/src/components/InstalledAppsModal.vue b/src/components/InstalledAppsModal.vue
index f15f4c7c..bea9acdb 100644
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.vue
@@ -1,37 +1,61 @@
 <template>
-  <div class="modal-backdrop" :style="{ display: show ? 'flex' : 'none' }" role="dialog" aria-hidden="false">
-    <div class="modal installed-modal">
-      <div class="modal-header">
-        <div class="modal-title-section">
-          <div class="modal-title">已安装应用</div>
-          <div class="modal-subtitle">来自本机 APM 安装列表</div>
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+    enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+    <div v-if="show"
+      class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10 backdrop-blur-sm">
+      <div class="w-full max-w-4xl rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">已安装应用</p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">来自本机 APM 安装列表</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+              :disabled="loading" @click="$emit('refresh')">
+              <i class="fas fa-sync-alt"></i>
+              刷新
+            </button>
+            <button type="button"
+              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
+              @click="$emit('close')" aria-label="关闭">
+              <i class="fas fa-xmark"></i>
+            </button>
+          </div>
         </div>
-        <div class="modal-actions">
-          <button class="apm-btn" :disabled="loading" @click="$emit('refresh')">
-            <i class="fas fa-sync-alt"></i> 刷新
-          </button>
-          <button class="close-modal" @click="$emit('close')" aria-label="关闭">×</button>
-        </div>
-      </div>
 
-      <div class="installed-content">
-        <div v-if="loading" class="installed-empty">正在读取已安装应用…</div>
-        <div v-else-if="error" class="installed-empty error">{{ error }}</div>
-        <div v-else-if="apps.length === 0" class="installed-empty">暂无已安装应用</div>
-        <div v-else class="installed-list">
-          <div v-for="app in apps" :key="app.pkgname" class="installed-item">
-            <div class="installed-info">
-              <div class="installed-name">{{ app.pkgname }}</div>
-              <div class="installed-meta">
-                <span>{{ app.version }}</span>
-                <span class="dot">·</span>
-                <span>{{ app.arch }}</span>
-                <span v-if="app.flags" class="dot">·</span>
-                <span v-if="app.flags">{{ app.flags }}</span>
+        <div class="mt-6 space-y-4">
+          <div v-if="loading"
+            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+            正在读取已安装应用…
+          </div>
+          <div v-else-if="error"
+            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10">
+            {{ error }}
+          </div>
+          <div v-else-if="apps.length === 0"
+            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
+            暂无已安装应用
+          </div>
+          <div v-else class="space-y-3">
+            <div v-for="app in apps" :key="app.pkgname"
+              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <p class="text-base font-semibold text-slate-900 dark:text-white">{{ app.pkgname }}</p>
+                <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
+                  <span>{{ app.version }}</span>
+                  <span>·</span>
+                  <span>{{ app.arch }}</span>
+                  <template v-if="app.flags">
+                    <span>·</span>
+                    <span>{{ app.flags }}</span>
+                  </template>
+                </div>
               </div>
-            </div>
-            <div class="installed-actions">
-              <button class="apm-btn secondary danger" :disabled="app.removing" @click="$emit('uninstall', app)">
+              <button type="button"
+                class="inline-flex items-center gap-2 rounded-2xl border border-rose-300/60 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-50 disabled:opacity-50"
+                :disabled="app.removing" @click="$emit('uninstall', app)">
                 <i class="fas fa-trash"></i>
                 {{ app.removing ? '卸载中…' : '卸载' }}
               </button>
@@ -40,7 +64,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -68,81 +92,3 @@ defineProps({
 defineEmits(['close', 'refresh', 'uninstall']);
 </script>
 
-<style scoped>
-.installed-modal {
-  width: min(900px, calc(100% - 40px));
-}
-
-.installed-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.installed-empty {
-  padding: 32px;
-  text-align: center;
-  color: var(--muted);
-  background: var(--glass);
-  border-radius: var(--radius);
-}
-
-.installed-empty.error {
-  color: #ef4444;
-}
-
-.installed-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.installed-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px;
-  border-radius: var(--radius);
-  background: var(--glass);
-  box-shadow: var(--shadow);
-}
-
-.installed-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.installed-name {
-  font-weight: 600;
-  font-size: 16px;
-}
-
-.installed-meta {
-  color: var(--muted);
-  font-size: 13px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.dot {
-  opacity: 0.6;
-}
-
-.installed-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.apm-btn.danger {
-  background: #ef4444;
-  border-color: rgba(239, 68, 68, 0.2);
-}
-
-.apm-btn.danger:hover {
-  background: #dc2626;
-}
-</style>
diff --git a/src/components/ScreenPreview.vue b/src/components/ScreenPreview.vue
index 9a289be3..2d3251b4 100644
--- a/src/components/ScreenPreview.vue
+++ b/src/components/ScreenPreview.vue
@@ -1,23 +1,38 @@
 <template>
-  <div class="screen-preview-backdrop" :style="{ display: show ? 'flex' : 'none' }">
-    <div class="screen-preview">
-      <div class="screen-preview-controls">
-        <div class="screen-preview-nav">
-          <button class="screen-preview-btn" @click="prevScreen" :disabled="currentScreenIndex === 0" aria-label="上一张">
-            <i class="fas fa-chevron-left"></i>
-          </button>
-          <button class="screen-preview-btn" @click="nextScreen" :disabled="currentScreenIndex === screenshots.length - 1" aria-label="下一张">
-            <i class="fas fa-chevron-right"></i>
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0"
+    enter-to-class="opacity-100" leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100" leave-to-class="opacity-0">
+    <div v-if="show"
+      class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/80 px-4 py-10 backdrop-blur-md"
+      @click.self="closePreview">
+      <div class="relative w-full max-w-5xl">
+        <img :src="currentScreenshot" alt="应用截图预览"
+          class="max-h-[80vh] w-full rounded-3xl border border-slate-200/40 bg-black/40 object-contain shadow-2xl dark:border-slate-700" />
+        <div class="absolute inset-x-0 top-4 flex items-center justify-between px-6">
+          <div class="flex gap-3">
+            <button type="button"
+              class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50"
+              @click="prevScreen" :disabled="currentScreenIndex === 0" aria-label="上一张">
+              <i class="fas fa-chevron-left"></i>
+            </button>
+            <button type="button"
+              class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50"
+              @click="nextScreen" :disabled="currentScreenIndex === screenshots.length - 1" aria-label="下一张">
+              <i class="fas fa-chevron-right"></i>
+            </button>
+          </div>
+          <button type="button"
+            class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/80 text-slate-700 shadow-lg transition hover:bg-white"
+            @click="closePreview" aria-label="关闭">
+            <i class="fas fa-times"></i>
           </button>
         </div>
-        <button class="screen-preview-btn close-preview" @click="closePreview" aria-label="关闭">
-          <i class="fas fa-times"></i>
-        </button>
+        <div class="absolute inset-x-0 bottom-6 flex items-center justify-center">
+          <span class="rounded-full bg-black/60 px-4 py-1 text-sm font-medium text-white">{{ previewCounterText }}</span>
+        </div>
       </div>
-      <img :src="currentScreenshot" alt="应用截图预览">
-      <div class="screen-preview-counter">{{ previewCounterText }}</div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -60,7 +75,3 @@ const nextScreen = () => {
   emit('next');
 };
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index bfb1b0be..a694aeb7 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -1,20 +1,21 @@
 <template>
-  <div class="theme-toggle-container">
-    <span class="theme-label">主题切换</span>
-    <label class="theme-toggle">
-      <input type="checkbox" :checked="isDark" @change="toggle">
-      <span class="theme-slider">
-        <i class="fas fa-sun"></i>
-        <i class="fas fa-moon"></i>
-      </span>
-    </label>
-  </div>
+  <button type="button"
+    class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
+    :aria-pressed="isDark" @click="toggle">
+    <span class="flex items-center gap-2">
+      <i class="fas" :class="isDark ? 'fa-moon text-amber-200' : 'fa-sun text-amber-400'"></i>
+      <span>{{ isDark ? '深色主题' : '浅色主题' }}</span>
+    </span>
+    <span class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700">
+      <span :class="['inline-block h-4 w-4 rounded-full bg-white shadow transition', isDark ? 'translate-x-6' : 'translate-x-1']"></span>
+    </span>
+  </button>
 </template>
 
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 
-const props = defineProps({
+defineProps({
   isDark: {
     type: Boolean,
     required: true
@@ -27,7 +28,3 @@ const toggle = () => {
   emit('toggle');
 };
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/TopActions.vue b/src/components/TopActions.vue
index f4baf1f7..9b3bf4e6 100644
--- a/src/components/TopActions.vue
+++ b/src/components/TopActions.vue
@@ -1,10 +1,16 @@
 <template>
-  <div class="top-actions">
-    <button class="apm-btn" @click="handleUpdate" title="启动 apm-update-tool">
-      <i class="fas fa-sync-alt"></i> 软件更新
+  <div class="flex flex-wrap gap-3">
+    <button type="button"
+      class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
+      @click="handleUpdate" title="启动 apm-update-tool">
+      <i class="fas fa-sync-alt"></i>
+      <span>软件更新</span>
     </button>
-    <button class="apm-btn" @click="handleList" title="启动 apm-installer --list">
-      <i class="fas fa-download"></i> 应用管理
+    <button type="button"
+      class="inline-flex items-center gap-2 rounded-2xl bg-slate-900/90 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-slate-900/40 transition hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900/40 dark:bg-white/90 dark:text-slate-900"
+      @click="handleList" title="启动 apm-installer --list">
+      <i class="fas fa-download"></i>
+      <span>应用管理</span>
     </button>
   </div>
 </template>
@@ -22,7 +28,3 @@ const handleList = () => {
   emit('list');
 };
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>
diff --git a/src/components/UpdateAppsModal.vue b/src/components/UpdateAppsModal.vue
index 8ee7bf0d..41326ef2 100644
--- a/src/components/UpdateAppsModal.vue
+++ b/src/components/UpdateAppsModal.vue
@@ -1,51 +1,82 @@
 <template>
-  <div class="modal-backdrop" :style="{ display: show ? 'flex' : 'none' }" role="dialog" aria-hidden="false">
-    <div class="modal update-modal">
-      <div class="modal-header">
-        <div class="modal-title-section">
-          <div class="modal-title">软件更新</div>
-          <div class="modal-subtitle">可更新的 APM 应用</div>
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+    enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+    <div v-if="show"
+      class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10 backdrop-blur-sm">
+      <div class="w-full max-w-4xl rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="flex-1">
+            <p class="text-2xl font-semibold text-slate-900 dark:text-white">软件更新</p>
+            <p class="text-sm text-slate-500 dark:text-slate-400">可更新的 APM 应用</p>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <button type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+              :disabled="loading" @click="$emit('refresh')">
+              <i class="fas fa-sync-alt"></i>
+              刷新
+            </button>
+            <button type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+              :disabled="loading || apps.length === 0" @click="$emit('toggle-all')">
+              <i class="fas fa-check-square"></i>
+              全选/全不选
+            </button>
+            <button type="button"
+              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg disabled:opacity-40"
+              :disabled="loading || !hasSelected" @click="$emit('upgrade-selected')">
+              <i class="fas fa-upload"></i>
+              更新选中
+            </button>
+            <button type="button"
+              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700"
+              @click="$emit('close')" aria-label="关闭">
+              <i class="fas fa-xmark"></i>
+            </button>
+          </div>
         </div>
-        <div class="modal-actions">
-          <button class="apm-btn" :disabled="loading" @click="$emit('refresh')">
-            <i class="fas fa-sync-alt"></i> 刷新
-          </button>
-          <button class="apm-btn" :disabled="loading || apps.length === 0" @click="$emit('toggle-all')">
-            <i class="fas fa-check-square"></i> 全选/全不选
-          </button>
-          <button class="apm-btn" :disabled="loading || !hasSelected" @click="$emit('upgrade-selected')">
-            <i class="fas fa-upload"></i> 更新选中
-          </button>
-          <button class="close-modal" @click="$emit('close')" aria-label="关闭">×</button>
-        </div>
-      </div>
 
-      <div class="update-content">
-        <div v-if="loading" class="update-empty">正在检查可更新应用…</div>
-        <div v-else-if="error" class="update-empty error">{{ error }}</div>
-        <div v-else-if="apps.length === 0" class="update-empty">暂无可更新应用</div>
-        <div v-else class="update-list">
-          <label v-for="app in apps" :key="app.pkgname" class="update-item">
-            <input type="checkbox" v-model="app.selected" :disabled="app.upgrading" />
-            <div class="update-info">
-              <div class="update-name">{{ app.pkgname }}</div>
-              <div class="update-meta">
-                <span>当前 {{ app.currentVersion || '-' }}</span>
-                <span class="dot">·</span>
-                <span>更新至 {{ app.newVersion || '-' }}</span>
+        <div class="mt-6 space-y-4">
+          <div v-if="loading"
+            class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-10 text-center text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
+            正在检查可更新应用…
+          </div>
+          <div v-else-if="error"
+            class="rounded-2xl border border-rose-200/70 bg-rose-50/60 px-4 py-6 text-center text-sm text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10">
+            {{ error }}
+          </div>
+          <div v-else-if="apps.length === 0"
+            class="rounded-2xl border border-slate-200/70 px-4 py-10 text-center text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
+            暂无可更新应用
+          </div>
+          <div v-else class="space-y-3">
+            <label v-for="app in apps" :key="app.pkgname"
+              class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:gap-4">
+              <div class="flex items-start gap-3">
+                <input type="checkbox" class="mt-1 h-4 w-4 rounded border-slate-300 accent-brand focus:ring-brand"
+                  v-model="app.selected" :disabled="app.upgrading" />
+                <div>
+                  <p class="font-semibold text-slate-900 dark:text-white">{{ app.pkgname }}</p>
+                  <p class="text-sm text-slate-500 dark:text-slate-400">
+                    当前 {{ app.currentVersion || '-' }} · 更新至 {{ app.newVersion || '-' }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="update-actions">
-              <button class="action-btn secondary" :disabled="app.upgrading" @click.prevent="$emit('upgrade-one', app)">
-                <i class="fas fa-arrow-up"></i>
-                {{ app.upgrading ? '更新中…' : '更新' }}
-              </button>
-            </div>
-          </label>
+              <div class="flex items-center gap-2 sm:ml-auto">
+                <button type="button"
+                  class="inline-flex items-center gap-2 rounded-2xl border border-slate-200/70 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+                  :disabled="app.upgrading" @click.prevent="$emit('upgrade-one', app)">
+                  <i class="fas fa-arrow-up"></i>
+                  {{ app.upgrading ? '更新中…' : '更新' }}
+                </button>
+              </div>
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -77,78 +108,3 @@ defineProps({
 defineEmits(['close', 'refresh', 'toggle-all', 'upgrade-selected', 'upgrade-one']);
 </script>
 
-<style scoped>
-.update-modal {
-  width: min(920px, calc(100% - 40px));
-}
-
-.update-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.update-empty {
-  padding: 32px;
-  text-align: center;
-  color: var(--muted);
-  background: var(--glass);
-  border-radius: var(--radius);
-}
-
-.update-empty.error {
-  color: #ef4444;
-}
-
-.update-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.update-item {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 16px;
-  border-radius: var(--radius);
-  background: var(--glass);
-  box-shadow: var(--shadow);
-}
-
-.update-item input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  accent-color: var(--accent);
-}
-
-.update-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.update-name {
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.update-meta {
-  color: var(--muted);
-  font-size: 13px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.dot {
-  opacity: 0.6;
-}
-
-.update-actions {
-  display: flex;
-  align-items: center;
-}
-</style>