From ddb89496aaf2d267a96f995b61879054d7d711dc Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Mon, 19 Jan 2026 13:16:56 +0800
Subject: [PATCH] :construction: WIP(custom): migrate to tailwindcss

---
 .prettierrc                           |    4 +-
 .stylelintrc.cjs                      |    1 +
 electron.vite.config.js               |    2 +
 package.json                          |    3 +
 src/renderer/App.vue                  |   33 +-
 src/renderer/assets/css/theme.css     |   53 +
 src/renderer/assets/css/utilities.css |   23 +
 src/renderer/index.css                |  173 ++
 src/renderer/layouts/Main.vue         |  183 +-
 src/renderer/main.ts                  |    1 +
 src/renderer/pages/Upload.vue         |  454 +++--
 src/renderer/pages/css/UploadPage.css | 2264 +------------------------
 yarn.lock                             |  249 ++-
 13 files changed, 811 insertions(+), 2632 deletions(-)
 create mode 100644 src/renderer/assets/css/theme.css
 create mode 100644 src/renderer/assets/css/utilities.css
 create mode 100644 src/renderer/index.css

diff --git a/.prettierrc b/.prettierrc
index e61a93a0..a33a2958 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -14,5 +14,7 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "useTabs": false,
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/renderer/index.css"
 }
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 6e580c45..4b18a900 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -2,6 +2,7 @@ module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-config-html/vue', 'stylelint-config-standard-vue'],
   plugins: [],
   rules: {
+    'import-notation': null,
     // 这里是允许了空的style标签
     'no-empty-source': null,
     'selector-class-pattern': null,
diff --git a/electron.vite.config.js b/electron.vite.config.js
index f2c843f5..0ffb7eda 100644
--- a/electron.vite.config.js
+++ b/electron.vite.config.js
@@ -3,6 +3,7 @@ import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'electron-vite'
 
@@ -39,6 +40,7 @@ export default defineConfig({
       alias,
     },
     plugins: [
+      tailwindcss(),
       vue(),
       VueI18nPlugin({
         /* options */
diff --git a/package.json b/package.json
index 150816e1..39095c11 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "@headlessui/vue": "^1.7.23",
     "@highlightjs/vue-plugin": "^2.1.2",
     "@intlify/unplugin-vue-i18n": "^11.0.3",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/adm-zip": "^0.5.7",
     "@types/ali-oss": "^6.23.0",
     "@types/fs-extra": "^11.0.4",
@@ -129,6 +130,7 @@
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode.vue": "^3.6.0",
     "stylelint": "^16.26.1",
     "stylelint-config-html": "^1.1.0",
@@ -136,6 +138,7 @@
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-order": "^7.0.1",
     "stylus": "^0.64.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "5.8.2",
     "typescript-eslint": "^8.52.0",
     "video.js": "^8.23.4",
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 148e928e..f7828e9d 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,7 +1,9 @@
 <template>
-  <div id="app" :key="pageReloadCount">
+  <div id="layout" :key="pageReloadCount" class="h-full select-none">
     <router-view />
-    <div class="bg-images" />
+    <div
+      class="pointer-events-none absolute inset-0 -z-1 bg-custom bg-cover bg-fixed bg-center bg-no-repeat opacity-custom blur-custom"
+    />
     <UIServiceProvider />
   </div>
 </template>
@@ -27,30 +29,3 @@ export default {
   name: 'PicList',
 }
 </script>
-
-<style lang="stylus">
-body,
-html
-  padding 0
-  margin 0
-  height 100%
-
-#app
-  height 100%
-  user-select none
-
-.bg-images {
-  position: absolute;
-  inset: 0;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
-  background-image: var(--background-image);
-  background-repeat: no-repeat, no-repeat;
-  opacity: var(--background-image-opacity);
-  filter: var(--background-blur);
-  z-index: -1;
-  pointer-events: none;
-}
-</style>
diff --git a/src/renderer/assets/css/theme.css b/src/renderer/assets/css/theme.css
new file mode 100644
index 00000000..19ccad25
--- /dev/null
+++ b/src/renderer/assets/css/theme.css
@@ -0,0 +1,53 @@
+
+@theme {
+  --background-image-custom: var(--background-image, none);
+  --blur-custom: var(--background-blur, none);
+  --opacity-custom: var(--background-image-opacity);
+  --color-main: var(--color-text-primary);
+  --color-secondary: var(--color-text-secondary);
+  --color-tertiary: var(--color-text-tertiary);
+  --color-bg: var(--color-background-primary);
+  --color-bg-secondary: var(--color-background-secondary);
+  --color-bg-tertiary: var(--color-background-tertiary);
+  --color-surface: var(--color-surface);
+  --color-surface-elevated: var(--color-surface-elevated);
+  --color-border: var(--color-border);
+  --color-border-secondary: var(--color-border-secondary);
+  --color-primary: var(--color-primary);
+  --color-primary-hover: var(--color-primary-hover);
+  --color-accent: var(--color-accent);
+  --color-accent-hover: var(--color-accent-hover);
+  --color-success: var(--color-success);
+  --color-warning: var(--color-warning);
+  --color-danger: var(--color-danger);
+  --color-error: var(--color-error);
+
+  /* shadows */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+
+  /* radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-round: 50%;
+
+  /* transition */
+  --transition-duration-fast: 150ms;
+  --transition-duration-medium: 250ms;
+  --transition-duration-slow: 350ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-apple: cubic-bezier(0.3, 1, 0.3, 1);
+
+  /* breakpoints */
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+}
diff --git a/src/renderer/assets/css/utilities.css b/src/renderer/assets/css/utilities.css
new file mode 100644
index 00000000..8af244ff
--- /dev/null
+++ b/src/renderer/assets/css/utilities.css
@@ -0,0 +1,23 @@
+/* stylelint-disable nesting-selector-no-missing-scoping-root */
+
+@import 'tailwindcss' reference;
+
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+@utility advanced-animation {
+    @apply border border-black/30 bg-black/20 shadow-[0_8px_32px_rgba(0,0,0,0.1)] backdrop-blur-[5px] backdrop-saturate-[1.8];
+}
+
+
+@utility focus-ring {
+  &:focus-visible {
+    @apply outline-2 outline-offset-2 outline-accent outline-solid;
+  }
+}
diff --git a/src/renderer/index.css b/src/renderer/index.css
new file mode 100644
index 00000000..358a6c9c
--- /dev/null
+++ b/src/renderer/index.css
@@ -0,0 +1,173 @@
+@import 'tailwindcss';
+@import './assets/css/theme.css';
+@import './assets/css/utilities.css';
+
+@layer base {
+  body {
+    @apply m-0 h-full overflow-hidden bg-bg p-0 font-[inherit] text-main;
+  }
+
+  html {
+    @apply m-0 h-full p-0;
+  }
+
+  :focus {
+    @apply outline-none;
+  }
+
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-accent outline-solid;
+  }
+
+  ::selection {
+    @apply bg-accent/20 text-main;
+  }
+
+  ::-webkit-scrollbar {
+    @apply h-3 w-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-sm bg-accent/50 transition-colors duration-fast ease-standard;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-accent/70;
+  }
+
+  ::-webkit-scrollbar-corner {
+    @apply bg-bg;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  :root,
+  .light,
+  [data-theme='light'] {
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizelegibility;
+
+    --background-image: none;
+    --background-image-opacity: 1;
+    --color-text-primary: #1d1d1f;
+    --color-text-secondary: #6e6e73;
+    --color-text-tertiary: #86868b;
+    --color-background-primary: #ffffff;
+    --color-background-secondary: #f5f5f7;
+    --color-background-tertiary: #fbfbfd;
+    --color-surface: rgb(255 255 255 / 80%);
+    --color-surface-elevated: rgb(255 255 255 / 95%);
+    --color-border: rgb(0 0 0 / 10%);
+    --color-border-secondary: rgb(0 0 0 / 5%);
+    --color-primary: #6366f1;
+    --color-primary-hover: #4f46e5;
+    --color-accent: #007aff;
+    --color-accent-hover: #3b82f6;
+    --color-success: #34c759;
+    --color-warning: #f1930f;
+    --color-danger: #ff3b30;
+    --color-error: #cb2431;
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
+    --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
+    --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
+    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
+  }
+
+  :root.dark {
+    --color-text-primary: #f5f5f7;
+    --color-text-secondary: #a1a1a6;
+    --color-text-tertiary: #86868b;
+    --color-background-primary: #000000;
+    --color-background-secondary: #1c1c1e;
+    --color-background-tertiary: #2c2c2e;
+    --color-surface: rgb(28 28 30 / 80%);
+    --color-surface-elevated: rgb(44 44 46 / 95%);
+    --color-border: rgb(255 255 255 / 10%);
+    --color-border-secondary: rgb(255 255 255 / 5%);
+    --color-primary: #6366f1;
+    --color-primary-hover: #818cf8;
+    --color-accent: #0a84ff;
+    --color-accent-hover: #409cff;
+    --color-success: #34c759;
+    --color-warning: #f1930f;
+    --color-danger: #ff3b30;
+    --color-error: #cb2431;
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
+    --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
+    --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
+    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
+  }
+
+  @keyframes badge-scroll {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes badge-pulse {
+    0%,
+    100% {
+      transform: translateY(-50%) scale(1);
+      box-shadow: 0 2px 6px rgb(0 122 255 / 40%);
+    }
+
+    50% {
+      transform: translateY(-50%) scale(1.1);
+      box-shadow: 0 2px 6px rgb(0 122 255 / 60%);
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
diff --git a/src/renderer/layouts/Main.vue b/src/renderer/layouts/Main.vue
index 01a430bc..3fdca1bb 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@@ -1,10 +1,10 @@
 <template>
-  <div id="main" class="app-container">
+  <div id="main" class="relative flex h-screen overflow-hidden bg-bg pt-[32px]">
     <InputBoxDialog />
     <TitleBar />
     <Navigation />
-    <main class="main-content">
-      <div class="content-container">
+    <main class="relative z-1 no-scrollbar h-screen flex-1 overflow-scroll bg-bg-secondary">
+      <div class="m-0 h-full max-w-none">
         <router-view v-slot="{ Component, route }">
           <transition name="page" mode="out-in">
             <keep-alive :include="keepAlivePages">
@@ -34,180 +34,3 @@ const keepAlivePages = $router
 <script lang="ts">
 export default { name: 'MainPage' }
 </script>
-
-<style>
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  font-size: 14px;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizelegibility;
-
-  --background-image: none;
-  --background-image-opacity: 1;
-  --color-text-primary: #1d1d1f;
-  --color-text-secondary: #6e6e73;
-  --color-text-tertiary: #86868b;
-  --color-background-primary: #ffffff;
-  --color-background-secondary: #f5f5f7;
-  --color-background-tertiary: #fbfbfd;
-  --color-surface: rgb(255 255 255 / 80%);
-  --color-surface-elevated: rgb(255 255 255 / 95%);
-  --color-border: rgb(0 0 0 / 10%);
-  --color-border-secondary: rgb(0 0 0 / 5%);
-  --color-primary: #6366f1;
-  --color-primary-hover: #4f46e5;
-  --color-accent: #007aff;
-  --color-accent-hover: #3b82f6;
-  --color-success: #34c759;
-  --color-warning: #f1930f;
-  --color-danger: #ff3b30;
-  --color-error: #cb2431;
-  --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
-  --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
-  --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
-  --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-round: 50%;
-  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-  --transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-:root.dark {
-  --color-text-primary: #f5f5f7;
-  --color-text-secondary: #a1a1a6;
-  --color-text-tertiary: #86868b;
-  --color-background-primary: #000000;
-  --color-background-secondary: #1c1c1e;
-  --color-background-tertiary: #2c2c2e;
-  --color-surface: rgb(28 28 30 / 80%);
-  --color-surface-elevated: rgb(44 44 46 / 95%);
-  --color-border: rgb(255 255 255 / 10%);
-  --color-border-secondary: rgb(255 255 255 / 5%);
-  --color-primary: #6366f1;
-  --color-primary-hover: #818cf8;
-  --color-accent: #0a84ff;
-  --color-accent-hover: #409cff;
-  --color-success: #34c759;
-  --color-warning: #f1930f;
-  --color-danger: #ff3b30;
-  --color-error: #cb2431;
-  --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
-  --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
-  --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
-  --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-round: 50%;
-  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-  --transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-body {
-  overflow: hidden;
-  font-family: inherit;
-  color: var(--color-text-primary);
-  background-color: var(--color-background-primary);
-}
-
-.app-container {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  padding-top: 32px;
-  height: 100vh;
-  background-color: var(--color-background-primary);
-}
-
-.main-content {
-  position: relative;
-  z-index: 1;
-  overflow: scroll;
-  height: 100vh;
-  background-color: var(--color-background-secondary);
-  flex: 1;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.main-content::-webkit-scrollbar {
-  display: none;
-}
-
-.content-container {
-  margin: 0;
-  max-width: none;
-  height: 100%;
-}
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border: 3px solid var(--color-background-primary);
-  border-radius: var(--radius-sm);
-  background-color: var(--color-border);
-  transition: background-color var(--transition-fast);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-text-tertiary);
-}
-
-::-webkit-scrollbar-corner {
-  background: var(--color-background-primary);
-}
-
-::selection {
-  color: var(--color-text-primary);
-  background-color: color-mix(in srgb, var(--color-accent), transparent 80%);
-}
-
-:focus {
-  outline: none;
-}
-
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-</style>
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index cd379cca..e8e83aae 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -1,6 +1,7 @@
 import 'video.js/dist/video-js.css'
 import 'highlight.js/styles/stackoverflow-light.css'
 import 'highlight.js/lib/common'
+import './index.css'
 
 import hljsVuePlugin from '@highlightjs/vue-plugin'
 import VueVideoPlayer from '@videojs-player/vue'
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index da35ecde..c3f2b240 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -1,24 +1,33 @@
 <template>
-  <div class="upload-container">
+  <div
+    class="m-0 box-border flex min-h-screen w-full flex-col gap-5 overflow-y-auto p-4 max-md:gap-4 max-md:p-3 max-xs:p-2 lg:mx-auto lg:max-w-[1200px] lg:px-8 lg:py-6"
+  >
     <!-- Header Card -->
-    <div class="upload-card header-card">
-      <div class="card-header">
-        <div class="provider-section">
+    <div
+      class="overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
+    >
+      <div
+        class="flex flex-row flex-wrap items-center justify-between gap-4 border-b border-border-secondary px-5 py-4 max-md:flex-col max-md:items-stretch"
+      >
+        <div class="flex max-w-[calc(100%-300px)] flex-1 flex-wrap items-center gap-2 max-md:order-1">
           <button
-            class="provider-button"
+            class="group/provider flex w-auto min-w-[200px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[130px]"
             :title="t('pages.upload.uploadViewHint')"
             @click="handlePicBedNameClick(picBedName)"
           >
-            <div class="provider-info">
-              <span class="provider-name">{{ picBedName }}</span>
-              <span class="provider-config">{{ defaultConfigNameG || 'Default' }}</span>
+            <div class="flex flex-1 flex-col items-start">
+              <span class="text-sm leading-[1.2] font-semibold text-main">{{ picBedName }}</span>
+              <span class="text-xs leading-[1.2] text-secondary">{{ defaultConfigNameG || 'Default' }}</span>
             </div>
-            <EditIcon :size="16" class="provider-arrow" />
+            <EditIcon
+              :size="16"
+              class="text-secondary duration-fast ease-standard group-hover/provider:text-accent-hover"
+            />
           </button>
           <div
-            class="add-favorite-button"
+            class="flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-[inherit] text-secondary duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:text-accent-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
             :title="t('pages.upload.addToFavorites')"
-            :class="{ disabled: favoritePicbeds.length >= MAX_FAVORITE_PICBEDS || isCurrentPicBedInFavorites }"
+            :data-disabled="favoritePicbeds.length >= MAX_FAVORITE_PICBEDS || isCurrentPicBedInFavorites"
             @click="addCurrentPicbedToFavorites"
           >
             <PlusIcon :size="12" />
@@ -26,13 +35,13 @@
           <transition-group
             name="badges-slide"
             tag="div"
-            class="favorite-picbeds-container"
+            class="flex max-w-[400px] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
             :class="{ 'has-many': favoritePicbeds.length >= 4 }"
           >
             <button
               v-for="picbedType in favoritePicbeds"
               :key="picbedType.id"
-              class="picbed-badge"
+              class="group/badge relative flex w-[85px] shrink-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-border-secondary bg-bg-secondary pt-1.5 pr-2 pb-1.5 pl-3 text-xs font-medium whitespace-nowrap text-secondary transition-all duration-fast ease-standard select-none hover:-translate-y-px hover:border-accent-hover hover:bg-bg-tertiary hover:text-accent-hover [.is-active]:border-[0.1rem] [.is-active]:border-accent-hover [.is-active]:font-semibold [.show-delete]:pr-2"
               :class="{ 'is-active': isCurrentPicbed(picbedType), 'show-delete': longPressedBadge === picbedType.id }"
               :title="t('pages.upload.longPressToRemoveFromFavorites') + getPicbedName(picbedType)"
               @click="handleBadgeClick(picbedType)"
@@ -43,15 +52,21 @@
               @touchend="handleBadgeTouchEnd"
               @touchcancel="handleBadgeTouchEnd"
             >
-              <div class="badge-text-mask">
-                <div class="badge-text-track">
-                  <span class="badge-name">{{ getPicbedName(picbedType) }}</span>
-                  <span class="badge-name shadow-text">{{ getPicbedName(picbedType) }}</span>
+              <div class="min-w-0 flex-1 overflow-hidden">
+                <div
+                  class="flex overflow-hidden text-ellipsis whitespace-nowrap group-hover/badge:w-fit group-hover/badge:animate-[badge-scroll_5s_linear_infinite] group-hover/badge:text-clip"
+                >
+                  <span class="leading-none whitespace-nowrap group-hover/badge:pr-[20px]">{{
+                    getPicbedName(picbedType)
+                  }}</span>
+                  <span class="hidden leading-none whitespace-nowrap group-hover/badge:block">{{
+                    getPicbedName(picbedType)
+                  }}</span>
                 </div>
               </div>
               <button
                 v-if="longPressedBadge === picbedType.id"
-                class="badge-remove"
+                class="flex shrink-0 animate-[fade-in_0.2s_ease-in] cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-inherit duration-fast ease-standard hover:bg-danger/20 hover:text-danger"
                 :title="t('pages.upload.removeFromFavorites')"
                 @click.stop="removePicbedFromFavorites(picbedType)"
               >
@@ -60,8 +75,8 @@
             </button>
           </transition-group>
         </div>
-        <div class="header-actions">
-          <div class="segmented-button-group">
+        <div class="flex flex-wrap items-center gap-3 max-md:order-2 max-md:justify-stretch">
+          <div class="inline-flex overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
             <button
               class="segmented-button"
               :title="t('pages.upload.imageProcessNameSingle')"
@@ -74,7 +89,10 @@
               <span>{{ t('pages.upload.imageProcessName') }}</span>
             </button>
           </div>
-          <button class="action-button" @click="handleChangePicBed">
+          <button
+            class="flex cursor-pointer items-center gap-2 rounded-md border-none bg-accent px-4 py-2.5 font-[inherit] text-sm font-medium text-white duration-fast ease-standard hover:-translate-y-px hover:bg-accent-hover hover:shadow-md focus-visible:focus-ring max-md:flex-1 max-md:justify-center max-xs:px-3 max-xs:py-2 max-xs:text-[0.8rem]"
+            @click="handleChangePicBed"
+          >
             <ArrowLeftRightIcon :size="16" />
             <span>{{ t('pages.upload.changePicBed') }}</span>
           </button>
@@ -83,42 +101,58 @@
     </div>
 
     <!-- Main Upload Card -->
-    <div class="upload-card main-card">
+    <div
+      class="min-h-[300px] overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
+    >
       <div
         id="upload-area"
-        class="upload-zone"
+        class="group/upload relative m-4 cursor-pointer rounded-xl border-2 border-dashed border-border bg-bg-secondary px-8 py-12 duration-medium ease-standard focus-visible:focus-ring focus-visible:outline-offset-4 max-md:m-3 max-md:px-4 max-md:py-8 max-xs:m-2 max-xs:px-2 max-xs:py-6 [:hover,.drag-active]:border-accent [:hover,.drag-active]:bg-[linear-gradient(135deg,var(--color-surface-elevated)_0%,color-mix(in_srgb,var(--color-accent),transparent_95%)_100%)] [:hover,.drag-active]:shadow-lg [:hover,.drag-active&]:-translate-y-[2px]"
         :class="{ 'drag-active': dragover }"
         @drop.prevent="onDrop"
         @dragover.prevent="dragover = true"
         @dragleave.prevent="dragover = false"
         @click="openUploadWindow"
       >
-        <div class="upload-content">
-          <div class="upload-icon">
+        <div class="flex flex-col items-center gap-6 text-center">
+          <div
+            class="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-accent text-white duration-medium ease-standard group-[:hover,.drag-active]/upload:animate-[float_1.5s_ease-in-out_infinite] max-md:h-[60px] max-md:w-[60px]"
+          >
             <UploadCloudIcon :size="48" />
           </div>
-          <div class="upload-text">
-            <h3 class="upload-title">
+          <div class="flex flex-col gap-3">
+            <h3 class="m-0 text-xl font-semibold tracking-tight text-main max-xs:text-lg">
               {{ t('pages.upload.dragFileToHere') }}
             </h3>
-            <p class="upload-subtitle">
+            <p class="m-0 text-sm text-secondary">
               {{ ' ' }}
             </p>
-            <div class="upload-formats">
-              <span class="format-label">{{ t('pages.upload.uploadHint') }}</span>
+            <div class="mt-2 flex flex-col gap-1">
+              <span class="text-xs font-medium tracking-wide text-secondary uppercase">{{
+                t('pages.upload.uploadHint')
+              }}</span>
             </div>
           </div>
         </div>
-        <input id="file-uploader" ref="fileInput" type="file" multiple style="display: none" @change="onChange" />
+        <input id="file-uploader" ref="fileInput" type="file" multiple class="hidden" @change="onChange" />
       </div>
 
       <!-- Progress Bar -->
-      <transition name="progress">
-        <div v-if="showProgress" class="progress-container">
-          <div class="progress-bar">
-            <div class="progress-fill" :class="{ 'progress-error': showError }" :style="{ width: `${progress}%` }" />
+      <transition
+        name="progress"
+        enter-active-class="transition-all duration-medium ease-standard"
+        leave-active-class="transition-all duration-medium ease-standard"
+        enter-from-class="opacity-0 -translate-y-[10px]"
+        leave-to-class="opacity-0 -translate-y-[10px]"
+      >
+        <div v-if="showProgress" class="mx-6 my-4 rounded-lg border border-border-secondary bg-surface p-4">
+          <div class="mb-2 h-2 overflow-hidden rounded-sm bg-bg-secondary">
+            <div
+              class="h-full rounded-sm bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] duration-fast ease-standard data-[error=true]:bg-danger data-[error=true]:bg-none"
+              :data-error="showError"
+              :style="{ width: `${progress}%` }"
+            />
           </div>
-          <span class="progress-text">
+          <span class="block text-center text-sm font-medium text-secondary">
             {{ showError ? t('pages.upload.uploadFailed') : `${progress}%` }}
           </span>
         </div>
@@ -126,29 +160,36 @@
     </div>
 
     <!-- Quick Actions Card -->
-    <div class="upload-card actions-card">
-      <div class="card-header">
-        <h4 class="card-title">
+    <div
+      class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
+    >
+      <div class="px-6 py-4">
+        <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
           {{ t('pages.upload.quickUpload') }}
         </h4>
       </div>
-      <div class="quick-actions">
+      <div
+        class="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3 px-6 py-4 max-md:grid-cols-1 max-md:px-4 max-md:py-3.5 md:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(200px,1fr))]"
+      >
         <button class="quick-action-button" @click="uploadClipboardFiles">
-          <ClipboardIcon class="action-icon" :size="18" />
-          <span>{{ t('pages.upload.clipboardPicture') }}</span>
+          <ClipboardIcon class="shrink-0 text-accent" :size="18" />
+          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
         </button>
         <button class="quick-action-button" @click="uploadURLFiles">
-          <LinkIcon class="action-icon" :size="18" />
-          <span>{{ t('pages.upload.urlUpload') }}</span>
+          <LinkIcon class="shrink-0 text-accent" :size="18" />
+          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
         </button>
         <button
           class="quick-action-button"
           :class="{ 'has-badge': taskQueueStatus.tasks.length > 0 }"
           @click="openTaskDialog"
         >
-          <ListTodoIcon class="action-icon" :size="18" />
-          <span>{{ t('pages.upload.taskUpload') }}</span>
-          <span v-if="taskQueueStatus.tasks.length > 0" class="task-count-badge">
+          <ListTodoIcon class="shrink-0 text-accent" :size="18" />
+          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
+          <span
+            v-if="taskQueueStatus.tasks.length > 0"
+            class="absolute top-[50%] right-3 flex min-w-6 -translate-y-[50%] animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full px-1.5 py-0 text-sm font-bold text-accent"
+          >
             {{ taskQueueStatus.tasks.length }}
           </span>
         </button>
@@ -156,22 +197,28 @@
     </div>
 
     <!-- Settings Card -->
-    <div class="upload-card settings-card">
-      <div class="card-header">
-        <h4 class="card-title">
+    <div
+      class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
+    >
+      <div class="px-6 py-4">
+        <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
           {{ t('pages.upload.linkFormat') }}
         </h4>
       </div>
-      <div class="settings-content">
+      <div
+        class="flex flex-col gap-6 px-6 py-5 max-md:grid-cols-1! max-md:px-5 max-md:py-4 md:grid md:grid-cols-2 md:items-start md:gap-6 lg:gap-8"
+      >
         <!-- Format Options -->
-        <div class="setting-group">
-          <label class="setting-label">{{ t('pages.upload.outputFormat') }}</label>
-          <div class="format-buttons">
+        <div class="flex flex-col gap-3">
+          <label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.outputFormat') }}</label>
+          <div
+            class="grid grid-cols-[repeat(auto-fit,minmax(70px,1fr))] gap-[0.4rem] max-md:grid-cols-[repeat(auto-fit,minmax(60px,1fr))]"
+          >
             <button
               v-for="(format, key) in pasteFormatList"
               :key="key"
-              class="format-button"
-              :class="{ active: pasteStyle === key }"
+              class="cursor-pointer rounded-md border border-border-secondary bg-bg-secondary px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-[0.7rem] font-medium text-secondary duration-fast ease-standard hover:border-accent-hover hover:text-main focus-visible:focus-ring data-[active=true]:border-accent data-[active=true]:bg-accent data-[active=true]:text-white"
+              :data-active="pasteStyle === key"
               :title="format"
               @click="updatePasteStyle(key)"
             >
@@ -181,13 +228,21 @@
         </div>
 
         <!-- URL Length Options -->
-        <div class="setting-group">
-          <label class="setting-label">{{ t('pages.upload.urlType.title') }}</label>
-          <div class="url-toggle">
-            <button class="toggle-button" :class="{ active: !useShortUrl }" @click="updateUrlType(false)">
+        <div class="flex flex-col gap-3">
+          <label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.urlType.title') }}</label>
+          <div class="flex w-full overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
+            <button
+              class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
+              :data-active="!useShortUrl"
+              @click="updateUrlType(false)"
+            >
               <span>{{ t('pages.upload.urlType.normal') }}</span>
             </button>
-            <button class="toggle-button" :class="{ active: useShortUrl }" @click="updateUrlType(true)">
+            <button
+              class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
+              :data-active="useShortUrl"
+              @click="updateUrlType(true)"
+            >
               <span>{{ t('pages.upload.urlType.short') }}</span>
             </button>
           </div>
@@ -197,22 +252,35 @@
 
     <!-- Image Process Dialog -->
     <transition name="modal">
-      <div v-if="imageProcessDialogVisible" class="modal-overlay" :class="advancedAnimation" @click.stop>
-        <div class="modal-container" @click.stop>
-          <div class="modal-header">
-            <h3 class="modal-title">
+      <div
+        v-if="imageProcessDialogVisible"
+        class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
+        :class="{ 'advanced-animation': enableAdvancedAnimation }"
+        @click.stop
+      >
+        <div
+          class="m-auto h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl"
+          @click.stop
+        >
+          <div
+            class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2"
+          >
+            <h3 class="m-0 text-xl font-semibold text-main">
               {{ t('pages.imageProcess.title') }}
             </h3>
-            <span class="modal-subtitle">
+            <span class="mt-1 text-xl font-semibold text-secondary">
               {{
                 PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
               }}
             </span>
-            <button class="modal-close" @click="imageProcessDialogVisible = false">
+            <button
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
+              @click="imageProcessDialogVisible = false"
+            >
               <XIcon :size="20" />
             </button>
           </div>
-          <div class="modal-content">
+          <div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto max-md:p-4">
             <ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
           </div>
         </div>
@@ -221,15 +289,21 @@
 
     <!-- Task Queue Manager Modal -->
     <transition name="modal">
-      <div v-if="taskDialogVisible" class="modal-overlay" :class="advancedAnimation">
-        <div class="modal-container task-queue-modal" @click.stop>
-          <div class="modal-header">
-            <div class="modal-header-text">
-              <h3 class="modal-title">
-                <ListTodoIcon :size="22" />
+      <div
+        v-if="taskDialogVisible"
+        class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
+        :class="{ 'advanced-animation': enableAdvancedAnimation }"
+      >
+        <div
+          class="m-auto flex h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] flex-col overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl max-md:max-h-[90vh] max-md:w-[95vw]"
+          @click.stop
+        >
+          <div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4">
+            <div class="flex flex-row items-center gap-4">
+              <h3 class="flex items-center gap-2.5 bg-clip-text text-xl font-bold tracking-tight text-main">
                 {{ t('pages.upload.taskQueue.title') }}
               </h3>
-              <span class="modal-subtitle">
+              <span class="m-0 text-lg font-semibold text-secondary">
                 {{
                   t('pages.upload.taskQueue.stats', {
                     completed: taskQueueStatus.stats.completed,
@@ -238,52 +312,69 @@
                 }}
               </span>
             </div>
-            <button class="modal-close" @click="taskDialogVisible = false">
+            <button
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
+              @click="taskDialogVisible = false"
+            >
               <XIcon :size="20" />
             </button>
           </div>
 
-          <div class="modal-content task-queue-content">
+          <div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
             <!-- Action Bar -->
-            <div class="task-action-bar">
-              <div class="action-bar-left">
-                <button v-show="taskQueueStatus.tasks.length > 0" class="action-btn primary" @click="addFilesToTask">
+            <div
+              class="flex flex-wrap items-center justify-between gap-4 border-b border-b-border px-5 py-4 max-md:flex-col max-md:items-stretch"
+            >
+              <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
+                <button
+                  v-show="taskQueueStatus.tasks.length > 0"
+                  class="flex cursor-pointer items-center justify-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                  @click="addFilesToTask"
+                >
                   <PlusIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.addFiles') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.addFiles') }}</span>
                 </button>
                 <button
                   v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
-                  class="action-btn success"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                   @click="startTaskQueue"
                 >
                   <PlayIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.start') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.start') }}</span>
                 </button>
                 <button
                   v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
-                  class="action-btn warning"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                   @click="pauseTaskQueue"
                 >
                   <PauseIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.pause') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.pause') }}</span>
                 </button>
-                <button v-if="taskQueueStatus.config.isPaused" class="action-btn success" @click="resumeTaskQueue">
+                <button
+                  v-if="taskQueueStatus.config.isPaused"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                  @click="resumeTaskQueue"
+                >
                   <PlayIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.resume') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.resume') }}</span>
                 </button>
               </div>
