diff --git a/package.json b/package.json
index ae91b7ac..150816e1 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,6 @@
     "@piclist/i18n": "^2.0.0",
     "@piclist/store": "^3.0.1",
     "@smithy/node-http-handler": "^4.4.7",
-    "@vueuse/core": "^14.1.0",
     "adm-zip": "^0.5.16",
     "ali-oss": "^6.23.0",
     "axios": "^1.13.2",
@@ -67,7 +66,6 @@
     "lodash-es": "^4.17.22",
     "marked": "^17.0.1",
     "mime": "^4.1.0",
-    "mitt": "^3.0.1",
     "multer": "^2.0.2",
     "node-ssh-no-cpu-features": "^2.0.0",
     "nodejs-file-downloader": "^4.13.0",
@@ -104,6 +102,7 @@
     "@types/write-file-atomic": "^4.0.3",
     "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-vue": "^6.0.3",
+    "@vueuse/core": "^14.1.0",
     "baseline-browser-mapping": "^2.9.13",
     "dexie": "^3.2.4",
     "dotenv": "^17.2.3",
@@ -123,6 +122,7 @@
     "husky": "^9.1.7",
     "js-yaml": "^4.1.1",
     "lucide-vue-next": "^0.562.0",
+    "mitt": "^3.0.1",
     "node-bump-version": "^2.0.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
