From 643ddcef0706a6df319a7e18103a40198620795f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 4 Jun 2026 21:20:08 +0800
Subject: [PATCH] feat: enhance theme customizer with shadow options and update
 styles

- Added shadow customization options to the theme customizer, allowing users to select from 'none', 'low', 'medium', and 'high'.
- Updated the theme customizer settings interface and default values to include shadow settings.
- Enhanced the CSS variables for shadows in common.scss to support different shadow levels based on user selection.
- Modified the VirtualSlideView component styles to improve layout and scrolling behavior.
- Updated localization files for English, Simplified Chinese, and Traditional Chinese to include new shadow-related terms.
- Adjusted various components to ensure consistent application of shadow styles across the application.
---
 src/components/ThemeCustomizer.vue            | 190 +++++-
 src/components/cards/SubscribeCard.vue        |  58 +-
 .../dialog/WorkflowActionsDialog.vue          | 554 ++++--------------
 src/components/slide/VirtualSlideView.vue     |  22 +-
 src/composables/useThemeCustomizer.ts         |  34 +-
 src/locales/en-US.ts                          |  41 +-
 src/locales/zh-CN.ts                          |  41 +-
 src/locales/zh-TW.ts                          |  41 +-
 src/styles/common.scss                        | 135 ++++-
 9 files changed, 528 insertions(+), 588 deletions(-)

diff --git a/src/components/ThemeCustomizer.vue b/src/components/ThemeCustomizer.vue
index 6dcb7f6e..381634b8 100644
--- a/src/components/ThemeCustomizer.vue
+++ b/src/components/ThemeCustomizer.vue
@@ -3,6 +3,7 @@ import {
   themeCustomizerPrimaryColors,
   useThemeCustomizer,
   type ThemeCustomizerLayout,
+  type ThemeCustomizerShadow,
   type ThemeCustomizerSkin,
   type ThemeCustomizerTheme,
 } from '@/composables/useThemeCustomizer'
@@ -27,8 +28,17 @@ const emit = defineEmits<{
 
 const customColorInput = ref<HTMLInputElement | null>(null)
 
-const { isCustomized, resetSettings, setLayout, setPrimaryColor, setSemiDarkMenu, setSkin, setTheme, settings } =
-  useThemeCustomizer()
+const {
+  isCustomized,
+  resetSettings,
+  setLayout,
+  setPrimaryColor,
+  setSemiDarkMenu,
+  setShadow,
+  setSkin,
+  setTheme,
+  settings,
+} = useThemeCustomizer()
 const { appMode } = usePWA()
 const { t } = useI18n()
 const { global: globalTheme } = useTheme()
@@ -98,6 +108,30 @@ const skinOptions = computed<Array<{ title: string; value: ThemeCustomizerSkin }
   { title: t('theme.customizer.skinBordered'), value: 'bordered' },
 ])
 