-              <div class="action-bar-right">
-                <button v-if="taskQueueStatus.stats.failed > 0" class="action-btn" @click="retryAllFailedTasks">
+              <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
+                <button
+                  v-if="taskQueueStatus.stats.failed > 0"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                  @click="retryAllFailedTasks"
+                >
                   <RefreshCwIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.retryAllFailed') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
                 </button>
                 <button
                   v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
-                  class="action-btn danger"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                   @click="cancelAllTasks"
                 >
                   <XIcon :size="16" />
-                  {{ t('pages.upload.taskQueue.cancelAll') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.cancelAll') }}</span>
                 </button>
                 <button
                   v-if="
@@ -291,14 +382,14 @@
                     taskQueueStatus.stats.failed > 0 ||
                     taskQueueStatus.stats.cancelled > 0
                   "
-                  class="action-btn"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                   @click="clearFinishedTasks"
                 >
                   <Trash2Icon :size="16" />
-                  {{ t('pages.upload.taskQueue.clearFinished') }}
+                  <span class="mt-1">{{ t('pages.upload.taskQueue.clearFinished') }}</span>
                 </button>
                 <button
-                  class="action-btn"
+                  class="flex cursor-pointer items-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                   :class="{ active: showTaskSettings }"
                   @click="showTaskSettings = !showTaskSettings"
                 >
@@ -308,28 +399,34 @@
             </div>
 
             <!-- Overall Progress -->
-            <div v-if="taskQueueStatus.stats.total > 0" class="overall-progress">
-              <div class="progress-info">
-                <span class="progress-label">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
-                <span class="progress-percentage">{{ overallProgressPercent }}%</span>
+            <div v-if="taskQueueStatus.stats.total > 0" class="border-b border-b-border p-5">
+              <div class="mb-3.5 flex items-center justify-between">
+                <span class="text-sm font-semibold text-main">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
+                <span class="text-xl leading-1 font-bold text-accent">{{ overallProgressPercent }}%</span>
               </div>
-              <div class="progress-bar-container">
-                <div class="progress-bar-fill" :style="{ width: `${overallProgressPercent}%` }" />
+              <div class="h-2 overflow-hidden rounded-full bg-surface-elevated">
+                <div
+                  class="h-full bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] shadow-sm transition-[width] duration-medium ease-standard"
+                  :style="{ width: `${overallProgressPercent}%` }"
+                />
               </div>
-              <div class="progress-details">
-                <span v-if="taskQueueStatus.stats.avgSpeed > 0" class="progress-detail-item">
-                  <ZapIcon :size="14" />
+              <div class="mt-2 flex flex-wrap justify-between gap-4">
+                <span
+                  v-if="taskQueueStatus.stats.avgSpeed > 0"
+                  class="flex items-center gap-2 py-1.5 text-xs text-secondary"
+                >
+                  <ZapIcon :size="14" class="text-accent" />
                   {{ formatSpeed(taskQueueStatus.stats.avgSpeed) }}
                 </span>
                 <span
                   v-if="taskQueueStatus.stats.estimatedTimeMs > 0 && taskQueueStatus.config.isRunning"
-                  class="progress-detail-item"
+                  class="flex items-center gap-2 py-1.5 text-xs text-secondary"
                 >
-                  <ClockIcon :size="14" />
+                  <ClockIcon :size="14" class="text-accent" />
                   {{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
                 </span>
-                <span class="progress-detail-item">
-                  <HardDriveIcon :size="14" />
+                <span class="flex items-center gap-2 py-1.5 text-xs text-secondary">
+                  <HardDriveIcon :size="14" class="text-accent" />
                   {{ formatSize(taskQueueStatus.stats.completedSize) }} /
                   {{ formatSize(taskQueueStatus.stats.totalSize) }}
                 </span>
@@ -338,60 +435,68 @@
 
             <!-- Settings Panel -->
             <transition name="settings-slide">
-              <div v-if="showTaskSettings" class="settings-panel">
-                <div class="settings-grid">
-                  <div class="setting-item">
-                    <label class="setting-label">
-                      <TimerIcon :size="14" />
+              <div v-if="showTaskSettings" class="overflow-visible border-b border-b-border p-4">
+                <div class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-center gap-4 max-md:grid-cols-1">
+                  <div class="flex min-w-0 flex-col gap-2">
+                    <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">
                       {{ t('pages.upload.taskQueue.interval') }}
                     </label>
-                    <div class="input-with-unit">
+                    <div class="flex items-center gap-2.5 max-sm:flex-row">
                       <input
                         v-model.number="uploadInterval"
                         type="number"
                         min="1"
                         max="99999"
                         step="1"
-                        class="setting-input"
+                        class="box-border w-full flex-1 rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
                         :disabled="taskQueueStatus.config.isRunning"
                         @change="updateInterval"
                       />
-                      <span class="input-unit">s</span>
+                      <span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
                     </div>
                   </div>
-                  <div class="setting-item">
-                    <label class="setting-label">{{ t('pages.upload.taskQueue.maxRetry') }}</label>
+                  <div class="flex min-w-0 flex-col gap-2">
+                    <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">{{
+                      t('pages.upload.taskQueue.maxRetry')
+                    }}</label>
                     <input
                       v-model.number="maxRetryCount"
                       type="number"
                       min="0"
                       max="10"
                       step="1"
-                      class="setting-input"
+                      class="box-border w-full rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
                       @change="updateSettings"
                     />
                   </div>
-                  <div class="setting-item toggle-item">
-                    <label class="setting-label" for="task-auto-start">
+                  <div
+                    class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
+                  >
+                    <label class="m-0 flex items-center gap-2 text-base font-semibold text-main" for="task-auto-start">
                       {{ t('pages.upload.taskQueue.autoStart') }}
                     </label>
                     <input
                       id="task-auto-start"
                       v-model="autoStart"
                       type="checkbox"
-                      class="setting-checkbox"
+                      class="h-[16px] w-[16px] cursor-pointer accent-accent"
                       @change="updateSettings"
                     />
                   </div>
-                  <div class="setting-item toggle-item">
-                    <label class="setting-label" for="task-pause-on-error">
+                  <div
+                    class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
+                  >
+                    <label
+                      class="m-0 flex items-center gap-2 text-base font-semibold text-main"
+                      for="task-pause-on-error"
+                    >
                       {{ t('pages.upload.taskQueue.pauseOnError') }}
                     </label>
                     <input
                       id="task-pause-on-error"
                       v-model="pauseOnError"
                       type="checkbox"
-                      class="setting-checkbox"
+                      class="h-[16px] w-[16px] cursor-pointer accent-accent"
                       @change="updateSettings"
                     />
                   </div>
@@ -400,17 +505,19 @@
             </transition>
 
             <!-- Filter & Search Bar -->
-            <div v-if="taskQueueStatus.tasks.length > 0" class="filter-search-bar">
-              <div class="search-box">
-                <SearchIcon :size="16" />
+            <div v-if="taskQueueStatus.tasks.length > 0" class="flex flex-col gap-2 border-b border-b-border p-5">
+              <div
+                class="flex items-center gap-2.5 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2.5 shadow-sm transition-all duration-fast ease-standard focus-within:border-accent focus-within:bg-white focus-within:shadow-md"
+              >
+                <SearchIcon :size="16" class="shrink-0 text-accent" />
                 <input
                   v-model="taskSearchQuery"
                   type="text"
-                  class="search-input"
+                  class="flex border-0 bg-transparent text-sm text-main outline-0 placeholder:text-tertiary max-sm:max-w-none"
                   :placeholder="t('pages.upload.taskQueue.searchPlaceholder')"
                 />
               </div>
-              <div class="filter-tabs">
+              <div class="flex flex-wrap gap-2.5">
                 <button class="filter-tab" :class="{ active: taskFilter === 'all' }" @click="taskFilter = 'all'">
                   {{ t('pages.upload.taskQueue.filterAll') }}
                 </button>
@@ -435,44 +542,61 @@
             </div>
 
             <!-- Task List -->
-            <div v-if="taskQueueStatus.tasks.length > 0" class="task-list-container">
-              <TransitionGroup name="task" tag="div" class="task-list">
+            <div v-if="taskQueueStatus.tasks.length > 0" class="min-h-[300px] flex-1 overflow-y-auto">
+              <TransitionGroup name="task" tag="div" class="flex flex-col">
                 <div
                   v-for="task in filteredTasks"
                   :key="task.id"
-                  class="task-item"
+                  class="group/tasklist relative flex items-center justify-between gap-2 border-b border-b-border bg-surface px-5 py-4 transition-all duration-fast ease-standard last:border-b-0 hover:bg-surface-elevated hover:shadow-sm max-md:flex-col max-md:items-start max-md:gap-3"
                   :class="getTaskStatusClass(task.status)"
                 >
-                  <div class="task-content">
-                    <div class="task-header-row">
-                      <div class="task-name">
-                        <span class="task-filename" :title="task.filePath">{{ task.fileName }}</span>
-                        <span v-if="task.priority === 2" class="priority-badge">
-                          <StarIcon :size="12" />
+                  <div class="flex min-w-0 flex-1 flex-col gap-2.5">
+                    <div class="flex items-center justify-between gap-3.5">
+                      <div class="flex min-w-0 flex-1 items-center gap-2.5">
+                        <span
+                          class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main group-[.status-cancelled]/tasklist:text-tertiary group-[.status-cancelled]/tasklist:line-through group-[.status-completed]/tasklist:text-success group-[.status-failed]/tasklist:text-danger"
+                          :title="task.filePath"
+                          >{{ task.fileName }}</span
+                        >
+                        <span
+                          v-if="task.priority === 2"
+                          class="flex shrink-0 items-center justify-center rounded-full bg-warning p-1 text-white"
+                        >
+                          <StarIcon :size="13" />
                         </span>
                       </div>
-                      <div class="task-status-badge" :class="getTaskStatusClass(task.status)">
+                      <div
+                        class="rounded-full px-2.5 py-1 text-xs font-semibold tracking-wider whitespace-nowrap uppercase [.status-cancelled]:bg-tertiary/15 [.status-cancelled]:text-tertiary [.status-cancelled]:line-through [.status-completed]:bg-success/15 [.status-completed]:text-success [.status-failed]:bg-danger/15 [.status-failed]:text-danger [.status-pending]:bg-accent/15 [.status-pending]:text-secondary [.status-uploading]:bg-primary/15 [.status-uploading]:text-primary"
+                        :class="getTaskStatusClass(task.status)"
+                      >
                         {{ getTaskStatusText(task.status) }}
                       </div>
                     </div>
-                    <div class="task-meta-row">
-                      <span v-if="task.fileSize > 0" class="task-meta-item">
-                        <HardDriveIcon :size="12" />
+                    <div class="flex flex-wrap items-center gap-3">
+                      <span v-if="task.fileSize > 0" class="flex items-center gap-1 text-[0.75rem] text-tertiary">
+                        <HardDriveIcon :size="12" class="text-secondary" />
                         {{ formatSize(task.fileSize) }}
                       </span>
-                      <span v-if="task.uploadSpeed && task.status === 'uploading'" class="task-meta-item">
+                      <span
+                        v-if="task.uploadSpeed && task.status === 'uploading'"
+                        class="flex items-center gap-1 text-[0.75rem] text-tertiary"
+                      >
                         <ZapIcon :size="12" />
                         {{ formatSpeed(task.uploadSpeed) }}
                       </span>
-                      <span v-if="task.retryCount > 0" class="task-meta-item retry">
+                      <span v-if="task.retryCount > 0" class="flex items-center gap-1 text-[0.75rem] text-warning">
                         {{ t('pages.upload.taskQueue.retryCount', { count: task.retryCount }) }}
                       </span>
-                      <span v-if="task.error" class="task-meta-item error" :title="task.error">
+                      <span
+                        v-if="task.error"
+                        class="flex max-w-[200px] items-center gap-1 overflow-hidden text-[0.75rem] text-ellipsis whitespace-nowrap text-danger"
+                        :title="task.error"
+                      >
                         {{ task.error }}
                       </span>
                     </div>
                   </div>
-                  <div class="task-actions">
+                  <div class="flex items-center gap-1.5">
                     <!-- Pending task actions -->
                     <template v-if="task.status === 'pending'">
                       <button
@@ -490,7 +614,7 @@
                         <ChevronDownIcon :size="16" />
                       </button>
                       <button
-                        class="task-icon-btn priority"
+                        class="task-icon-btn"
                         :class="{ 'is-high': task.priority === 2 }"
                         :title="t('pages.upload.taskQueue.togglePriority')"
                         @click="toggleTaskPriority(task.id, task.priority)"
@@ -533,11 +657,15 @@
                       </button>
                     </template>
                     <!-- Status icon -->
-                    <div class="task-status-icon">
-                      <CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="icon-success" />
-                      <XCircleIcon v-if="task.status === 'failed'" :size="18" class="icon-error" />
-                      <LoaderIcon v-if="task.status === 'uploading'" :size="18" class="icon-loading spinning" />
-                      <ClockIcon v-if="task.status === 'pending'" :size="18" class="icon-pending" />
+                    <div class="flex h-[32px] w-[32px] items-center justify-center">
+                      <CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="text-success" />
+                      <XCircleIcon v-if="task.status === 'failed'" :size="18" class="text-error" />
+                      <LoaderIcon
+                        v-if="task.status === 'uploading'"
+                        :size="18"
+                        class="animate-[spin_1s_linear_infinite] text-accent"
+                      />
+                      <ClockIcon v-if="task.status === 'pending'" :size="18" class="text-tertiary" />
                     </div>
                   </div>
                 </div>
@@ -545,13 +673,16 @@
             </div>
 
             <!-- Empty State -->
-            <div v-else class="empty-state">
-              <ListTodoIcon :size="48" />
-              <h4>{{ t('pages.upload.taskQueue.empty') }}</h4>
-              <p>{{ t('pages.upload.taskQueue.emptyHint') }}</p>
-              <button class="action-btn primary" @click="addFilesToTask">
+            <div v-else class="flex h-full flex-col items-center gap-4 bg-bg-tertiary px-8 py-12 text-center">
+              <ListTodoIcon class="text-accent opacity-90" :size="48" />
+              <h4 class="m-0 text-xl font-semibold text-main">{{ t('pages.upload.taskQueue.empty') }}</h4>
+              <p class="m-0 max-w-[400px] text-base text-secondary">{{ t('pages.upload.taskQueue.emptyHint') }}</p>
+              <button
+                class="flex cursor-pointer items-center justify-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="addFilesToTask"
+              >
                 <PlusIcon :size="16" />
-                {{ t('pages.upload.taskQueue.selectFiles') }}
+                <span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
               </button>
             </div>
           </div>
@@ -583,7 +714,6 @@ import {
   Settings,
   SettingsIcon,
   StarIcon,
-  TimerIcon,
   Trash2Icon,
   UploadCloudIcon,
   XCircleIcon,
@@ -869,10 +999,6 @@ async function initConf() {
   useShortUrl.value = settingConfig?.useShortUrl || false
 }
 
-const advancedAnimation = computed(() => ({
-  advancedAnimation: enableAdvancedAnimation.value,
-}))
-
 function updatePasteStyle(style: string) {
   pasteStyle.value = style
   saveConfig({
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 2fe9577b..916a2797 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -1,2270 +1,20 @@
-@import url('./common/modal.css');
-@import url('./common/advancedAnimation.css');
-
-/* Global scrolling behavior */
-html, body {
-  overflow-x: hidden;
-}
-
-/* Container */
-.upload-container {
-  display: flex;
-  overflow-y: auto;
-  margin: 0;
-  padding: 1rem;
-  width: 100%;
-  min-height: 100vh;
-  flex-direction: column;
-  gap: 1.25rem;
-  box-sizing: border-box;
-}
-
-/* Card Base */
-.upload-card {
-  overflow: hidden;
-  border: 0.2px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  background: var(--color-background-secondary);
-  transition: var(--transition-medium);
-}
-
-.upload-card:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-}
-
-/* Compact cards styling */
-.actions-card,
-.settings-card {
-  border-radius: var(--radius-lg);
-}
-
-.actions-card .card-header,
-.settings-card .card-header {
-  padding: 0.875rem 1.25rem;
-}
-
-/* Header Card */
-.header-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 1rem 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.provider-section {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  max-width: calc(100% - 300px);
-}
-
-.provider-button {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 0.75rem 1rem;
-  width: auto;
-  min-width: 200px;
-  font-family: inherit;
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.75rem;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.provider-button:hover {
-  border-color: var(--color-accent-hover);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.add-favorite-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  width: 22px;
-  height: 22px;
-  font-family: inherit;
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.add-favorite-button.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.add-favorite-button:hover:not(:disabled) {
-  border-color: var(--color-accent-hover);
-  color: var(--color-accent-hover);
-  background: var(--color-surface);
-  transform: translateY(-1px);
-}
-
-.add-favorite-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.favorite-picbeds-container {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  flex-wrap: wrap;
-  max-width: 400px;
-}
-
-.favorite-picbeds-container .picbed-badge {
-  width: 85px;
-  font-size: 0.8125rem;
-}
-
-.favorite-picbeds-container.has-many {
-  max-width: 300px;
-}
-
-.picbed-badge {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
-  width: 85px;
-  font-family: inherit;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: all var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-}
-
-.picbed-badge:hover {
-  border-color: var(--color-accent-hover);
-  color: var(--color-accent-hover);
-  background: var(--color-background-tertiary);
-  transform: translateY(-1px);
-}
-
-.badge-text-mask {
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.badge-text-track {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.badge-text-track .badge-name.shadow-text {
-  display: none;
-}
-
-.picbed-badge:hover .badge-text-track {
-  display: flex;
-  width: fit-content;
-  text-overflow: clip;
-  animation: badge-scroll 5s linear infinite;
-}
-
-.picbed-badge:hover .badge-name {
-  padding-right: 20px;
-}
-
-.picbed-badge:hover .badge-name.shadow-text {
-  display: block;
-}
-
-@keyframes badge-scroll {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-.picbed-badge.is-active {
-  border-color: var(--color-accent-hover);
-  border-width: 0.1rem;
-  font-weight: 600;
-}
-
-.picbed-badge.show-delete {
-  padding-right: 0.5rem;
-}
-
-.badge-name {
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.badge-remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 50%;
-  padding: 0.125rem;
-  color: inherit;
-  background: transparent;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  flex-shrink: 0;
-  animation: fade-in 0.2s ease-in;
-}
-
-.badge-remove:hover {
-  color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger), transparent 80%);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Badges slide animation */
-.badges-slide-enter-active {
-  transition: all 0.3s ease;
-}
-
-.badges-slide-leave-active {
-  transition: all 0.3s ease;
-  position: absolute;
-}
-
-.badges-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-10px) scale(0.9);
-}
-
-.badges-slide-leave-to {
-  opacity: 0;
-  transform: translateX(10px) scale(0.9);
-}
-
-.badges-slide-move {
-  transition: transform 0.3s ease;
-}
-
-.provider-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
-}
-
-.provider-name {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  line-height: 1.2;
-}
-
-.provider-config {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  line-height: 1.2;
-}
-
-.provider-arrow {
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-}
-
-.provider-button:hover .provider-arrow {
-  color: var(--color-accent-hover);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.action-button:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-/* Segmented Button Group */
-.segmented-button-group {
-  display: inline-flex;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--color-background-secondary);
-}
+@import "tailwindcss" reference;
+@import "../../assets/css/theme.css" reference;
+@import "../../assets/css/utilities.css" reference;
 
 .segmented-button {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-right: 1px solid var(--color-border-secondary);
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.segmented-button:last-child {
-  border-right: none;
-}
-
-.segmented-button:hover {
-  color: var(--color-accent-hover);
-  background: var(--color-background-tertiary);
-}
-
-/* Main Upload Card */
-.main-card {
-  min-height: 300px;
-}
-
-.upload-zone {
-  position: relative;
-  margin: 1rem;
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-xl);
-  padding: 3rem 2rem;
-  background: var(--color-background-secondary);
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
-
-.upload-zone:hover,
-.upload-zone.drag-active {
-  border-color: var(--color-accent);
-  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, color-mix(in srgb, var(--color-accent), transparent 95%) 100%);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-
-.upload-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  text-align: center;
-}
-
-.upload-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 80px;
-  height: 80px;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition-medium);
-}
-
-.upload-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.upload-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.upload-subtitle {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.upload-formats {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-}
-
-.format-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-/* Progress */
-.progress-container {
-  margin: 1rem 1.5rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-surface-elevated);
-}
-
-.progress-bar {
-  overflow: hidden;
-  margin-bottom: 0.5rem;
-  border-radius: 3px;
-  height: 6px;
-  background: var(--color-border-secondary);
-}
-
-.progress-fill {
-  border-radius: 3px;
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
-  transition: width var(--transition-medium);
-}
-
-.progress-fill.progress-error {
-  background: var(--color-danger);
-}
-
-.progress-text {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-secondary);
+  @apply flex items-center border-none border-r-border-secondary border-r py-2.5 px-4 text-sm font-[inherit] font-medium text-secondary bg-transparent duration-fast ease-standard gap-2 cursor-pointer whitespace-nowrap last:border-r-0 hover:text-accent-hover hover:bg-bg-tertiary;
 }
 
 /* Quick Actions Card */
-.card-header {
-  padding: 1rem 1.5rem;
-}
-
-.card-title {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.quick-actions {
-  display: grid;
-  padding: 1rem 1.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 0.75rem;
-}
-
 .quick-action-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 0.875rem 1rem;
-  font-family: inherit;
-  text-align: left;
-  background: var(--color-background-secondary);
-  transition: var(--transition-medium);
-  flex-direction: row;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.quick-action-button:hover {
-  border-color: var(--color-accent-hover);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.quick-action-button .action-icon {
-  flex-shrink: 0;
-  color: var(--color-accent);
-}
-
-.quick-action-button span {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.quick-action-button.has-badge {
-  padding-right: 3rem;
-}
-
-.task-count-badge {
-  position: absolute;
-  top: 50%;
-  right: 0.75rem;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  padding: 0 0.375rem;
-  color: white;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  border-radius: 100px;
-  animation: badge-pulse 2s ease-in-out infinite;
-}
-
-@keyframes badge-pulse {
-  0%, 100% {
-    transform: translateY(-50%) scale(1);
-    box-shadow: 0 2px 6px rgb(0 122 255 / 40%);
-  }
-
-  50% {
-    transform: translateY(-50%) scale(1.1);
-    box-shadow: 0 2px 8px rgb(0 122 255 / 60%);
-  }
-}
-
-/* Settings Card */
-.settings-content {
-  display: flex;
-  padding: 1.25rem 1.5rem;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.setting-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-@media (width >= 768px) {
-  .settings-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-    align-items: start;
-  }
-
-  .quick-actions {
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  }
-}
-
-@media (width >= 1024px) {
-  .upload-container {
-    margin: 0 auto;
-    padding: 1.5rem 2rem;
-    max-width: 1200px;
-  }
-
-  .quick-actions {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  }
-
-  .settings-content {
-    gap: 2rem;
-  }
-}
-
-.setting-label {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.format-buttons {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
-  gap: 0.4rem;
-}
-
-.format-button {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.7rem;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.format-button:hover {
-  border-color: var(--color-accent-hover);
-  color: var(--color-text-primary);
-}
-
-.format-button.active {
-  border-color: var(--color-accent);
-  color: white;
-  background: var(--color-accent);
-}
-
-.url-toggle {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  width: 100%;
-  background: var(--color-background-secondary);
-}
-
-.toggle-button {
-  border: none;
-  padding: 0.325rem 0.675rem;
-  font-size: 0.8rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  transition: var(--transition-fast);
-  flex: 1;
-  cursor: pointer;
-}
-
-.toggle-button:hover {
-  color: var(--color-text-primary);
-}
-
-.toggle-button.active {
-  color: white;
-  background: var(--color-accent);
-}
-
-.toggle-button:first-child.active {
-  border-top-left-radius: calc(var(--radius-md) - 1px);
-  border-bottom-left-radius: calc(var(--radius-md) - 1px);
-}
-
-.toggle-button:last-child.active {
-  border-top-right-radius: calc(var(--radius-md) - 1px);
-  border-bottom-right-radius: calc(var(--radius-md) - 1px);
-}
-
-/* Transitions */
-.progress-enter-active,
-.progress-leave-active {
-  transition: all var(--transition-medium);
-}
-
-.progress-enter-from,
-.progress-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .upload-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-
-  .header-card .card-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .provider-section {
-    order: 1;
-  }
-
-  .header-actions {
-    order: 2;
-    justify-content: stretch;
-  }
-
-  .action-button {
-    flex: 1;
-    justify-content: center;
-  }
-
-  .upload-zone {
-    margin: 0.75rem;
-    padding: 2rem 1rem;
-  }
-
-  .upload-icon {
-    width: 60px;
-    height: 60px;
-  }
-
-  .quick-actions {
-    grid-template-columns: 1fr;
-    padding: 0.875rem 1rem;
-  }
-
-  .settings-content {
-    grid-template-columns: 1fr !important;
-    padding: 1rem 1.25rem;
-  }
-
-  .format-buttons {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
-  }
-}
-
-@media (width <= 480px) {
-  .upload-container {
-    padding: 0.5rem;
-  }
-
-  .upload-zone {
-    margin: 0.5rem;
-    padding: 1.5rem 1rem;
-  }
-
-  .upload-title {
-    font-size: 1.125rem;
-  }
-
-  .quick-action-button {
-    padding: 0.75rem 0.875rem;
-  }
-
-  .action-button {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8rem;
-  }
-
-  .provider-button {
-    width: 100%;
-    min-width: unset;
-  }
-}
-
-/* Animation for upload icon */
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.upload-zone.drag-active .upload-icon {
-  animation: float 1.5s ease-in-out infinite;
-}
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Focus styles for keyboard navigation */
-.provider-button:focus-visible,
-.action-button:focus-visible,
-.quick-action-button:focus-visible,
-.format-button:focus-visible,
-.toggle-button:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-.upload-zone:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 4px;
-}
-
-/* ========================================
-   Task Queue Components - Consolidated & Optimized
-   ======================================== */
-
-.task-main-info {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.priority-badge.high {
-  background: linear-gradient(135deg, var(--color-warning), #f39c12);
-  color: white;
-  box-shadow: 0 2px 6px rgb(243 156 18 / 35%);
-}
-
-.task-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  flex-wrap: wrap;
-}
-
-.task-status {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  padding: 0.25rem 0.625rem;
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-}
-
-.task-size {
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--color-text-tertiary);
-  padding: 0.25rem 0.5rem;
-  background: var(--color-surface);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border-secondary);
-}
-
-.retry-count {
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--color-warning);
-  padding: 0.25rem 0.5rem;
-  background: rgb(243 156 18 / 12%);
-  border-radius: var(--radius-sm);
-}
-
-.task-error {
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--color-danger);
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0.25rem 0.5rem;
-  background: rgb(231 76 60 / 10%);
-  border-radius: var(--radius-sm);
-}
-
-.task-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.task-btn:hover {
-  background: var(--color-surface-elevated);
-  transform: scale(1.1);
-}
-
-.task-btn.cancel:hover {
-  color: white;
-  background: var(--color-danger);
-  box-shadow: 0 2px 8px rgb(231 76 60 / 35%);
-}
-
-.task-btn.remove:hover {
-  color: white;
-  background: var(--color-warning);
-  box-shadow: 0 2px 8px rgb(243 156 18 / 35%);
-}
-
-.task-btn.retry:hover {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: 0 2px 8px rgb(0 122 255 / 35%);
-}
-
-.task-btn.move:hover {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: 0 2px 8px rgb(0 122 255 / 25%);
-}
-
-.task-btn.priority {
-  color: var(--color-text-tertiary);
-}
-
-.task-btn.priority:hover {
-  color: white;
-  background: var(--color-warning);
-  box-shadow: 0 2px 8px rgb(243 156 18 / 35%);
-}
-
-.task-btn.priority.is-high {
-  color: white;
-  background: linear-gradient(135deg, var(--color-warning), #f39c12);
-  box-shadow: 0 2px 8px rgb(243 156 18 / 35%);
-}
-
-.status-icon {
-  flex-shrink: 0;
-  margin-left: 0.375rem;
-}
-
-.status-icon.success {
-  color: var(--color-success);
-  filter: drop-shadow(0 2px 4px rgb(46 204 113 / 35%));
-}
-
-.status-icon.error {
-  color: var(--color-danger);
-  filter: drop-shadow(0 2px 4px rgb(231 76 60 / 35%));
-}
-
-.status-icon.loading {
-  color: var(--color-accent);
-  animation: spin 1s linear infinite;
-  filter: drop-shadow(0 2px 4px rgb(0 122 255 / 35%));
-}
-
-.status-icon.pending {
-  color: var(--color-text-tertiary);
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ========================================
-   Task List Animations - Enhanced
-   ======================================== */
-.task-list-enter-active,
-.task-list-leave-active {
-  transition: all var(--transition-medium);
-}
-
-.task-list-enter-from {
-  opacity: 0;
-  transform: translateX(-30px) scale(0.95);
-}
-
-.task-list-leave-to {
-  opacity: 0;
-  transform: translateX(30px) scale(0.95);
-}
-
-.task-list-move {
-  transition: transform var(--transition-medium);
-}
-
-/* Task item status text colors */
-.task-item.status-completed .task-filename {
-  color: var(--color-success);
-}
-
-.task-item.status-completed .task-status {
-  color: var(--color-success);
-  background: rgb(46 204 113 / 12%);
-}
-
-.task-item.status-failed .task-filename {
-  color: var(--color-danger);
-}
-
-.task-item.status-failed .task-status {
-  color: var(--color-danger);
-  background: rgb(231 76 60 / 12%);
-}
-
-.task-item.status-uploading .task-status {
-  color: var(--color-accent);
-  background: rgb(0 122 255 / 12%);
-}
-
-.task-item.status-cancelled .task-filename {
-  color: var(--color-text-tertiary);
-  text-decoration: line-through;
-}
-
-.task-item.status-cancelled .task-status {
-  color: var(--color-text-tertiary);
-  background: var(--color-surface-elevated);
-}
-
-/* ========================================
-   Empty Task List - Modern Design
-   ======================================== */
-.empty-task-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 2rem;
-  color: var(--color-text-tertiary);
-  gap: 1rem;
-}
-
-.empty-task-list svg {
-  color: var(--color-border);
-  opacity: 0.6;
-}
-
-.empty-task-list p {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-/* ========================================
-   Task Modal - Modern UI Design
-   ======================================== */
-.task-modal {
-  max-width: 520px;
-  width: 100%;
-  height: auto;
-  max-height: 80vh;
-  border-radius: var(--radius-2xl);
-  background: linear-gradient(
-    145deg,
-    var(--color-surface) 0%,
-    var(--color-background-secondary) 100%
-  );
-  box-shadow:
-    0 25px 50px -12px rgb(0 0 0 / 25%),
-    0 0 0 1px rgb(255 255 255 / 5%);
-  backdrop-filter: blur(20px);
-  overflow: hidden;
-}
-
-.task-modal .modal-header {
-  padding: 1.5rem 1.75rem;
-  background: linear-gradient(
-    180deg,
-    rgb(0 122 255 / 8%) 0%,
-    transparent 100%
-  );
-  border-bottom: 1px solid rgb(0 122 255 / 15%);
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.task-modal .modal-header::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 1.75rem;
-  right: 1.75rem;
-  height: 3px;
-  background: linear-gradient(90deg, var(--color-accent), var(--color-success));
-  border-radius: 0 0 var(--radius-full) var(--radius-full);
-}
-
-.task-modal .modal-header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.task-modal .modal-title {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  font-size: 1.35rem;
-  font-weight: 700;
-  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  letter-spacing: -0.025em;
-}
-
-.task-modal .modal-title svg {
-  color: var(--color-accent);
-  -webkit-text-fill-color: initial;
-}
-
-.task-modal .modal-subtitle {
-  display: block;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  color: var(--color-text-secondary);
-  -webkit-text-fill-color: var(--color-text-secondary);
-  background: none;
-}
-
-.task-modal .modal-close {
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: var(--color-surface-elevated);
-  transition: all 0.2s ease;
-}
-
-.task-modal .modal-close:hover {
-  background: var(--color-danger);
-  color: white;
-  transform: rotate(90deg);
-}
-
-.task-modal .modal-content {
-  padding: 1.75rem;
-  max-height: calc(80vh - 100px);
-  overflow: visible;
-}
-
-.task-dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
-}
-
-.task-dialog-settings {
-  padding: 1.5rem;
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-xl);
-  border: 1px solid var(--color-border-secondary);
-  position: relative;
-  overflow: hidden;
-}
-
-.task-dialog-settings::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgb(0 122 255 / 3%) 0%,
-    transparent 50%
-  );
-  pointer-events: none;
-}
-
-.task-dialog-settings .setting-group {
-  position: relative;
-  z-index: 1;
-}
-
-.task-dialog-settings .setting-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.task-dialog-settings .setting-label svg {
-  color: var(--color-accent);
-}
-
-.task-dialog-settings .setting-label::before {
-  display: none;
-}
-
-.task-dialog-settings .interval-input-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  transition: all 0.2s ease;
-}
-
-.task-dialog-settings .interval-input-group:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgb(0 122 255 / 15%);
-}
-
-.task-dialog-settings .interval-input {
-  width: 100px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  font-size: 1.25rem;
-  font-weight: 600;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-  color: var(--color-accent);
-  text-align: left;
-}
-
-.task-dialog-settings .interval-input:focus {
-  outline: none;
-}
-
-.task-dialog-settings .interval-unit {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-tertiary);
-  padding: 0.25rem 0.625rem;
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-md);
-}
-
-.task-dialog-settings .interval-hint {
-  display: block;
-  margin-top: 0.875rem;
-  padding: 0.75rem 1rem;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border-left: 3px solid var(--color-accent);
-}
-
-.task-dialog-actions {
-  display: flex;
-  justify-content: center;
-  padding-top: 0.5rem;
-}
-
-.task-dialog-actions .action-button {
-  padding: 1rem 2rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  border-radius: var(--radius-xl);
-  background: linear-gradient(135deg, var(--color-accent) 0%, rgb(0 100 220) 100%);
-  box-shadow:
-    0 4px 15px rgb(0 122 255 / 35%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
-  transition: all 0.25s ease;
-}
-
-.task-dialog-actions .action-button:hover {
-  transform: translateY(-2px);
-  box-shadow:
-    0 8px 25px rgb(0 122 255 / 45%),
-    inset 0 1px 0 rgb(255 255 255 / 20%);
-}
-
-.task-dialog-actions .action-button:active {
-  transform: translateY(0);
-  box-shadow:
-    0 2px 10px rgb(0 122 255 / 30%),
-    inset 0 1px 0 rgb(255 255 255 / 10%);
-}
-
-/* ========================================
-   Scrollbar Styling - Modern Design
-   ======================================== */
-.task-list::-webkit-scrollbar {
-  width: 8px;
-}
-
-.task-list::-webkit-scrollbar-track {
-  background: var(--color-surface);
-  border-radius: var(--radius-full);
-  margin: 4px 0;
-}
-
-.task-list::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, var(--color-border), var(--color-border-secondary));
-  border-radius: var(--radius-full);
-  border: 2px solid var(--color-surface);
-}
-
-.task-list::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, var(--color-accent), rgb(0 100 220));
-}
-
-/* ========================================
-   Responsive Adjustments - Task Card
-   ======================================== */
-@media (width <= 640px) {
-  .task-card::before {
-    height: 3px;
-  }
-
-  .task-header {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 1rem 1.25rem;
-  }
-
-  .task-header-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .task-action-btn {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.75rem;
-  }
-
-  .task-settings {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 1rem 1.25rem;
-  }
-
-  .interval-setting {
-    width: 100%;
-  }
-
-  .add-files-btn {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .task-filter-bar {
-    padding: 0.75rem 1rem;
-  }
-
-  .search-input-wrapper {
-    max-width: none;
-  }
-
-  .filter-buttons {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .task-list {
-    padding: 0.5rem;
-    max-height: 350px;
-  }
-
-  .task-item {
-    padding: 0.875rem 1rem;
-    border-radius: var(--radius-lg);
-  }
-
-  .overall-progress {
-    padding: 1rem 1.25rem;
-  }
-
-  .progress-details {
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-
-  .task-settings-panel {
-    padding: 1rem 1.25rem;
-  }
-
-  .settings-grid {
-    gap: 1rem;
-  }
-
-  .task-modal {
-    max-width: 100%;
-    margin: 0.5rem;
-    max-height: 90vh;
-  }
-
-  .task-modal .modal-header {
-    padding: 1.25rem;
-  }
-
-  .task-modal .modal-content {
-    padding: 1.25rem;
-  }
-
-  .task-dialog-settings {
-    padding: 1rem;
-  }
-
-  .task-dialog-settings .interval-input {
-    font-size: 1.125rem;
-  }
-}
-
-@media (width <= 480px) {
-  .task-header-left {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-
-  .task-action-btn span {
-    display: none;
-  }
-
-  .task-action-btn {
-    padding: 0.5rem;
-  }
-
-  .task-filename {
-    font-size: 0.8rem;
-  }
-
-  .task-meta {
-    gap: 0.375rem;
-  }
-
-  .task-status,
-  .task-size {
-    font-size: 0.65rem;
-    padding: 0.125rem 0.375rem;
-  }
-
-  .progress-bar-container {
-    height: 10px;
-  }
-
-  .filter-btn {
-    padding: 0.375rem 0.625rem;
-    font-size: 0.7rem;
-  }
-}
-
-/* ========================================
-   Task Queue Modal - Enhanced Design
-   ======================================== */
-.task-queue-modal {
-  max-width: 960px;
-  width: 92vw;
-  max-height: 88vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background-tertiary);
-  box-shadow:
-    0 25px 50px -12px rgb(0 0 0 / 25%),
-    0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.task-queue-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
-
-/* Action Bar - Enhanced */
-.task-action-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--color-border);
-  backdrop-filter: blur(10px);
-}
-
-.action-bar-left,
-.action-bar-right {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  flex-wrap: wrap;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  padding: 0.625rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  white-space: nowrap;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-}
-
-.action-btn:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  background: var(--color-surface-elevated);
-}
-
-.action-btn.primary {
-  background: var(--color-accent);
-  border-color: transparent;
-  color: white;
-  box-shadow: 0 2px 8px rgb(0 122 255 / 25%);
-}
-
-.action-btn.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgb(0 122 255 / 40%);
-}
-
-.action-btn.success {
-  background: var(--color-success);
-  border-color: transparent;
-  color: white;
-  box-shadow: 0 2px 8px rgb(52 199 89 / 25%);
-}
-
-.action-btn.success:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgb(52 199 89 / 40%);
-}
-
-.action-btn.warning {
-  background: var(--color-danger);
-  border-color: transparent;
-  color: white;
-  box-shadow: 0 2px 8px rgb(243 156 18 / 25%);
-}
-
-.action-btn.warning:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgb(243 156 18 / 40%);
-}
-
-.action-btn.danger {
-  background: var(--color-danger);
-  border-color: transparent;
-  color: white;
-  box-shadow: 0 2px 8px rgb(255 59 48 / 25%);
-}
-
-.action-btn.danger:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgb(255 59 48 / 40%);
-}
-
-.action-btn.active {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: white;
-  box-shadow: 0 2px 8px rgb(0 122 255 / 30%);
-}
-
-/* Overall Progress - Enhanced */
-.overall-progress {
-  padding: 1.25rem 1.25rem 1rem;
-  border-bottom: 1px solid var(--color-background-primary);
-}
-
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.875rem;
-}
-
-.progress-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.progress-percentage {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-accent);
-  line-height: 1;
-}
-
-.progress-bar-container {
-  height: 6px;
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-}
-
-.progress-bar-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-accent), var(--color-success));
-  border-radius: var(--radius-full);
-  transition: width var(--transition-medium);
-  box-shadow: 0 0 8px rgb(0 122 255 / 25%);
-}
-
-.progress-details {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.progress-detail-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  padding: 0.375rem 0;
-}
-
-.progress-detail-item svg {
-  color: var(--color-accent);
-}
-
-/* Settings Panel - Enhanced */
-.settings-panel {
-  padding: 1rem 1.25rem 1.25rem;
-  border-bottom: 1px solid var(--color-background-primary);
-  overflow: visible;
-}
-
-.settings-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  align-items: start;
-  gap: 1rem;
-}
-
-.setting-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-.setting-item.toggle-item {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.625rem 0.75rem;
-  background: transparent;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
-  min-height: 40px;
-}
-
-.setting-item.toggle-item:hover {
-  background: var(--color-surface-elevated);
-}
-
-.setting-checkbox {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: var(--color-accent);
-}
-
-.setting-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.setting-input:hover {
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.setting-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgb(0 122 255 / 10%);
-  background: white;
-}
-
-.setting-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  background: var(--color-surface);
-}
-
-.input-with-unit {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-
-.input-with-unit .setting-input {
-  flex: 1;
-}
-
-.input-unit {
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  padding: 0.5rem 0.625rem;
-  background: transparent;
-}
-
-.toggle-switch {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  border: none;
-  border-radius: var(--radius-full);
-  background: var(--color-surface);
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.toggle-switch.active {
-  background: var(--color-accent);
-}
-
-.toggle-slider {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: white;
-  transition: transform var(--transition-fast);
-  box-shadow: var(--shadow-sm);
-}
-
-.toggle-switch.active .toggle-slider {
-  transform: translateX(20px);
-}
-
-/* Filter & Search Bar - Enhanced */
-.filter-search-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.25rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  background:  var(--color-background-secondary);
-  transition: all var(--transition-fast);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-}
-
-.search-box:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgb(0 122 255 / 10%), 0 1px 2px rgb(0 0 0 / 5%);
-  background: white;
-}
-
-.search-box svg {
-  color: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.search-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  outline: none;
-}
-
-.search-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.filter-tabs {
-  display: flex;
-  gap: 0.625rem;
-  flex-wrap: wrap;
+  @apply relative flex items-center border border-border-secondary rounded-lg px-4 py-3.5 font-[inherit] text-left bg-bg-secondary duration-medium ease-standard gap-2 cursor-pointer hover:border-accent-hover hover:shadow-md hover:-translate-y-[2px] [.has-badge]:pr-12 max-xs:py-3 max-xs:px-3.5 focus-visible:focus-ring;
 }
 
 .filter-tab {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  white-space: nowrap;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-}
