diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index e1ee8ae0d..a5287b21d 100755
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -894,13 +894,15 @@
 /* 设置区块 */
 .ep-settings-section {
   margin-bottom: 16px;
+  padding: 0 16px;
 }
 
 .ep-section-title {
   font-size: 13px;
   font-weight: 600;
-  color: var(--ep-text-primary, #e8e8f0);
-  margin-bottom: 10px;
+  color: var(--text-primary, #1e293b);
+  margin-bottom: 12px;
+  margin-top: 16px;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -912,37 +914,44 @@
 
 /* 表单字段 */
 .ep-field {
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .ep-field-label {
   display: block;
-  font-size: 11px;
-  color: var(--ep-text-secondary, #9ca3af);
-  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary, #64748b);
+  margin-bottom: 6px;
 }
 
 .ep-form-input,
 .ep-form-select {
   width: 100%;
-  height: 28px;
-  background: var(--ep-bg-card, #13131f);
-  border: 1px solid var(--ep-border, #1f1f30);
-  border-radius: 4px;
-  padding: 0 8px;
-  color: var(--ep-text-primary, #e8e8f0);
+  height: 32px;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-xs, 8px);
+  padding: 0 10px;
+  color: var(--text-primary, #1e293b);
   font-size: 12px;
   outline: none;
-  transition: border-color 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .ep-form-input:focus,
 .ep-form-select:focus {
-  border-color: var(--ep-accent, #6c5ce7);
+  border-color: var(--primary, #6366f1);
+  box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
 }
 
 .ep-form-select {
   cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
 }
 
 /* Toggle 开关 */
@@ -950,177 +959,195 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .ep-toggle-label {
-  font-size: 11px;
-  color: var(--ep-text-secondary, #9ca3af);
+  font-size: 12px;
+  color: var(--text-primary, #1e293b);
+  font-weight: 500;
 }
 
 .ep-toggle {
-  width: 36px;
-  height: 20px;
-  background: var(--ep-border, #1f1f30);
-  border-radius: 10px;
+  width: 40px;
+  height: 22px;
+  background: var(--border-color, #e2e8f0);
+  border-radius: 11px;
   position: relative;
   cursor: pointer;
   transition: background 0.2s ease;
+  flex-shrink: 0;
 }
 
 .ep-toggle.active {
-  background: var(--ep-accent, #6c5ce7);
+  background: var(--primary, #6366f1);
 }
 
 .ep-toggle-knob {
-  width: 16px;
-  height: 16px;
-  background: var(--ep-text-primary, #e8e8f0);
+  width: 18px;
+  height: 18px;
+  background: #ffffff;
   border-radius: 50%;
   position: absolute;
   top: 2px;
   left: 2px;
   transition: left 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .ep-toggle.active .ep-toggle-knob {
-  left: 18px;
+  left: 20px;
 }
 
 /* 滑块 */
 .ep-slider-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .ep-slider {
   flex: 1;
   -webkit-appearance: none;
   height: 4px;
-  background: var(--ep-border, #1f1f30);
+  background: var(--border-color, #e2e8f0);
   border-radius: 2px;
   outline: none;
 }
 
 .ep-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 12px;
-  height: 12px;
-  background: var(--ep-accent, #6c5ce7);
+  width: 16px;
+  height: 16px;
+  background: var(--primary, #6366f1);
   border-radius: 50%;
   cursor: pointer;
+  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
+  border: 2px solid #fff;
 }
 
 .ep-slider-value {
-  font-size: 11px;
-  color: var(--ep-text-secondary, #9ca3af);
-  min-width: 30px;
+  font-size: 12px;
+  color: var(--text-secondary, #64748b);
+  min-width: 36px;
   text-align: right;
+  font-weight: 500;
 }
 
 /* 样式按钮组 */
 .ep-style-btns {
   display: flex;
-  gap: 4px;
+  gap: 6px;
 }
 
 .ep-style-btn {
-  width: 28px;
-  height: 28px;
-  background: var(--ep-bg-card, #13131f);
-  border: 1px solid var(--ep-border, #1f1f30);
-  border-radius: 4px;
-  color: var(--ep-text-secondary, #9ca3af);
-  font-size: 12px;
+  width: 32px;
+  height: 32px;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-xs, 8px);
+  color: var(--text-secondary, #64748b);
+  font-size: 13px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
+  font-weight: 500;
 }
 
 .ep-style-btn:hover {
-  border-color: var(--ep-accent, #6c5ce7);
-  color: var(--ep-text-primary, #e8e8f0);
+  border-color: var(--primary, #6366f1);
+  color: var(--primary, #6366f1);
+  background: var(--primary-soft, #eef2ff);
 }
 
 .ep-style-btn.active {
-  background: rgba(108, 92, 231, 0.15);
-  border-color: var(--ep-accent, #6c5ce7);
-  color: var(--ep-accent, #6c5ce7);
+  background: var(--primary-soft, #eef2ff);
+  border-color: var(--primary, #6366f1);
+  color: var(--primary, #6366f1);
 }
 
 /* AI推荐按钮 */
 .ep-ai-recommend-btn {
   width: 100%;
-  height: 28px;
-  padding: 0 8px;
-  background: linear-gradient(135deg, var(--ep-accent, #6c5ce7), #a29bfe);
+  height: 36px;
+  padding: 0 12px;
+  background: var(--gradient-primary, linear-gradient(135deg, #6366f1, #4f46e5));
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-xs, 8px);
   color: #fff;
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
-  margin-top: 8px;
+  margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 6px;
 }
 
 .ep-ai-recommend-btn:hover {
   opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
 .ep-ai-recommend-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 /* 片段详情卡片 */
 .ep-clip-detail {
-  background: var(--ep-bg-card, #13131f);
-  border: 1px solid var(--ep-border, #1f1f30);
-  border-radius: 6px;
-  padding: 12px;
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-sm, 14px);
+  padding: 14px;
 }
 
 .ep-clip-detail-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-light, #f1f5f9);
 }
 
 .ep-clip-detail-name {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
-  color: var(--ep-text-primary, #e8e8f0);
+  color: var(--text-primary, #1e293b);
 }
 
 .ep-clip-detail-type {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: rgba(108, 92, 231, 0.15);
-  color: var(--ep-accent, #6c5ce7);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--radius-xs, 8px);
+  background: var(--primary-soft, #eef2ff);
+  color: var(--primary, #6366f1);
+  font-weight: 500;
 }
 
 .ep-clip-detail-field {
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .ep-clip-detail-label {
-  font-size: 10px;
-  color: var(--ep-text-muted, #4b5563);
-  margin-bottom: 3px;
+  font-size: 11px;
+  color: var(--text-tertiary, #94a3b8);
+  margin-bottom: 4px;
+  font-weight: 500;
 }
 
 .ep-clip-detail-value {
-  font-size: 11px;
-  color: var(--ep-text-primary, #e8e8f0);
+  font-size: 12px;
+  color: var(--text-primary, #1e293b);
+  font-weight: 500;
 }
 
 .ep-clip-detail-row {
@@ -1130,20 +1157,23 @@
 }
 
 .ep-duration-input {
-  width: 60px;
-  height: 24px;
-  background: var(--ep-bg-deepest, #0a0a14);
-  border: 1px solid var(--ep-border, #1f1f30);
-  border-radius: 4px;
-  padding: 0 6px;
-  color: var(--ep-text-primary, #e8e8f0);
-  font-size: 11px;
+  width: 70px;
+  height: 28px;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-xs, 8px);
+  padding: 0 8px;
+  color: var(--text-primary, #1e293b);
+  font-size: 12px;
   outline: none;
   text-align: center;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
 .ep-duration-input:focus {
-  border-color: var(--ep-accent, #6c5ce7);
+  border-color: var(--primary, #6366f1);
+  box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff);
 }
 
 /* ═══════════════════════════════════════
@@ -1363,8 +1393,8 @@
   cursor: not-allowed;
 }
 .ep-style-btn:active {
-  background: rgba(108, 92, 231, 0.08);
-  transform: scale(0.93);
+  background: var(--primary-soft, #eef2ff);
+  transform: scale(0.95);
 }
 .ep-ai-recommend-btn:active {
   opacity: 0.8;
@@ -1436,13 +1466,16 @@
 /* ═══ 片段属性面板 — 补充样式 ═══ */
 .ep-clip-detail-unit {
   font-size: var(--font-size-xs, 11px);
-  color: var(--ep-text-muted, #4b5563);
+  color: var(--text-tertiary, #94a3b8);
+  margin-left: 2px;
 }
 
 .ep-clip-detail-linked {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  color: var(--primary, #6366f1);
+  font-size: 12px;
 }
 
 .ep-clip-detail-linked::before {
@@ -1450,7 +1483,7 @@
   display: inline-block;
   width: 12px;
   height: 12px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   flex-shrink: 0;