fix(练习): 修复知识领域显示和输入焦点问题

- 隐藏未答对的知识领域名称，只在答对后显示
- 增加底部输入区域透明度（80% -> 60%）
- 修复切换格子后输入框未自动聚焦的问题
- 优化连续输入处理，支持多字符自动分配到后续输入框

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

src/pages/ProcessPracticePage.tsx

@@ -57,17 +57,21 @@ export default function ProcessPracticePage() {
       setCharStatuses(new Array(cell.answer.length).fill('pending'))
       setLastErrorTimestamp(null)
 
-      // 滚动到可见区域并聚焦
+      // 滚动到可见区域
       requestAnimationFrame(() => {
         const element = document.querySelector(
           `[data-cell-id="${cell.id}"]`
         ) as HTMLElement
         element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        // 聚焦格子，使键盘长按生效
-        setTimeout(() => {
-          element?.focus()
-        }, 100)
       })
+
+      // 延迟聚焦到第一个输入框，确保 DOM 已更新
+      setTimeout(() => {
+        const firstInput = document.querySelector(
+          '.practice-input-area input'
+        ) as HTMLInputElement
+        firstInput?.focus()
+      }, 150)
     },
     []
   )
@@ -314,7 +318,7 @@ export default function ProcessPracticePage() {
       </div>
 
       {/* 底部固定区域 */}
-      <div className="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 z-10">
+      <div className="fixed bottom-0 left-0 right-0 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 z-10">
         <div className="max-w-7xl mx-auto">
           {/* 输入区域 */}
           <div className="py-4 border-b border-gray-200/50 dark:border-gray-700/50">