diff --git a/frontend/index.html b/frontend/index.html
index 6c17859..3373a3c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -35,14 +35,13 @@
 
                 <!-- Toolbar -->
                 <div class="toolbar">
-                    <div class="toolbar-group">
+                    <div class="toolbar-row">
                         <span class="toolbar-label">引擎：</span>
                         <select id="engine-select">
                             <option value="minimax">MiniMax</option>
                             <option value="cosyvoice">CosyVoice</option>
                         </select>
-                    </div>
-                    <div class="toolbar-group emotion-group">
+                        <span class="toolbar-divider"></span>
                         <span class="toolbar-label">情绪：</span>
                         <div id="emotion-global">
                             <button class="emotion-btn" data-emotion="happy" title="开心愉快">😊</button>
@@ -51,10 +50,9 @@
                             <button class="emotion-btn" data-emotion="surprised" title="惊讶">❗</button>
                             <button class="emotion-btn" data-emotion="fearful" title="害怕">😨</button>
                             <button class="emotion-btn" data-emotion="disgusted" title="厌恶">😒</button>
-                            <span class="toolbar-hint">← 选择整段语音的情绪风格</span>
                         </div>
                         <div id="emotion-per-sentence" style="display:none">
-                            逐句标注模式：选中句子后点击情绪标签（即将支持）
+                            逐句标注模式（即将支持）
                         </div>
                     </div>
                 </div>
diff --git a/frontend/styles.css b/frontend/styles.css
index 2ef08b6..a5d89a4 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -117,35 +117,52 @@ body {
     margin-bottom: 16px;
 }
 
-.toolbar-group { display: flex; align-items: center; gap: 8px; }
+.toolbar-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    flex-wrap: wrap;
+}
 .toolbar-label { font-size: 0.85rem; color: var(--text-secondary); }
-.toolbar-hint { font-size: 0.7rem; color: var(--text-muted); margin-left: 8px; }
+.toolbar-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-color);
+}
 
 #engine-select {
-    padding: 6px 12px;
-    background: #1a1a25;
-    border: 1px solid #2a2a3a;
-    border-radius: var(--radius-sm);
+    padding: 10px 36px 10px 16px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
     color: #ffffff;
-    font-size: 0.85rem;
+    font-size: 0.95rem;
     cursor: pointer;
     transition: var(--transition-fast);
     outline: none;
     -webkit-appearance: none;
     appearance: none;
+    min-width: 140px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
-    background-position: right 8px center;
-    padding-right: 28px;
+    background-position: right 12px center;
+}
+#engine-select:hover {
+    border-color: var(--border-hover);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+#engine-select:focus {
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
-#engine-select:hover { border-color: var(--border-hover); }
-#engine-select:focus { border-color: var(--accent-primary); }
 #engine-select option { background: #1a1a25; color: #ffffff; }
 
 #emotion-global {
     display: flex;
     align-items: center;
     gap: 4px;
+    flex-wrap: nowrap;
 }
 
 #emotion-per-sentence {