diff --git a/src/renderer/components/ImageLocal.vue b/src/renderer/components/ImageLocal.vue
index 00cb5a14..a57c402d 100644
--- a/src/renderer/components/ImageLocal.vue
+++ b/src/renderer/components/ImageLocal.vue
@@ -90,7 +90,7 @@ onBeforeMount(async () => {
 .loading-spinner {
   border: 2px solid #e4e7ed;
   border-top: 2px solid #409eff;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 24px;
   height: 24px;
   animation: spin 1s linear infinite;
diff --git a/src/renderer/components/ImagePreSign.vue b/src/renderer/components/ImagePreSign.vue
index 38bf639e..03104b91 100644
--- a/src/renderer/components/ImagePreSign.vue
+++ b/src/renderer/components/ImagePreSign.vue
@@ -106,7 +106,7 @@ onMounted(getUrl)
 .loading-spinner {
   border: 2px solid #e4e7ed;
   border-top: 2px solid #409eff;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 24px;
   height: 24px;
   animation: spin 1s linear infinite;
diff --git a/src/renderer/components/ImageWebdav.vue b/src/renderer/components/ImageWebdav.vue
index b27ed14c..083b8919 100644
--- a/src/renderer/components/ImageWebdav.vue
+++ b/src/renderer/components/ImageWebdav.vue
@@ -134,7 +134,7 @@ onMounted(fetchImage)
 .loading-spinner {
   border: 2px solid #e4e7ed;
   border-top: 2px solid #409eff;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 24px;
   height: 24px;
   animation: spin 1s linear infinite;
diff --git a/src/renderer/components/css/FirstTimeGuide.css b/src/renderer/components/css/FirstTimeGuide.css
index 43529534..209a65a1 100644
--- a/src/renderer/components/css/FirstTimeGuide.css
+++ b/src/renderer/components/css/FirstTimeGuide.css
@@ -19,7 +19,7 @@
 .guide-spotlight {
   position: absolute;
   border: 2px solid var(--color-accent);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   box-shadow:
     0 0 0 9999px rgb(0 0 0 / 10%),
     0 0 20px rgb(255 255 255 / 30%),
@@ -33,7 +33,7 @@
   position: absolute;
   background: var(--color-background-tertiary);
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
   width: 420px;
   max-width: 90vw;
@@ -44,7 +44,7 @@
 }
 
 .guide-overlay.advancedAnimation .guide-card {
-  animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: slide-up var(--transition-bounce-slow);
 }
 
 .guide-header {
@@ -79,7 +79,7 @@
   color: var(--color-text-secondary);
   cursor: pointer;
   padding: 4px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -102,7 +102,7 @@
   width: 40px;
   height: 40px;
   flex-shrink: 0;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: var(--color-accent);
   display: flex;
   align-items: center;
@@ -131,7 +131,7 @@
 
 .guide-additional-info {
   background: var(--color-background-tertiary);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 10px 12px;
   margin-top: 10px;
 }
@@ -166,7 +166,7 @@
 .progress-dot {
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   background: var(--color-border);
   transition: all 0.3s;
 }
@@ -189,7 +189,7 @@
 
 .guide-btn {
   padding: 6px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
index 3e2ee310..e90d5fbe 100644
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -13,11 +13,9 @@
   display: flex;
   margin-bottom: 2rem;
   border: 1px solid var(--color-border);
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   padding: 6px;
-  box-shadow:
-    0 2px 12px rgb(0 0 0 / 6%),
-    inset 0 1px 0 rgb(255 255 255 / 5%);
+  box-shadow:var(--shadow-sm);
 }
 
 .tab-indicator {
@@ -25,11 +23,11 @@
   top: 6px;
   left: 6px;
   z-index: 0;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   height: calc(100% - 12px);
   background: var(--color-accent);
-  box-shadow: 0 2px 8px rgb(64 158 255 / 35%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-medium);
 }
 
 .tab-button {
@@ -39,7 +37,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.875rem 1.25rem;
   font-size: 0.9rem;
   font-weight: 600;
@@ -92,19 +90,15 @@
 /* ==================== Settings Section ==================== */
 .settings-section {
   border: 1px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   padding: 1.75rem;
   background: var(--color-background-primary);
-  box-shadow:
-    0 2px 12px rgb(0 0 0 / 5%),
-    0 1px 2px rgb(0 0 0 / 3%);
+  box-shadow: var(--shadow-sm);
   transition: all 0.25s ease;
 }
 
 .settings-section:hover {
-  box-shadow:
-    0 4px 20px rgb(0 0 0 / 8%),
-    0 2px 4px rgb(0 0 0 / 4%);
+  box-shadow: var(--shadow-md);
 }
 
 /* Section Header with Icon */
@@ -119,7 +113,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 30px;
   height: 30px;
   color: var(--color-accent);
@@ -175,7 +169,7 @@
 .form-input,
 .form-textarea {
   border: 1.5px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.875rem 1rem;
   width: 100%;
   font-size: 0.9rem;
@@ -194,7 +188,7 @@
 .form-textarea:focus {
   border-color: var(--color-accent);
   outline: none;
-  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
+  box-shadow: var(--shadow-sm);
 }
 
 .form-textarea {
@@ -217,13 +211,11 @@
 
 .form-range::-webkit-slider-thumb {
   border: 2px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 22px;
   height: 22px;
   background: var(--color-accent);
-  box-shadow:
-    0 2px 8px rgb(64 158 255 / 40%),
-    0 1px 2px rgb(0 0 0 / 10%);
+  box-shadow: var(--shadow-sm);
   appearance: none;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -231,20 +223,16 @@
 
 .form-range::-webkit-slider-thumb:hover {
   transform: scale(1.1);
-  box-shadow:
-    0 4px 12px rgb(64 158 255 / 50%),
-    0 2px 4px rgb(0 0 0 / 15%);
+  box-shadow: var(--shadow-md);
 }
 
 .form-range::-moz-range-thumb {
   border: 2px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 22px;
   height: 22px;
   background: var(--color-accent);
-  box-shadow:
-    0 2px 8px rgb(64 158 255 / 40%),
-    0 1px 2px rgb(0 0 0 / 10%);
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
 }
 
@@ -253,7 +241,7 @@
   justify-content: center;
   align-items: center;
   margin-top: 0.5rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.375rem 0.75rem;
   min-width: 3.5rem;
   font-size: 0.8rem;
@@ -261,14 +249,14 @@
   text-align: center;
   color: white;
   background: var(--color-accent);
-  box-shadow: 0 2px 6px rgb(64 158 255 / 30%);
+  box-shadow: var(--shadow-sm);
 }
 
 /* ==================== Color Input ==================== */
 .form-color {
   overflow: hidden;
   border: 2px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 2px;
   width: 48px;
   height: 48px;
@@ -279,7 +267,7 @@
 
 .form-color:hover {
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
+  box-shadow: var(--shadow-sm);
 }
 
 .form-color:focus {
@@ -311,7 +299,7 @@
   display: flex;
   align-items: center;
   border: 1.5px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.125rem 1.25rem;
   background: var(--color-background-primary);
   transition: all 0.25s ease;
@@ -331,12 +319,12 @@
 
 .switch-slider {
   position: relative;
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   width: 52px;
   height: 28px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   flex-shrink: 0;
 }
 
@@ -344,14 +332,14 @@
   position: absolute;
   top: 3px;
   left: 3px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 22px;
   height: 22px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: '';
 }
 
@@ -396,7 +384,7 @@
   display: flex;
   align-items: center;
   border: 1.5px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.75rem 1rem;
   background: var(--color-background-primary);
   transition: all 0.25s ease;
@@ -416,7 +404,7 @@
 .radio-indicator {
   position: relative;
   border: 2px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 18px;
   height: 18px;
   background: var(--color-background-primary);
@@ -432,7 +420,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 10px;
   height: 10px;
   background: var(--color-accent);
@@ -456,7 +444,7 @@
 
 .position-button {
   border: 1.5px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.875rem;
   font-size: 0.8rem;
   font-weight: 600;
@@ -487,7 +475,7 @@
   display: inline-flex;
   align-items: center;
   border: 1.5px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.75rem 1.25rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -509,7 +497,7 @@
 small {
   display: block;
   margin-top: 0.5rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
   color: var(--color-text-tertiary);
@@ -609,7 +597,7 @@ small {
   overflow-y: auto;
   margin-top: 0.75rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0;
   max-height: 400px;
   background: var(--color-background-tertiary);
@@ -660,7 +648,7 @@ small {
 .placeholder-item code {
   margin-right: 0.875rem;
   border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.3rem 0.6rem;
   min-width: 80px;
   font-size: 1rem;
@@ -686,12 +674,12 @@ small {
 }
 
 .placeholder-help::-webkit-scrollbar-track {
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: transparent;
 }
 
 .placeholder-help::-webkit-scrollbar-thumb {
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: var(--color-border);
   transition: background 0.2s ease;
 }
@@ -704,7 +692,7 @@ small {
 .rename-toggle-card {
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-tertiary);
 }
diff --git a/src/renderer/components/css/InputBox.css b/src/renderer/components/css/InputBox.css
index 350c3206..47187973 100644
--- a/src/renderer/components/css/InputBox.css
+++ b/src/renderer/components/css/InputBox.css
@@ -10,7 +10,7 @@
 }
 
 .inputbox-scale-enter-active {
-  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--transition-bounce-md);
 }
 
 .inputbox-scale-leave-active {
diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/components/css/NavigationPage.css
index c03d3503..f0c9b301 100644
--- a/src/renderer/components/css/NavigationPage.css
+++ b/src/renderer/components/css/NavigationPage.css
@@ -74,7 +74,7 @@
 
 .app-version {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 3px 8px;
   font-size: 10px;
   font-weight: 500;
@@ -151,7 +151,7 @@
   bottom: 4px;
   left: 4px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 8px;
   color: var(--color-text-tertiary);
   background: transparent;
@@ -222,7 +222,7 @@
 .submenu-item {
   display: flex;
   align-items: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.5rem 1rem;
   font-size: 0.8125rem;
   font-weight: 500;
@@ -271,7 +271,7 @@
 .dialog-panel {
   overflow: visible;
   border: 1px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   width: 100%;
   max-width: 500px;
   background: var(--color-background-tertiary);
diff --git a/src/renderer/components/css/PerPicbedSetting.css b/src/renderer/components/css/PerPicbedSetting.css
index 8dcf5eea..916c91b1 100644
--- a/src/renderer/components/css/PerPicbedSetting.css
+++ b/src/renderer/components/css/PerPicbedSetting.css
@@ -15,7 +15,7 @@
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -55,7 +55,7 @@
 .map-settings-panel {
   margin-top: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1rem;
   background: var(--color-background-secondary);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -80,7 +80,7 @@
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.75rem;
   background: var(--color-background-primary);
   transition: all 0.2s ease;
@@ -119,7 +119,7 @@
 
 .switch-slider {
   position: relative;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   width: 44px;
   height: 24px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
@@ -131,14 +131,14 @@
   position: absolute;
   top: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 20px;
   height: 20px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: '';
 }
 
@@ -158,7 +158,7 @@
 .form-range,
 .form-color {
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   color: var(--color-text-primary);
   background: var(--color-background-primary);
   outline: none;
@@ -187,7 +187,7 @@
 
 .form-range.small::-webkit-slider-thumb {
   border: 2px solid #ffffff;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 18px;
   height: 18px;
   background: var(--color-accent);
@@ -198,7 +198,7 @@
 
 .form-range.small::-moz-range-thumb {
   border: 2px solid #ffffff;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 18px;
   height: 18px;
   background: var(--color-accent);
@@ -275,7 +275,7 @@
 .radio-indicator {
   position: relative;
   border: 2px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 14px;
   height: 14px;
   background: var(--color-background-primary);
@@ -291,7 +291,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 6px;
   height: 6px;
   background: var(--color-accent);
diff --git a/src/renderer/components/css/UnifiedConfigForm.css b/src/renderer/components/css/UnifiedConfigForm.css
index 36fab031..76c86e04 100644
--- a/src/renderer/components/css/UnifiedConfigForm.css
+++ b/src/renderer/components/css/UnifiedConfigForm.css
@@ -48,7 +48,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   padding: 2px;
   color: var(--color-text-secondary);
   transition: var(--transition-fast);
@@ -255,7 +255,7 @@
   height: 1.5rem;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   transition: var(--transition-fast);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   flex-shrink: 0;
 }
 
@@ -263,7 +263,7 @@
   position: absolute;
   top: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 1.25rem;
   height: 1.25rem;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
diff --git a/src/renderer/components/ui/ConfirmMessageBox.vue b/src/renderer/components/ui/ConfirmMessageBox.vue
index e573d30d..65774e23 100644
--- a/src/renderer/components/ui/ConfirmMessageBox.vue
+++ b/src/renderer/components/ui/ConfirmMessageBox.vue
@@ -120,7 +120,7 @@ export default {
 }
 
 .messagebox-scale-enter-active {
-  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--transition-bounce-md);
 }
 
 .messagebox-scale-leave-active {
@@ -206,7 +206,7 @@ export default {
   border-radius: 0.625rem;
   width: 3rem;
   height: 3rem;
-  animation: icon-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: icon-pop var(--transition-bounce-slow);
 }
 
 @keyframes icon-pop {
diff --git a/src/renderer/layouts/Main.vue b/src/renderer/layouts/Main.vue
index 60127402..01a430bc 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@@ -82,9 +82,12 @@ export default { name: 'MainPage' }
   --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 {
@@ -115,9 +118,12 @@ export default { name: 'MainPage' }
   --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 {
@@ -168,7 +174,7 @@ body {
 
 ::-webkit-scrollbar-thumb {
   border: 3px solid var(--color-background-primary);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background-color: var(--color-border);
   transition: background-color var(--transition-fast);
 }
@@ -183,7 +189,7 @@ body {
 
 ::selection {
   color: var(--color-text-primary);
-  background-color: rgb(0 122 255 / 20%);
+  background-color: color-mix(in srgb, var(--color-accent), transparent 80%);
 }
 
 :focus {
diff --git a/src/renderer/manage/components/CustomSwitch.vue b/src/renderer/manage/components/CustomSwitch.vue
index 61277372..1866292b 100644
--- a/src/renderer/manage/components/CustomSwitch.vue
+++ b/src/renderer/manage/components/CustomSwitch.vue
@@ -86,7 +86,7 @@ const toggleTooltip = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   padding: 2px;
   width: 20px;
   height: 20px;
@@ -147,7 +147,7 @@ const toggleTooltip = () => {
   border-radius: 24px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   cursor: pointer;
 }
 
@@ -155,14 +155,14 @@ const toggleTooltip = () => {
   position: absolute;
   bottom: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 17px;
   height: 17px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: '';
 }
 
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index d60f32f0..ed3cee75 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -929,7 +929,7 @@
   border-radius: 24px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   cursor: pointer;
 }
 
@@ -937,14 +937,14 @@
   position: absolute;
   bottom: 3px;
   left: 3px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 18px;
   height: 18px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: "";
 }
 
@@ -1080,7 +1080,7 @@ input:checked + .switch-slider::before {
   position: absolute;
   top: 0.25rem;
   right: 0.25rem;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.125rem 0.375rem;
   min-width: 16px;
   font-size: 0.625rem;
@@ -1354,7 +1354,7 @@ input:checked + .switch-slider::before {
   width: 16px;
   height: 16px;
   border: 2px solid rgb(255 255 255 / 30%);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   border-top: 2px solid #ffffff;
   margin-right: 0.5rem;
   animation: spin 1s linear infinite;
diff --git a/src/renderer/manage/pages/css/LoginPage.css b/src/renderer/manage/pages/css/LoginPage.css
index cc08d971..dbdaa64a 100644
--- a/src/renderer/manage/pages/css/LoginPage.css
+++ b/src/renderer/manage/pages/css/LoginPage.css
@@ -433,7 +433,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 20px;
   height: 20px;
   color: var(--color-text-primary);
@@ -489,10 +489,10 @@
 .switch-slider {
   position: absolute;
   inset: 0;
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   cursor: pointer;
 }
 
@@ -500,14 +500,14 @@
   position: absolute;
   bottom: 3px;
   left: 3px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 18px;
   height: 18px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: "";
 }
 
diff --git a/src/renderer/manage/pages/css/ManageMain.css b/src/renderer/manage/pages/css/ManageMain.css
index 2277f4e0..9ab01c21 100644
--- a/src/renderer/manage/pages/css/ManageMain.css
+++ b/src/renderer/manage/pages/css/ManageMain.css
@@ -148,7 +148,7 @@ html, body {
 .loading-spinner {
   border: 2px solid var(--color-border);
   border-top: 2px solid var(--color-accent);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 20px;
   height: 20px;
   animation: spin 1s linear infinite;
@@ -355,7 +355,7 @@ html, body {
   justify-content: center;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 32px;
   height: 32px;
   font-size: 1.5rem;
@@ -664,7 +664,7 @@ html, body {
   position: absolute;
   top: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 1.25rem;
   height: 1.25rem;
   background: white;
diff --git a/src/renderer/manage/pages/css/ManageSetting.css b/src/renderer/manage/pages/css/ManageSetting.css
index 1cb01e1a..bd666554 100644
--- a/src/renderer/manage/pages/css/ManageSetting.css
+++ b/src/renderer/manage/pages/css/ManageSetting.css
@@ -262,7 +262,7 @@
 .radio-custom {
   position: relative;
   border: 2px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 1.25rem;
   height: 1.25rem;
   background: var(--color-background-tiertiary);
@@ -274,7 +274,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 8px;
   height: 8px;
   background: var(--color-accent);
diff --git a/src/renderer/pages/MiniPage.vue b/src/renderer/pages/MiniPage.vue
index 8e753181..df9c26fc 100644
--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -15,7 +15,7 @@
       <img
         v-if="!dragover && !isShowingProgress"
         :src="logoPath ? logoPath : './squareLogo.png'"
-        style="border-radius: 50%; width: 100%; height: 100%"
+        style="border-radius: var(--radius-round); width: 100%; height: 100%"
         draggable="false"
         @dragstart.prevent
       />
diff --git a/src/renderer/pages/RenamePage.vue b/src/renderer/pages/RenamePage.vue
index c3ac39de..b4330546 100644
--- a/src/renderer/pages/RenamePage.vue
+++ b/src/renderer/pages/RenamePage.vue
@@ -130,7 +130,7 @@ export default {
 .rename-card {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   width: 100%;
   max-width: 500px;
   background: var(--color-background-primary);
@@ -168,7 +168,7 @@ export default {
 
 .form-input {
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.875rem 1rem;
   padding-right: 2.5rem;
   width: 100%;
@@ -237,7 +237,7 @@ export default {
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem 1.5rem;
   min-width: fit-content;
   font-size: 0.875rem;
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index f7dca4cd..046418ef 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -160,7 +160,7 @@ html, body {
   border-radius: 24px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   cursor: pointer;
 }
 
@@ -168,14 +168,14 @@ html, body {
   position: absolute;
   bottom: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 17px;
   height: 17px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: "";
 }
 
@@ -219,7 +219,7 @@ input:checked + .switch-slider::before {
 }
 
 .grid-slider::-webkit-slider-thumb {
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 15px;
   height: 15px;
   background: var(--color-accent);
@@ -235,7 +235,7 @@ input:checked + .switch-slider::before {
 
 .grid-slider::-moz-range-thumb {
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 14px;
   height: 14px;
   background: var(--color-accent);
@@ -698,7 +698,7 @@ input:checked + .switch-slider::before {
 .loader-spinner {
   border: 2px solid var(--color-border-secondary);
   border-top: 2px solid var(--color-accent);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 24px;
   height: 24px;
   animation: spin 1s linear infinite;
@@ -843,7 +843,7 @@ input:checked + .switch-slider::before {
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 40px;
   height: 40px;
   color: white;
@@ -869,7 +869,7 @@ input:checked + .switch-slider::before {
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 48px;
   height: 48px;
   color: white;
@@ -1059,7 +1059,7 @@ input:checked + .switch-slider::before {
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 20px;
   height: 20px;
   color: white;
@@ -1093,7 +1093,7 @@ input:checked + .switch-slider::before {
 .placeholder-item code {
   margin-right: 0.875rem;
   border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.3rem 0.6rem;
   min-width: 80px;
   font-size: 1rem;
@@ -1493,7 +1493,7 @@ input:checked + .switch-slider::before {
   overflow-y: auto;
   margin-top: 0.75rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0;
   max-height: 400px;
   background: var(--color-background-tertiary);
diff --git a/src/renderer/pages/css/Picbeds.css b/src/renderer/pages/css/Picbeds.css
index ca9ee59c..94335a64 100644
--- a/src/renderer/pages/css/Picbeds.css
+++ b/src/renderer/pages/css/Picbeds.css
@@ -41,7 +41,7 @@
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   padding: 1.5rem 2rem;
   background: var(--color-background-secondary);
   box-shadow: var(--shadow-md);
@@ -59,7 +59,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   width: 56px;
   height: 56px;
   color: var(--color-accent);
@@ -95,7 +95,7 @@
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -124,12 +124,12 @@
   align-items: center;
   overflow: hidden;
   border: none;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-family: inherit;
   font-weight: 600;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   gap: 0.5rem;
   cursor: pointer;
 }
@@ -204,12 +204,12 @@
 .config-card {
   overflow: hidden;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   background: var(--color-background-secondary);
   box-shadow:
     0 4px 24px rgb(0 0 0 / 6%),
     0 1px 2px rgb(0 0 0 / 4%);
-  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: card-enter var(--transition-slow);
 }
 
 @keyframes card-enter {
@@ -237,7 +237,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 36px;
   height: 36px;
   color: var(--color-accent);
@@ -289,7 +289,7 @@
   z-index: 1000;
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   min-width: 220px;
   background: var(--color-surface);
   box-shadow:
@@ -343,7 +343,7 @@
 /* Dropdown Transition */
 .dropdown-enter-active,
 .dropdown-leave-active {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-fast);
 }
 
 .dropdown-enter-from,
@@ -355,10 +355,10 @@
 .empty-state-card {
   overflow: hidden;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   background: var(--color-surface);
   box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
-  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: card-enter var(--transition-slow);
 }
 
 .empty-state {
@@ -372,7 +372,7 @@
   align-items: center;
   margin-bottom: 1.5rem;
   border: 2px dashed var(--color-border);
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   width: 96px;
   height: 96px;
   color: var(--color-text-tertiary);
@@ -423,7 +423,7 @@
   inset: 0;
   border: 3px solid rgb(255 255 255 / 15%);
   border-top-color: white;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   animation: spin 1s linear infinite;
 }
 
@@ -476,7 +476,7 @@
 
   .page-header {
     align-items: stretch;
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
     padding: 1.25rem;
     flex-direction: column;
   }
@@ -506,7 +506,7 @@
   }
 
   .config-card {
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
   }
 
   .card-body {
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index 2ad75ab3..791e9491 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -21,7 +21,7 @@
   align-items: center;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-secondary);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -54,7 +54,7 @@
   display: flex;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.5rem;
   background: var(--color-background-secondary);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -65,7 +65,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -102,7 +102,7 @@
 
 .settings-section {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.5rem;
   background: var(--color-background-secondary);
   box-shadow: 0 2px 8px var(--color-border);
@@ -142,7 +142,7 @@
 .form-textarea,
 .form-select {
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem;
   width: 100%;
   font-size: 0.875rem;
@@ -164,7 +164,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem;
   background: var(--color-background-tertiary);
   transition: all 0.2s ease;
@@ -190,7 +190,7 @@
   height: 21px;
   background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
   box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   flex-shrink: 0;
 }
 
@@ -198,14 +198,14 @@
   position: absolute;
   top: 2px;
   left: 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 17px;
   height: 17px;
   background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
   box-shadow:
     0 2px 6px rgb(0 0 0 / 20%),
     0 1px 2px rgb(0 0 0 / 10%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   content: '';
 }
 
@@ -240,7 +240,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem 1rem;
   min-width: fit-content;
   font-size: 0.875rem;
@@ -290,7 +290,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.5rem 0.75rem;
   background: var(--color-background-tertiary);
   transition: all 0.2s ease;
@@ -353,7 +353,7 @@
   justify-content: center;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 40px;
   color: var(--color-text-secondary);
   background: var(--color-background-tertiary);
@@ -408,7 +408,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 32px;
   height: 32px;
   font-size: 1.5rem;
@@ -486,7 +486,7 @@ small {
   overflow-y: auto;
   margin-top: 0.75rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0;
   max-height: 400px;
   background: var(--color-background-tertiary);
@@ -536,7 +536,7 @@ small {
 .placeholder-item code {
   margin-right: 0.875rem;
   border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.3rem 0.6rem;
   min-width: 80px;
   font-size: 1rem;
@@ -545,7 +545,7 @@ small {
   text-align: center;
   color: var(--color-text-primary);
   background: var(--color-background-secondary);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
+  box-shadow: var(--shadow-md);
   letter-spacing: 0.02em;
   flex-shrink: 0;
 }
@@ -562,12 +562,12 @@ small {
 }
 
 .placeholder-help::-webkit-scrollbar-track {
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: transparent;
 }
 
 .placeholder-help::-webkit-scrollbar-thumb {
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: var(--color-border);
   transition: background 0.2s ease;
 }
@@ -580,7 +580,7 @@ small {
 .update-info {
   margin-bottom: 1.5rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1rem;
   background: var(--color-background);
 }
@@ -603,7 +603,7 @@ small {
 .release-notes-card {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--color-background-secondary);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
@@ -750,7 +750,7 @@ small {
 
 .config-section {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.2s ease;
@@ -798,7 +798,7 @@ small {
   justify-content: center;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.875rem 1rem;
   min-height: 48px;
   font-size: 0.875rem;
@@ -858,7 +858,7 @@ small {
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   padding: 1.5rem;
   background: var(--color-background-secondary);
   box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
@@ -875,7 +875,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   width: 46px;
   height: 46px;
   color: white;
@@ -901,7 +901,7 @@ small {
 .sync-type-badge {
   display: inline-flex;
   align-items: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.2rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
@@ -958,7 +958,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.5rem 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -977,7 +977,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 38px;
   height: 38px;
   color: white;
@@ -1034,7 +1034,7 @@ small {
   justify-content: center;
   align-items: center;
   border: 1px dashed var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.5rem 1rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1078,7 +1078,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 34px;
   height: 34px;
   color: var(--color-surface);
@@ -1122,7 +1122,7 @@ small {
   justify-content: center;
   align-items: center;
   border: 2px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem 0.5rem;
   background: var(--color-background-tertiary);
   transition: all 0.2s ease;
@@ -1226,7 +1226,7 @@ small {
   justify-content: center;
   align-items: center;
   margin-bottom: 0.5rem;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   width: 44px;
   height: 44px;
   flex-shrink: 0;
@@ -1245,7 +1245,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1268,7 +1268,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 44px;
   height: 44px;
   color: var(--color-accent);
@@ -1315,7 +1315,7 @@ small {
 
 .server-config-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1339,7 +1339,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 36px;
   height: 36px;
   color: white;
@@ -1347,7 +1347,7 @@ small {
 }
 
 .server-config-badge {
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.2rem 0.5rem;
   font-size: 0.7rem;
   font-weight: 600;
@@ -1373,7 +1373,7 @@ small {
 /* Encryption Key Section */
 .encryption-key-section {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
 }
@@ -1389,7 +1389,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 32px;
   height: 32px;
   color: var(--color-accent);
@@ -1417,7 +1417,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   padding: 1.5rem 2rem;
   background: var(--color-background-secondary);
   box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
@@ -1428,7 +1428,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   width: 44px;
   height: 44px;
   color: white;
@@ -1454,7 +1454,7 @@ small {
 }
 
 .version-badge {
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.3rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -1475,7 +1475,7 @@ small {
 /* Update Preferences */
 .update-preferences-section .update-preference-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-secondary);
 }
@@ -1489,7 +1489,7 @@ small {
 .release-notes-card.enhanced {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   background: var(--color-background-secondary);
   box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
 }
@@ -1545,7 +1545,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 48px;
   height: 48px;
   color: var(--color-accent);
@@ -1625,7 +1625,7 @@ small {
 
 .system-option-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-secondary);
 }
@@ -1650,7 +1650,7 @@ small {
   align-items: center;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1669,7 +1669,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 25px;
   height: 25px;
   color: white;
@@ -1714,7 +1714,7 @@ small {
 
 .system-toggle-card {
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-secondary);
 }
@@ -1787,7 +1787,7 @@ small {
 
 .startup-toggle-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-secondary);
 }
@@ -1803,7 +1803,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1822,7 +1822,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 44px;
   height: 44px;
   color: white;
@@ -1867,7 +1867,7 @@ small {
 
 .upload-feature-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-secondary);
 }
@@ -1899,7 +1899,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1917,7 +1917,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 36px;
   height: 36px;
   color: var(--color-accent);
@@ -1965,7 +1965,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -1984,7 +1984,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 30px;
   height: 30px;
   color: white;
@@ -2018,7 +2018,7 @@ small {
 
 .upload-toggle-card {
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-secondary);
 }
@@ -2040,7 +2040,7 @@ small {
   align-items: center;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   background: var(--color-background-secondary);
   transition: all 0.25s ease;
@@ -2059,7 +2059,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 30px;
   height: 30px;
   color: white;
@@ -2105,7 +2105,7 @@ small {
   grid-template-columns: repeat(2, 1fr);
   margin-top: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-tertiary);
   gap: 1rem;
@@ -2134,7 +2134,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.625rem 0.875rem;
   background: var(--color-background-secondary);
   transition: all 0.2s ease;
@@ -2164,7 +2164,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 40px;
   height: 40px;
   color: white;
@@ -2176,7 +2176,7 @@ small {
 .placeholder-info-card {
   margin-bottom: 1.25rem;
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-tertiary);
 }
@@ -2209,7 +2209,7 @@ small {
 }
 
 .placeholder-info-item code {
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-border);
   padding: 0.25rem 0.5rem;
   min-width: 80px;
@@ -2234,7 +2234,7 @@ small {
 .proxy-config-card {
   display: flex;
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-tertiary);
   gap: 0.75rem;
@@ -2248,7 +2248,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 36px;
   height: 36px;
   color: white;
@@ -2311,7 +2311,7 @@ small {
 
 .version-card {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem 1.5rem;
   min-width: 120px;
   text-align: center;
@@ -2350,7 +2350,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -2367,7 +2367,7 @@ small {
 .rename-toggle-card {
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-tertiary);
 }
@@ -2423,7 +2423,7 @@ small {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   text-align: center;
   background: var(--color-background-tertiary);
@@ -2444,7 +2444,7 @@ small {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 42px;
   height: 42px;
   color: white;
@@ -2487,7 +2487,7 @@ small {
   align-items: flex-start;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.875rem 1rem;
   font-size: 0.8rem;
   color: var(--color-text-secondary);
@@ -2499,7 +2499,7 @@ small {
 .server-toggle-card {
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem;
   background: var(--color-background-tertiary);
 }
@@ -2512,7 +2512,7 @@ small {
 
 .server-config-section {
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   background: var(--color-background-tertiary);
 }
@@ -2665,7 +2665,7 @@ small {
 
 .notes-body :deep(pre) {
   overflow-x: auto;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1rem;
   margin: 0.875rem 0;
   background: var(--color-surface);
diff --git a/src/renderer/pages/css/PluginPage.css b/src/renderer/pages/css/PluginPage.css
index 024abcfd..e2c48b9c 100644
--- a/src/renderer/pages/css/PluginPage.css
+++ b/src/renderer/pages/css/PluginPage.css
@@ -302,7 +302,7 @@ html, body {
 .loading-spinner {
   border: 3px solid var(--color-border);
   border-top: 3px solid var(--color-accent);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 40px;
   height: 40px;
   animation: spin 1s linear infinite;
@@ -527,7 +527,7 @@ html, body {
 .button-spinner {
   border: 2px solid transparent;
   border-top: 2px solid currentcolor;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 16px;
   height: 16px;
   animation: spin 1s linear infinite;
diff --git a/src/renderer/pages/css/ShortKey.css b/src/renderer/pages/css/ShortKey.css
index eb42076e..eb6dc0e8 100644
--- a/src/renderer/pages/css/ShortKey.css
+++ b/src/renderer/pages/css/ShortKey.css
@@ -19,7 +19,7 @@
   align-items: center;
   margin-bottom: 1.5rem;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.5rem;
   background: var(--color-surface);
   box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -52,7 +52,7 @@
 .shortkey-card {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--color-background-primary);
   box-shadow: 0 2px 8px var(--color-border);
 }
@@ -110,7 +110,7 @@
 
 .key-display {
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   font-family: monospace;
@@ -131,7 +131,7 @@
 
 .status-badge {
   display: inline-block;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.25rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -174,7 +174,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.5rem 0.875rem;
   min-width: fit-content;
   font-size: 0.75rem;
@@ -253,7 +253,7 @@
 .modal-content {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   width: 100%;
   max-width: 500px;
   max-height: 90vh;
@@ -281,7 +281,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 32px;
   height: 32px;
   color: var(--color-text-secondary);
@@ -323,7 +323,7 @@
 
 .form-input {
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.75rem;
   width: 100%;
   font-size: 0.875rem;
diff --git a/src/renderer/pages/css/UpdatePage.css b/src/renderer/pages/css/UpdatePage.css
index 46991de3..c8b4accc 100644
--- a/src/renderer/pages/css/UpdatePage.css
+++ b/src/renderer/pages/css/UpdatePage.css
@@ -26,7 +26,7 @@
   position: relative;
   overflow: auto;
   border: 1px solid #e2e8f0;
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   width: 90%;
   height: 90%;
   flex-shrink: 0;
@@ -34,7 +34,7 @@
   box-shadow:
     0 4px 6px -1px rgb(0 0 0 / 10%),
     0 2px 4px -1px rgb(0 0 0 / 6%);
-  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: slide-up var(--transition-bounce-md);
 }
 
 @keyframes slide-up {
@@ -93,7 +93,7 @@
 }
 
 .version-number {
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: 0.125rem 0.5rem;
   font-weight: 600;
   background: #f1f5f9;
@@ -142,8 +142,8 @@
   left: 0;
   border-radius: 9999px;
   height: 100%;
-  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
-  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  transition: width var(--transition-bounce-md);
 }
 
 /* Content */
@@ -166,7 +166,7 @@
 
 .notes-body {
   overflow-y: auto;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 1.25rem;
   max-height: 195px;
   font-size: 0.9375rem;
@@ -214,7 +214,7 @@
 
 .notes-body :deep(pre) {
   overflow-x: auto;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1rem;
   margin: 0.875rem 0;
   background: #e2e8f0;
@@ -267,7 +267,7 @@
   justify-content: center;
   align-items: center;
   border: 2px solid #cbd5e1;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 20px;
   height: 20px;
   background: white;
@@ -322,7 +322,7 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 0.625rem 1.25rem;
   font-size: 0.9375rem;
   font-family: inherit;
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index c4f140d5..2fe9577b 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -990,7 +990,7 @@ html, body {
    ======================================== */
 .task-list-enter-active,
 .task-list-leave-active {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
 }
 
 .task-list-enter-from {
@@ -1004,7 +1004,7 @@ html, body {
 }
 
 .task-list-move {
-  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--transition-medium);
 }
 
 /* Task item status text colors */
@@ -1522,7 +1522,7 @@ html, body {
   background: var(--color-background-secondary);
   color: var(--color-text-primary);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-fast);
   white-space: nowrap;
   box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
 }
@@ -1626,7 +1626,7 @@ html, body {
   height: 100%;
   background: linear-gradient(90deg, var(--color-accent), var(--color-success));
   border-radius: var(--radius-full);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width var(--transition-medium);
   box-shadow: 0 0 8px rgb(0 122 255 / 25%);
 }
 
@@ -1702,7 +1702,7 @@ html, body {
   border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
   color: var(--color-text-primary);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-fast);
   box-sizing: border-box;
 }
 
@@ -1790,7 +1790,7 @@ html, body {
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-lg);
   background:  var(--color-background-secondary);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-fast);
   box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
 }
 
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
index 85609087..d8aaa528 100644
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -25,7 +25,7 @@
   justify-content: space-between;
   align-items: center;
   border: var(--color-border);
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   padding: 1.75rem 2rem;
   background:var(--color-background-secondary);
   box-shadow: var(--shadow-md);
@@ -43,7 +43,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   width: 56px;
   height: 56px;
   color: var(--color-accent);
@@ -86,12 +86,12 @@
   align-items: center;
   overflow: hidden;
   border: none;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0.75rem 1.5rem;
   font-size: 0.875rem;
   font-family: inherit;
   font-weight: 600;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
   gap: 0.5rem;
   cursor: pointer;
 }
@@ -155,15 +155,15 @@
   display: flex;
   overflow: hidden;
   border: 1px solid var(--color-border-secondary);
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   padding: 1.25rem;
   min-height: 180px;
   background: var(--color-background-secondary);
   box-shadow:
     0 2px 8px rgb(0 0 0 / 4%),
     0 1px 2px rgb(0 0 0 / 6%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+  transition: all var(--transition-medium);
+  animation: card-enter var(--transition-slow) backwards;
   animation-delay: var(--delay, 0ms);
   flex-direction: column;
   cursor: pointer;
@@ -211,7 +211,7 @@
 }
 
 .indicator-dot {
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 10px;
   height: 10px;
   background: var(--color-accent);
@@ -246,7 +246,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   width: 40px;
   height: 40px;
   color: var(--color-accent);
@@ -284,7 +284,7 @@
   justify-content: center;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   width: 30px;
   height: 30px;
   color: var(--color-text-secondary);
@@ -339,7 +339,7 @@
 .status-badge {
   display: inline-flex;
   align-items: center;
-  border-radius: 20px;
+  border-radius: var(--radius-2xl);
   padding: 0.375rem 0.75rem;
   font-size: 0.85rem;
   font-weight: 500;
@@ -391,7 +391,7 @@
   justify-content: center;
   align-items: center;
   border: 2px dashed var(--color-border);
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   width: 56px;
   height: 56px;
   color: var(--color-text-tertiary);
@@ -434,12 +434,12 @@
    Transition Group Animations
    ============================================ */
 .config-list-enter-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-slow);
 }
 
 .config-list-leave-active {
   position: absolute;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-medium);
 }
 
 .config-list-enter-from {
@@ -453,7 +453,7 @@
 }
 
 .config-list-move {
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--transition-slow);
 }
 
 /* ============================================
@@ -467,7 +467,7 @@
 
   .page-header {
     align-items: stretch;
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
     padding: 1.25rem;
     flex-direction: column;
   }
diff --git a/src/renderer/pages/css/common/modal.css b/src/renderer/pages/css/common/modal.css
index 56216822..3e07cbf6 100644
--- a/src/renderer/pages/css/common/modal.css
+++ b/src/renderer/pages/css/common/modal.css
@@ -54,7 +54,7 @@
   justify-content: center;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   width: 32px;
   height: 32px;
   color: var(--color-text-secondary);