-
-.filter-tab:hover {
-  border-color: var(--color-accent);
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-}
-
-.filter-tab.active {
-  background: var(--color-accent);
-  border-color: transparent;
-  color: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 122 255 / 30%);
-}
-
-/* Task List Container - Enhanced */
-.task-list-container {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 300px;
-}
-
-.task-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.task-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-}
-
-.task-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: transparent;
-  transition: background 0.2s ease;
-}
-
-.task-item:last-child {
-  border-bottom: none;
-}
-
-.task-item:hover {
-  background: var(--color-surface-elevated);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
-}
-
-.task-item.status-completed {
-  background: rgb(52 199 89 / 3%);
-  opacity: 0.85;
-}
-
-.task-item.status-completed::before {
-  background: var(--color-success);
-}
-
-.task-item.status-failed {
-  background: rgb(255 59 48 / 3%);
-}
-
-.task-item.status-failed::before {
-  background: var(--color-error);
-}
-
-.task-item.status-uploading {
-  background: rgb(0 122 255 / 3%);
-}
-
-.task-item.status-uploading::before {
-  background: var(--color-accent);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.task-item.status-cancelled {
-  background: rgb(142 142 147 / 3%);
-  opacity: 0.6;
-}
-
-.task-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-
-.task-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.875rem;
-}
-
-.task-name {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  min-width: 0;
-  flex: 1;
-}
-
-.task-filename {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.priority-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  background: var(--color-warning);
-  border-radius: var(--radius-md);
-  color: white;
-  flex-shrink: 0;
-}
-
-.task-status-badge {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  padding: 0.25rem 0.625rem;
-  border-radius: var(--radius-full);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-}
-
-.task-status-badge.status-pending {
-  background: rgb(142 142 147 / 15%);
-  color: var(--color-text-secondary);
-}
-
-.task-status-badge.status-uploading {
-  background: rgb(0 122 255 / 15%);
-  color: var(--color-accent);
-}
-
-.task-status-badge.status-completed {
-  background: rgb(52 199 89 / 15%);
-  color: var(--color-success);
-}
-
-.task-status-badge.status-failed {
-  background: rgb(255 59 48 / 15%);
-  color: var(--color-error);
-}
-
-.task-status-badge.status-cancelled {
-  background: rgb(142 142 147 / 15%);
-  color: var(--color-text-tertiary);
-}
-
-.task-meta-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.task-meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-}
-
-.task-meta-item svg {
-  color: var(--color-text-secondary);
-}
-
-.task-meta-item.retry {
-  color: var(--color-warning);
-}
-
-.task-meta-item.error {
-  color: var(--color-error);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 200px;
-}
-
-.task-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
+  @apply py-2 px-4 text-sm font-medium border border-border-secondary rounded-md bg-bg-secondary text-secondary cursor-pointer transition-all duration-fast ease-standard whitespace-nowrap shadow-sm hover:border-accent hover:text-main hover:-translate-y-px hover:shadow-md [.active]:bg-accent [.active]:border-transparent [.active]:text-white [.active]:shadow-lg;
 }
 
 .task-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.task-icon-btn:hover {
-  border-color: var(--color-accent);
-  background: var(--color-accent);
-  color: white;
-  transform: translateY(-1px);
-}
-
-.task-icon-btn.priority.is-high {
-  background: var(--color-warning);
-  border-color: var(--color-warning);
-  color: white;
-}
-
-.task-icon-btn.danger:hover {
-  background: var(--color-error);
-  border-color: var(--color-error);
-  color: white;
-}
-
-.task-status-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-
-.task-status-icon .icon-success {
-  color: var(--color-success);
-}
-
-.task-status-icon .icon-error {
-  color: var(--color-error);
-}
-
-.task-status-icon .icon-loading {
-  color: var(--color-accent);
-}
-
-.task-status-icon .icon-pending {
-  color: var(--color-text-tertiary);
-}
-
-/* Empty State */
-.empty-state {
-  display: flex;
-  background: var(--color-background-tertiary);
-  flex-direction: column;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 2rem;
-  text-align: center;
-  gap: 1rem;
-}
-
-.empty-state svg {
-  color: var(--color-text-tertiary);
-  opacity: 0.5;
-}
-
-.empty-state h4 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.empty-state p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-  max-width: 400px;
-}
-
-/* Animations */
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.settings-slide-enter-active,
-.settings-slide-leave-active {
-  transition: all var(--transition-medium);
-}
-
-.settings-slide-enter-from,
-.settings-slide-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-.task-enter-active,
-.task-leave-active {
-  transition: all var(--transition-fast);
-}
-
-.task-enter-from {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.task-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.task-move {
-  transition: transform var(--transition-medium);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .task-queue-modal {
-    width: 95vw;
-    max-height: 90vh;
-  }
-
-  .task-action-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .action-bar-left,
-  .action-bar-right {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .filter-search-bar {
-    gap: 0.5rem;
-  }
-
-  .task-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .task-actions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  .task-meta-item.error {
-    max-width: 100%;
-  }
-
-  .settings-grid {
-    grid-template-columns: 1fr;
-    gap: 0.875rem;
-  }
-
-  .setting-item {
-    min-width: 0;
-  }
-}
-
-@media (width <= 640px) {
-  .settings-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .setting-item.toggle-item {
-    padding: 0.5rem;
-  }
-
-  .input-with-unit {
-    flex-direction: row;
-  }
-
-  .input-with-unit .setting-input {
-    max-width: 120px;
-  }
-}
-
-.icon-btn {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  transition: color 0.2s ease;
-}
-
-.icon-btn:hover {
-  color: var(--color-text-primary);
+  @apply flex items-center justify-center w-[32px] h-[32px] p-0 border border-border rounded-md bg-surface-elevated text-secondary cursor-pointer transition-all duration-fast ease-standard hover:border-accent hover:bg-accent hover:text-white hover:-translate-y-px [.is-high]:bg-warning [.is-high]:border-warning [.is-high]:text-white [.danger:hover]:bg-danger [.danger:hover]:border-danger [.danger:hover]:text-white;
 }
diff --git a/yarn.lock b/yarn.lock
index 9fb48654..6934473e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1369,6 +1369,14 @@
     minimatch "^9.0.3"
     plist "^3.1.0"
 
+"@emnapi/core@^1.7.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
+  integrity sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==
+  dependencies:
+    "@emnapi/wasi-threads" "1.1.0"
+    tslib "^2.4.0"
+
 "@emnapi/runtime@^1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.5.0.tgz#9aebfcb9b17195dce3ab53c86787a6b7d058db73"
@@ -1376,6 +1384,20 @@
   dependencies:
     tslib "^2.4.0"
 
+"@emnapi/runtime@^1.7.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
+  integrity sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
+  dependencies:
+    tslib "^2.4.0"
+
 "@esbuild/aix-ppc64@0.25.12":
   version "0.25.12"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz#80fcbe36130e58b7670511e888b8e88a259ed76c"
@@ -2448,7 +2470,7 @@
     "@jridgewell/sourcemap-codec" "^1.5.0"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@jridgewell/remapping@^2.3.5":
+"@jridgewell/remapping@^2.3.4", "@jridgewell/remapping@^2.3.5":
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1"
   integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
@@ -2527,6 +2549,15 @@
     lodash "^4.17.15"
     tmp-promise "^3.0.2"
 
+"@napi-rs/wasm-runtime@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz#c3705ab549d176b8dc5172723d6156c3dc426af2"
+  integrity sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@tybys/wasm-util" "^0.10.1"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3365,6 +3396,113 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tailwindcss/node@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.1.18.tgz#9863be0d26178638794a38d6c7c14666fb992e8a"
+  integrity sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.4"
+    enhanced-resolve "^5.18.3"
+    jiti "^2.6.1"
+    lightningcss "1.30.2"
+    magic-string "^0.30.21"
+    source-map-js "^1.2.1"
+    tailwindcss "4.1.18"
+
+"@tailwindcss/oxide-android-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz#79717f87e90135e5d3d23a3d3aecde4ca5595dd5"
+  integrity sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==
+
+"@tailwindcss/oxide-darwin-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz#7fa47608d62d60e9eb020682249d20159667fbb0"
+  integrity sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==
+
+"@tailwindcss/oxide-darwin-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz#c05991c85aa2af47bf9d1f8172fe9e4636591e79"
+  integrity sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==
+
+"@tailwindcss/oxide-freebsd-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz#3d48e8d79fd08ece0e02af8e72d5059646be34d0"
+  integrity sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz#982ecd1a65180807ccfde67dc17c6897f2e50aa8"
+  integrity sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz#df49357bc9737b2e9810ea950c1c0647ba6573c3"
+  integrity sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz#b266c12822bf87883cf152615f8fffb8519d689c"
+  integrity sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz#5c737f13dd9529b25b314e6000ff54e05b3811da"
+  integrity sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==
+
+"@tailwindcss/oxide-linux-x64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz#3380e17f7be391f1ef924be9f0afe1f304fe3478"
+  integrity sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==
+
+"@tailwindcss/oxide-wasm32-wasi@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz#9464df0e28a499aab1c55e97682be37b3a656c88"
+  integrity sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@emnapi/wasi-threads" "^1.1.0"
+    "@napi-rs/wasm-runtime" "^1.1.0"
+    "@tybys/wasm-util" "^0.10.1"
+    tslib "^2.4.0"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz#bbcdd59c628811f6a0a4d5b09616967d8fb0c4d4"
+  integrity sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==
+
+"@tailwindcss/oxide-win32-x64-msvc@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz#9c628d04623aa4c3536c508289f58d58ba4b3fb1"
+  integrity sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==
+
+"@tailwindcss/oxide@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.1.18.tgz#c8335cd0a83e9880caecd60abf7904f43ebab582"
+  integrity sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.1.18"
+    "@tailwindcss/oxide-darwin-arm64" "4.1.18"
+    "@tailwindcss/oxide-darwin-x64" "4.1.18"
+    "@tailwindcss/oxide-freebsd-x64" "4.1.18"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.1.18"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.1.18"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.1.18"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.1.18"
+    "@tailwindcss/oxide-linux-x64-musl" "4.1.18"
+    "@tailwindcss/oxide-wasm32-wasi" "4.1.18"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.1.18"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.1.18"
+
+"@tailwindcss/vite@^4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/vite/-/vite-4.1.18.tgz#614b9d5483559518c72d31bca05d686f8df28e9a"
+  integrity sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==
+  dependencies:
+    "@tailwindcss/node" "4.1.18"
+    "@tailwindcss/oxide" "4.1.18"
+    tailwindcss "4.1.18"
+
 "@tanstack/virtual-core@3.13.12":
   version "3.13.12"
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
@@ -3415,6 +3553,13 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
+"@tybys/wasm-util@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
+  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
+  dependencies:
+    tslib "^2.4.0"
+
 "@types/adm-zip@^0.5.7":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@types/adm-zip/-/adm-zip-0.5.7.tgz#eec10b6f717d3948beb64aca0abebc4b344ac7e9"
@@ -5634,6 +5779,11 @@ detect-libc@^2.0.1:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.4.tgz#f04715b8ba815e53b4d8109655b6508a6865a7e8"
   integrity sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==
 
+detect-libc@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
+
 detect-libc@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.1.tgz#9f1e511ace6bb525efea4651345beac424dac7b9"
@@ -5949,6 +6099,14 @@ enhanced-resolve@^5.17.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.18.3:
+  version "5.18.4"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz#c22d33055f3952035ce6a144ce092447c525f828"
+  integrity sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -7927,6 +8085,11 @@ jiti@^2.4.1:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.5.1.tgz#bd099c1c2be1c59bbea4e5adcd127363446759d0"
   integrity sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==
 
+jiti@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.6.1.tgz#178ef2fc9a1a594248c20627cd820187a4d78d92"
+  integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
+
 jpeg-js@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
@@ -8138,6 +8301,80 @@ libheif-js@^1.19.8:
   resolved "https://registry.yarnpkg.com/libheif-js/-/libheif-js-1.19.8.tgz#fcbf3571ef28b6199dd052bc4d2cb7cce56ddf06"
   integrity sha512-vQJWusIxO7wavpON1dusciL8Go9jsIQ+EUrckauFYAiSTjcmLAsuJh3SszLpvkwPci3JcL41ek2n+LUZGFpPIQ==
 
+lightningcss-android-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz#6966b7024d39c94994008b548b71ab360eb3a307"
+  integrity sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==
+
+lightningcss-darwin-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz#a5fa946d27c029e48c7ff929e6e724a7de46eb2c"
+  integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
+
+lightningcss-darwin-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz#5ce87e9cd7c4f2dcc1b713f5e8ee185c88d9b7cd"
+  integrity sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==
+
+lightningcss-freebsd-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz#6ae1d5e773c97961df5cff57b851807ef33692a5"
+  integrity sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==
+
+lightningcss-linux-arm-gnueabihf@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz#62c489610c0424151a6121fa99d77731536cdaeb"
+  integrity sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==
+
+lightningcss-linux-arm64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz#2a3661b56fe95a0cafae90be026fe0590d089298"
+  integrity sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==
+
+lightningcss-linux-arm64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz#d7ddd6b26959245e026bc1ad9eb6aa983aa90e6b"
+  integrity sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==
+
+lightningcss-linux-x64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz#5a89814c8e63213a5965c3d166dff83c36152b1a"
+  integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
+
+lightningcss-linux-x64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz#808c2e91ce0bf5d0af0e867c6152e5378c049728"
+  integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
+
+lightningcss-win32-arm64-msvc@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz#ab4a8a8a2e6a82a4531e8bbb6bf0ff161ee6625a"
+  integrity sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==
+
+lightningcss-win32-x64-msvc@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz#f01f382c8e0a27e1c018b0bee316d210eac43b6e"
+  integrity sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==
+
+lightningcss@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.30.2.tgz#4ade295f25d140f487d37256f4cd40dc607696d0"
+  integrity sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==
+  dependencies:
+    detect-libc "^2.0.3"
+  optionalDependencies:
+    lightningcss-android-arm64 "1.30.2"
+    lightningcss-darwin-arm64 "1.30.2"
+    lightningcss-darwin-x64 "1.30.2"
+    lightningcss-freebsd-x64 "1.30.2"
+    lightningcss-linux-arm-gnueabihf "1.30.2"
+    lightningcss-linux-arm64-gnu "1.30.2"
+    lightningcss-linux-arm64-musl "1.30.2"
+    lightningcss-linux-x64-gnu "1.30.2"
+    lightningcss-linux-x64-musl "1.30.2"
+    lightningcss-win32-arm64-msvc "1.30.2"
+    lightningcss-win32-x64-msvc "1.30.2"
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -9456,6 +9693,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz#8de2039fc0363b8532ef5a2d3fc9e2c1b6ca3bd4"
+  integrity sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==
+
 prettier@^3.7.4:
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.7.4.tgz#d2f8335d4b1cec47e1c8098645411b0c9dff9c0f"
@@ -10612,6 +10854,11 @@ table@^6.9.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tailwindcss@4.1.18, tailwindcss@^4.1.18:
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.18.tgz#f488ba47853abdb5354daf9679d3e7791fc4f4e3"
+  integrity sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==
+
 tapable@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.2.tgz#ab4984340d30cb9989a490032f086dbb8b56d872"