+const shadowOptions = computed<
+  Array<{
+    title: string
+    value: ThemeCustomizerShadow
+  }>
+>(() => [
+  {
+    title: t('theme.customizer.shadowNone'),
+    value: 'none',
+  },
+  {
+    title: t('theme.customizer.shadowLow'),
+    value: 'low',
+  },
+  {
+    title: t('theme.customizer.shadowMedium'),
+    value: 'medium',
+  },
+  {
+    title: t('theme.customizer.shadowHigh'),
+    value: 'high',
+  },
+])
+
 const layoutOptions = computed<Array<{ icon: string; title: string; value: ThemeCustomizerLayout }>>(() => [
   { title: t('theme.customizer.layoutVertical'), value: 'vertical', icon: 'mdi-dock-left' },
   { title: t('theme.customizer.layoutCollapsed'), value: 'collapsed', icon: 'mdi-dock-window' },
@@ -109,6 +143,7 @@ const showLayoutSection = computed(() => !appMode.value)
 const hasAppModeCustomization = computed(() => {
   return (
     settings.value.primaryColor !== defaultPrimaryColor ||
+    settings.value.shadow !== 'none' ||
     settings.value.skin !== 'default' ||
     settings.value.theme !== 'auto'
   )
@@ -150,6 +185,7 @@ async function handleResetSettings() {
 
   // App 模式共享定制器，但保留桌面导航相关偏好，只重置 App 侧可调整的外观设置。
   await setPrimaryColor(defaultPrimaryColor)
+  await setShadow('none')
   await setSkin('default')
   await setTheme('auto')
 }
@@ -262,6 +298,35 @@ async function handleResetSettings() {
               </div>
             </div>
 
+            <VDivider class="mt-7" />
+
+            <h3 class="theme-customizer-section-title">{{ t('theme.customizer.shadow') }}</h3>
+            <div class="theme-customizer-preview-grid theme-customizer-preview-grid--shadow">
+              <div
+                v-for="shadow in shadowOptions"
+                :key="shadow.value"
+                class="theme-customizer-preview-option"
+                :class="{ 'is-active': settings.shadow === shadow.value }"
+                @click="setShadow(shadow.value)"
+              >
+                <span class="theme-customizer-shadow-scene" :class="`theme-customizer-shadow-scene--${shadow.value}`">
+                  <span class="theme-customizer-shadow-scene__panel">
+                    <span class="theme-customizer-shadow-scene__panel-line" />
+                    <span
+                      class="theme-customizer-shadow-scene__panel-line theme-customizer-shadow-scene__panel-line--short"
+                    />
+                  </span>
+
+                  <span class="theme-customizer-shadow-scene__card">
+                    <span class="theme-customizer-shadow-scene__badge" />
+                    <span class="theme-customizer-shadow-scene__line theme-customizer-shadow-scene__line--short" />
+                    <span class="theme-customizer-shadow-scene__line" />
+                  </span>
+                </span>
+                <span>{{ shadow.title }}</span>
+              </div>
+            </div>
+
             <div v-if="showSemiDarkMenuOption" class="theme-customizer-semi-dark">
               <span>{{ t('theme.customizer.semiDarkMenu') }}</span>
               <VSwitch
@@ -573,6 +638,10 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.theme-customizer-preview-grid--shadow {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .theme-customizer-preview-option {
   align-items: flex-start;
   padding: 0;
@@ -584,7 +653,8 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
     background: transparent;
     box-shadow: none !important;
 
-    .theme-customizer-mini-layout {
+    .theme-customizer-mini-layout,
+    .theme-customizer-shadow-scene {
       border-width: 2px;
       border-color: rgb(var(--v-theme-primary));
       background: rgba(var(--v-theme-primary), 0.04);
@@ -632,6 +702,11 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
 .theme-customizer-mini-layout--horizontal {
   grid-template-columns: 1fr;
   grid-template-rows: 24% 1fr;
+
+  .mini-sidebar {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .mini-sidebar,
@@ -667,10 +742,111 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
   }
 }
 
-.theme-customizer-mini-layout--horizontal {
-  .mini-sidebar {
-    flex-direction: row;
-    align-items: center;
+.theme-customizer-shadow-scene {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(var(--v-theme-on-surface), 0.02), rgba(var(--v-theme-on-surface), 0.06)),
+    rgb(var(--v-theme-surface));
+  block-size: 110px;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.theme-customizer-shadow-scene__panel,
+.theme-customizer-shadow-scene__card {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  background: rgb(var(--v-theme-surface));
+  box-shadow: none;
+  transition: box-shadow 0.18s ease;
+}
+
+.theme-customizer-shadow-scene__panel {
+  padding: 12px;
+  gap: 8px;
+  inset-block-start: 16px;
+  inset-inline: 14px;
+  min-block-size: 54px;
+}
+
+.theme-customizer-shadow-scene__card {
+  gap: 8px;
+  inset-block-end: 12px;
+  inset-inline: 20px 16px;
+  min-block-size: 46px;
+  padding-block: 10px;
+  padding-inline: 12px;
+}
+
+.theme-customizer-shadow-scene__panel-line,
+.theme-customizer-shadow-scene__line,
+.theme-customizer-shadow-scene__badge {
+  display: block;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.theme-customizer-shadow-scene__badge {
+  block-size: 6px;
+  inline-size: 34%;
+  min-inline-size: 28px;
+}
+
+.theme-customizer-shadow-scene__panel-line,
+.theme-customizer-shadow-scene__line {
+  block-size: 7px;
+}
+
+.theme-customizer-shadow-scene__panel-line--short,
+.theme-customizer-shadow-scene__line--short {
+  inline-size: 62%;
+}
+
+.theme-customizer-shadow-scene--low {
+  .theme-customizer-shadow-scene__panel {
+    box-shadow:
+      0 8px 18px rgba(var(--v-theme-on-surface), 0.08),
+      0 2px 6px rgba(var(--v-theme-on-surface), 0.05);
+  }
+
+  .theme-customizer-shadow-scene__card {
+    box-shadow:
+      0 10px 22px rgba(var(--v-theme-on-surface), 0.1),
+      0 4px 10px rgba(var(--v-theme-on-surface), 0.06);
+  }
+}
+
+.theme-customizer-shadow-scene--medium {
+  .theme-customizer-shadow-scene__panel {
+    box-shadow:
+      0 12px 28px rgba(var(--v-theme-on-surface), 0.12),
+      0 4px 12px rgba(var(--v-theme-on-surface), 0.08);
+  }
+
+  .theme-customizer-shadow-scene__card {
+    box-shadow:
+      0 16px 34px rgba(var(--v-theme-on-surface), 0.14),
+      0 6px 16px rgba(var(--v-theme-on-surface), 0.09);
+  }
+}
+
+.theme-customizer-shadow-scene--high {
+  .theme-customizer-shadow-scene__panel {
+    box-shadow:
+      0 16px 38px rgba(var(--v-theme-on-surface), 0.16),
+      0 6px 18px rgba(var(--v-theme-on-surface), 0.1);
+  }
+
+  .theme-customizer-shadow-scene__card {
+    box-shadow:
+      0 22px 48px rgba(var(--v-theme-on-surface), 0.18),
+      0 8px 22px rgba(var(--v-theme-on-surface), 0.12);
   }
 }
 
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index ea92ca46..008d6617 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -404,7 +404,7 @@ function handleCardClick() {
     <VHover>
       <template #default="hover">
         <div
-          class="w-full h-full rounded-lg overflow-hidden relative"
+          class="w-full h-full rounded-lg relative"
           :class="{
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
             'outline-dotted outline-pink-500 outline-2': props.batchMode && props.selected,
@@ -414,12 +414,12 @@ function handleCardClick() {
           <VCard
             v-bind="hover.props"
             :key="props.media?.id"
-            class="flex flex-col h-full"
+            class="flex flex-col h-full overflow-hidden"
             :class="{
               'subscribe-card-paused': subscribeState === 'S',
               'cursor-move': props.sortable,
             }"
-            rounded="0"
+            rounded="lg"
             min-height="150"
             @click="handleCardClick"
             :ripple="!props.batchMode && !props.sortable"
@@ -506,10 +506,26 @@ function handleCardClick() {
                       {{ subscribeProgressTooltip }}
                     </VTooltip>
                   </div>
-                  <VIcon v-if="props.media?.username && props.sortable" icon="mdi-account" size="small" color="white" class="flex-shrink-0 me-1" />
-                  <IconBtn v-else-if="props.media?.username" icon="mdi-account" size="small" color="white" class="flex-shrink-0" />
+                  <VIcon
+                    v-if="props.media?.username && props.sortable"
+                    icon="mdi-account"
+                    size="small"
+                    color="white"
+                    class="flex-shrink-0 me-1"
+                  />
+                  <IconBtn
+                    v-else-if="props.media?.username"
+                    icon="mdi-account"
+                    size="small"
+                    color="white"
+                    class="flex-shrink-0"
+                  />
                   <!-- 用户名过长时限制在卡片宽度内，并用省略号展示剩余内容 -->
-                  <span v-if="props.media?.username" class="min-w-0 truncate text-subtitle-2 text-white" :title="props.media?.username">
+                  <span
+                    v-if="props.media?.username"
+                    class="min-w-0 truncate text-subtitle-2 text-white"
+                    :title="props.media?.username"
+                  >
                     {{ props.media?.username }}
                   </span>
                 </div>
@@ -577,14 +593,15 @@ function handleCardClick() {
 .subscribe-card-pending-tint {
   position: relative;
 }
+
 .subscribe-card-pending-tint::after {
-  content: '';
   position: absolute;
+  z-index: 3;
+  border-radius: 8px;
+  box-shadow: inset 0 0 48px rgba(56, 189, 248, 40%); // sky-400
+  content: '';
   inset: 0;
   pointer-events: none;
-  border-radius: 8px;
-  box-shadow: inset 0 0 48px rgba(56, 189, 248, 0.4); // sky-400
-  z-index: 3;
 }
 
 /**
@@ -594,22 +611,23 @@ function handleCardClick() {
  */
 .best-version-badge {
   position: absolute;
-  top: 6px;
-  left: 8px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.75);
+  z-index: 4;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 4;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
   backdrop-filter: blur(6px);
+  background: rgba(0, 0, 0, 75%);
+  block-size: 24px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 50%);
+  inline-size: 24px;
+  inset-block-start: 6px;
+  inset-inline-start: 8px;
 }
+
 .best-version-badge-full {
-  background: rgba(255, 255, 255, 0.22);
   backdrop-filter: blur(10px);
-  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 22%);
+  box-shadow: 0 2px 8px rgba(255, 255, 255, 15%);
 }
 </style>
diff --git a/src/components/dialog/WorkflowActionsDialog.vue b/src/components/dialog/WorkflowActionsDialog.vue
index 54d648af..c60f7912 100644
--- a/src/components/dialog/WorkflowActionsDialog.vue
+++ b/src/components/dialog/WorkflowActionsDialog.vue
@@ -38,54 +38,22 @@ onConnect((connection: Connection) => {
 // 当前选中的流程边ID
 const selectedEdgeId = ref<string | null>(null)
 
-// 当前选中的动作节点ID
-const selectedNodeId = ref<string | null>(null)
-
 // 流程边配置表单
 const edgeForm = ref({
   condition: '',
-  join_policy: '',
-  branch_policy: '',
 })
 
-// 动作节点执行配置表单
-const nodeForm = ref({
-  inputs_text: '',
-  outputs_text: '',
-  join_policy: '',
-  fail_policy: '',
-  branch_policy: '',
-  concurrency_key: '',
-  timeout: null as number | null,
-  retry_max_attempts: null as number | null,
-  retry_interval: null as number | null,
-  retry_backoff: null as number | null,
+// 后端动作固定契约，供条件构造器读取上一节点输出
+const actionDefinitions = ref<any[]>([])
+
+// 动作类型到契约的映射
+const actionContractMap = computed(() => {
+  return actionDefinitions.value.reduce((result, action) => {
+    result[action.type] = action.contract || {}
+    return result
+  }, {} as Record<string, any>)
 })
 
-// 汇合策略选项
-const joinPolicyOptions = computed(() => [
-  { title: t('dialog.workflowActions.joinPolicyDefault'), value: '' },
-  { title: t('dialog.workflowActions.joinPolicyAllSuccess'), value: 'all_success' },
-  { title: t('dialog.workflowActions.joinPolicyAnySuccess'), value: 'any_success' },
-  { title: t('dialog.workflowActions.joinPolicyAllDone'), value: 'all_done' },
-  { title: t('dialog.workflowActions.joinPolicyFailFast'), value: 'fail_fast' },
-])
-
-// 分支策略选项
-const branchPolicyOptions = computed(() => [
-  { title: t('dialog.workflowActions.branchPolicyDefault'), value: '' },
-  { title: t('dialog.workflowActions.branchPolicyParallel'), value: 'parallel' },
-  { title: t('dialog.workflowActions.branchPolicyExclusive'), value: 'exclusive' },
-])
-
-// 失败策略选项
-const failPolicyOptions = computed(() => [
-  { title: t('dialog.workflowActions.failPolicyDefault'), value: '' },
-  { title: t('dialog.workflowActions.failPolicyStop'), value: 'stop' },
-  { title: t('dialog.workflowActions.failPolicyContinue'), value: 'continue' },
-  { title: t('dialog.workflowActions.failPolicyIgnore'), value: 'ignore' },
-])
-
 // 获取指定节点端口的类型（输入/输出）
 const getPortType = (node: GraphNode, handleId: string) => {
   // 检查是否是输入端口（对应 handleBounds.target）
@@ -122,30 +90,30 @@ const getEdgeConfigValue = (edge: any, key: string) => {
   return edge?.[key] ?? edge?.data?.[key] ?? ''
 }
 
-// 统一流程边数据结构，确保条件和汇合策略能被后端读取
+// 复制对象并移除不再由前端编辑的高级配置
+const omitConfigKeys = (value: any, keys: string[]) => {
+  const result = { ...(value || {}) }
+  keys.forEach(key => delete result[key])
+  return result
+}
+
+// 统一流程边数据结构，前端只编辑边条件，汇合和分支策略由执行器默认处理
 const normalizeWorkflowEdge = (edge: any) => {
   const condition = String(getEdgeConfigValue(edge, 'condition') || '').trim()
-  const joinPolicy = String(getEdgeConfigValue(edge, 'join_policy') || '').trim()
-  const branchPolicy = String(getEdgeConfigValue(edge, 'branch_policy') || '').trim()
   const edgeClass = String(edge?.class || '')
     .replace(/\bworkflow-conditional-edge\b/g, '')
     .trim()
-  const data = {
-    ...(edge?.data || {}),
-    condition: condition || undefined,
-    join_policy: joinPolicy || undefined,
-    branch_policy: branchPolicy || undefined,
-  }
+  const data = omitConfigKeys(edge?.data, ['join_policy', 'branch_policy'])
+  data.condition = condition || undefined
+  const edgePayload = omitConfigKeys(edge, ['join_policy', 'branch_policy'])
 
   return {
-    ...edge,
+    ...edgePayload,
     animated: edge?.animated ?? true,
     type: edge?.type || 'animation',
     label: condition ? t('dialog.workflowActions.edgeConditionalLabel') : undefined,
     class: [edgeClass, condition ? 'workflow-conditional-edge' : ''].filter(Boolean).join(' ') || undefined,
     condition: condition || undefined,
-    join_policy: joinPolicy || undefined,
-    branch_policy: branchPolicy || undefined,
     data,
   }
 }
@@ -155,129 +123,25 @@ const normalizeWorkflowEdges = () => {
   edges.value = (edges.value || []).map(edge => normalizeWorkflowEdge(edge))
 }
 
-// 判断扩展配置是否为空，避免旧 data 中的空值覆盖顶层字段
-const isEmptyConfigValue = (value: any) => {
-  if (value === undefined || value === null || value === '') return true
-  if (Array.isArray(value)) return value.length === 0
-  if (typeof value === 'object') return Object.keys(value).length === 0
-  return false
-}
-
-// 读取动作节点扩展配置，兼容顶层字段与 data 字段
-const getNodeConfigValue = (node: any, key: string) => {
-  const nodeValue = node?.[key]
-  if (!isEmptyConfigValue(nodeValue)) return nodeValue
-  const dataValue = node?.data?.[key]
-  return isEmptyConfigValue(dataValue) ? undefined : dataValue
-}
-
-// 将输入声明统一为路径数组
-const normalizeInputPaths = (value: any) => {
-  if (Array.isArray(value)) {
-    return value.map(item => String(item).trim()).filter(Boolean)
-  }
-  if (typeof value === 'string') {
-    return value
-      .split(/[\n,]+/)
-      .map(item => item.trim())
-      .filter(Boolean)
-  }
-  return []
-}
-
-// 解析 JSON 形式的结构化配置
-const parseStructuredConfig = (value: string, label: string) => {
-  const text = String(value || '').trim()
-  if (!text) return undefined
-  try {
-    const parsed = JSON.parse(text)
-    if (parsed && (Array.isArray(parsed) || typeof parsed === 'object')) {
-      return parsed
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  throw new Error(t('dialog.workflowActions.invalidJsonConfig', { label }))
-}
-
-// 尝试把存量结构化配置标准化为对象或数组
-const normalizeStructuredConfig = (value: any) => {
-  if (isEmptyConfigValue(value)) return undefined
-  if (Array.isArray(value) || typeof value === 'object') return value
-  if (typeof value !== 'string') return undefined
-  try {
-    const parsed = JSON.parse(value)
-    return parsed && (Array.isArray(parsed) || typeof parsed === 'object') ? parsed : undefined
-  } catch {
-    return undefined
-  }
-}
-
-// 将结构化配置格式化为面板中的 JSON 文本
-const stringifyStructuredConfig = (value: any) => {
-  const normalizedValue = normalizeStructuredConfig(value)
-  return normalizedValue ? JSON.stringify(normalizedValue, null, 2) : ''
-}
-
-// 数值字段统一清洗，空值会在保存时被移除
-const normalizeNumber = (value: any, minValue = 0, integer = false) => {
-  if (value === undefined || value === null || value === '') return undefined
-  const numberValue = Number(value)
-  if (!Number.isFinite(numberValue) || numberValue < minValue) return undefined
-  return integer ? Math.floor(numberValue) : numberValue
-}
-
-// 读取节点重试策略
-const normalizeRetryConfig = (value: any) => {
-  const retryConfig = normalizeStructuredConfig(value)
-  return retryConfig && !Array.isArray(retryConfig) ? retryConfig : {}
-}
-
-// 根据面板表单构造重试策略
-const buildRetryConfigFromForm = () => {
-  const retryConfig: Record<string, number> = {}
-  const maxAttempts = normalizeNumber(nodeForm.value.retry_max_attempts, 1, true)
-  const interval = normalizeNumber(nodeForm.value.retry_interval, 0)
-  const backoff = normalizeNumber(nodeForm.value.retry_backoff, 1)
-  if (maxAttempts !== undefined) retryConfig.max_attempts = maxAttempts
-  if (interval !== undefined) retryConfig.interval = interval
-  if (backoff !== undefined) retryConfig.backoff = backoff
-  return Object.keys(retryConfig).length ? retryConfig : undefined
-}
-
-// 统一动作节点数据结构，确保执行策略能被后端读取
+// 统一动作节点数据结构，高级运行配置由后端默认值和动作契约接管
 const normalizeWorkflowNode = (node: any) => {
-  const inputPaths = normalizeInputPaths(getNodeConfigValue(node, 'inputs'))
-  const outputs = normalizeStructuredConfig(getNodeConfigValue(node, 'outputs'))
-  const joinPolicy = String(getNodeConfigValue(node, 'join_policy') || '').trim()
-  const failPolicy = String(getNodeConfigValue(node, 'fail_policy') || '').trim()
-  const branchPolicy = String(getNodeConfigValue(node, 'branch_policy') || '').trim()
-  const concurrencyKey = String(getNodeConfigValue(node, 'concurrency_key') || '').trim()
-  const timeout = normalizeNumber(getNodeConfigValue(node, 'timeout'), 1, true)
-  const retryConfig = normalizeRetryConfig(getNodeConfigValue(node, 'retry'))
-  const retry = Object.keys(retryConfig).length ? retryConfig : undefined
-  const data = {
-    ...(node?.data || {}),
-    inputs: inputPaths.length ? inputPaths : undefined,
-    outputs: outputs || undefined,
-    join_policy: joinPolicy || undefined,
-    fail_policy: failPolicy || undefined,
-    branch_policy: branchPolicy || undefined,
-    concurrency_key: concurrencyKey || undefined,
-    timeout: timeout || undefined,
-    retry,
-  }
+  const hiddenConfigKeys = [
+    'inputs',
+    'outputs',
+    'join_policy',
+    'fail_policy',
+    'branch_policy',
+    'concurrency_key',
+    'timeout',
+    'retry',
+    'contract',
+    '_contract',
+  ]
+  const data = omitConfigKeys(node?.data, hiddenConfigKeys)
+  const nodePayload = omitConfigKeys(node, hiddenConfigKeys)
 
   return {
-    ...node,
-    inputs: inputPaths.length ? inputPaths : undefined,
-    outputs: outputs || undefined,
-    join_policy: joinPolicy || undefined,
-    fail_policy: failPolicy || undefined,
-    branch_policy: branchPolicy || undefined,
-    concurrency_key: concurrencyKey || undefined,
-    timeout: timeout || undefined,
-    retry,
+    ...nodePayload,
     data,
   }
 }
@@ -293,16 +157,39 @@ const getNodeName = (nodeId?: string) => {
   return (node as any)?.name || node?.data?.label || nodeId || ''
 }
 
+// 获取流程边源节点可用于条件判断的输出字段
+const getEdgeConditionFields = (edge: any) => {
+  const sourceNode = edge
+    ? nodes.value.find(node => node.id === edge.source)
+    : null
+  const contract = sourceNode ? actionContractMap.value[sourceNode.type] || {} : {}
+  const fields = contract.condition_fields || contract.outputs || []
+  return Array.isArray(fields)
+    ? fields.filter((field: any) => field?.name || field)
+    : []
+}
+
+// 判断流程边是否存在可编辑条件
+const canConfigureEdge = (edge: any) => {
+  const condition = String(getEdgeConfigValue(edge, 'condition') || '').trim()
+  return Boolean(condition || getEdgeConditionFields(edge).length)
+}
+
 // 选中流程边时打开设置面板
-function handleEdgeClick(params: any) {
+async function handleEdgeClick(params: any) {
   const edge = params?.edge
   if (!edge) return
-  selectedNodeId.value = null
+  if (!actionDefinitions.value.length) {
+    await loadActionDefinitions()
+  }
+  if (!canConfigureEdge(edge)) {
+    closeEdgeSettings()
+    $toast.info(t('dialog.workflowActions.edgeNoConditionFields'))
+    return
+  }
   selectedEdgeId.value = edge.id
   edgeForm.value = {
     condition: String(getEdgeConfigValue(edge, 'condition') || ''),
-    join_policy: String(getEdgeConfigValue(edge, 'join_policy') || ''),
-    branch_policy: String(getEdgeConfigValue(edge, 'branch_policy') || ''),
   }
 }
 
@@ -311,8 +198,6 @@ function closeEdgeSettings() {
   selectedEdgeId.value = null
   edgeForm.value = {
     condition: '',
-    join_policy: '',
-    branch_policy: '',
   }
 }
 
@@ -324,14 +209,10 @@ function saveEdgeSettings() {
     return normalizeWorkflowEdge({
       ...edge,
       condition: edgeForm.value.condition,
-      join_policy: edgeForm.value.join_policy,
       data: {
         ...(edge.data || {}),
         condition: edgeForm.value.condition,
-        join_policy: edgeForm.value.join_policy,
-        branch_policy: edgeForm.value.branch_policy,
       },
-      branch_policy: edgeForm.value.branch_policy,
     })
   })
   $toast.success(t('dialog.workflowActions.edgeSaveSuccess'))
@@ -350,106 +231,49 @@ const selectedEdge = computed(() => {
   return edges.value.find(edge => edge.id === selectedEdgeId.value) || null
 })
 
-// 当前选中的动作节点
-const selectedNode = computed(() => {
-  if (!selectedNodeId.value) return null
-  return nodes.value.find(node => node.id === selectedNodeId.value) || null
-})
+// 当前边可用于条件判断的输出字段
+const selectedEdgeConditionFields = computed(() => (
+  selectedEdge.value ? getEdgeConditionFields(selectedEdge.value) : []
+))
 
-// 将节点数据填入右侧执行配置面板
-function fillNodeForm(node: any) {
-  const retryConfig = normalizeRetryConfig(getNodeConfigValue(node, 'retry'))
-  nodeForm.value = {
-    inputs_text: normalizeInputPaths(getNodeConfigValue(node, 'inputs')).join('\n'),
-    outputs_text: stringifyStructuredConfig(getNodeConfigValue(node, 'outputs')),
-    join_policy: String(getNodeConfigValue(node, 'join_policy') || ''),
-    fail_policy: String(getNodeConfigValue(node, 'fail_policy') || ''),
-    branch_policy: String(getNodeConfigValue(node, 'branch_policy') || ''),
-    concurrency_key: String(getNodeConfigValue(node, 'concurrency_key') || ''),
-    timeout: normalizeNumber(getNodeConfigValue(node, 'timeout'), 1, true) ?? null,
-    retry_max_attempts: normalizeNumber(retryConfig.max_attempts, 1, true) ?? null,
-    retry_interval: normalizeNumber(retryConfig.interval, 0) ?? null,
-    retry_backoff: normalizeNumber(retryConfig.backoff, 1) ?? null,
-  }
-}
-
-// 选中动作节点时打开执行配置面板
-function handleNodeClick(params: any) {
-  const node = params?.node
-  if (!node) return
-  if (node.name == '备注') return
-  selectedEdgeId.value = null
-  selectedNodeId.value = node.id
-  fillNodeForm(node)
-}
-
-// 关闭动作节点执行配置面板
-function closeNodeSettings() {
-  selectedNodeId.value = null
-  nodeForm.value = {
-    inputs_text: '',
-    outputs_text: '',
-    join_policy: '',
-    fail_policy: '',
-    branch_policy: '',
-    concurrency_key: '',
-    timeout: null,
-    retry_max_attempts: null,
-    retry_interval: null,
-    retry_backoff: null,
-  }
-}
-
-// 根据面板表单构造动作节点执行配置
-function buildNodeConfigFromForm() {
-  return {
-    inputs: normalizeInputPaths(nodeForm.value.inputs_text),
-    outputs: parseStructuredConfig(nodeForm.value.outputs_text, t('dialog.workflowActions.nodeOutputsLabel')),
-    join_policy: nodeForm.value.join_policy,
-    fail_policy: nodeForm.value.fail_policy,
-    branch_policy: nodeForm.value.branch_policy,
-    concurrency_key: nodeForm.value.concurrency_key,
-    timeout: normalizeNumber(nodeForm.value.timeout, 1, true),
-    retry: buildRetryConfigFromForm(),
-  }
-}
-
-// 保存动作节点执行配置
-function saveNodeSettings() {
-  if (!selectedNodeId.value) return
-  let nodeConfig: any
-  try {
-    nodeConfig = buildNodeConfigFromForm()
-  } catch (error: any) {
-    $toast.error(error.message)
-    return
-  }
-  nodes.value = nodes.value.map(node => {
-    if (node.id !== selectedNodeId.value) return node
-    return normalizeWorkflowNode({
-      ...node,
-      inputs: nodeConfig.inputs,
-      outputs: nodeConfig.outputs,
-      join_policy: nodeConfig.join_policy,
-      fail_policy: nodeConfig.fail_policy,
-      branch_policy: nodeConfig.branch_policy,
-      concurrency_key: nodeConfig.concurrency_key,
-      timeout: nodeConfig.timeout,
-      retry: nodeConfig.retry,
-      data: {
-        ...(node.data || {}),
-        inputs: nodeConfig.inputs,
-        outputs: nodeConfig.outputs,
-        join_policy: nodeConfig.join_policy,
-        fail_policy: nodeConfig.fail_policy,
-        branch_policy: nodeConfig.branch_policy,
-        concurrency_key: nodeConfig.concurrency_key,
-        timeout: nodeConfig.timeout,
-        retry: nodeConfig.retry,
-      },
+// 当前边的条件下拉选项，按源节点固定输出自动生成
+const edgeConditionOptions = computed(() => {
+  const sourceNode = selectedEdge.value
+    ? nodes.value.find(node => node.id === selectedEdge.value?.source)
+    : null
+  const options = [{ title: t('dialog.workflowActions.conditionAlways'), value: '' }]
+  selectedEdgeConditionFields.value.forEach((field: any) => {
+    const fieldName = field.name || field
+    if (!fieldName) return
+    const fieldLabel = field.label || fieldName
+    if (field.kind === 'list') {
+      options.push({
+        title: t('dialog.workflowActions.conditionHasOutput', { field: fieldLabel }),
+        value: `outputs.${sourceNode?.id}.${fieldName}.count > 0`,
+      })
+      options.push({
+        title: t('dialog.workflowActions.conditionNoOutput', { field: fieldLabel }),
+        value: `outputs.${sourceNode?.id}.${fieldName}.count == 0`,
+      })
+      return
+    }
+    options.push({
+      title: t('dialog.workflowActions.conditionHasValue', { field: fieldLabel }),
+      value: `outputs.${sourceNode?.id}.${fieldName} != None`,
     })
   })
-  $toast.success(t('dialog.workflowActions.nodeSaveSuccess'))
+  if (edgeForm.value.condition && !options.some(item => item.value === edgeForm.value.condition)) {
+    options.push({
+      title: t('dialog.workflowActions.conditionCustom'),
+      value: edgeForm.value.condition,
+    })
+  }
+  return options
+})
+
+// 选中动作节点时关闭可能打开的边条件面板，不再提供节点运行设置
+function handleNodeClick() {
+  closeEdgeSettings()
 }
 
 // 自定义节点类型
@@ -478,6 +302,17 @@ for (const path in components) {
   })
 }
 
+// 加载动作契约，供边条件构造器使用
+async function loadActionDefinitions() {
+  try {
+    const actionList = await api.get('workflow/actions')
+    actionDefinitions.value = Array.isArray(actionList) ? actionList : []
+  } catch (error) {
+    console.error(error)
+    actionDefinitions.value = []
+  }
+}
+
 // 定义输入参数
 const props = defineProps({
   workflow: Object as PropType<Workflow>,
@@ -590,6 +425,7 @@ function shareWorkflow() {
 }
 
 onMounted(() => {
+  loadActionDefinitions()
   if (props.workflow) {
     nodes.value = props.workflow.actions ?? []
     edges.value = props.workflow.flows ?? []
@@ -611,8 +447,8 @@ watch(
 watch(
   nodes,
   () => {
-    if (selectedNodeId.value && !selectedNode.value) {
-      closeNodeSettings()
+    if (selectedEdge.value && !canConfigureEdge(selectedEdge.value)) {
+      closeEdgeSettings()
     }
   },
   { deep: true },
@@ -691,33 +527,11 @@ const isMacOS = computed(() => {
               <span>{{ getNodeName(selectedEdge.target) }}</span>
             </div>
 
-            <VTextarea
+            <VSelect
               v-model="edgeForm.condition"
+              :items="edgeConditionOptions"
               :label="t('dialog.workflowActions.edgeConditionLabel')"
-              :placeholder="t('dialog.workflowActions.edgeConditionPlaceholder')"
-              rows="3"
-              auto-grow
               clearable
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <VSelect
-              v-model="edgeForm.join_policy"
-              :items="joinPolicyOptions"
-              :label="t('dialog.workflowActions.edgeJoinPolicyLabel')"
-              item-title="title"
-              item-value="value"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <VSelect
-              v-model="edgeForm.branch_policy"
-              :items="branchPolicyOptions"
-              :label="t('dialog.workflowActions.edgeBranchPolicyLabel')"
               item-title="title"
               item-value="value"
               variant="outlined"
@@ -739,121 +553,6 @@ const isMacOS = computed(() => {
             </div>
           </div>
 
-          <div v-if="selectedNode" class="workflow-edge-panel workflow-node-panel">
-            <div class="edge-panel-header">
-              <div class="edge-panel-title">
-                <VIcon icon="mdi-tune-variant" size="20" />
-                <span>{{ t('dialog.workflowActions.nodeSettingsTitle') }}</span>
-              </div>
-              <VBtn icon variant="text" size="small" @click="closeNodeSettings">
-                <VIcon icon="mdi-close" />
-              </VBtn>
-            </div>
-
-            <div class="edge-route">
-              <VIcon icon="mdi-checkbox-blank-circle-outline" size="16" />
-              <span>{{ getNodeName(selectedNode.id) }}</span>
-            </div>
-
-            <VSelect
-              v-model="nodeForm.join_policy"
-              :items="joinPolicyOptions"
-              :label="t('dialog.workflowActions.nodeJoinPolicyLabel')"
-              item-title="title"
-              item-value="value"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <VSelect
-              v-model="nodeForm.fail_policy"
-              :items="failPolicyOptions"
-              :label="t('dialog.workflowActions.nodeFailPolicyLabel')"
-              item-title="title"
-              item-value="value"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <VSelect
-              v-model="nodeForm.branch_policy"
-              :items="branchPolicyOptions"
-              :label="t('dialog.workflowActions.nodeBranchPolicyLabel')"
-              item-title="title"
-              item-value="value"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <VTextField
-              v-model="nodeForm.concurrency_key"
-              :label="t('dialog.workflowActions.nodeConcurrencyKeyLabel')"
-              :placeholder="t('dialog.workflowActions.nodeConcurrencyKeyPlaceholder')"
-              clearable
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-
-            <div class="workflow-number-grid">
-              <VTextField
-                v-model.number="nodeForm.timeout"
-                type="number"
-                min="1"
-                :label="t('dialog.workflowActions.nodeTimeoutLabel')"
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <VTextField
-                v-model.number="nodeForm.retry_max_attempts"
-                type="number"
-                min="1"
-                :label="t('dialog.workflowActions.nodeRetryAttemptsLabel')"
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <VTextField
-                v-model.number="nodeForm.retry_interval"
-                type="number"
-                min="0"
-                step="0.1"
-                :label="t('dialog.workflowActions.nodeRetryIntervalLabel')"
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <VTextField
-                v-model.number="nodeForm.retry_backoff"
-                type="number"
-                min="1"
-                step="0.1"
-                :label="t('dialog.workflowActions.nodeRetryBackoffLabel')"
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-            </div>
-
-            <div class="edge-panel-actions">
-              <VSpacer />
-              <VBtn variant="text" @click="closeNodeSettings">
-                {{ t('dialog.workflowActions.edgeCancel') }}
-              </VBtn>
-              <VBtn color="primary" @click="saveNodeSettings">
-                {{ t('dialog.workflowActions.edgeSave') }}
-              </VBtn>
-            </div>
-          </div>
-
           <WorkflowSidebar @component-click="handleComponentClick" />
         </div>
       </VCardText>
@@ -914,10 +613,6 @@ const isMacOS = computed(() => {
   overflow-y: auto;
 }
 
-.workflow-node-panel {
-  inline-size: min(420px, calc(100vw - 32px));
-}
-
 .edge-panel-header {
   display: flex;
   align-items: center;
@@ -958,12 +653,6 @@ const isMacOS = computed(() => {
   gap: 8px;
 }
 
-.workflow-number-grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .vue-flow__minimap {
   overflow: hidden;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -1042,8 +731,5 @@ const isMacOS = computed(() => {
     max-block-size: min(72vh, calc(100% - 112px));
   }
 
-  .workflow-number-grid {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/src/components/slide/VirtualSlideView.vue b/src/components/slide/VirtualSlideView.vue
index 0413ba49..dfb0141e 100644
--- a/src/components/slide/VirtualSlideView.vue
+++ b/src/components/slide/VirtualSlideView.vue
@@ -140,7 +140,8 @@ function slideNext(next: boolean) {
   if (!element) return
 
   const visibleCount = Math.max(1, Math.trunc(element.clientWidth / itemStep.value))
-  const currentIndex = element.scrollLeft === 0 ? 0 : Math.trunc((element.scrollLeft + itemStep.value / 2) / itemStep.value)
+  const currentIndex =
+    element.scrollLeft === 0 ? 0 : Math.trunc((element.scrollLeft + itemStep.value / 2) / itemStep.value)
   let targetLeft = 0
 
   if (next) {
@@ -345,15 +346,15 @@ watch(
 
 .slider-content-container {
   position: relative;
-  overflow: hidden;
   inline-size: 100%;
 }
 
 .slider-content {
-  overflow: scroll hidden !important;
+  margin-block-end: -8px;
   -ms-overflow-style: none !important;
+  overflow: scroll visible;
   overscroll-behavior-x: contain !important;
-  padding-block: 8px;
+  padding-block: 0 8px;
   padding-inline: 12px;
   scroll-behavior: smooth;
   scrollbar-width: none !important;
@@ -380,6 +381,11 @@ watch(
   flex: 0 0 auto;
 }
 
+.virtual-slide-item,
+.loading-track > * {
+  padding-block-end: 12px;
+}
+
 .nav-button {
   position: absolute;
   z-index: 20;
@@ -399,8 +405,12 @@ watch(
   pointer-events: none;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 10%);
   transform: translateY(-50%);
-  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
-    box-shadow 0.3s ease, border-color 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    background-color 0.3s ease,
+    box-shadow 0.3s ease,
+    border-color 0.3s ease;
 
   svg {
     block-size: 22px;
diff --git a/src/composables/useThemeCustomizer.ts b/src/composables/useThemeCustomizer.ts
index ac7d6f1c..303633e8 100644
--- a/src/composables/useThemeCustomizer.ts
+++ b/src/composables/useThemeCustomizer.ts
@@ -2,6 +2,7 @@ import { computed, onMounted, onScopeDispose, readonly, ref } from 'vue'
 import { useTheme } from 'vuetify'
 import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 import { saveLocalTheme } from '@/@core/utils/theme'
+import vuetify from '@/plugins/vuetify'
 import { themeManager } from '@/utils/themeManager'
 
 export const THEME_CUSTOMIZER_STORAGE_KEY = 'moviepilot-theme-customizer'
@@ -23,6 +24,7 @@ export const themeCustomizerPrimaryColors = [
 ] as const
 
 export type ThemeCustomizerLayout = 'collapsed' | 'horizontal' | 'vertical'
+export type ThemeCustomizerShadow = 'none' | 'low' | 'medium' | 'high'
 export type ThemeCustomizerSkin = 'bordered' | 'default'
 export type ThemeCustomizerTheme = 'auto' | 'dark' | 'light' | 'purple' | 'transparent'
 
@@ -30,6 +32,7 @@ export interface ThemeCustomizerSettings {
   layout: ThemeCustomizerLayout
   primaryColor: string
   semiDarkMenu: boolean
+  shadow: ThemeCustomizerShadow
   skin: ThemeCustomizerSkin
   theme: ThemeCustomizerTheme
 }
@@ -38,6 +41,7 @@ type VuetifyThemeApi = ReturnType<typeof useTheme>
 
 const defaultPrimaryColor = themeCustomizerPrimaryColors[0].value
 const validLayouts: ThemeCustomizerLayout[] = ['vertical', 'collapsed', 'horizontal']
+const validShadows: ThemeCustomizerShadow[] = ['none', 'low', 'medium', 'high']
 const validSkins: ThemeCustomizerSkin[] = ['default', 'bordered']
 const validThemes: ThemeCustomizerTheme[] = ['auto', 'light', 'dark', 'purple', 'transparent']
 
@@ -64,6 +68,7 @@ function getDefaultThemeCustomizerSettings(): ThemeCustomizerSettings {
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
     semiDarkMenu: false,
+    shadow: 'none',
     skin: 'default',
     theme: readStoredThemePreference(),
   }
@@ -78,7 +83,12 @@ function normalizeThemeCustomizerSettings(settings: Partial<ThemeCustomizerSetti
       : fallback.layout,
     primaryColor: isHexColor(settings.primaryColor) ? settings.primaryColor.toUpperCase() : fallback.primaryColor,
     semiDarkMenu: typeof settings.semiDarkMenu === 'boolean' ? settings.semiDarkMenu : fallback.semiDarkMenu,
-    skin: validSkins.includes(settings.skin as ThemeCustomizerSkin) ? (settings.skin as ThemeCustomizerSkin) : fallback.skin,
+    shadow: validShadows.includes(settings.shadow as ThemeCustomizerShadow)
+      ? (settings.shadow as ThemeCustomizerShadow)
+      : fallback.shadow,
+    skin: validSkins.includes(settings.skin as ThemeCustomizerSkin)
+      ? (settings.skin as ThemeCustomizerSkin)
+      : fallback.skin,
     theme: validThemes.includes(settings.theme as ThemeCustomizerTheme)
       ? (settings.theme as ThemeCustomizerTheme)
       : fallback.theme,
@@ -151,15 +161,19 @@ export function applyPrimaryColorToVuetify(color: string, themeApi: VuetifyTheme
   localStorage.setItem('materio-initial-loader-color', color)
 }
 
-/** 布局、皮肤和局部菜单风格只依赖根节点属性，CSS 可以在不刷新页面的情况下即时响应。 */
-export function applyThemeCustomizerRootSettings(settings: Pick<ThemeCustomizerSettings, 'layout' | 'semiDarkMenu' | 'skin'>) {
+/** 布局、阴影、皮肤和局部菜单风格只依赖根节点属性，CSS 可以在不刷新页面的情况下即时响应。 */
+export function applyThemeCustomizerRootSettings(
+  settings: Pick<ThemeCustomizerSettings, 'layout' | 'semiDarkMenu' | 'shadow' | 'skin'>,
+) {
   if (!isBrowser()) return
 
   document.documentElement.setAttribute('data-theme-layout', settings.layout)
   document.documentElement.setAttribute('data-theme-semi-dark-menu', String(settings.semiDarkMenu))
+  document.documentElement.setAttribute('data-theme-shadow', settings.shadow)
   document.documentElement.setAttribute('data-theme-skin', settings.skin)
   document.body.setAttribute('data-theme-layout', settings.layout)
   document.body.setAttribute('data-theme-semi-dark-menu', String(settings.semiDarkMenu))
+  document.body.setAttribute('data-theme-shadow', settings.shadow)
   document.body.setAttribute('data-theme-skin', settings.skin)
 }
 
@@ -210,6 +224,7 @@ export function persistPartialThemeCustomizerSettings(patch: Partial<ThemeCustom
 
   settingsState.value = nextSettings
   persistThemeCustomizerSettings(nextSettings)
+  applyPrimaryColorToVuetify(nextSettings.primaryColor, vuetify.theme)
   applyThemeCustomizerRootSettings(nextSettings)
   dispatchThemeCustomizerChange(nextSettings)
 
@@ -221,6 +236,7 @@ export function isDefaultThemeCustomizerSettings(settings: ThemeCustomizerSettin
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
     semiDarkMenu: false,
+    shadow: 'none',
     skin: 'default',
     theme: 'auto',
   })
@@ -229,6 +245,7 @@ export function isDefaultThemeCustomizerSettings(settings: ThemeCustomizerSettin
     settings.layout === defaults.layout &&
     settings.primaryColor === defaults.primaryColor &&
     settings.semiDarkMenu === defaults.semiDarkMenu &&
+    settings.shadow === defaults.shadow &&
     settings.skin === defaults.skin &&
     settings.theme === defaults.theme
   )
@@ -251,7 +268,10 @@ export function useThemeCustomizer() {
     applyPrimaryColorToVuetify(nextSettings.primaryColor, themeApi)
     applyThemeCustomizerRootSettings(nextSettings)
 
-    if (previousTheme !== nextSettings.theme || themeApi.global.name.value !== getResolvedThemeName(nextSettings.theme)) {
+    if (
+      previousTheme !== nextSettings.theme ||
+      themeApi.global.name.value !== getResolvedThemeName(nextSettings.theme)
+    ) {
       await applyThemePreference(nextSettings.theme, themeApi)
     }
 
@@ -266,6 +286,10 @@ export function useThemeCustomizer() {
     return updateSettings({ theme })
   }
 
+  function setShadow(shadow: ThemeCustomizerShadow) {
+    return updateSettings({ shadow })
+  }
+
   function setSkin(skin: ThemeCustomizerSkin) {
     return updateSettings({ skin })
   }
@@ -283,6 +307,7 @@ export function useThemeCustomizer() {
       layout: 'vertical',
       primaryColor: defaultPrimaryColor,
       semiDarkMenu: false,
+      shadow: 'none',
       skin: 'default',
       theme: 'auto',
     })
@@ -315,6 +340,7 @@ export function useThemeCustomizer() {
     setLayout,
     setPrimaryColor,
     setSemiDarkMenu,
+    setShadow,
     setSkin,
     setTheme,
     settings: readonly(settings),
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index c344b8a0..1d554c4f 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -168,6 +168,11 @@ export default {
       skins: 'Framework',
       skinDefault: 'Default',
       skinBordered: 'Bordered',
+      shadow: 'Shadows',
+      shadowNone: 'Flat',
+      shadowLow: 'Soft',
+      shadowMedium: 'Balanced',
+      shadowHigh: 'Bold',
       semiDarkMenu: 'Semi Dark Menu',
       layout: 'Layout',
       layoutVertical: 'Vertical',
@@ -2468,40 +2473,16 @@ export default {
       codeCopied: 'Task workflow code copied to clipboard!',
       edgeSettingsTitle: 'Flow Condition',
       edgeConditionLabel: 'Condition',
-      edgeConditionPlaceholder: 'outputs.A.items.count > 0',
-      edgeJoinPolicyLabel: 'Target Join Policy',
-      edgeBranchPolicyLabel: 'Source Branch Policy',
-      joinPolicyDefault: 'Default',
-      joinPolicyAllSuccess: 'All Success',
-      joinPolicyAnySuccess: 'Any Success',
-      joinPolicyAllDone: 'All Done',
-      joinPolicyFailFast: 'Fail Fast',
-      branchPolicyDefault: 'Default',
-      branchPolicyParallel: 'Parallel',
-      branchPolicyExclusive: 'Exclusive First',
-      failPolicyDefault: 'Default',
-      failPolicyStop: 'Stop on Failure',
-      failPolicyContinue: 'Continue on Failure',
-      failPolicyIgnore: 'Ignore Failure',
+      conditionAlways: 'Always continue',
+      conditionHasOutput: 'Has {field} output',
+      conditionNoOutput: 'No {field} output',
+      conditionHasValue: '{field} has value',
+      conditionCustom: 'Custom condition (preserved)',
+      edgeNoConditionFields: 'The previous node has no output available for conditions',
       edgeConditionalLabel: 'Condition',
       edgeSave: 'Save',
       edgeCancel: 'Cancel',
       edgeSaveSuccess: 'Flow condition saved',
-      nodeSettingsTitle: 'Action Execution Policy',
-      nodeInputsLabel: 'Input Declarations',
-      nodeInputsPlaceholder: 'outputs.FetchTorrentsAction.torrents',
-      nodeOutputsLabel: 'Output Declarations',
-      nodeJoinPolicyLabel: 'Node Join Policy',
-      nodeFailPolicyLabel: 'Failure Policy',
-      nodeBranchPolicyLabel: 'Branch Policy',
-      nodeConcurrencyKeyLabel: 'Concurrency Key',
-      nodeConcurrencyKeyPlaceholder: 'downloader',
-      nodeTimeoutLabel: 'Timeout Seconds',
-      nodeRetryAttemptsLabel: 'Retry Attempts',
-      nodeRetryIntervalLabel: 'Retry Interval',
-      nodeRetryBackoffLabel: 'Backoff Factor',
-      nodeSaveSuccess: 'Action execution policy saved',
-      invalidJsonConfig: '{label} is not a valid JSON object or array',
     },
     siteCookieUpdate: {
       title: 'Update Site Cookie & UA',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index bf7c188d..ef09e7df 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -168,6 +168,11 @@ export default {
       skins: '框架',
       skinDefault: '默认',
       skinBordered: '边框',
+      shadow: '阴影',
+      shadowNone: '无阴影',
+      shadowLow: '柔和',
+      shadowMedium: '标准',
+      shadowHigh: '强烈',
       semiDarkMenu: '半暗菜单',
       layout: '布局',
       layoutVertical: '垂直',
@@ -2420,40 +2425,16 @@ export default {
       codeCopied: '任务流程代码已复制到剪贴板！',
       edgeSettingsTitle: '流程条件',
       edgeConditionLabel: '流转条件',
-      edgeConditionPlaceholder: 'outputs.A.items.count > 0',
-      edgeJoinPolicyLabel: '目标汇合策略',
-      edgeBranchPolicyLabel: '源分支策略',
-      joinPolicyDefault: '默认',
-      joinPolicyAllSuccess: '全部成功',
-      joinPolicyAnySuccess: '任一成功',
-      joinPolicyAllDone: '全部完成',
-      joinPolicyFailFast: '失败即停',
-      branchPolicyDefault: '默认',
-      branchPolicyParallel: '并行',
-      branchPolicyExclusive: '互斥首选',
-      failPolicyDefault: '默认',
-      failPolicyStop: '失败停止',
-      failPolicyContinue: '失败继续',
-      failPolicyIgnore: '忽略失败',
+      conditionAlways: '无条件流转',
+      conditionHasOutput: '有{field}输出',
+      conditionNoOutput: '没有{field}输出',
+      conditionHasValue: '{field}有值',
+      conditionCustom: '自定义条件（保留现有）',
+      edgeNoConditionFields: '上一节点没有可用于条件判断的输出',
       edgeConditionalLabel: '条件',
       edgeSave: '保存',
       edgeCancel: '取消',
       edgeSaveSuccess: '流程条件已保存',
-      nodeSettingsTitle: '动作执行策略',
-      nodeInputsLabel: '输入声明',
-      nodeInputsPlaceholder: 'outputs.FetchTorrentsAction.torrents',
-      nodeOutputsLabel: '输出声明',
-      nodeJoinPolicyLabel: '节点汇合策略',
-      nodeFailPolicyLabel: '失败策略',
-      nodeBranchPolicyLabel: '分支策略',
-      nodeConcurrencyKeyLabel: '并发互斥键',
-      nodeConcurrencyKeyPlaceholder: 'downloader',
-      nodeTimeoutLabel: '超时秒数',
-      nodeRetryAttemptsLabel: '重试次数',
-      nodeRetryIntervalLabel: '重试间隔',
-      nodeRetryBackoffLabel: '退避倍数',
-      nodeSaveSuccess: '动作执行策略已保存',
-      invalidJsonConfig: '{label} 不是有效的 JSON 对象或数组',
     },
     siteCookieUpdate: {
       title: '更新站点Cookie & UA',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 6e5c3154..be2b0746 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -168,6 +168,11 @@ export default {
       skins: '框架',
       skinDefault: '默認',
       skinBordered: '邊框',
+      shadow: '陰影',
+      shadowNone: '無陰影',
+      shadowLow: '柔和',
+      shadowMedium: '標準',
+      shadowHigh: '強烈',
       semiDarkMenu: '半暗菜單',
       layout: '佈局',
       layoutVertical: '垂直',
@@ -2421,40 +2426,16 @@ export default {
       codeCopied: '任務流程代碼已複製到剪貼簿！',
       edgeSettingsTitle: '流程條件',
       edgeConditionLabel: '流轉條件',
-      edgeConditionPlaceholder: 'outputs.A.items.count > 0',
-      edgeJoinPolicyLabel: '目標匯合策略',
-      edgeBranchPolicyLabel: '來源分支策略',
-      joinPolicyDefault: '預設',
-      joinPolicyAllSuccess: '全部成功',
-      joinPolicyAnySuccess: '任一成功',
-      joinPolicyAllDone: '全部完成',
-      joinPolicyFailFast: '失敗即停',
-      branchPolicyDefault: '預設',
-      branchPolicyParallel: '並行',
-      branchPolicyExclusive: '互斥首選',
-      failPolicyDefault: '預設',
-      failPolicyStop: '失敗停止',
-      failPolicyContinue: '失敗繼續',
-      failPolicyIgnore: '忽略失敗',
+      conditionAlways: '無條件流轉',
+      conditionHasOutput: '有{field}輸出',
+      conditionNoOutput: '沒有{field}輸出',
+      conditionHasValue: '{field}有值',
+      conditionCustom: '自訂條件（保留現有）',
+      edgeNoConditionFields: '上一節點沒有可用於條件判斷的輸出',
       edgeConditionalLabel: '條件',
       edgeSave: '儲存',
       edgeCancel: '取消',
       edgeSaveSuccess: '流程條件已儲存',
-      nodeSettingsTitle: '動作執行策略',
-      nodeInputsLabel: '輸入宣告',
-      nodeInputsPlaceholder: 'outputs.FetchTorrentsAction.torrents',
-      nodeOutputsLabel: '輸出宣告',
-      nodeJoinPolicyLabel: '節點匯合策略',
-      nodeFailPolicyLabel: '失敗策略',
-      nodeBranchPolicyLabel: '分支策略',
-      nodeConcurrencyKeyLabel: '並發互斥鍵',
-      nodeConcurrencyKeyPlaceholder: 'downloader',
-      nodeTimeoutLabel: '超時秒數',
-      nodeRetryAttemptsLabel: '重試次數',
-      nodeRetryIntervalLabel: '重試間隔',
-      nodeRetryBackoffLabel: '退避倍數',
-      nodeSaveSuccess: '動作執行策略已儲存',
-      invalidJsonConfig: '{label} 不是有效的 JSON 物件或陣列',
     },
     siteCookieUpdate: {
       title: '更新站點Cookie & UA',
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 2b6c4840..260b2c95 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -33,8 +33,62 @@ html.v-overlay-scroll-blocked body {
 
 // 全局卡片阴影 token：卡片统一不使用投影，避免透明主题和密集布局下出现脏边。
 html {
+  --app-shadow-rgb: 15, 23, 42;
   --app-card-rest-shadow: none;
   --app-card-hover-shadow: none;
+  --app-fab-shadow: none;
+  --app-fab-shadow-strong: none;
+  --app-fab-shadow-hover: none;
+  --app-fab-shadow-strong-hover: none;
+  --app-fab-shadow-active: none;
+  --app-overlay-shadow: none;
+  --app-surface-shadow: none;
+  --app-surface-hover-shadow: none;
+}
+
+html[data-theme='dark'],
+html[data-theme='purple'],
+html[data-theme='transparent'] {
+  --app-shadow-rgb: 0, 0, 0;
+}
+
+html[data-theme-shadow='low'] {
+  --app-card-rest-shadow: 0 10px 24px rgba(var(--app-shadow-rgb), 0.06), 0 2px 8px rgba(var(--app-shadow-rgb), 0.04);
+  --app-card-hover-shadow: 0 14px 30px rgba(var(--app-shadow-rgb), 0.08), 0 4px 12px rgba(var(--app-shadow-rgb), 0.05);
+  --app-fab-shadow: 0 16px 34px rgba(var(--app-shadow-rgb), 0.16), 0 6px 16px rgba(var(--app-shadow-rgb), 0.1);
+  --app-fab-shadow-strong: 0 20px 40px rgba(var(--app-shadow-rgb), 0.2), 0 8px 18px rgba(var(--app-shadow-rgb), 0.12);
+  --app-fab-shadow-hover: 0 22px 42px rgba(var(--app-shadow-rgb), 0.22), 0 8px 18px rgba(var(--app-shadow-rgb), 0.12);
+  --app-fab-shadow-strong-hover: 0 26px 46px rgba(var(--app-shadow-rgb), 0.24), 0 10px 22px rgba(var(--app-shadow-rgb), 0.14);
+  --app-fab-shadow-active: 0 10px 22px rgba(var(--app-shadow-rgb), 0.16), 0 3px 8px rgba(var(--app-shadow-rgb), 0.1);
+  --app-overlay-shadow: 0 18px 42px rgba(var(--app-shadow-rgb), 0.14), 0 6px 18px rgba(var(--app-shadow-rgb), 0.08);
+  --app-surface-shadow: 0 10px 24px rgba(var(--app-shadow-rgb), 0.07), 0 2px 8px rgba(var(--app-shadow-rgb), 0.05);
+  --app-surface-hover-shadow: 0 14px 30px rgba(var(--app-shadow-rgb), 0.09), 0 4px 12px rgba(var(--app-shadow-rgb), 0.06);
+}
+
+html[data-theme-shadow='medium'] {
+  --app-card-rest-shadow: 0 14px 32px rgba(var(--app-shadow-rgb), 0.09), 0 4px 12px rgba(var(--app-shadow-rgb), 0.06);
+  --app-card-hover-shadow: 0 18px 40px rgba(var(--app-shadow-rgb), 0.11), 0 6px 16px rgba(var(--app-shadow-rgb), 0.07);
+  --app-fab-shadow: 0 18px 40px rgba(var(--app-shadow-rgb), 0.2), 0 7px 18px rgba(var(--app-shadow-rgb), 0.12);
+  --app-fab-shadow-strong: 0 24px 48px rgba(var(--app-shadow-rgb), 0.24), 0 10px 24px rgba(var(--app-shadow-rgb), 0.14);
+  --app-fab-shadow-hover: 0 24px 46px rgba(var(--app-shadow-rgb), 0.24), 0 10px 22px rgba(var(--app-shadow-rgb), 0.14);
+  --app-fab-shadow-strong-hover: 0 30px 54px rgba(var(--app-shadow-rgb), 0.28), 0 12px 28px rgba(var(--app-shadow-rgb), 0.16);
+  --app-fab-shadow-active: 0 12px 26px rgba(var(--app-shadow-rgb), 0.18), 0 4px 10px rgba(var(--app-shadow-rgb), 0.12);
+  --app-overlay-shadow: 0 24px 56px rgba(var(--app-shadow-rgb), 0.18), 0 10px 24px rgba(var(--app-shadow-rgb), 0.1);
+  --app-surface-shadow: 0 14px 32px rgba(var(--app-shadow-rgb), 0.1), 0 4px 12px rgba(var(--app-shadow-rgb), 0.07);
+  --app-surface-hover-shadow: 0 18px 40px rgba(var(--app-shadow-rgb), 0.12), 0 6px 16px rgba(var(--app-shadow-rgb), 0.08);
+}
+
+html[data-theme-shadow='high'] {
+  --app-card-rest-shadow: 0 18px 40px rgba(var(--app-shadow-rgb), 0.12), 0 6px 18px rgba(var(--app-shadow-rgb), 0.08);
+  --app-card-hover-shadow: 0 22px 50px rgba(var(--app-shadow-rgb), 0.15), 0 8px 22px rgba(var(--app-shadow-rgb), 0.1);
+  --app-fab-shadow: 0 22px 48px rgba(var(--app-shadow-rgb), 0.24), 0 10px 24px rgba(var(--app-shadow-rgb), 0.14);
+  --app-fab-shadow-strong: 0 28px 58px rgba(var(--app-shadow-rgb), 0.3), 0 12px 30px rgba(var(--app-shadow-rgb), 0.18);
+  --app-fab-shadow-hover: 0 28px 56px rgba(var(--app-shadow-rgb), 0.28), 0 12px 28px rgba(var(--app-shadow-rgb), 0.17);
+  --app-fab-shadow-strong-hover: 0 34px 64px rgba(var(--app-shadow-rgb), 0.34), 0 14px 32px rgba(var(--app-shadow-rgb), 0.2);
+  --app-fab-shadow-active: 0 14px 30px rgba(var(--app-shadow-rgb), 0.22), 0 5px 12px rgba(var(--app-shadow-rgb), 0.14);
+  --app-overlay-shadow: 0 30px 70px rgba(var(--app-shadow-rgb), 0.22), 0 14px 30px rgba(var(--app-shadow-rgb), 0.12);
+  --app-surface-shadow: 0 18px 40px rgba(var(--app-shadow-rgb), 0.13), 0 6px 18px rgba(var(--app-shadow-rgb), 0.09);
+  --app-surface-hover-shadow: 0 22px 50px rgba(var(--app-shadow-rgb), 0.16), 0 8px 22px rgba(var(--app-shadow-rgb), 0.11);
 }
 
 // 进度条样式
@@ -59,17 +113,33 @@ html {
 // 统一系统内卡片阴影，显式覆盖 Vuetify elevation 或局部卡片默认投影。
 .v-card,
 .v-application .v-card.v-card[class] {
-  box-shadow: none !important;
+  box-shadow: var(--app-surface-shadow) !important;
   transition: box-shadow 0.2s ease;
 }
 
 @media (hover: hover) {
   .v-card:hover,
   .v-application .v-card.v-card[class]:hover {
-    box-shadow: none !important;
+    box-shadow: var(--app-surface-hover-shadow) !important;
   }
 }
 
+// 只给外层 surface 加阴影，卡片内部的子组件保持平面，避免层级噪声。
+.v-card .v-card,
+.v-card .v-sheet,
+.v-card .v-list,
+.v-card .v-expansion-panel,
+.v-card .v-table,
+.v-card .v-window,
+.v-card .v-toolbar,
+.v-card .v-navigation-drawer,
+.v-card .v-stepper,
+.v-card .v-alert,
+.v-card .v-avatar,
+.v-card .v-chip {
+  box-shadow: none !important;
+}
+
 // 主题定制器的 bordered 皮肤：保持原布局密度，只给主要容器增加清晰边界。
 html[data-theme-skin='bordered'] {
   .v-card:not(.bg-primary),
@@ -78,6 +148,12 @@ html[data-theme-skin='bordered'] {
   .v-expansion-panel,
   .v-list {
     border: 1px solid rgba(var(--v-theme-on-surface), 0.1) !important;
+  }
+
+  .v-sheet,
+  .v-table,
+  .v-expansion-panel,
+  .v-list {
     box-shadow: none !important;
   }
 
@@ -175,12 +251,6 @@ html[data-theme="transparent"] .app-card-colorful,
   --app-card-surface-opacity: var(--transparent-opacity-light, 0.2);
 }
 
-html[data-theme="transparent"],
-.v-theme--transparent {
-  --app-card-rest-shadow: none;
-  --app-card-hover-shadow: none;
-}
-
 // 保证卡片右上角的浮动操作区始终高于可点击的卡片内容层，避免误触发详情打开。
 .app-card-top-action {
   z-index: 2;
@@ -546,9 +616,7 @@ html[data-theme="transparent"],
 .compact-fab .v-btn {
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   backdrop-filter: blur(14px);
-  box-shadow:
-    0 16px 34px rgb(15 23 42 / 16%),
-    0 6px 16px rgb(15 23 42 / 10%);
+  box-shadow: var(--app-fab-shadow) !important;
   opacity: 0.98;
   transition:
     transform 0.18s ease,
@@ -559,9 +627,7 @@ html[data-theme="transparent"],
 
 .compact-fab--primary .v-btn {
   block-size: 3rem !important;
-  box-shadow:
-    0 20px 40px rgb(15 23 42 / 20%),
-    0 8px 18px rgb(15 23 42 / 12%);
+  box-shadow: var(--app-fab-shadow-strong) !important;
   inline-size: 3rem !important;
 }
 
@@ -580,24 +646,18 @@ html[data-theme="transparent"],
 
 @media (hover: hover) {
   .compact-fab .v-btn:hover {
-    box-shadow:
-      0 22px 42px rgb(15 23 42 / 22%),
-      0 8px 18px rgb(15 23 42 / 12%);
+    box-shadow: var(--app-fab-shadow-hover) !important;
     filter: saturate(1.03);
     transform: translateY(-2px);
   }
 
   .compact-fab--primary .v-btn:hover {
-    box-shadow:
-      0 26px 46px rgb(15 23 42 / 24%),
-      0 10px 22px rgb(15 23 42 / 14%);
+    box-shadow: var(--app-fab-shadow-strong-hover) !important;
   }
 }
 
 .compact-fab .v-btn:active {
-  box-shadow:
-    0 10px 22px rgb(15 23 42 / 16%),
-    0 3px 8px rgb(15 23 42 / 10%);
+  box-shadow: var(--app-fab-shadow-active) !important;
   transform: translateY(0) scale(0.98);
 }
 
@@ -623,7 +683,7 @@ html[data-theme="transparent"],
   }
 }
 
-@media (min-width: 601px) {
+@media (width >= 601px) {
   html[data-theme-customizer-open='true'] .compact-fab-stack {
     inset-inline-end: calc(var(--theme-customizer-fab-offset) + max(1rem, calc(env(safe-area-inset-right) + 1rem)));
   }
@@ -633,7 +693,7 @@ html[data-theme="transparent"],
   }
 }
 
-@media (min-width: 601px) and (max-width: 768px) {
+@media (width >= 601px) and (width <= 768px) {
   html[data-theme-customizer-open='true'] .compact-fab-stack {
     inset-inline-end: calc(
       var(--theme-customizer-fab-offset) + max(0.875rem, calc(env(safe-area-inset-right) + 0.875rem))
@@ -665,16 +725,19 @@ html[data-theme="transparent"],
 .v-overlay__content .v-list{
   backdrop-filter: blur(6px);
   background-color: rgb(var(--v-theme-surface), 0.9) !important;
+  box-shadow: none !important;
   padding-inline: 0.5rem !important;
 }
 
 .v-overlay__content .v-card:not(.bg-primary){
   backdrop-filter: blur(8px);
   background-color: rgb(var(--v-theme-surface), 0.95) !important;
+  box-shadow: none !important;
 
   .v-list, .v-table {
     backdrop-filter: none;
     background-color: transparent !important;
+    box-shadow: none !important;
   }
 }
 
@@ -693,18 +756,24 @@ html[data-theme="transparent"],
 }
 
 .v-overlay__content {
+  background: transparent !important;
+  box-shadow: none !important;
   margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
-  transition: opacity 0.2s ease !important;
+  transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
 }
 
 .v-menu > .v-overlay__content {
-  overflow: hidden;
+  overflow: visible;
 }
 
 .v-dialog--fullscreen > .v-overlay__content > .v-card {
   padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
+.v-dialog--fullscreen > .v-overlay__content {
+  box-shadow: none !important;
+}
+
 .v-dialog > .v-overlay__content {
   margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
 }
@@ -713,6 +782,18 @@ html[data-theme="transparent"],
   padding-block-end: env(safe-area-inset-bottom);
 }
 
+.v-dialog > .v-overlay__content > .v-card,
+.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,
+.v-menu > .v-overlay__content > .v-card,
+.v-menu > .v-overlay__content > .v-list {
+  overflow: hidden;
+  box-shadow: var(--app-overlay-shadow) !important;
+}
+
+.v-dialog--fullscreen > .v-overlay__content > .v-card {
+  box-shadow: none !important;
+}
+
 .settings-icon-button {
   flex-shrink: 0;
   border-radius: 0.95rem;