fix(web): 修复手动起卦教程、硬币动画与积分显示

- 修复硬币翻转动画：从 @keyframes 改为 CSS transition 实现双向动画
- 修复教程自动显示：将 setTutorialChecked 移入 setTimeout 回调，
  避免 useEffect cleanup 提前清除 timer 导致 setGuideStep 不执行
- 添加 AppShell UserSettingsContext 共享 userProfile
- 实现教程结束后调用 updateUserSettings 标记 manual_divination_shown
- 添加点击已确认爻进行编辑的功能 (editingIndex 状态)
- 确认爻后不再重置硬币状态
- 积分显示从硬编码改为读取 API 返回值
- 手机端教程使用 absolute 定位替代 fixed 避免滚动偏移
- 添加 isMobile 响应式状态追踪窗口大小变化

web/src/components/AutoDivinationPage.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Icon from './Icon';
+import { getPointsBalance, type PointsBalance } from '../lib/api';
 
 interface Props {
   locale: string;
@@ -14,6 +15,11 @@ export default function AutoDivinationPage({ locale, divination: d }: Props) {
   const [progress, setProgress] = useState(0);
   const [hexLines, setHexLines] = useState<boolean[]>([]);
   const [isShaking, setIsShaking] = useState(false);
+  const [points, setPoints] = useState<PointsBalance | null>(null);
+
+  useEffect(() => {
+    getPointsBalance().then(setPoints).catch(() => {});
+  }, []);
 
   const handleShake = () => {
     setIsShaking(true);
@@ -37,7 +43,9 @@ export default function AutoDivinationPage({ locale, divination: d }: Props) {
           </div>
           <div className="hidden md:flex items-center gap-2 h-10 px-3.5 rounded-full bg-white border border-slate-200 text-[#333333] text-[13px] font-semibold">
             <Icon name="paid" className="w-[18px] h-[18px] text-violet-700" />
-            {locale === 'en' ? 'Available 120 credits · This time 20 credits' : '可用 120 积分 · 本次 20 积分'}
+            {locale === 'en'
+              ? `Available ${points?.availableBalance ?? '...'} credits · This time ${points?.runCost ?? 20} credits`
+              : `可用 ${points?.availableBalance ?? '...'} 积分 · 本次 ${points?.runCost ?? 20} 积分`}
           </div>
         </div>
         <div className="flex flex-col xl:flex-row gap-[22px] min-h-0 flex-1">