diff --git a/src/App.vue b/src/App.vue
index 66dcf8f..8788471 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -251,9 +251,9 @@ const translate = async () => {
 </script>
 
 <template>
-  <div class="h-screen bg-[#f9fafb] dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
+  <div class="h-screen bg-slate-100/50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
     <!-- Header -->
-    <header class="h-14 border-b dark:border-slate-800 bg-[#f9fafb] dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
+    <header class="h-14 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
       <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
         <Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
         <h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
@@ -286,10 +286,10 @@ const translate = async () => {
 
     <main class="flex-1 flex overflow-hidden min-h-0 relative">
       <!-- Translation View -->
-      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/80 dark:bg-slate-900 overflow-hidden h-full">
+      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
         <!-- Source Pane -->
         <div class="flex-1 flex flex-col min-h-0 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/80 dark:bg-slate-800/30 relative z-40 shrink-0">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Source Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -345,7 +345,7 @@ const translate = async () => {
                     ></textarea>
           
                     <!-- Context Input Area -->
-                    <div class="px-6 py-3 bg-slate-100/30 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
+                    <div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
                        <div class="flex items-center justify-between mb-1.5 h-5">
                           <div class="flex items-center gap-1.5">
                             <FileText class="w-4 h-4 text-slate-400" />
@@ -367,7 +367,7 @@ const translate = async () => {
                        ></textarea>
                     </div>
           
-                    <div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0">            <button 
+                    <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end shrink-0">            <button 
               @click="translate"
               :disabled="isTranslating || !sourceText.trim()"
               class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
@@ -380,8 +380,8 @@ const translate = async () => {
         </div>
 
         <!-- Target Pane -->
-        <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
+        <div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Target Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -525,18 +525,18 @@ const translate = async () => {
       </div>
 
       <!-- Settings View -->
-      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
+      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
         <div class="max-w-2xl mx-auto space-y-8">
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
+            <div class="bg-white/60 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
               <div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
                 暂无预设配置
               </div>
               <div 
                 v-for="profile in settings.profiles" 
                 :key="profile.id"
-                class="p-3 flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
+                class="p-3 flex items-center justify-between group hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
               >
                 <div class="flex flex-col gap-0.5 min-w-0">
                   <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
@@ -601,7 +601,7 @@ const translate = async () => {
                 </button>
               </div>
             </div>
-            <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
+            <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
               <div class="space-y-2">
                 <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
                 <input 
@@ -652,7 +652,7 @@ const translate = async () => {
 
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
-            <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
+            <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
               <div class="space-y-2">
                 <div class="flex items-center justify-between">
                   <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -673,7 +673,7 @@ const translate = async () => {
       </div>
 
       <!-- Logs View -->
-      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
+      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
         <div class="max-w-3xl mx-auto space-y-6">
           <div class="flex items-center justify-between">
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">日志</h2>
@@ -685,7 +685,7 @@ const translate = async () => {
               清空
             </button>
           </div>
-          <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
+          <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
             <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
               暂无日志记录。请尝试进行翻译。
             </div>
@@ -713,7 +713,7 @@ const translate = async () => {
     </main>
 
     <!-- Footer -->
-    <footer class="h-8 bg-slate-100 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
+    <footer class="h-8 bg-slate-200/40 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
       <div class="text-[10px] text-slate-400 dark:text-slate-500">
         {{ settings.apiBaseUrl }}
       </div>