diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
index 53f08c6..3dfc060 100644
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -7,6 +7,7 @@ on:
     paths:
       - 'deploy/**'
       - 'design/**'
+      - 'client/**'
       - 'ci/**'
       - '.gitea/workflows/ci.yml'
   pull_request:
@@ -84,7 +85,24 @@ jobs:
       - name: scan UI text resources for prohibited words
         run: bash ci/scan-redline.sh
 
-  # ── Job 5: Container Image Build ────────────────────────────────────────
+  # ── Job 5: Flutter 客户端(分析 + 单测/组件测试)────────────────────────
+  # golden 基准图需本地 `flutter test --update-goldens` 生成并提交后,
+  # 再把 test/golden 纳入下方测试范围;此处先跑 unit + widget,保证 CI 稳定。
+  flutter-client:
+    name: Flutter — analyze + test
+    runs-on: nas
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: flutter analyze + test (unit/widget)
+        run: |
+          docker run --rm \
+            -v "$PWD/client:/app" -w /app \
+            ghcr.io/cirruslabs/flutter:stable \
+            bash -c "flutter pub get && flutter analyze && flutter test test/unit test/widget"
+
+  # ── Job 6: Container Image Build ────────────────────────────────────────
   image-build:
     name: Image Build — pangolin-edge
     runs-on: nas
diff --git a/ci/scan-redline.sh b/ci/scan-redline.sh
index 05f44cc..d9ea3be 100644
--- a/ci/scan-redline.sh
+++ b/ci/scan-redline.sh
@@ -3,6 +3,7 @@
 #
 # 扫描范围: design/ui_kits/**/*.{jsx,js,html}
 #           design/flutter/**/*.{dart,html}
+#           client/lib/**/*.dart   ← 生产 Flutter 客户端(界面文案全部走 l10n 资源)
 # 不扫描:   README.md、CLAUDE.md 等纯文档文件
 #
 # 红线词(来源: design/CLAUDE.md §1 铁律 13):
@@ -71,6 +72,16 @@ while IFS= read -r -d '' f; do
   fi
 done < <(find design/flutter -type f \( -name "*.dart" -o -name "*.html" \) -not -name "README.md" -print0)
 
+# 扫描生产 Flutter 客户端 client/lib 下的 dart 文件(排除构建产物)
+if [ -d client/lib ]; then
+  while IFS= read -r -d '' f; do
+    SCANNED=$((SCANNED + 1))
+    if ! scan_file "$f"; then
+      VIOLATIONS=$((VIOLATIONS + 1))
+    fi
+  done < <(find client/lib -type f -name "*.dart" -not -path '*/.dart_tool/*' -not -path '*/build/*' -print0)
+fi
+
 echo "→ 扫描完成：共 ${SCANNED} 个文件，${VIOLATIONS} 个违规。"
 echo ""
 
diff --git a/client/README.md b/client/README.md
new file mode 100644
index 0000000..4276cb9
--- /dev/null
+++ b/client/README.md
@@ -0,0 +1,54 @@
+# 穿山甲 · Pangolin — Flutter 客户端
+
+跨平台网络加速客户端。UI 以 `design/ui_kits/`(mobile + tablet)React 原型为像素基准,
+令牌同源自 `design/colors_and_type.css`(Dart 镜像见 `lib/pangolin_theme.dart`)。
+
+## 运行
+
+```bash
+flutter pub get
+flutter run
+# main.dart 已串好:登录 → 引导 → 主框架(连接/节点/统计/账户)
+```
+
+## 工程结构
+
+```
+lib/
+  pangolin_theme.dart      语义 token + 明/暗 ThemeData(零硬编码十六进制,改令牌与 css 两处同改)
+  l10n/                    文案资源(单显:任一时刻只渲染中文或英文)
+    app_text.dart          抽象契约 + AppLang 枚举
+    strings_zh.dart        中文资源        ← CI 红线词扫描目标
+    strings_en.dart        英文资源        ← CI 红线词扫描目标
+  models/node.dart         节点模型(2 字母码块,无 emoji 国旗)
+  state/                   Riverpod 状态层(UI 与数据解耦,mock 数据,接 API 不动 UI)
+    app_providers.dart     语言 / 主题 / 套餐视角
+    connection_provider.dart 连接状态机(严格三态,禁止乐观显示)
+    quota_provider.dart    免费额度状态机(剩余分钟 + 看广告解锁)
+    nodes_provider.dart    节点清单 + 智能选择(AUTO 取最低延迟)
+  widgets/                 原子组件(连接键三态 / 推荐卡 / 额度卡 / 国家码块 / Tab 滑动仲裁 …)
+  screens/                 4 个主页面(同一份代码按断点自适应)
+```
+
+## 关键实现要点
+
+- **连接键三态**:`off` 暖灰底+虚线轨道环 / `connecting` clay 实底+旋转弧 / `on` 绿底满环+圆内计时+光晕。
+  过渡只走 `box-shadow`/背景色,不做全属性动画。状态严格来自 `connectionProvider`,点击只派发事件——**禁止乐观显示**。
+- **智能选择推荐卡**:节点页置顶常驻,accent-subtle 底 + clay 渐变 zap 图标 + 「推荐」胶囊,默认选中。
+- **免费额度卡**:剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」→ 解锁后变绿。
+- **Tab 滑动切换**:`HorizontalSwipeArea` 仅接横向拖拽;纵向滚动由列表的纵向识别器在手势竞技场胜出,
+  子页滚动区域不会误触发(`DirectionalTabSwitcher` 做 200ms 方向感知滑入)。
+- **iPad/宽屏断点**:`LayoutBuilder` 在宽度 ≥900 时切左侧栏分栏(导航行高 ≥48),
+  连接页双栏、节点页双列网格——**复用同一批原子组件,仅布局开关,不 fork 页面**。
+- **文案全部走 l10n**,界面无红线词(铁律 13),由 `ci/scan-redline.sh` 在 CI 防回归。
+
+## 测试
+
+```bash
+flutter analyze                       # 期望零警告
+flutter test test/unit test/widget    # 状态机单测 + 组件行为测试
+flutter test --update-goldens test/golden   # 首次生成 golden 基准图
+flutter test test/golden              # 之后做 golden 回归(连接键三态/推荐卡/额度卡 × 明暗)
+```
+
+> golden 基准图依赖本机字体渲染,首次须用 `--update-goldens` 生成并提交;CI 默认只跑 unit + widget。
diff --git a/client/lib/l10n/app_text.dart b/client/lib/l10n/app_text.dart
new file mode 100644
index 0000000..b4b08a1
--- /dev/null
+++ b/client/lib/l10n/app_text.dart
@@ -0,0 +1,152 @@
+// app_text.dart — 文案契约(l10n 资源层)
+//
+// 产品任一时刻只显示中文【或】英文(设计铁律 §6 单语言显示),由
+// `localeProvider` 段控切换。所有界面文案必须经此处取用,禁止在组件内
+// 写死中/英字面量。zh / en 两份资源分别在 strings_zh.dart / strings_en.dart。
+//
+// 红线词约束(设计铁律 §13):资源文件不得出现 VPN / 翻墙 / 科学上网 /
+// 突破封锁 / 自由穿越 / Go anywhere。CI `ci/scan-redline.sh` 对本目录做扫描。
+//
+// 注意:这是手写资源(非 flutter gen-l10n 代码生成),保证离线可编译;
+// 接口形态与 .arb 一致,后续可平滑迁移到官方 l10n 工具链。
+
+/// 受支持语言。单显——任一时刻只渲染其一。
+enum AppLang { zh, en }
+
+/// 全部界面文案的抽象契约。zh / en 各实现一份。
+abstract class AppText {
+  const AppText();
+
+  AppLang get lang;
+
+  // ── 品牌 / 连接状态 ──
+  String get brand;
+  String get online;
+  String get offline;
+  String get capOff;
+  String get capConnecting;
+  String get capOn;
+  String get connectNow; // 连接键 off 态圆内文字
+  String get secure; // 连接键圆内「已加密」
+
+  // ── 底部 / 侧栏导航 ──
+  String get tabConnect;
+  String get tabServers;
+  String get tabStats;
+  String get tabMe;
+
+  // ── 连接页 ──
+  String get currentNode;
+  String get download;
+  String get upload;
+  String get latency;
+
+  // ── 免费额度卡 ──
+  String get quotaToday;
+  String get minutes;
+  String get quotaFree;
+  String get watchAd;
+  String get adUnlocked;
+
+  // ── 节点页 ──
+  String get chooseNode;
+  String get searchPh;
+  String get smartSelect;
+  String get smartSub;
+  String get recommended;
+
+  // ── 统计页 ──
+  String get statsTitle;
+  String get trafficMonth;
+  String get avgPing;
+  String get durMonth;
+  String get weekTraffic;
+  List<String> get days7;
+
+  // ── 账户页 ──
+  String get meTitle;
+  String get proMember;
+  String get freePlanName;
+  String get expires;
+  String get upgradeBtn;
+  String get accInfoTitle;
+  String get accEmail;
+  String get accPassword;
+  String get accChange;
+  String get myDevices;
+  String get devicesSub;
+  String get thisDevice;
+  String get remove;
+  String get redeemEntry;
+  String get contactEntry;
+  String get signOut;
+  String get language;
+  String get darkAppearance;
+  String get stateOn;
+  String get followLight;
+  String get protocol;
+
+  // ── 套餐选择 ──
+  String get choosePlan;
+  String get freePlan;
+  String get proPlan;
+  String get teamPlan;
+  String get perMonth;
+  String get current;
+  String get upgrade;
+  String get choose;
+  String get mostPopular;
+  List<String> get featsFree;
+  List<String> get featsPro;
+  List<String> get featsTeam;
+
+  // ── 兑换 & 购买 ──
+  String get redeemTitle;
+  String get redeemCodeTitle;
+  String get redeemPh;
+  String get redeemBtn;
+  String get redeemOk;
+  String get buyTitle;
+  String get buySub;
+  String get chStore;
+  String get chEmail;
+
+  // ── 联系我们 ──
+  String get contactTitle;
+  String get contactIntro;
+  String get contactEmail;
+  String get contactStore;
+  String get contactHoursTitle;
+  String get contactHours;
+
+  // ── 登录 / 注册 ──
+  String get authTagline;
+  String get tabLogin;
+  String get tabRegister;
+  String get emailLabel;
+  String get emailPh;
+  String get pwLabel;
+  String get pwPh;
+  String get setPwPh;
+  String get codeLabel;
+  String codeSentTo(String email);
+  String get sendCode;
+  String get resend;
+  String get doLogin;
+  String get doNext;
+  String get doCreate;
+  String get forgotPw;
+  String get tos;
+
+  // ── 首次引导 ──
+  String get obSkip;
+  String get obNext;
+  String get obAllow;
+  String get obStart;
+  String get ob1Title;
+  String get ob1Sub;
+  String get ob2Title;
+  String get ob2Sub;
+  String get ob3Title;
+  String get ob3Sub;
+}
diff --git a/client/lib/l10n/strings_en.dart b/client/lib/l10n/strings_en.dart
new file mode 100644
index 0000000..71c20e8
--- /dev/null
+++ b/client/lib/l10n/strings_en.dart
@@ -0,0 +1,247 @@
+// strings_en.dart — English copy resources (single-language display)
+//
+// Red-line words forbidden: VPN / 翻墙 / 科学上网 / 突破封锁 / 自由穿越 / Go anywhere.
+// Positioning: network acceleration / experience optimization + privacy.
+// Plan numbers follow design/CLAUDE.md §7.
+import 'app_text.dart';
+
+class StringsEn extends AppText {
+  const StringsEn();
+
+  @override
+  AppLang get lang => AppLang.en;
+
+  @override
+  String get brand => 'Pangolin';
+  @override
+  String get online => '● Online';
+  @override
+  String get offline => '○ Offline';
+  @override
+  String get capOff => 'Tap to connect';
+  @override
+  String get capConnecting => 'Connecting…';
+  @override
+  String get capOn => 'Connected · Encrypted';
+  @override
+  String get connectNow => 'CONNECT';
+  @override
+  String get secure => 'SECURE';
+
+  @override
+  String get tabConnect => 'Connect';
+  @override
+  String get tabServers => 'Servers';
+  @override
+  String get tabStats => 'Stats';
+  @override
+  String get tabMe => 'Account';
+
+  @override
+  String get currentNode => 'Current node';
+  @override
+  String get download => 'Down';
+  @override
+  String get upload => 'Up';
+  @override
+  String get latency => 'Ping';
+
+  @override
+  String get quotaToday => 'Left today';
+  @override
+  String get minutes => 'min';
+  @override
+  String get quotaFree => 'Free · 10 min/day';
+  @override
+  String get watchAd => 'Watch ad to start';
+  @override
+  String get adUnlocked => 'Unlocked for today';
+
+  @override
+  String get chooseNode => 'Choose server';
+  @override
+  String get searchPh => 'Search country / city';
+  @override
+  String get smartSelect => 'Smart select';
+  @override
+  String get smartSub => 'Picks the best node for your network';
+  @override
+  String get recommended => 'Recommended';
+
+  @override
+  String get statsTitle => 'Statistics';
+  @override
+  String get trafficMonth => 'Traffic';
+  @override
+  String get avgPing => 'Avg ping';
+  @override
+  String get durMonth => 'Time';
+  @override
+  String get weekTraffic => 'This week (GB)';
+  @override
+  List<String> get days7 => const ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+  @override
+  String get meTitle => 'Account';
+  @override
+  String get proMember => 'PRO member';
+  @override
+  String get freePlanName => 'Free';
+  @override
+  String get expires => 'Expires';
+  @override
+  String get upgradeBtn => 'Renew / Upgrade';
+  @override
+  String get accInfoTitle => 'Account info';
+  @override
+  String get accEmail => 'Email';
+  @override
+  String get accPassword => 'Password';
+  @override
+  String get accChange => 'Change';
+  @override
+  String get myDevices => 'My devices';
+  @override
+  String get devicesSub => 'Up to 5 devices on PRO';
+  @override
+  String get thisDevice => 'This device';
+  @override
+  String get remove => 'Remove';
+  @override
+  String get redeemEntry => 'Redeem & buy';
+  @override
+  String get contactEntry => 'Contact us';
+  @override
+  String get signOut => 'Sign out';
+  @override
+  String get language => 'Language';
+  @override
+  String get darkAppearance => 'Dark appearance';
+  @override
+  String get stateOn => 'On';
+  @override
+  String get followLight => 'Off';
+  @override
+  String get protocol => 'Protocol';
+
+  @override
+  String get choosePlan => 'Choose plan';
+  @override
+  String get freePlan => 'Free';
+  @override
+  String get proPlan => 'Pro';
+  @override
+  String get teamPlan => 'Team';
+  @override
+  String get perMonth => '/mo';
+  @override
+  String get current => 'Current';
+  @override
+  String get upgrade => 'Upgrade';
+  @override
+  String get choose => 'Choose';
+  @override
+  String get mostPopular => 'Popular';
+  @override
+  List<String> get featsFree => const [
+        '1 basic node only',
+        '10 min per day',
+        'Watch an ad to start',
+        '7-day free trial on sign-up',
+      ];
+  @override
+  List<String> get featsPro =>
+      const ['80+ locations', 'Unlimited · fast', '5 devices', 'Streaming optimized'];
+  @override
+  List<String> get featsTeam =>
+      const ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'];
+
+  @override
+  String get redeemTitle => 'Redeem & buy';
+  @override
+  String get redeemCodeTitle => 'Redeem a code';
+  @override
+  String get redeemPh => 'Enter activation code';
+  @override
+  String get redeemBtn => 'Redeem';
+  @override
+  String get redeemOk => 'Activated · PRO unlocked';
+  @override
+  String get buyTitle => 'Where to buy';
+  @override
+  String get buySub => 'In-app payment is unavailable. Get a code via:';
+  @override
+  String get chStore => 'Self-serve store';
+  @override
+  String get chEmail => 'Email support';
+
+  @override
+  String get contactTitle => 'Contact us';
+  @override
+  String get contactIntro =>
+      'Need help? Reach us via any channel below — usually replies in minutes.';
+  @override
+  String get contactEmail => 'Email support';
+  @override
+  String get contactStore => 'Self-serve store';
+  @override
+  String get contactHoursTitle => 'Support hours';
+  @override
+  String get contactHours => 'Daily 9:00 – 24:00 (GMT+8)';
+
+  @override
+  String get authTagline => 'Fast · Stable · Effortless';
+  @override
+  String get tabLogin => 'Log in';
+  @override
+  String get tabRegister => 'Sign up';
+  @override
+  String get emailLabel => 'Email';
+  @override
+  String get emailPh => 'your@email.com';
+  @override
+  String get pwLabel => 'Password';
+  @override
+  String get pwPh => 'Enter password';
+  @override
+  String get setPwPh => 'Set a password (for multi-device login)';
+  @override
+  String get codeLabel => 'Verification code';
+  @override
+  String codeSentTo(String email) => 'Code sent to $email';
+  @override
+  String get sendCode => 'Send code';
+  @override
+  String get resend => 'Resend';
+  @override
+  String get doLogin => 'Log in';
+  @override
+  String get doNext => 'Next';
+  @override
+  String get doCreate => 'Create account';
+  @override
+  String get forgotPw => 'Forgot password?';
+  @override
+  String get tos => 'By continuing you agree to our Terms & Privacy Policy';
+
+  @override
+  String get obSkip => 'Skip';
+  @override
+  String get obNext => 'Next';
+  @override
+  String get obAllow => 'Allow & continue';
+  @override
+  String get obStart => 'Get started';
+  @override
+  String get ob1Title => 'Connect worldwide';
+  @override
+  String get ob1Sub => '80+ locations, auto-fastest routing, rock-solid.';
+  @override
+  String get ob2Title => 'Allow network setup';
+  @override
+  String get ob2Sub => 'The system will ask to add a network profile to build the encrypted tunnel.';
+  @override
+  String get ob3Title => 'Private by design';
+  @override
+  String get ob3Sub => 'End-to-end encrypted. We keep zero browsing logs.';
+}
diff --git a/client/lib/l10n/strings_zh.dart b/client/lib/l10n/strings_zh.dart
new file mode 100644
index 0000000..36f715e
--- /dev/null
+++ b/client/lib/l10n/strings_zh.dart
@@ -0,0 +1,241 @@
+// strings_zh.dart — 中文文案资源(单显)
+//
+// 红线词禁用:VPN / 翻墙 / 科学上网 / 突破封锁 / 自由穿越 / Go anywhere。
+// 脱敏口径:网络加速 / 体验优化 + 隐私保护。套餐数字以 design/CLAUDE.md §7 为准。
+import 'app_text.dart';
+
+class StringsZh extends AppText {
+  const StringsZh();
+
+  @override
+  AppLang get lang => AppLang.zh;
+
+  @override
+  String get brand => '穿山甲';
+  @override
+  String get online => '● 在线';
+  @override
+  String get offline => '○ 离线';
+  @override
+  String get capOff => '未连接 · 轻点连接';
+  @override
+  String get capConnecting => '连接中…';
+  @override
+  String get capOn => '已连接 · 网络已加密';
+  @override
+  String get connectNow => '点击连接';
+  @override
+  String get secure => '已加密';
+
+  @override
+  String get tabConnect => '连接';
+  @override
+  String get tabServers => '节点';
+  @override
+  String get tabStats => '统计';
+  @override
+  String get tabMe => '我的';
+
+  @override
+  String get currentNode => '当前节点';
+  @override
+  String get download => '下载';
+  @override
+  String get upload => '上传';
+  @override
+  String get latency => '延迟';
+
+  @override
+  String get quotaToday => '今日剩余';
+  @override
+  String get minutes => '分钟';
+  @override
+  String get quotaFree => '免费版 · 每日 10 分钟';
+  @override
+  String get watchAd => '看广告开始使用';
+  @override
+  String get adUnlocked => '已解锁 · 今日可用';
+
+  @override
+  String get chooseNode => '选择节点';
+  @override
+  String get searchPh => '搜索国家 / 城市';
+  @override
+  String get smartSelect => '智能选择';
+  @override
+  String get smartSub => '根据当前网络环境,自动选择最优节点';
+  @override
+  String get recommended => '推荐';
+
+  @override
+  String get statsTitle => '使用统计';
+  @override
+  String get trafficMonth => '本月流量';
+  @override
+  String get avgPing => '平均延迟';
+  @override
+  String get durMonth => '本月时长';
+  @override
+  String get weekTraffic => '本周流量 (GB)';
+  @override
+  List<String> get days7 => const ['一', '二', '三', '四', '五', '六', '日'];
+
+  @override
+  String get meTitle => '我的';
+  @override
+  String get proMember => 'PRO 会员';
+  @override
+  String get freePlanName => '免费版';
+  @override
+  String get expires => '有效期至';
+  @override
+  String get upgradeBtn => '续费 / 升级';
+  @override
+  String get accInfoTitle => '账户信息';
+  @override
+  String get accEmail => '邮箱';
+  @override
+  String get accPassword => '密码';
+  @override
+  String get accChange => '修改';
+  @override
+  String get myDevices => '我的设备';
+  @override
+  String get devicesSub => 'PRO 套餐最多 5 台设备同时在线';
+  @override
+  String get thisDevice => '当前设备';
+  @override
+  String get remove => '移除';
+  @override
+  String get redeemEntry => '兑换 & 购买';
+  @override
+  String get contactEntry => '联系我们';
+  @override
+  String get signOut => '退出登录';
+  @override
+  String get language => '语言';
+  @override
+  String get darkAppearance => '深色外观';
+  @override
+  String get stateOn => '已开启';
+  @override
+  String get followLight => '跟随浅色';
+  @override
+  String get protocol => '协议';
+
+  @override
+  String get choosePlan => '选择套餐';
+  @override
+  String get freePlan => '免费版';
+  @override
+  String get proPlan => '专业版';
+  @override
+  String get teamPlan => '团队版';
+  @override
+  String get perMonth => '/月';
+  @override
+  String get current => '当前';
+  @override
+  String get upgrade => '立即升级';
+  @override
+  String get choose => '选择';
+  @override
+  String get mostPopular => '最受欢迎';
+  @override
+  List<String> get featsFree =>
+      const ['仅 1 个基础节点', '每日 10 分钟时长', '使用前观看广告', '注册享 7 天免费试用'];
+  @override
+  List<String> get featsPro =>
+      const ['80+ 全球节点', '无限流量 · 极速', '5 台设备同时在线', '流媒体优化'];
+  @override
+  List<String> get featsTeam =>
+      const ['专业版全部功能', '10 个成员席位', '集中计费与管理', '优先客服'];
+
+  @override
+  String get redeemTitle => '兑换 & 购买';
+  @override
+  String get redeemCodeTitle => '兑换激活码';
+  @override
+  String get redeemPh => '输入激活码';
+  @override
+  String get redeemBtn => '激活';
+  @override
+  String get redeemOk => '激活成功 · PRO 已开通';
+  @override
+  String get buyTitle => '购买渠道';
+  @override
+  String get buySub => 'App 内不支持直接支付。请通过以下渠道获取激活码:';
+  @override
+  String get chStore => '自助发卡商店';
+  @override
+  String get chEmail => '邮箱客服';
+
+  @override
+  String get contactTitle => '联系我们';
+  @override
+  String get contactIntro => '遇到问题?通过以下任一渠道联系我们,通常数分钟内回复。';
+  @override
+  String get contactEmail => '邮箱客服';
+  @override
+  String get contactStore => '自助发卡商店';
+  @override
+  String get contactHoursTitle => '服务时间';
+  @override
+  String get contactHours => '每日 9:00 – 24:00 (GMT+8)';
+
+  @override
+  String get authTagline => '极速 · 稳定 · 省心';
+  @override
+  String get tabLogin => '登录';
+  @override
+  String get tabRegister => '注册';
+  @override
+  String get emailLabel => '邮箱';
+  @override
+  String get emailPh => '你的邮箱地址';
+  @override
+  String get pwLabel => '密码';
+  @override
+  String get pwPh => '输入密码';
+  @override
+  String get setPwPh => '设置登录密码(用于多端登录)';
+  @override
+  String get codeLabel => '邮箱验证码';
+  @override
+  String codeSentTo(String email) => '验证码已发送至 $email';
+  @override
+  String get sendCode => '发送验证码';
+  @override
+  String get resend => '重新发送';
+  @override
+  String get doLogin => '登录';
+  @override
+  String get doNext => '下一步';
+  @override
+  String get doCreate => '创建账户';
+  @override
+  String get forgotPw => '忘记密码?';
+  @override
+  String get tos => '继续即代表同意《服务条款》与《隐私政策》';
+
+  @override
+  String get obSkip => '跳过';
+  @override
+  String get obNext => '下一步';
+  @override
+  String get obAllow => '允许并继续';
+  @override
+  String get obStart => '开始使用';
+  @override
+  String get ob1Title => '一键连接全球';
+  @override
+  String get ob1Sub => '80+ 节点,智能选择最快线路,稳定不掉线。';
+  @override
+  String get ob2Title => '授权网络配置';
+  @override
+  String get ob2Sub => '系统会请求添加一个网络配置,用于建立加密隧道。';
+  @override
+  String get ob3Title => '安全 · 无日志';
+  @override
+  String get ob3Sub => '端到端加密,我们不记录你的任何浏览数据。';
+}
diff --git a/client/lib/main.dart b/client/lib/main.dart
index 634ea35..dcb2daf 100644
--- a/client/lib/main.dart
+++ b/client/lib/main.dart
@@ -1,30 +1,29 @@
 // main.dart — 入口(演示态)
-// 串接:登录 → 引导 → 主框架(4 Tab)
+// 串接:登录 → 引导 → 主框架(4 Tab);状态层统一走 Riverpod。
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import 'pangolin_theme.dart';
-import 'widgets/pangolin_widgets.dart';
+import 'state/app_providers.dart';
+import 'widgets/auth_screen.dart';
+import 'widgets/home_shell.dart';
+import 'widgets/onboarding_screen.dart';
 
-void main() => runApp(const PangolinApp());
+void main() => runApp(const ProviderScope(child: PangolinApp()));
 
-class PangolinApp extends StatefulWidget {
+class PangolinApp extends ConsumerWidget {
   const PangolinApp({super.key});
-  @override
-  State<PangolinApp> createState() => _PangolinAppState();
-}
-
-class _PangolinAppState extends State<PangolinApp> {
-  bool zh = true;
-  ThemeMode mode = ThemeMode.system;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mode = ref.watch(themeModeProvider);
     return MaterialApp(
       title: '穿山甲',
       debugShowCheckedModeBanner: false,
       theme: PangolinTheme.light,
       darkTheme: PangolinTheme.dark,
       themeMode: mode,
-      home: RootFlow(zh: zh),
+      home: const RootFlow(),
     );
   }
 }
@@ -32,25 +31,25 @@ class _PangolinAppState extends State<PangolinApp> {
 /// 应用阶段:登录 → 引导 → 主应用
 enum AppStage { auth, onboarding, app }
 
-class RootFlow extends StatefulWidget {
-  const RootFlow({super.key, this.zh = true});
-  final bool zh;
+class RootFlow extends ConsumerStatefulWidget {
+  const RootFlow({super.key});
   @override
-  State<RootFlow> createState() => _RootFlowState();
+  ConsumerState<RootFlow> createState() => _RootFlowState();
 }
 
-class _RootFlowState extends State<RootFlow> {
+class _RootFlowState extends ConsumerState<RootFlow> {
   AppStage stage = AppStage.auth;
 
   @override
   Widget build(BuildContext context) {
+    final t = ref.watch(appTextProvider);
     switch (stage) {
       case AppStage.auth:
-        return AuthScreen(zh: widget.zh, onDone: () => setState(() => stage = AppStage.onboarding));
+        return AuthScreen(t: t, onDone: () => setState(() => stage = AppStage.onboarding));
       case AppStage.onboarding:
-        return OnboardingScreen(onDone: () => setState(() => stage = AppStage.app));
+        return OnboardingScreen(t: t, onDone: () => setState(() => stage = AppStage.app));
       case AppStage.app:
-        return HomeShell(zh: widget.zh);
+        return const HomeShell();
     }
   }
 }
diff --git a/client/lib/models/node.dart b/client/lib/models/node.dart
new file mode 100644
index 0000000..f664a2c
--- /dev/null
+++ b/client/lib/models/node.dart
@@ -0,0 +1,54 @@
+// node.dart — 加速节点数据模型
+import '../l10n/app_text.dart';
+
+/// 节点标签(决定副标题语义胶囊)。
+enum NodeTag { none, streaming, p2p }
+
+/// 单个加速节点。名称按语言单显;副标题脱敏(无红线词)。
+class Node {
+  const Node({
+    required this.code,
+    required this.nameZh,
+    required this.nameEn,
+    required this.ping,
+    this.tag = NodeTag.none,
+  });
+
+  /// 2 字母国家码(HK/JP/SG…),界面以码块渲染,绝不用 emoji 国旗。
+  final String code;
+  final String nameZh;
+  final String nameEn;
+
+  /// 演示延迟(ms)。
+  final int ping;
+  final NodeTag tag;
+
+  String localizedName(AppLang lang) => lang == AppLang.zh ? nameZh : nameEn;
+
+  /// 副标题:有标签时显示语义文字,否则用拉丁地名(两语言通用,不串语言)。
+  String localizedSub(AppLang lang) {
+    switch (tag) {
+      case NodeTag.streaming:
+        return lang == AppLang.zh ? '流媒体优化' : 'Streaming';
+      case NodeTag.p2p:
+        return 'P2P';
+      case NodeTag.none:
+        return nameEn;
+    }
+  }
+}
+
+/// 智能选择的哨兵选中值。
+const String kSmartNodeCode = 'AUTO';
+
+/// 演示节点清单(对齐 design/ui_kits/mobile/parts.jsx 的 SERVERS)。
+const List<Node> kDemoNodes = [
+  Node(code: 'HK', nameZh: '香港 · 流媒体', nameEn: 'Hong Kong', ping: 18, tag: NodeTag.streaming),
+  Node(code: 'JP', nameZh: '日本 东京', nameEn: 'Tokyo', ping: 32, tag: NodeTag.p2p),
+  Node(code: 'SG', nameZh: '新加坡', nameEn: 'Singapore', ping: 54, tag: NodeTag.p2p),
+  Node(code: 'TW', nameZh: '台湾 台北', nameEn: 'Taipei', ping: 28),
+  Node(code: 'US', nameZh: '美国 洛杉矶', nameEn: 'Los Angeles', ping: 146, tag: NodeTag.streaming),
+  Node(code: 'DE', nameZh: '德国 法兰克福', nameEn: 'Frankfurt', ping: 198),
+  Node(code: 'UK', nameZh: '英国 伦敦', nameEn: 'London', ping: 210),
+  Node(code: 'KR', nameZh: '韩国 首尔', nameEn: 'Seoul', ping: 41),
+];
diff --git a/client/lib/pangolin_theme.dart b/client/lib/pangolin_theme.dart
index e46e711..1102669 100644
--- a/client/lib/pangolin_theme.dart
+++ b/client/lib/pangolin_theme.dart
@@ -1,5 +1,5 @@
 // pangolin_theme.dart
-// 穿山甲 VPN · Pangolin VPN — Flutter design tokens
+// 穿山甲 · Pangolin — Flutter design tokens
 //
 // Single Dart source mirroring colors_and_type.css.
 // Fonts are loaded at runtime via the google_fonts package (no local ttf needed).
diff --git a/client/lib/screens/account_page.dart b/client/lib/screens/account_page.dart
new file mode 100644
index 0000000..7e34cde
--- /dev/null
+++ b/client/lib/screens/account_page.dart
@@ -0,0 +1,387 @@
+// account_page.dart — 账户页(套餐横幅 + 账户信息 + 设备/兑换/联系 + 语言/主题)
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../widgets/account_screens.dart';
+import '../widgets/app_top_bar.dart';
+import '../widgets/pangolin_icons.dart';
+
+const String kDemoEmail = 'me@pangolin.vpn';
+
+class AccountPage extends ConsumerWidget {
+  const AccountPage({super.key, required this.isWide});
+  final bool isWide;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final isFree = ref.watch(isFreePlanProvider);
+    final lang = ref.watch(localeProvider);
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final pad = isWide ? 28.0 : 20.0;
+
+    void push(Widget page) =>
+        Navigator.of(context).push(MaterialPageRoute(builder: (_) => page));
+
+    final body = ListView(
+      padding: EdgeInsets.fromLTRB(pad, isWide ? 6 : 0, pad, 24),
+      children: [
+        _PlanBanner(t: t, isFree: isFree, onUpgrade: () => push(PlansScreen(t: t))),
+        const SizedBox(height: 18),
+        // 账户信息
+        _SectionLabel(text: t.accInfoTitle),
+        _Card(children: [
+          _InfoRow(icon: PangolinIcons.mail, title: t.accEmail, value: kDemoEmail, trailing: _changeHint(c, t)),
+          Divider(height: 1, color: c.border),
+          _InfoRow(icon: PangolinIcons.lock, title: t.accPassword, value: '••••••••••', trailing: _changeHint(c, t)),
+        ]),
+        const SizedBox(height: 16),
+        // 设备 / 兑换 / 联系
+        _Card(children: [
+          _NavRow(icon: PangolinIcons.monitorSmartphone, title: t.myDevices, onTap: () => push(DevicesScreen(t: t))),
+          Divider(height: 1, color: c.border),
+          _NavRow(icon: PangolinIcons.shoppingBag, title: t.redeemEntry, onTap: () => push(RedeemScreen(t: t))),
+          Divider(height: 1, color: c.border),
+          _NavRow(icon: PangolinIcons.messageCircle, title: t.contactEntry, onTap: () => push(ContactScreen(t: t))),
+        ]),
+        const SizedBox(height: 16),
+        // 语言 / 主题 / 协议
+        _Card(children: [
+          _CustomRow(
+            icon: PangolinIcons.globe,
+            title: t.language,
+            trailing: _LangSwitch(lang: lang, onChange: (l) => ref.read(localeProvider.notifier).state = l),
+          ),
+          Divider(height: 1, color: c.border),
+          _CustomRow(
+            icon: isDark ? PangolinIcons.moon : PangolinIcons.sun,
+            title: t.darkAppearance,
+            subtitle: isDark ? t.stateOn : t.followLight,
+            trailing: _PangolinSwitch(
+              value: isDark,
+              onChanged: (v) => ref.read(themeModeProvider.notifier).state = v ? ThemeMode.dark : ThemeMode.light,
+            ),
+          ),
+          Divider(height: 1, color: c.border),
+          _CustomRow(
+            icon: PangolinIcons.shield,
+            title: t.protocol,
+            trailing: Text('WireGuard', style: PangolinText.mono.copyWith(color: c.fg3, fontSize: 13)),
+          ),
+        ]),
+        const SizedBox(height: 16),
+        // 演示:免费版视角开关
+        _Card(children: [
+          _CustomRow(
+            icon: PangolinIcons.clock,
+            title: lang == AppLang.zh ? '演示:免费版视角' : 'Demo: free-tier view',
+            subtitle: lang == AppLang.zh ? '切换额度卡与套餐横幅' : 'Toggles quota UI & plan banner',
+            trailing: _PangolinSwitch(
+              value: isFree,
+              onChanged: (v) => ref.read(isFreePlanProvider.notifier).state = v,
+            ),
+          ),
+        ]),
+        const SizedBox(height: 16),
+        _Card(children: [
+          _NavRow(icon: PangolinIcons.logOut, title: t.signOut, danger: true, onTap: () {}),
+        ]),
+      ],
+    );
+
+    if (isWide) return body;
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      AppTopBar(brand: t.brand),
+      PageTitle(title: t.meTitle),
+      Expanded(child: body),
+    ]);
+  }
+
+  Widget _changeHint(PangolinScheme c, AppText t) =>
+      Text(t.accChange, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600, fontSize: 13));
+}
+
+class _PlanBanner extends StatelessWidget {
+  const _PlanBanner({required this.t, required this.isFree, required this.onUpgrade});
+  final AppText t;
+  final bool isFree;
+  final VoidCallback onUpgrade;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    if (isFree) {
+      return Container(
+        padding: const EdgeInsets.all(18),
+        decoration: BoxDecoration(
+          color: c.surface,
+          borderRadius: BorderRadius.circular(PangolinRadius.xl),
+          border: Border.all(color: c.border),
+          boxShadow: PangolinShadow.sm,
+        ),
+        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Row(children: [
+            Container(
+              width: 44, height: 44,
+              decoration: BoxDecoration(color: c.bgSubtle, shape: BoxShape.circle),
+              child: Icon(PangolinIcons.user, size: 22, color: c.fg2),
+            ),
+            const SizedBox(width: 12),
+            Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              Text(kDemoEmail, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+              const SizedBox(height: 4),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 2),
+                decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+                child: Text(t.freePlanName, style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 11)),
+              ),
+            ])),
+            _UpgradeButton(label: t.upgradeBtn, onTap: onUpgrade),
+          ]),
+        ]),
+      );
+    }
+    // PRO 渐变横幅
+    return Container(
+      padding: const EdgeInsets.all(18),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          begin: Alignment.topLeft, end: Alignment.bottomRight,
+          colors: [PangolinColors.clay600, PangolinColors.clay800],
+        ),
+        borderRadius: BorderRadius.circular(PangolinRadius.xl),
+        boxShadow: PangolinShadow.md,
+      ),
+      child: Row(children: [
+        Container(
+          width: 44, height: 44,
+          decoration: BoxDecoration(color: PangolinColors.white.withOpacity(0.18), shape: BoxShape.circle),
+          child: const Icon(PangolinIcons.crown, size: 22, color: PangolinColors.white),
+        ),
+        const SizedBox(width: 12),
+        Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Text(kDemoEmail, style: const TextStyle(color: PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 16)),
+          const SizedBox(height: 4),
+          Text('${t.proMember} · 2026-12-31',
+              style: TextStyle(color: PangolinColors.white.withOpacity(0.85), fontSize: 12)),
+        ])),
+        FilledButton(
+          onPressed: onUpgrade,
+          style: FilledButton.styleFrom(
+            backgroundColor: PangolinColors.white,
+            foregroundColor: PangolinColors.clay700,
+            shape: const StadiumBorder(),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+          ),
+          child: Text(t.upgradeBtn, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
+        ),
+      ]),
+    );
+  }
+}
+
+class _UpgradeButton extends StatelessWidget {
+  const _UpgradeButton({required this.label, required this.onTap});
+  final String label;
+  final VoidCallback onTap;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return FilledButton(
+      onPressed: onTap,
+      style: FilledButton.styleFrom(
+        backgroundColor: c.accent,
+        foregroundColor: c.fgOnAccent,
+        shape: const StadiumBorder(),
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+      ),
+      child: Text(label, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
+    );
+  }
+}
+
+class _SectionLabel extends StatelessWidget {
+  const _SectionLabel({required this.text});
+  final String text;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(4, 0, 4, 10),
+      child: Text(text, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w700, fontSize: 13)),
+    );
+  }
+}
+
+class _Card extends StatelessWidget {
+  const _Card({required this.children});
+  final List<Widget> children;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Container(
+      decoration: BoxDecoration(
+        color: c.surface,
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        border: Border.all(color: c.border),
+        boxShadow: PangolinShadow.sm,
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Column(children: children),
+    );
+  }
+}
+
+class _InfoRow extends StatelessWidget {
+  const _InfoRow({required this.icon, required this.title, required this.value, this.trailing});
+  final IconData icon;
+  final String title, value;
+  final Widget? trailing;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
+      child: Row(children: [
+        _IconBox(icon: icon),
+        const SizedBox(width: 13),
+        Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Text(title, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w500, fontSize: 15)),
+          Text(value, style: PangolinText.caption.copyWith(color: c.fg3)),
+        ])),
+        if (trailing != null) trailing!,
+      ]),
+    );
+  }
+}
+
+class _NavRow extends StatelessWidget {
+  const _NavRow({required this.icon, required this.title, required this.onTap, this.danger = false});
+  final IconData icon;
+  final String title;
+  final VoidCallback onTap;
+  final bool danger;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+        child: Row(children: [
+          Icon(icon, size: 20, color: danger ? c.danger : c.accent),
+          const SizedBox(width: 13),
+          Expanded(child: Text(title, style: PangolinText.body.copyWith(color: danger ? c.danger : c.fg1, fontWeight: FontWeight.w500))),
+          if (!danger) Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
+        ]),
+      ),
+    );
+  }
+}
+
+class _CustomRow extends StatelessWidget {
+  const _CustomRow({required this.icon, required this.title, this.subtitle, required this.trailing});
+  final IconData icon;
+  final String title;
+  final String? subtitle;
+  final Widget trailing;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
+      child: Row(children: [
+        _IconBox(icon: icon),
+        const SizedBox(width: 13),
+        Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Text(title, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w500, fontSize: 15)),
+          if (subtitle != null) Text(subtitle!, style: PangolinText.caption.copyWith(color: c.fg3)),
+        ])),
+        trailing,
+      ]),
+    );
+  }
+}
+
+class _IconBox extends StatelessWidget {
+  const _IconBox({required this.icon});
+  final IconData icon;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Container(
+      width: 32, height: 32,
+      decoration: BoxDecoration(color: c.accentSubtle, borderRadius: BorderRadius.circular(PangolinRadius.sm)),
+      child: Icon(icon, size: 17, color: c.accent),
+    );
+  }
+}
+
+/// 段控:中文 / EN(单显切换)。
+class _LangSwitch extends StatelessWidget {
+  const _LangSwitch({required this.lang, required this.onChange});
+  final AppLang lang;
+  final ValueChanged<AppLang> onChange;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    Widget seg(AppLang v, String label) {
+      final active = lang == v;
+      return GestureDetector(
+        onTap: () => onChange(v),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 5),
+          decoration: BoxDecoration(
+            color: active ? c.accent : Colors.transparent,
+            borderRadius: BorderRadius.circular(PangolinRadius.full),
+          ),
+          child: Text(label,
+              style: PangolinText.caption.copyWith(
+                  color: active ? c.fgOnAccent : c.fg3, fontWeight: FontWeight.w700, fontSize: 12.5)),
+        ),
+      );
+    }
+
+    return Container(
+      padding: const EdgeInsets.all(3),
+      decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+      child: Row(mainAxisSize: MainAxisSize.min, children: [
+        seg(AppLang.zh, '中文'),
+        const SizedBox(width: 2),
+        seg(AppLang.en, 'EN'),
+      ]),
+    );
+  }
+}
+
+class _PangolinSwitch extends StatelessWidget {
+  const _PangolinSwitch({required this.value, required this.onChanged});
+  final bool value;
+  final ValueChanged<bool> onChanged;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return GestureDetector(
+      onTap: () => onChanged(!value),
+      child: AnimatedContainer(
+        duration: PangolinMotion.base,
+        curve: PangolinMotion.easeOut,
+        width: 46, height: 28,
+        decoration: BoxDecoration(color: value ? c.accent : c.borderStrong, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+        child: AnimatedAlign(
+          duration: PangolinMotion.base,
+          curve: PangolinMotion.easeOut,
+          alignment: value ? Alignment.centerRight : Alignment.centerLeft,
+          child: Padding(
+            padding: const EdgeInsets.all(3),
+            child: Container(width: 22, height: 22, decoration: const BoxDecoration(color: PangolinColors.white, shape: BoxShape.circle)),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/client/lib/screens/connect_page.dart b/client/lib/screens/connect_page.dart
new file mode 100644
index 0000000..df4c32a
--- /dev/null
+++ b/client/lib/screens/connect_page.dart
@@ -0,0 +1,231 @@
+// connect_page.dart — 连接页(窄屏单栏 / 宽屏双栏,同一份代码按断点切换)
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../l10n/app_text.dart';
+import '../models/node.dart';
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../state/connection_provider.dart';
+import '../state/nodes_provider.dart';
+import '../state/quota_provider.dart';
+import '../widgets/app_top_bar.dart';
+import '../widgets/connect_button.dart';
+import '../widgets/country_code.dart';
+import '../widgets/pangolin_icons.dart';
+import '../widgets/quota_card.dart';
+
+class ConnectPage extends ConsumerWidget {
+  const ConnectPage({super.key, required this.isWide, required this.onOpenNodes});
+
+  final bool isWide;
+  final VoidCallback onOpenNodes;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final conn = ref.watch(connectionProvider);
+    final node = ref.watch(effectiveNodeProvider);
+    final smart = ref.watch(isSmartSelectProvider);
+    final isFree = ref.watch(isFreePlanProvider);
+    final quota = ref.watch(quotaProvider);
+
+    final caption = switch (conn.phase) {
+      VpnPhase.off => t.capOff,
+      VpnPhase.connecting => t.capConnecting,
+      VpnPhase.on => t.capOn,
+    };
+
+    final button = ConnectButton(
+      phase: conn.phase,
+      elapsed: conn.elapsed,
+      offLabel: t.connectNow,
+      secureLabel: t.secure,
+      onTap: () => ref.read(connectionProvider.notifier).toggle(),
+    );
+
+    final captionWidget = Text(caption,
+        style: PangolinText.body.copyWith(color: c.fg2, fontWeight: FontWeight.w600));
+
+    final infoChildren = <Widget>[
+      if (isFree)
+        QuotaCard(quota: quota, t: t, onWatchAd: () => ref.read(quotaProvider.notifier).watchAd()),
+      if (conn.phase == VpnPhase.on) _SpeedRow(t: t, node: node),
+      _CurrentNodeCard(t: t, node: node, smart: smart, showLabel: isWide, onTap: onOpenNodes),
+    ];
+
+    final statusTrailing = Text(
+      conn.phase == VpnPhase.on ? t.online : t.offline,
+      style: PangolinText.mono.copyWith(
+          fontSize: 12,
+          color: conn.phase == VpnPhase.on ? c.success : c.fg3,
+          fontWeight: FontWeight.w600),
+    );
+
+    if (isWide) {
+      // 宽屏双栏:左大连接键 / 右信息列(额度卡→当前节点→速率)
+      return Column(children: [
+        Expanded(
+          child: Row(children: [
+            Expanded(
+              flex: 5,
+              child: Center(
+                child: Column(mainAxisSize: MainAxisSize.min, children: [
+                  button,
+                  const SizedBox(height: 24),
+                  captionWidget,
+                ]),
+              ),
+            ),
+            Container(width: 1, color: c.border),
+            SizedBox(
+              width: 332,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    for (final w in infoChildren) Padding(padding: const EdgeInsets.only(bottom: 14), child: w),
+                  ],
+                ),
+              ),
+            ),
+          ]),
+        ),
+      ]);
+    }
+
+    // 窄屏单栏
+    return Column(children: [
+      AppTopBar(brand: t.brand, trailing: statusTrailing),
+      Expanded(
+        child: Center(
+          child: Column(mainAxisSize: MainAxisSize.min, children: [
+            button,
+            const SizedBox(height: 24),
+            captionWidget,
+          ]),
+        ),
+      ),
+      Padding(
+        padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
+        child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+          for (final w in infoChildren) Padding(padding: const EdgeInsets.only(bottom: 12), child: w),
+        ]),
+      ),
+    ]);
+  }
+}
+
+/// 实时速率行(连接成功时显示;演示值)。
+class _SpeedRow extends StatelessWidget {
+  const _SpeedRow({required this.t, required this.node});
+  final AppText t;
+  final Node node;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final metrics = [
+      (PangolinIcons.arrowDown, t.download, '86.4', 'Mb/s'),
+      (PangolinIcons.arrowUp, t.upload, '12.1', 'Mb/s'),
+      (PangolinIcons.zap, t.latency, '${node.ping}', 'ms'),
+    ];
+    return Row(children: [
+      for (var i = 0; i < metrics.length; i++)
+        Expanded(
+          child: Padding(
+            padding: EdgeInsets.only(right: i < metrics.length - 1 ? 12 : 0),
+            child: Container(
+              padding: const EdgeInsets.fromLTRB(13, 11, 13, 11),
+              decoration: BoxDecoration(
+                color: c.surface,
+                borderRadius: BorderRadius.circular(PangolinRadius.lg),
+                border: Border.all(color: c.border),
+                boxShadow: PangolinShadow.sm,
+              ),
+              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+                Row(children: [
+                  Icon(metrics[i].$1, size: 13, color: c.accent),
+                  const SizedBox(width: 5),
+                  Flexible(
+                    child: Text(metrics[i].$2,
+                        overflow: TextOverflow.ellipsis,
+                        style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 11)),
+                  ),
+                ]),
+                const SizedBox(height: 4),
+                Text.rich(TextSpan(
+                  text: metrics[i].$3,
+                  style: PangolinText.mono.copyWith(fontSize: 16, color: c.fg1, fontWeight: FontWeight.w500),
+                  children: [TextSpan(text: ' ${metrics[i].$4}', style: PangolinText.caption.copyWith(color: c.fg3, fontSize: 10.5))],
+                )),
+              ]),
+            ),
+          ),
+        ),
+    ]);
+  }
+}
+
+/// 当前节点卡(智能选择时展示「智能选择 + zap」)。
+class _CurrentNodeCard extends StatelessWidget {
+  const _CurrentNodeCard({
+    required this.t,
+    required this.node,
+    required this.smart,
+    required this.showLabel,
+    required this.onTap,
+  });
+  final AppText t;
+  final Node node;
+  final bool smart;
+  final bool showLabel;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final title = smart ? t.smartSelect : node.localizedName(t.lang);
+    final sub = smart
+        ? '${node.localizedName(t.lang)} · ${node.ping}ms'
+        : '${node.localizedSub(t.lang)} · ${node.ping}ms';
+    return Material(
+      color: c.surface,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        side: BorderSide(color: c.border),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(12),
+          child: Row(children: [
+            CountryCode(code: node.code, active: true),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+                if (showLabel)
+                  Text(t.currentNode,
+                      style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 11)),
+                Row(children: [
+                  Flexible(
+                    child: Text(title,
+                        overflow: TextOverflow.ellipsis,
+                        style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
+                  ),
+                  if (smart) ...[const SizedBox(width: 6), Icon(PangolinIcons.zap, size: 13, color: c.accent)],
+                ]),
+                Text(sub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+              ]),
+            ),
+            Icon(PangolinIcons.chevronRight, size: 20, color: c.fg3),
+          ]),
+        ),
+      ),
+    );
+  }
+}
diff --git a/client/lib/screens/nodes_page.dart b/client/lib/screens/nodes_page.dart
new file mode 100644
index 0000000..c4ccfb8
--- /dev/null
+++ b/client/lib/screens/nodes_page.dart
@@ -0,0 +1,196 @@
+// nodes_page.dart — 节点页(置顶智能选择推荐卡 + 搜索 + 列表/双列网格)
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../l10n/app_text.dart';
+import '../models/node.dart';
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../state/connection_provider.dart';
+import '../state/nodes_provider.dart';
+import '../widgets/app_top_bar.dart';
+import '../widgets/country_code.dart';
+import '../widgets/pangolin_icons.dart';
+import '../widgets/server_tile.dart';
+import '../widgets/smart_select_card.dart';
+
+class NodesPage extends ConsumerStatefulWidget {
+  const NodesPage({super.key, required this.isWide, required this.onPicked});
+  final bool isWide;
+  final VoidCallback onPicked;
+
+  @override
+  ConsumerState<NodesPage> createState() => _NodesPageState();
+}
+
+class _NodesPageState extends ConsumerState<NodesPage> {
+  String _q = '';
+
+  void _pick(String code) {
+    ref.read(selectedNodeCodeProvider.notifier).state = code;
+    ref.read(connectionProvider.notifier).onNodeChanged();
+    widget.onPicked();
+  }
+
+  List<Node> _filtered(List<Node> nodes) {
+    if (_q.trim().isEmpty) return nodes;
+    final q = _q.toLowerCase();
+    return nodes
+        .where((n) => (n.nameZh + n.nameEn + n.code).toLowerCase().contains(q))
+        .toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final selected = ref.watch(selectedNodeCodeProvider);
+    final nodes = _filtered(ref.watch(nodesProvider));
+    final smart = selected == kSmartNodeCode;
+
+    final smartCard = SmartSelectCard(t: t, selected: smart, onTap: () => _pick(kSmartNodeCode));
+    final search = _SearchBox(hint: t.searchPh, onChanged: (v) => setState(() => _q = v));
+
+    if (widget.isWide) {
+      return ListView(
+        padding: const EdgeInsets.fromLTRB(28, 6, 28, 24),
+        children: [
+          smartCard,
+          const SizedBox(height: 14),
+          ConstrainedBox(constraints: const BoxConstraints(maxWidth: 380), child: search),
+          const SizedBox(height: 14),
+          GridView.count(
+            crossAxisCount: 2,
+            shrinkWrap: true,
+            physics: const NeverScrollableScrollPhysics(),
+            mainAxisSpacing: 11,
+            crossAxisSpacing: 11,
+            childAspectRatio: 4.4,
+            children: [
+              for (final n in nodes)
+                _NodeGridTile(node: n, lang: t.lang, active: !smart && n.code == selected, onTap: () => _pick(n.code)),
+            ],
+          ),
+        ],
+      );
+    }
+
+    // 窄屏:顶栏 + 标题 + 推荐卡 + 搜索 + 分组列表
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      AppTopBar(brand: t.brand),
+      PageTitle(title: t.chooseNode),
+      Expanded(
+        child: ListView(
+          padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
+          children: [
+            smartCard,
+            const SizedBox(height: 12),
+            search,
+            const SizedBox(height: 12),
+            Container(
+              decoration: BoxDecoration(
+                color: c.surface,
+                borderRadius: BorderRadius.circular(PangolinRadius.lg),
+                border: Border.all(color: c.border),
+                boxShadow: PangolinShadow.sm,
+              ),
+              clipBehavior: Clip.antiAlias,
+              child: Column(children: [
+                for (var i = 0; i < nodes.length; i++) ...[
+                  ServerTile(
+                    node: nodes[i],
+                    lang: t.lang,
+                    active: !smart && nodes[i].code == selected,
+                    onTap: () => _pick(nodes[i].code),
+                  ),
+                  if (i < nodes.length - 1) Divider(height: 1, thickness: 1, color: c.border),
+                ],
+              ]),
+            ),
+          ],
+        ),
+      ),
+    ]);
+  }
+}
+
+class _SearchBox extends StatelessWidget {
+  const _SearchBox({required this.hint, required this.onChanged});
+  final String hint;
+  final ValueChanged<String> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Container(
+      decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
+      padding: const EdgeInsets.symmetric(horizontal: 14),
+      child: Row(children: [
+        Icon(PangolinIcons.search, size: 18, color: c.fg3),
+        const SizedBox(width: 10),
+        Expanded(
+          child: TextField(
+            onChanged: onChanged,
+            style: PangolinText.sm.copyWith(color: c.fg1, fontSize: 15),
+            decoration: InputDecoration(
+              isCollapsed: true,
+              contentPadding: const EdgeInsets.symmetric(vertical: 12),
+              border: InputBorder.none,
+              hintText: hint,
+              hintStyle: PangolinText.sm.copyWith(color: c.fg3, fontSize: 15),
+            ),
+          ),
+        ),
+      ]),
+    );
+  }
+}
+
+/// 宽屏双列网格中的节点块。
+class _NodeGridTile extends StatelessWidget {
+  const _NodeGridTile({required this.node, required this.lang, required this.active, required this.onTap});
+  final Node node;
+  final AppLang lang;
+  final bool active;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Material(
+      color: active ? c.accentSubtle : c.surface,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        side: BorderSide(color: active ? c.accentBorder : c.border, width: 1.5),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 11),
+          child: Row(children: [
+            CountryCode(code: node.code, active: active),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+                Text(node.localizedName(lang),
+                    overflow: TextOverflow.ellipsis,
+                    style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14.5)),
+                Text(node.localizedSub(lang),
+                    overflow: TextOverflow.ellipsis,
+                    style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+              ]),
+            ),
+            const SizedBox(width: 8),
+            Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.end, children: [
+              Text('${node.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
+              const SizedBox(height: 5),
+              SignalBars(ping: node.ping),
+            ]),
+            if (active) ...[const SizedBox(width: 8), Icon(PangolinIcons.check, size: 18, color: c.accent)],
+          ]),
+        ),
+      ),
+    );
+  }
+}
diff --git a/client/lib/screens/stats_page.dart b/client/lib/screens/stats_page.dart
new file mode 100644
index 0000000..dabec61
--- /dev/null
+++ b/client/lib/screens/stats_page.dart
@@ -0,0 +1,113 @@
+// stats_page.dart — 统计页(指标卡 + 本周柱状图)
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../widgets/app_top_bar.dart';
+
+class StatsPage extends ConsumerWidget {
+  const StatsPage({super.key, required this.isWide});
+  final bool isWide;
+
+  static const _vals = [2.1, 3.4, 1.8, 4.6, 5.2, 6.1, 3.0];
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final maxV = _vals.reduce((a, b) => a > b ? a : b);
+    final pad = isWide ? 28.0 : 20.0;
+
+    final metrics = [
+      (t.trafficMonth, '42.6', 'GB'),
+      (t.avgPing, '29', 'ms'),
+      (t.durMonth, '86.4', 'h'),
+    ];
+
+    final body = ListView(
+      padding: EdgeInsets.fromLTRB(pad, isWide ? 6 : 0, pad, 24),
+      children: [
+        Row(children: [
+          for (var i = 0; i < metrics.length; i++)
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.only(right: i < metrics.length - 1 ? 12 : 0),
+                child: _MetricCard(label: metrics[i].$1, value: metrics[i].$2, unit: metrics[i].$3),
+              ),
+            ),
+        ]),
+        const SizedBox(height: 16),
+        Container(
+          padding: const EdgeInsets.all(18),
+          decoration: BoxDecoration(
+            color: c.surface,
+            borderRadius: BorderRadius.circular(PangolinRadius.lg),
+            border: Border.all(color: c.border),
+            boxShadow: PangolinShadow.sm,
+          ),
+          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            Text(t.weekTraffic, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
+            const SizedBox(height: 18),
+            SizedBox(
+              height: isWide ? 150 : 120,
+              child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
+                for (var i = 0; i < _vals.length; i++)
+                  Expanded(
+                    child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
+                      Text('${_vals[i]}', style: PangolinText.mono.copyWith(fontSize: 11, color: c.fg3)),
+                      const SizedBox(height: 6),
+                      Container(
+                        height: (isWide ? 104 : 84) * (_vals[i] / maxV),
+                        margin: const EdgeInsets.symmetric(horizontal: 6),
+                        decoration: BoxDecoration(
+                          color: c.accent.withOpacity(0.85),
+                          borderRadius: const BorderRadius.vertical(top: Radius.circular(6)),
+                        ),
+                      ),
+                      const SizedBox(height: 6),
+                      Text(t.days7[i], style: PangolinText.caption.copyWith(color: c.fg3)),
+                    ]),
+                  ),
+              ]),
+            ),
+          ]),
+        ),
+      ],
+    );
+
+    if (isWide) return body;
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      AppTopBar(brand: t.brand),
+      PageTitle(title: t.statsTitle),
+      Expanded(child: body),
+    ]);
+  }
+}
+
+class _MetricCard extends StatelessWidget {
+  const _MetricCard({required this.label, required this.value, required this.unit});
+  final String label, value, unit;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Container(
+      padding: const EdgeInsets.all(14),
+      decoration: BoxDecoration(
+        color: c.surface,
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        border: Border.all(color: c.border),
+        boxShadow: PangolinShadow.sm,
+      ),
+      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+        Text(label, overflow: TextOverflow.ellipsis, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
+        const SizedBox(height: 6),
+        Text.rich(TextSpan(
+          text: value,
+          style: PangolinText.mono.copyWith(fontSize: 20, color: c.fg1, fontWeight: FontWeight.w500),
+          children: [TextSpan(text: ' $unit', style: PangolinText.caption.copyWith(color: c.fg3))],
+        )),
+      ]),
+    );
+  }
+}
diff --git a/client/lib/state/app_providers.dart b/client/lib/state/app_providers.dart
new file mode 100644
index 0000000..3ed9aab
--- /dev/null
+++ b/client/lib/state/app_providers.dart
@@ -0,0 +1,22 @@
+// app_providers.dart — 语言 / 主题 / 套餐视角等基础状态(Riverpod)
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../l10n/app_text.dart';
+import '../l10n/strings_en.dart';
+import '../l10n/strings_zh.dart';
+
+/// 当前语言(单显)。设置/账户页段控切换。
+final localeProvider = StateProvider<AppLang>((ref) => AppLang.zh);
+
+/// 由语言派生的文案资源——UI 一律通过它取文案,不写死字面量。
+final appTextProvider = Provider<AppText>((ref) {
+  final lang = ref.watch(localeProvider);
+  return lang == AppLang.zh ? const StringsZh() : const StringsEn();
+});
+
+/// 主题模式。默认跟随系统;设置页可显式切深色。
+final themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.system);
+
+/// 演示:是否「免费版视角」。免费版才显示额度卡与免费横幅。
+final isFreePlanProvider = StateProvider<bool>((ref) => true);
diff --git a/client/lib/state/connection_provider.dart b/client/lib/state/connection_provider.dart
new file mode 100644
index 0000000..43a9ad4
--- /dev/null
+++ b/client/lib/state/connection_provider.dart
@@ -0,0 +1,94 @@
+// connection_provider.dart — 连接状态机(严格三态,禁止乐观显示)
+//
+// 设计约定(design/CLAUDE.md §2/§5):连接键三态严格对应状态层事件,
+// UI 只渲染本通知器的真实状态,绝不在点击时本地乐观翻转。连接握手由
+// 状态层(此处为 mock 计时器,后续替换为隧道事件)决定何时进入 on。
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/// 连接阶段。严格三态——与 React 原型一致。
+enum VpnPhase { off, connecting, on }
+
+/// 连接状态快照。
+class ConnectionState {
+  const ConnectionState({required this.phase, this.elapsed = Duration.zero});
+
+  final VpnPhase phase;
+  final Duration elapsed;
+
+  ConnectionState copyWith({VpnPhase? phase, Duration? elapsed}) =>
+      ConnectionState(phase: phase ?? this.phase, elapsed: elapsed ?? this.elapsed);
+
+  @override
+  bool operator ==(Object other) =>
+      other is ConnectionState && other.phase == phase && other.elapsed == elapsed;
+
+  @override
+  int get hashCode => Object.hash(phase, elapsed);
+}
+
+/// 连接状态机。握手时长可注入,便于测试确定化。
+class ConnectionController extends StateNotifier<ConnectionState> {
+  ConnectionController({this.handshake = const Duration(milliseconds: 1500)})
+      : super(const ConnectionState(phase: VpnPhase.off));
+
+  final Duration handshake;
+  Timer? _handshakeTimer;
+  Timer? _tick;
+
+  /// 用户轻点连接键:仅依据真实状态决定动作,握手中点击被忽略(禁乐观)。
+  void toggle() {
+    switch (state.phase) {
+      case VpnPhase.off:
+        connect();
+      case VpnPhase.on:
+        disconnect();
+      case VpnPhase.connecting:
+        break; // 握手进行中,不响应——避免乐观回退
+    }
+  }
+
+  void connect() {
+    _cancelTimers();
+    state = const ConnectionState(phase: VpnPhase.connecting);
+    _handshakeTimer = Timer(handshake, _onConnected);
+  }
+
+  void disconnect() {
+    _cancelTimers();
+    state = const ConnectionState(phase: VpnPhase.off);
+  }
+
+  /// 切换节点时触发:已连接则重连(短暂回到 connecting)。
+  void onNodeChanged() {
+    if (state.phase == VpnPhase.on || state.phase == VpnPhase.connecting) {
+      connect();
+    }
+  }
+
+  void _onConnected() {
+    state = const ConnectionState(phase: VpnPhase.on);
+    _tick = Timer.periodic(const Duration(seconds: 1), (_) {
+      state = state.copyWith(elapsed: state.elapsed + const Duration(seconds: 1));
+    });
+  }
+
+  void _cancelTimers() {
+    _handshakeTimer?.cancel();
+    _handshakeTimer = null;
+    _tick?.cancel();
+    _tick = null;
+  }
+
+  @override
+  void dispose() {
+    _cancelTimers();
+    super.dispose();
+  }
+}
+
+final connectionProvider =
+    StateNotifierProvider<ConnectionController, ConnectionState>(
+  (ref) => ConnectionController(),
+);
diff --git a/client/lib/state/nodes_provider.dart b/client/lib/state/nodes_provider.dart
new file mode 100644
index 0000000..f7c9d4f
--- /dev/null
+++ b/client/lib/state/nodes_provider.dart
@@ -0,0 +1,25 @@
+// nodes_provider.dart — 节点清单 + 当前选择(含智能选择 AUTO)
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../models/node.dart';
+
+/// 可用节点(演示数据;接口就绪后替换为 nodes API)。
+final nodesProvider = Provider<List<Node>>((ref) => kDemoNodes);
+
+/// 当前选中的节点 code;`AUTO` 表示智能选择(默认)。
+final selectedNodeCodeProvider = StateProvider<String>((ref) => kSmartNodeCode);
+
+/// 是否处于智能选择。
+final isSmartSelectProvider = Provider<bool>(
+  (ref) => ref.watch(selectedNodeCodeProvider) == kSmartNodeCode,
+);
+
+/// 实际生效的节点:智能选择时取延迟最小者,否则取选中节点。
+final effectiveNodeProvider = Provider<Node>((ref) {
+  final nodes = ref.watch(nodesProvider);
+  final code = ref.watch(selectedNodeCodeProvider);
+  if (code == kSmartNodeCode) {
+    return nodes.reduce((a, b) => a.ping <= b.ping ? a : b);
+  }
+  return nodes.firstWhere((n) => n.code == code, orElse: () => nodes.first);
+});
diff --git a/client/lib/state/quota_provider.dart b/client/lib/state/quota_provider.dart
new file mode 100644
index 0000000..0d49d41
--- /dev/null
+++ b/client/lib/state/quota_provider.dart
@@ -0,0 +1,53 @@
+// quota_provider.dart — 免费版每日额度状态机(Riverpod,mock 数据)
+//
+// 设计约定(design/CLAUDE.md §7 / §2):免费额度权威在服务端,本地仅展示。
+// 这里以 mock 实现 UI 与数据层解耦的接口形态:剩余分钟 + 是否已看广告解锁。
+// 接 API 时只替换本通知器内部,UI 不动。
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/// 免费额度快照。
+class FreeQuotaState {
+  const FreeQuotaState({
+    this.totalMinutes = 10,
+    this.remainingMinutes = 6,
+    this.adUnlocked = false,
+  });
+
+  /// 每日总额度(分钟)。§7:免费版每日 10 分钟。
+  final int totalMinutes;
+
+  /// 今日剩余分钟(展示值,权威以服务端为准)。
+  final int remainingMinutes;
+
+  /// 今日是否已观看激励视频解锁。
+  final bool adUnlocked;
+
+  /// 进度(0–1),用于进度条宽度。
+  double get progress =>
+      totalMinutes == 0 ? 0 : (remainingMinutes / totalMinutes).clamp(0.0, 1.0);
+
+  /// 是否进入低额度警示(≤3 分钟切 warning 色)。
+  bool get isLow => remainingMinutes <= 3;
+
+  FreeQuotaState copyWith({int? totalMinutes, int? remainingMinutes, bool? adUnlocked}) =>
+      FreeQuotaState(
+        totalMinutes: totalMinutes ?? this.totalMinutes,
+        remainingMinutes: remainingMinutes ?? this.remainingMinutes,
+        adUnlocked: adUnlocked ?? this.adUnlocked,
+      );
+}
+
+class QuotaController extends StateNotifier<FreeQuotaState> {
+  QuotaController([FreeQuotaState? initial])
+      : super(initial ?? const FreeQuotaState());
+
+  /// 观看激励视频后解锁今日使用。
+  void watchAd() => state = state.copyWith(adUnlocked: true);
+
+  /// 演示重置(回到未解锁)。
+  void reset() => state = const FreeQuotaState();
+}
+
+final quotaProvider = StateNotifierProvider<QuotaController, FreeQuotaState>(
+  (ref) => QuotaController(),
+);
diff --git a/client/lib/widgets/account_screens.dart b/client/lib/widgets/account_screens.dart
index 94925ee..91b1147 100644
--- a/client/lib/widgets/account_screens.dart
+++ b/client/lib/widgets/account_screens.dart
@@ -1,68 +1,74 @@
 // account_screens.dart — 账户子页(套餐选择 / 设备管理 / 兑换 & 购买 / 联系我们)
+//
+// 文案全部经 AppText(l10n,单显)。套餐数字以 design/CLAUDE.md §7 为准。
+// App 内无任何支付表单——购买仅引导至外部渠道。
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
+import 'pangolin_button.dart';
 import 'pangolin_icons.dart';
 import 'plan_card.dart';
-import 'pangolin_button.dart';
 
-/// 通用：带返回箭头的子页骨架
+/// 通用:带返回箭头的子页骨架
 class _SubScaffold extends StatelessWidget {
   const _SubScaffold({required this.title, required this.child, this.onBack});
-  final String title; final Widget child; final VoidCallback? onBack;
+  final String title;
+  final Widget child;
+  final VoidCallback? onBack;
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return Scaffold(
       backgroundColor: c.bg,
-      body: SafeArea(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-        Padding(
-          padding: const EdgeInsets.fromLTRB(8, 6, 16, 10),
-          child: Row(children: [
-            IconButton(onPressed: onBack ?? () => Navigator.of(context).maybePop(), icon: Icon(PangolinIcons.arrowLeft, size: 22, color: c.fg1)),
-            Text(title, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
-          ]),
-        ),
-        Expanded(child: child),
-      ])),
+      body: SafeArea(
+        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(8, 6, 16, 10),
+            child: Row(children: [
+              IconButton(
+                onPressed: onBack ?? () => Navigator.of(context).maybePop(),
+                icon: Icon(PangolinIcons.arrowLeft, size: 22, color: c.fg1),
+              ),
+              Text(title, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+            ]),
+          ),
+          Expanded(child: child),
+        ]),
+      ),
     );
   }
 }
 
 /// ── 套餐选择 ──
 class PlansScreen extends StatelessWidget {
-  const PlansScreen({super.key, this.zh = true, this.onChoose, this.onBack});
-  final bool zh; final ValueChanged<String>? onChoose; final VoidCallback? onBack;
+  const PlansScreen({super.key, required this.t, this.onChoose, this.onBack});
+  final AppText t;
+  final ValueChanged<String>? onChoose;
+  final VoidCallback? onBack;
 
   @override
   Widget build(BuildContext context) {
     final plans = [
-      (
-        id: 'free', name: zh ? '免费版' : 'Free', price: '¥0', cta: zh ? '当前' : 'Current', featured: false, current: true, pop: null as String?,
-        feats: zh ? ['3 个基础节点', '每日 1GB 流量', '1 台设备'] : ['3 basic locations', '1GB / day', '1 device'],
-      ),
-      (
-        id: 'pro', name: zh ? '专业版' : 'Pro', price: '¥25', cta: zh ? '立即升级' : 'Upgrade', featured: true, current: false, pop: zh ? '最受欢迎' : 'Popular',
-        feats: zh ? ['80+ 全球节点', '无限流量 · 极速', '5 台设备同时在线', '流媒体优化'] : ['80+ locations', 'Unlimited · fast', '5 devices', 'Streaming optimized'],
-      ),
-      (
-        id: 'team', name: zh ? '团队版' : 'Team', price: '¥99', cta: zh ? '选择' : 'Choose', featured: false, current: false, pop: null as String?,
-        feats: zh ? ['Pro 全部功能', '10 个成员席位', '集中计费与管理', '优先客服'] : ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'],
-      ),
+      (id: 'free', name: t.freePlan, price: '¥0', cta: t.current, featured: false, current: true, pop: null as String?, feats: t.featsFree),
+      (id: 'pro', name: t.proPlan, price: '¥25', cta: t.upgrade, featured: true, current: false, pop: t.mostPopular, feats: t.featsPro),
+      (id: 'team', name: t.teamPlan, price: '¥99', cta: t.choose, featured: false, current: false, pop: null as String?, feats: t.featsTeam),
     ];
     return _SubScaffold(
-      title: zh ? '选择套餐' : 'Choose plan',
+      title: t.choosePlan,
       onBack: onBack,
       child: ListView(
         padding: const EdgeInsets.fromLTRB(20, 14, 20, 24),
         children: [
-          for (final p in plans) Padding(
-            padding: EdgeInsets.only(bottom: 14, top: p.pop != null ? 12 : 0),
-            child: PlanCard(
-              name: p.name, price: p.price, period: zh ? '/月' : '/mo',
-              features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
-              popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
+          for (final p in plans)
+            Padding(
+              padding: EdgeInsets.only(bottom: 14, top: p.pop != null ? 12 : 0),
+              child: PlanCard(
+                name: p.name, price: p.price, period: t.perMonth,
+                features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
+                popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
+              ),
             ),
-          ),
         ],
       ),
     );
@@ -72,31 +78,34 @@ class PlansScreen extends StatelessWidget {
 /// ── 设备管理 ──
 class DeviceItem {
   const DeviceItem({required this.id, required this.icon, required this.name, required this.os, required this.active, this.me = false});
-  final String id, name, os, active; final IconData icon; final bool me;
+  final String id, name, os, active;
+  final IconData icon;
+  final bool me;
 }
 
 class DevicesScreen extends StatefulWidget {
-  const DevicesScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const DevicesScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
   @override
   State<DevicesScreen> createState() => _DevicesScreenState();
 }
 
 class _DevicesScreenState extends State<DevicesScreen> {
   late List<DeviceItem> _devices = [
-    DeviceItem(id: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.zh ? '当前设备' : 'This device', me: true),
+    DeviceItem(id: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.t.thisDevice, me: true),
     DeviceItem(id: '2', icon: PangolinIcons.smartphone, name: 'iPhone 17', os: 'iOS 26', active: '2 min'),
-    DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.zh ? '3 小时前' : '3h ago'),
+    DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.t.lang == AppLang.zh ? '3 小时前' : '3h ago'),
   ];
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return _SubScaffold(
-      title: widget.zh ? '我的设备' : 'My devices',
+      title: widget.t.myDevices,
       onBack: widget.onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
-        Text(widget.zh ? 'PRO 套餐最多 5 台设备同时在线' : 'Up to 5 devices on PRO', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+        Text(widget.t.devicesSub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
         const SizedBox(height: 12),
         Container(
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
@@ -120,18 +129,22 @@ class _DevicesScreenState extends State<DevicesScreen> {
         Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
           Row(children: [
             Flexible(child: Text(d.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14.5))),
-            if (d.me) Container(margin: const EdgeInsets.only(left: 7), padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 1),
+            if (d.me)
+              Container(
+                margin: const EdgeInsets.only(left: 7), padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 1),
                 decoration: BoxDecoration(color: c.successSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
-                child: Text(d.active, style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w600, fontSize: 10.5))),
+                child: Text(d.active, style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w600, fontSize: 10.5)),
+              ),
           ]),
           const SizedBox(height: 1),
           Text(d.me ? d.os : '${d.os} · ${d.active}', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
         ])),
-        if (!d.me) OutlinedButton(
-          onPressed: () => setState(() => _devices.removeWhere((x) => x.id == d.id)),
-          style: OutlinedButton.styleFrom(foregroundColor: c.fg2, side: BorderSide(color: c.borderStrong, width: 1.5), shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7), minimumSize: Size.zero),
-          child: Text(widget.zh ? '移除' : 'Remove', style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
-        ),
+        if (!d.me)
+          OutlinedButton(
+            onPressed: () => setState(() => _devices.removeWhere((x) => x.id == d.id)),
+            style: OutlinedButton.styleFrom(foregroundColor: c.fg2, side: BorderSide(color: c.borderStrong, width: 1.5), shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7), minimumSize: Size.zero),
+            child: Text(widget.t.remove, style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
+          ),
       ]),
     );
   }
@@ -139,8 +152,9 @@ class _DevicesScreenState extends State<DevicesScreen> {
 
 /// ── 兑换 & 购买 ──
 class RedeemScreen extends StatefulWidget {
-  const RedeemScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const RedeemScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
   @override
   State<RedeemScreen> createState() => _RedeemScreenState();
 }
@@ -150,52 +164,59 @@ class _RedeemScreenState extends State<RedeemScreen> {
   bool _ok = false;
 
   @override
-  void dispose() { _code.dispose(); super.dispose(); }
+  void dispose() {
+    _code.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final zh = widget.zh;
+    final t = widget.t;
     final channels = [
-      (icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: true),
+      (icon: PangolinIcons.shoppingBag, name: t.chStore, sub: 'shop.pangolin.vpn', accent: true),
       (icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: false),
       (icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
-      (icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'buy@pangolin.vpn', accent: false),
+      (icon: PangolinIcons.mail, name: t.chEmail, sub: 'buy@pangolin.vpn', accent: false),
     ];
     return _SubScaffold(
-      title: zh ? '兑换 & 购买' : 'Redeem & buy',
+      title: t.redeemTitle,
       onBack: widget.onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
         Container(
           padding: const EdgeInsets.all(18),
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.xl), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
           child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '兑换激活码' : 'Redeem a code', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
+            Text(t.redeemCodeTitle, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
             const SizedBox(height: 12),
-            if (_ok) Row(children: [
-              Icon(PangolinIcons.checkCircle, size: 20, color: c.success), const SizedBox(width: 9),
-              Text(zh ? '激活成功 · PRO 已开通' : 'Activated · PRO unlocked', style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w600)),
-            ]) else Row(children: [
-              Expanded(child: Container(
-                padding: const EdgeInsets.symmetric(horizontal: 14),
-                decoration: BoxDecoration(color: c.bg, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
-                child: TextField(controller: _code,
+            if (_ok)
+              Row(children: [
+                Icon(PangolinIcons.checkCircle, size: 20, color: c.success),
+                const SizedBox(width: 9),
+                Text(t.redeemOk, style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w600)),
+              ])
+            else
+              Row(children: [
+                Expanded(child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 14),
+                  decoration: BoxDecoration(color: c.bg, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
+                  child: TextField(
+                    controller: _code,
                     textCapitalization: TextCapitalization.characters,
                     style: PangolinText.mono.copyWith(color: c.fg1, letterSpacing: 1.5),
-                    decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13),
-                        hintText: zh ? '输入激活码' : 'Enter code', hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
-                    onChanged: (_) => setState(() {})),
-              )),
-              const SizedBox(width: 10),
-              PangolinButton(label: zh ? '激活' : 'Redeem', onPressed: _code.text.trim().length >= 4 ? () => setState(() => _ok = true) : null),
-            ]),
+                    decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13), hintText: t.redeemPh, hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
+                    onChanged: (_) => setState(() {}),
+                  ),
+                )),
+                const SizedBox(width: 10),
+                PangolinButton(label: t.redeemBtn, onPressed: _code.text.trim().length >= 4 ? () => setState(() => _ok = true) : null),
+              ]),
           ]),
         ),
         const SizedBox(height: 22),
-        Text(zh ? '购买渠道' : 'Where to buy', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
+        Text(t.buyTitle, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
         const SizedBox(height: 6),
-        Text(zh ? 'App 内不支持直接支付。请通过以下渠道获取激活码:' : 'In-app payment is unavailable. Get a code via:',
-            style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400, height: 1.5)),
+        Text(t.buySub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400, height: 1.5)),
         const SizedBox(height: 14),
         for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _channel(c, ch.icon, ch.name, ch.sub, ch.accent)),
       ]),
@@ -208,12 +229,7 @@ class _RedeemScreenState extends State<RedeemScreen> {
       onTap: () {},
       child: Container(
         padding: const EdgeInsets.all(14),
-        decoration: BoxDecoration(
-          color: accent ? c.accentSubtle : c.surface,
-          borderRadius: BorderRadius.circular(PangolinRadius.lg),
-          border: Border.all(color: accent ? c.accentBorder : c.border),
-          boxShadow: PangolinShadow.sm,
-        ),
+        decoration: BoxDecoration(color: accent ? c.accentSubtle : c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: accent ? c.accentBorder : c.border), boxShadow: PangolinShadow.sm),
         child: Row(children: [
           Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
               child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),
@@ -231,8 +247,9 @@ class _RedeemScreenState extends State<RedeemScreen> {
 
 /// ── 联系我们 ──
 class ContactScreen extends StatelessWidget {
-  const ContactScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const ContactScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
 
   @override
   Widget build(BuildContext context) {
@@ -240,15 +257,14 @@ class ContactScreen extends StatelessWidget {
     final channels = [
       (icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: true),
       (icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
-      (icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'support@pangolin.vpn', accent: false),
-      (icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: false),
+      (icon: PangolinIcons.mail, name: t.contactEmail, sub: 'support@pangolin.vpn', accent: false),
+      (icon: PangolinIcons.shoppingBag, name: t.contactStore, sub: 'shop.pangolin.vpn', accent: false),
     ];
     return _SubScaffold(
-      title: zh ? '联系我们' : 'Contact us',
+      title: t.contactTitle,
       onBack: onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
-        Text(zh ? '遇到问题?通过以下任一渠道联系我们,通常数分钟内回复。' : 'Need help? Reach us via any channel below — usually replies in minutes.',
-            style: PangolinText.sm.copyWith(color: c.fg2, height: 1.6)),
+        Text(t.contactIntro, style: PangolinText.sm.copyWith(color: c.fg2, height: 1.6)),
         const SizedBox(height: 16),
         for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _contact(c, ch.icon, ch.name, ch.sub, ch.accent)),
         const SizedBox(height: 8),
@@ -256,9 +272,9 @@ class ContactScreen extends StatelessWidget {
           padding: const EdgeInsets.all(16),
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
           child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '服务时间' : 'Support hours', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
+            Text(t.contactHoursTitle, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
             const SizedBox(height: 5),
-            Text(zh ? '每日 9:00 – 24:00 (GMT+8)' : 'Daily 9:00 – 24:00 (GMT+8)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
+            Text(t.contactHours, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
           ]),
         ),
       ]),
@@ -271,12 +287,7 @@ class ContactScreen extends StatelessWidget {
       onTap: () {},
       child: Container(
         padding: const EdgeInsets.all(14),
-        decoration: BoxDecoration(
-          color: accent ? c.accentSubtle : c.surface,
-          borderRadius: BorderRadius.circular(PangolinRadius.lg),
-          border: Border.all(color: accent ? c.accentBorder : c.border),
-          boxShadow: PangolinShadow.sm,
-        ),
+        decoration: BoxDecoration(color: accent ? c.accentSubtle : c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: accent ? c.accentBorder : c.border), boxShadow: PangolinShadow.sm),
         child: Row(children: [
           Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
               child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),
diff --git a/client/lib/widgets/app_top_bar.dart b/client/lib/widgets/app_top_bar.dart
new file mode 100644
index 0000000..fbc62c9
--- /dev/null
+++ b/client/lib/widgets/app_top_bar.dart
@@ -0,0 +1,37 @@
+// app_top_bar.dart — 页面顶栏(品牌锁版 + 可选右侧状态)
+import 'package:flutter/material.dart';
+
+import '../pangolin_theme.dart';
+import 'pangolin_logo.dart';
+
+class AppTopBar extends StatelessWidget {
+  const AppTopBar({super.key, required this.brand, this.trailing});
+  final String brand;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
+      child: Row(children: [
+        PangolinBrandLockup(brand: brand, markSize: 24),
+        const Spacer(),
+        if (trailing != null) trailing!,
+      ]),
+    );
+  }
+}
+
+/// 标题行(节点/统计/账户页用)。
+class PageTitle extends StatelessWidget {
+  const PageTitle({super.key, required this.title});
+  final String title;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
+      child: Text(title, style: PangolinText.h2.copyWith(color: c.fg1)),
+    );
+  }
+}
diff --git a/client/lib/widgets/auth_screen.dart b/client/lib/widgets/auth_screen.dart
index c698721..6d491d3 100644
--- a/client/lib/widgets/auth_screen.dart
+++ b/client/lib/widgets/auth_screen.dart
@@ -1,16 +1,18 @@
-// auth_screen.dart — 登录 / 注册页
+// auth_screen.dart — 登录 / 注册页(文案经 AppText 单显)
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
 import 'pangolin_button.dart';
+import 'pangolin_icons.dart';
 import 'pangolin_logo.dart';
 
 enum _AuthMode { login, register }
 
 class AuthScreen extends StatefulWidget {
-  const AuthScreen({super.key, required this.onDone, this.zh = true});
+  const AuthScreen({super.key, required this.onDone, required this.t});
   final VoidCallback onDone;
-  final bool zh;
+  final AppText t;
 
   @override
   State<AuthScreen> createState() => _AuthScreenState();
@@ -26,14 +28,18 @@ class _AuthScreenState extends State<AuthScreen> {
 
   bool get _emailValid => RegExp(r'\S+@\S+\.\S+').hasMatch(_email.text);
 
-  String _t(String zh, String en) => widget.zh ? zh : en;
-
   @override
-  void dispose() { _email.dispose(); _code.dispose(); _pw.dispose(); super.dispose(); }
+  void dispose() {
+    _email.dispose();
+    _code.dispose();
+    _pw.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
+    final t = widget.t;
     return Scaffold(
       backgroundColor: c.bg,
       body: SafeArea(
@@ -45,26 +51,21 @@ class _AuthScreenState extends State<AuthScreen> {
               Column(children: [
                 const PangolinMark(size: 52),
                 const SizedBox(height: 12),
-                Text(widget.zh ? '穿山甲' : 'Pangolin', style: PangolinText.h1.copyWith(color: c.fg1)),
+                Text(t.brand, style: PangolinText.h1.copyWith(color: c.fg1)),
                 const SizedBox(height: 4),
-                Text(_t('极速 · 稳定 · 省心', 'Fast · Stable · Effortless'),
-                    style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
+                Text(t.authTagline, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
               ]),
               const SizedBox(height: 28),
               Row(children: [
-                _tab(_AuthMode.login, _t('登录', 'Log in'), c),
-                _tab(_AuthMode.register, _t('注册', 'Sign up'), c),
+                _tab(_AuthMode.login, t.tabLogin, c),
+                _tab(_AuthMode.register, t.tabRegister, c),
               ]),
               Divider(height: 1, color: c.border),
               const SizedBox(height: 22),
-              Expanded(child: _mode == _AuthMode.login ? _login(c) : _register(c)),
+              Expanded(child: _mode == _AuthMode.login ? _login(c, t) : _register(c, t)),
               Padding(
                 padding: const EdgeInsets.symmetric(vertical: 20),
-                child: Text(
-                  _t('继续即代表同意《服务条款》与《隐私政策》', 'By continuing you agree to our Terms & Privacy Policy'),
-                  textAlign: TextAlign.center,
-                  style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400),
-                ),
+                child: Text(t.tos, textAlign: TextAlign.center, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
               ),
             ],
           ),
@@ -77,7 +78,11 @@ class _AuthScreenState extends State<AuthScreen> {
     final on = _mode == m;
     return Expanded(
       child: GestureDetector(
-        onTap: () => setState(() { _mode = m; _step = 0; _sent = false; }),
+        onTap: () => setState(() {
+          _mode = m;
+          _step = 0;
+          _sent = false;
+        }),
         child: Container(
           padding: const EdgeInsets.symmetric(vertical: 10),
           decoration: BoxDecoration(border: Border(bottom: BorderSide(color: on ? c.accent : Colors.transparent, width: 2))),
@@ -99,57 +104,65 @@ class _AuthScreenState extends State<AuthScreen> {
     ]);
   }
 
-  InputDecoration get _bare => const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
+  InputDecoration get _bare =>
+      const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
 
-  Widget _login(PangolinScheme c) {
+  Widget _login(PangolinScheme c, AppText t) {
     return Column(children: [
-      _field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
-          child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
+      _field(c, icon: PangolinIcons.mail, label: t.emailLabel,
+          child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), onChanged: (_) => setState(() {}))),
       const SizedBox(height: 16),
-      _field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
-          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: _t('输入密码', 'Enter password')), onChanged: (_) => setState(() {}))),
-      Align(alignment: Alignment.centerRight, child: Padding(
-        padding: const EdgeInsets.only(top: 8),
-        child: Text(_t('忘记密码?', 'Forgot password?'), style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
-      )),
+      _field(c, icon: PangolinIcons.lock, label: t.pwLabel,
+          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.pwPh), onChanged: (_) => setState(() {}))),
+      Align(
+        alignment: Alignment.centerRight,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 8),
+          child: Text(t.forgotPw, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
+        ),
+      ),
       const SizedBox(height: 18),
-      PangolinButton(label: _t('登录', 'Log in'), expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
+      PangolinButton(label: t.doLogin, expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
     ]);
   }
 
-  Widget _register(PangolinScheme c) {
+  Widget _register(PangolinScheme c, AppText t) {
     if (_step == 0) {
       return Column(children: [
-        _field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
+        _field(c, icon: PangolinIcons.mail, label: t.emailLabel,
             child: Row(children: [
-              Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
+              Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), onChanged: (_) => setState(() {}))),
               GestureDetector(
                 onTap: _emailValid ? () => setState(() => _sent = true) : null,
-                child: Text(_sent ? _t('重新发送', 'Resend') : _t('发送验证码', 'Send code'),
+                child: Text(_sent ? t.resend : t.sendCode,
                     style: PangolinText.caption.copyWith(color: _emailValid ? c.accent : c.fg3, fontWeight: FontWeight.w700)),
               ),
             ])),
-        if (_sent) Padding(padding: const EdgeInsets.only(top: 8), child: Row(children: [
-          Icon(PangolinIcons.checkCircle, size: 14, color: c.success), const SizedBox(width: 6),
-          Text('${_t('验证码已发送至', 'Code sent to')} ${_email.text}', style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w400)),
-        ])),
+        if (_sent)
+          Padding(
+            padding: const EdgeInsets.only(top: 8),
+            child: Row(children: [
+              Icon(PangolinIcons.checkCircle, size: 14, color: c.success),
+              const SizedBox(width: 6),
+              Expanded(child: Text(t.codeSentTo(_email.text), style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w400))),
+            ]),
+          ),
         const SizedBox(height: 16),
-        _field(c, icon: PangolinIcons.shieldCheck, label: _t('邮箱验证码', 'Verification code'),
+        _field(c, icon: PangolinIcons.shieldCheck, label: t.codeLabel,
             child: TextField(controller: _code, keyboardType: TextInputType.number, maxLength: 6,
                 style: PangolinText.mono.copyWith(letterSpacing: 6, color: c.fg1),
                 decoration: _bare.copyWith(counterText: '', hintText: '······'), onChanged: (_) => setState(() {}))),
         const SizedBox(height: 8),
-        PangolinButton(label: _t('下一步', 'Next'), expand: true, onPressed: (_sent && _code.text.length == 6) ? () => setState(() => _step = 1) : null),
+        PangolinButton(label: t.doNext, expand: true, onPressed: (_sent && _code.text.length == 6) ? () => setState(() => _step = 1) : null),
       ]);
     }
     return Column(children: [
       Row(children: [Icon(PangolinIcons.checkCircle, size: 15, color: c.success), const SizedBox(width: 7), Text(_email.text, style: PangolinText.sm.copyWith(color: c.fg2))]),
       const SizedBox(height: 16),
-      _field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
-          child: TextField(controller: _pw, obscureText: true,
-              decoration: _bare.copyWith(hintText: _t('设置登录密码(用于多端登录)', 'Set a password (multi-device)')), onChanged: (_) => setState(() {}))),
+      _field(c, icon: PangolinIcons.lock, label: t.pwLabel,
+          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.setPwPh), onChanged: (_) => setState(() {}))),
       const SizedBox(height: 18),
-      PangolinButton(label: _t('创建账户', 'Create account'), expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
+      PangolinButton(label: t.doCreate, expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
     ]);
   }
 }
diff --git a/client/lib/widgets/connect_button.dart b/client/lib/widgets/connect_button.dart
index 2432693..7319168 100644
--- a/client/lib/widgets/connect_button.dart
+++ b/client/lib/widgets/connect_button.dart
@@ -1,21 +1,38 @@
-// connect_button.dart — 核心连接键(三态:off / connecting / on)
+// connect_button.dart — 核心连接键(严格三态:off / connecting / on)
+//
+// 纯展示组件:状态由外部状态机(connection_provider)注入,点击只回调
+// onTap(派发事件),绝不在组件内本地翻转状态——禁止乐观显示。
+//
+// 三态(design/CLAUDE.md §5):
+//   off        暖灰底 sand-100 + clay power 图标 + 虚线轨道环 + 「点击连接」
+//   connecting clay 实底 + 旋转进度弧 + 旋转 loader
+//   on         success 实底 + 白盾勾 + 满白环 + 圆内计时 + 「已加密」+ 绿光晕
+// 背景在纯色间切换仅过渡 box-shadow / background-color,不用 transition: all。
 import 'package:flutter/material.dart';
-import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
 
-enum VpnStatus { off, connecting, on }
+import '../pangolin_theme.dart';
+import '../state/connection_provider.dart';
+import 'pangolin_icons.dart';
 
 class ConnectButton extends StatefulWidget {
   const ConnectButton({
     super.key,
-    required this.status,
+    required this.phase,
     required this.onTap,
+    required this.offLabel,
+    required this.secureLabel,
     this.elapsed = Duration.zero,
     this.size = 208,
   });
 
-  final VpnStatus status;
+  final VpnPhase phase;
   final VoidCallback onTap;
+
+  /// off 态圆内文字(如「点击连接」/「CONNECT」)。
+  final String offLabel;
+
+  /// on 态圆内计时下方文字(如「已加密」/「SECURE」)。
+  final String secureLabel;
   final Duration elapsed;
   final double size;
 
@@ -41,68 +58,89 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final s = widget.status;
+    final s = widget.phase;
 
     final Color fill = switch (s) {
-      VpnStatus.off => c.bgSubtle,
-      VpnStatus.connecting => c.accent,
-      VpnStatus.on => c.success,
+      VpnPhase.off => c.bgSubtle,
+      VpnPhase.connecting => c.accent,
+      VpnPhase.on => c.success,
     };
-    final Color fg = s == VpnStatus.off ? c.accent : PangolinColors.white;
+    final Color fg = s == VpnPhase.off ? c.accent : PangolinColors.white;
     final IconData icon = switch (s) {
-      VpnStatus.off => PangolinIcons.power,
-      VpnStatus.connecting => PangolinIcons.loader,
-      VpnStatus.on => PangolinIcons.shieldCheck,
+      VpnPhase.off => PangolinIcons.power,
+      VpnPhase.connecting => PangolinIcons.loader,
+      VpnPhase.on => PangolinIcons.shieldCheck,
     };
 
-    final List<BoxShadow> glow = s == VpnStatus.off
+    // off 用柔和阴影;connecting/on 增加同色光晕环(box-shadow,不动背景计算)。
+    final List<BoxShadow> glow = s == VpnPhase.off
         ? PangolinShadow.md
         : [
             BoxShadow(
-              color: (s == VpnStatus.on ? c.success : c.accent).withOpacity(0.18),
+              color: (s == VpnPhase.on ? c.success : c.accent).withOpacity(0.18),
               blurRadius: 0,
               spreadRadius: 9,
             ),
             ...PangolinShadow.lg,
           ];
 
-    return GestureDetector(
-      onTap: widget.onTap,
-      child: AnimatedContainer(
-        duration: PangolinMotion.slow,
-        curve: PangolinMotion.easeOut,
-        width: widget.size,
-        height: widget.size,
-        decoration: BoxDecoration(color: fill, shape: BoxShape.circle, boxShadow: glow),
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            Positioned.fill(
-              child: AnimatedBuilder(
-                animation: _spin,
-                builder: (_, __) => CustomPaint(
-                  painter: _RingPainter(
-                    status: s,
-                    track: c.sand200,
-                    progress: PangolinColors.white,
-                    turns: s == VpnStatus.connecting ? _spin.value : 0,
+    return Semantics(
+      button: true,
+      label: widget.offLabel,
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedContainer(
+          duration: PangolinMotion.slow,
+          curve: PangolinMotion.easeOut,
+          width: widget.size,
+          height: widget.size,
+          decoration: BoxDecoration(color: fill, shape: BoxShape.circle, boxShadow: glow),
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Positioned.fill(
+                child: AnimatedBuilder(
+                  animation: _spin,
+                  builder: (_, __) => CustomPaint(
+                    painter: _RingPainter(
+                      phase: s,
+                      track: c.sand200,
+                      progress: PangolinColors.white,
+                      turns: s == VpnPhase.connecting ? _spin.value : 0,
+                    ),
                   ),
                 ),
               ),
-            ),
-            Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Icon(icon, size: 50, color: fg),
-                const SizedBox(height: 6),
-                if (s == VpnStatus.on)
-                  Text(_fmt(widget.elapsed), style: PangolinText.mono.copyWith(color: fg, fontSize: 18, fontWeight: FontWeight.w600))
-                else
-                  Text(s == VpnStatus.connecting ? '···' : 'TAP',
-                      style: PangolinText.mono.copyWith(color: fg, fontSize: 14, fontWeight: FontWeight.w700, letterSpacing: 1.1)),
-              ],
-            ),
-          ],
+              // connecting 时图标也旋转(对齐 React loader spin)
+              if (s == VpnPhase.connecting)
+                RotationTransition(
+                  turns: _spin,
+                  child: Icon(icon, size: 50, color: fg),
+                )
+              else
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Icon(icon, size: 50, color: fg),
+                    const SizedBox(height: 6),
+                    if (s == VpnPhase.on) ...[
+                      Text(_fmt(widget.elapsed),
+                          style: PangolinText.mono
+                              .copyWith(color: fg, fontSize: 18, fontWeight: FontWeight.w600)),
+                      Text(widget.secureLabel,
+                          style: PangolinText.caption.copyWith(
+                              color: fg.withOpacity(0.9),
+                              fontSize: 10,
+                              fontWeight: FontWeight.w700,
+                              letterSpacing: 1.0)),
+                    ] else
+                      Text(widget.offLabel,
+                          style: PangolinText.caption.copyWith(
+                              color: fg, fontSize: 13, fontWeight: FontWeight.w700, letterSpacing: 0.5)),
+                  ],
+                ),
+            ],
+          ),
         ),
       ),
     );
@@ -110,8 +148,8 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
 }
 
 class _RingPainter extends CustomPainter {
-  _RingPainter({required this.status, required this.track, required this.progress, required this.turns});
-  final VpnStatus status;
+  _RingPainter({required this.phase, required this.track, required this.progress, required this.turns});
+  final VpnPhase phase;
   final Color track;
   final Color progress;
   final double turns;
@@ -122,23 +160,39 @@ class _RingPainter extends CustomPainter {
     final radius = size.width / 2 - 8;
     final rect = Rect.fromCircle(center: center, radius: radius);
 
-    if (status == VpnStatus.off) {
-      final p = Paint()..style = PaintingStyle.stroke..strokeWidth = 3..strokeCap = StrokeCap.round..color = track;
-      const dash = 0.045, gap = 0.11;
-      for (double a = 0; a < 6.283; a += dash + gap) {
-        canvas.drawArc(rect, a, dash, false, p);
-      }
-    } else if (status == VpnStatus.connecting) {
-      final base = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..color = progress.withOpacity(0.3);
-      canvas.drawArc(rect, 0, 6.283, false, base);
-      final arc = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..strokeCap = StrokeCap.round..color = progress;
-      canvas.drawArc(rect, turns * 6.283, 1.6, false, arc);
-    } else {
-      final p = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..strokeCap = StrokeCap.round..color = progress.withOpacity(0.85);
-      canvas.drawArc(rect, 0, 6.283, false, p);
+    switch (phase) {
+      case VpnPhase.off:
+        final p = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 3
+          ..strokeCap = StrokeCap.round
+          ..color = track;
+        const dash = 0.045, gap = 0.11;
+        for (double a = 0; a < 6.283; a += dash + gap) {
+          canvas.drawArc(rect, a, dash, false, p);
+        }
+      case VpnPhase.connecting:
+        final base = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..color = progress.withOpacity(0.3);
+        canvas.drawArc(rect, 0, 6.283, false, base);
+        final arc = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..strokeCap = StrokeCap.round
+          ..color = progress;
+        canvas.drawArc(rect, turns * 6.283, 1.6, false, arc);
+      case VpnPhase.on:
+        final p = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..strokeCap = StrokeCap.round
+          ..color = progress.withOpacity(0.85);
+        canvas.drawArc(rect, 0, 6.283, false, p);
     }
   }
 
   @override
-  bool shouldRepaint(_RingPainter old) => old.turns != turns || old.status != status;
+  bool shouldRepaint(_RingPainter old) => old.turns != turns || old.phase != phase;
 }
diff --git a/client/lib/widgets/home_shell.dart b/client/lib/widgets/home_shell.dart
index 7b55a1b..9d4de1a 100644
--- a/client/lib/widgets/home_shell.dart
+++ b/client/lib/widgets/home_shell.dart
@@ -1,326 +1,278 @@
-// home_shell.dart — 主框架(底部 4 Tab:连接 / 节点 / 统计 / 账户)
+// home_shell.dart — 主框架(4 Tab:连接 / 节点 / 统计 / 账户)
+//
+// 自适应断点:同一份页面代码,宽度 ≥900 时从底部 Tab 切换为左侧栏分栏
+// (LayoutBuilder 开关,不 fork 页面)。窄屏支持左右滑动切换 Tab。
 import 'dart:async';
-import 'package:flutter/material.dart';
-import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
-import 'connect_button.dart';
-import 'server_tile.dart';
-import 'country_code.dart';
-import 'account_screens.dart';
-import 'pangolin_logo.dart';
 
-class HomeShell extends StatefulWidget {
-  const HomeShell({super.key, this.zh = true});
-  final bool zh;
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../pangolin_theme.dart';
+import '../screens/account_page.dart';
+import '../screens/connect_page.dart';
+import '../screens/nodes_page.dart';
+import '../screens/stats_page.dart';
+import '../state/app_providers.dart';
+import '../state/connection_provider.dart';
+import '../state/nodes_provider.dart';
+import 'pangolin_icons.dart';
+import 'pangolin_logo.dart';
+import 'tab_swipe.dart';
+
+/// 宽屏断点(逻辑像素)。≥该值切侧栏分栏。
+const double kWideBreakpoint = 900;
+
+class HomeShell extends ConsumerStatefulWidget {
+  const HomeShell({super.key});
   @override
-  State<HomeShell> createState() => _HomeShellState();
+  ConsumerState<HomeShell> createState() => _HomeShellState();
 }
 
-class _HomeShellState extends State<HomeShell> {
+class _HomeShellState extends ConsumerState<HomeShell> {
   int _tab = 0;
-  VpnStatus _status = VpnStatus.off;
-  ServerInfo _server = const ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18);
-  Timer? _timer;
-  int _elapsed = 0;
+  int _dir = 0;
+  Timer? _dirReset;
 
-  String _t(String zh, String en) => widget.zh ? zh : en;
-
-  void _toggle() {
-    if (_status == VpnStatus.off) {
-      setState(() => _status = VpnStatus.connecting);
-      Future.delayed(const Duration(milliseconds: 1500), () {
-        if (!mounted) return;
-        setState(() { _status = VpnStatus.on; _elapsed = 0; });
-        _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
-      });
-    } else {
-      _timer?.cancel();
-      setState(() => _status = VpnStatus.off);
-    }
+  void _goTab(int i) {
+    if (i == _tab) return;
+    setState(() {
+      _dir = i > _tab ? 1 : -1;
+      _tab = i;
+    });
+    _dirReset?.cancel();
+    _dirReset = Timer(const Duration(milliseconds: 260), () {
+      if (mounted) setState(() => _dir = 0);
+    });
   }
 
-  void _pick(ServerInfo s) {
-    setState(() { _server = s; _tab = 0; });
-    if (_status == VpnStatus.on) {
-      _timer?.cancel();
-      setState(() => _status = VpnStatus.connecting);
-      Future.delayed(const Duration(milliseconds: 1200), () {
-        if (!mounted) return;
-        setState(() { _status = VpnStatus.on; _elapsed = 0; });
-        _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
-      });
-    }
-  }
+  void _swipe(int delta) => _goTab((_tab + delta).clamp(0, 3));
 
   @override
-  void dispose() { _timer?.cancel(); super.dispose(); }
+  void dispose() {
+    _dirReset?.cancel();
+    super.dispose();
+  }
+
+  List<Widget> _pages(bool isWide) => [
+        ConnectPage(isWide: isWide, onOpenNodes: () => _goTab(1)),
+        NodesPage(isWide: isWide, onPicked: () => _goTab(0)),
+        StatsPage(isWide: isWide),
+        AccountPage(isWide: isWide),
+      ];
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final pages = [
-      _ConnectPage(zh: widget.zh, status: _status, server: _server, elapsedSec: _elapsed, onToggle: _toggle, onOpenServers: () => setState(() => _tab = 1)),
-      _ServersPage(zh: widget.zh, current: _server.code, onPick: _pick),
-      _StatsPage(zh: widget.zh),
-      _AccountPage(zh: widget.zh),
-    ];
     return Scaffold(
       backgroundColor: c.bg,
-      body: SafeArea(bottom: false, child: pages[_tab]),
-      bottomNavigationBar: _BottomTab(zh: widget.zh, index: _tab, onTap: (i) => setState(() => _tab = i)),
+      body: LayoutBuilder(builder: (context, constraints) {
+        final isWide = constraints.maxWidth >= kWideBreakpoint;
+        final page = DirectionalTabSwitcher(index: _tab, direction: _dir, child: _pages(isWide)[_tab]);
+        if (isWide) {
+          return SafeArea(child: _WideLayout(tab: _tab, onTab: _goTab, child: page));
+        }
+        return SafeArea(
+          bottom: false,
+          child: Column(children: [
+            Expanded(
+              child: HorizontalSwipeArea(
+                onSwipeLeft: () => _swipe(1),
+                onSwipeRight: () => _swipe(-1),
+                child: page,
+              ),
+            ),
+            _BottomTab(index: _tab, onTap: _goTab),
+          ]),
+        );
+      }),
     );
   }
 }
 
-/// ── Bottom tab bar ──
-class _BottomTab extends StatelessWidget {
-  const _BottomTab({required this.zh, required this.index, required this.onTap});
-  final bool zh; final int index; final ValueChanged<int> onTap;
+/// ── 宽屏分栏:左侧栏导航 + 内容区 ──
+class _WideLayout extends ConsumerWidget {
+  const _WideLayout({required this.tab, required this.onTab, required this.child});
+  final int tab;
+  final ValueChanged<int> onTab;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final conn = ref.watch(connectionProvider);
+    final node = ref.watch(effectiveNodeProvider);
+    final titles = [t.tabConnect, t.tabServers, t.tabStats, t.tabMe];
+    return Row(children: [
+      _SideRail(tab: tab, onTab: onTab),
+      Expanded(
+        child: Column(children: [
+          // 内容区顶栏:标题 + 在线状态
+          SizedBox(
+            height: 56,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 28),
+              child: Row(children: [
+                Text(titles[tab], style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+                const Spacer(),
+                Text(
+                  conn.phase == VpnPhase.on ? '● ${node.code}' : '○',
+                  style: PangolinText.mono.copyWith(
+                      fontSize: 12.5,
+                      fontWeight: FontWeight.w600,
+                      color: conn.phase == VpnPhase.on ? c.success : c.fg3),
+                ),
+              ]),
+            ),
+          ),
+          Expanded(child: child),
+        ]),
+      ),
+    ]);
+  }
+}
+
+class _SideRail extends ConsumerWidget {
+  const _SideRail({required this.tab, required this.onTab});
+  final int tab;
+  final ValueChanged<int> onTab;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final isFree = ref.watch(isFreePlanProvider);
+    final items = [
+      (PangolinIcons.power, t.tabConnect),
+      (PangolinIcons.globe, t.tabServers),
+      (PangolinIcons.barChart, t.tabStats),
+      (PangolinIcons.user, t.tabMe),
+    ];
+    return Container(
+      width: 232,
+      decoration: BoxDecoration(color: c.bgSubtle, border: Border(right: BorderSide(color: c.border))),
+      padding: const EdgeInsets.fromLTRB(14, 18, 14, 16),
+      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+        // 品牌锁版
+        Padding(
+          padding: const EdgeInsets.fromLTRB(8, 0, 8, 20),
+          child: Row(children: [
+            const PangolinMark(size: 30),
+            const SizedBox(width: 10),
+            Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              Text(t.brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 17, height: 1)),
+              const SizedBox(height: 3),
+              Text('PANGOLIN', style: PangolinText.overline.copyWith(color: c.accent, fontSize: 9, letterSpacing: 1.8)),
+            ]),
+          ]),
+        ),
+        for (var i = 0; i < items.length; i++)
+          Padding(
+            padding: const EdgeInsets.only(bottom: 4),
+            child: _RailItem(icon: items[i].$1, label: items[i].$2, active: i == tab, onTap: () => onTab(i)),
+          ),
+        const Spacer(),
+        // 套餐迷你卡
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 12),
+          decoration: BoxDecoration(
+            color: isFree ? c.surface : null,
+            gradient: isFree
+                ? null
+                : const LinearGradient(
+                    begin: Alignment.topLeft, end: Alignment.bottomRight,
+                    colors: [PangolinColors.clay600, PangolinColors.clay800]),
+            border: isFree ? Border.all(color: c.border) : null,
+            borderRadius: BorderRadius.circular(PangolinRadius.lg),
+          ),
+          child: Row(children: [
+            Container(
+              width: 32, height: 32,
+              decoration: BoxDecoration(color: isFree ? c.bgSubtle : PangolinColors.white.withOpacity(0.18), shape: BoxShape.circle),
+              child: Icon(isFree ? PangolinIcons.user : PangolinIcons.crown, size: 16, color: isFree ? c.fg2 : PangolinColors.white),
+            ),
+            const SizedBox(width: 9),
+            Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              Text(isFree ? t.freePlanName : t.proMember,
+                  overflow: TextOverflow.ellipsis,
+                  style: PangolinText.caption.copyWith(color: isFree ? c.fg1 : PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 12.5)),
+              Text(kDemoEmail,
+                  overflow: TextOverflow.ellipsis,
+                  style: PangolinText.caption.copyWith(color: isFree ? c.fg3 : PangolinColors.white.withOpacity(0.7), fontSize: 10.5)),
+            ])),
+          ]),
+        ),
+      ]),
+    );
+  }
+}
+
+class _RailItem extends StatelessWidget {
+  const _RailItem({required this.icon, required this.label, required this.active, required this.onTap});
+  final IconData icon;
+  final String label;
+  final bool active;
+  final VoidCallback onTap;
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
+    return Material(
+      color: active ? c.accentSubtle : Colors.transparent,
+      borderRadius: BorderRadius.circular(PangolinRadius.md),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(minHeight: 48), // 触控尺寸 ≥48
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
+            child: Row(children: [
+              Icon(icon, size: 20, color: active ? c.accent : c.fg3),
+              const SizedBox(width: 12),
+              Text(label, style: PangolinText.body.copyWith(color: active ? c.accent : c.fg2, fontWeight: active ? FontWeight.w700 : FontWeight.w500)),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// ── 底部 Tab 栏(窄屏)──
+class _BottomTab extends ConsumerWidget {
+  const _BottomTab({required this.index, required this.onTap});
+  final int index;
+  final ValueChanged<int> onTap;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
     final items = [
-      (PangolinIcons.power, zh ? '连接' : 'Connect'),
-      (PangolinIcons.globe, zh ? '节点' : 'Servers'),
-      (PangolinIcons.barChart, zh ? '统计' : 'Stats'),
-      (PangolinIcons.user, zh ? '账户' : 'Account'),
+      (PangolinIcons.power, t.tabConnect),
+      (PangolinIcons.globe, t.tabServers),
+      (PangolinIcons.barChart, t.tabStats),
+      (PangolinIcons.user, t.tabMe),
     ];
     return Container(
       decoration: BoxDecoration(color: c.surface, border: Border(top: BorderSide(color: c.border))),
       padding: const EdgeInsets.only(top: 8, bottom: 22),
       child: Row(children: [
         for (var i = 0; i < items.length; i++)
-          Expanded(child: GestureDetector(
-            behavior: HitTestBehavior.opaque,
-            onTap: () => onTap(i),
-            child: Column(mainAxisSize: MainAxisSize.min, children: [
-              Icon(items[i].$1, size: 22, color: i == index ? c.accent : c.fg3),
-              const SizedBox(height: 4),
-              Text(items[i].$2, style: PangolinText.caption.copyWith(color: i == index ? c.accent : c.fg3, fontWeight: i == index ? FontWeight.w700 : FontWeight.w500)),
-            ]),
-          )),
-      ]),
-    );
-  }
-}
-
-/// ── Connect page ──
-class _ConnectPage extends StatelessWidget {
-  const _ConnectPage({required this.zh, required this.status, required this.server, required this.elapsedSec, required this.onToggle, required this.onOpenServers});
-  final bool zh; final VpnStatus status; final ServerInfo server; final int elapsedSec; final VoidCallback onToggle, onOpenServers;
-
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    final cap = switch (status) {
-      VpnStatus.off => zh ? '未连接 · 轻点连接' : 'Tap to connect',
-      VpnStatus.connecting => zh ? '连接中…' : 'Connecting…',
-      VpnStatus.on => zh ? '已连接 · 网络已加密' : 'Connected · Encrypted',
-    };
-    return Column(children: [
-      _TopBar(zh: zh, trailing: Text(status == VpnStatus.on ? (zh ? '● 在线' : '● Online') : (zh ? '○ 离线' : '○ Offline'),
-          style: PangolinText.mono.copyWith(fontSize: 12, color: status == VpnStatus.on ? c.success : c.fg3, fontWeight: FontWeight.w600))),
-      Expanded(child: Center(child: Column(mainAxisSize: MainAxisSize.min, children: [
-        ConnectButton(status: status, elapsed: Duration(seconds: elapsedSec), onTap: onToggle),
-        const SizedBox(height: 24),
-        Text(cap, style: PangolinText.body.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
-      ]))),
-      Padding(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
-        child: GestureDetector(
-          onTap: onOpenServers,
-          child: Container(
-            padding: const EdgeInsets.all(12),
-            decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-            child: Row(children: [
-              CountryCode(code: server.code, active: true),
-              const SizedBox(width: 12),
-              Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-                Text(server.name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
-                Text('${server.sub} · ${server.ping}ms', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
-              ])),
-              Icon(PangolinIcons.chevronRight, size: 20, color: c.fg3),
-            ]),
-          ),
-        ),
-      ),
-    ]);
-  }
-}
-
-/// ── Servers page ──
-class _ServersPage extends StatelessWidget {
-  const _ServersPage({required this.zh, required this.current, required this.onPick});
-  final bool zh; final String current; final ValueChanged<ServerInfo> onPick;
-
-  static const _servers = [
-    ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18),
-    ServerInfo(code: 'JP', name: '日本 东京', sub: 'Tokyo', ping: 32),
-    ServerInfo(code: 'TW', name: '台湾 台北', sub: 'Taipei', ping: 28),
-    ServerInfo(code: 'SG', name: '新加坡', sub: 'Singapore · P2P', ping: 54),
-    ServerInfo(code: 'KR', name: '韩国 首尔', sub: 'Seoul', ping: 41),
-    ServerInfo(code: 'US', name: '美国 洛杉矶', sub: 'Los Angeles', ping: 146),
-  ];
-
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
-          child: Text(zh ? '选择节点' : 'Choose server', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Expanded(child: ListView.builder(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-        itemCount: _servers.length,
-        itemBuilder: (_, i) => Padding(
-          padding: const EdgeInsets.only(bottom: 10),
-          child: ServerTile(server: _servers[i], active: _servers[i].code == current, onTap: () => onPick(_servers[i])),
-        ),
-      )),
-    ]);
-  }
-}
-
-/// ── Stats page ──
-class _StatsPage extends StatelessWidget {
-  const _StatsPage({required this.zh});
-  final bool zh;
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    final vals = [2.1, 3.4, 1.8, 4.6, 5.2, 6.1, 3.0];
-    final labels = zh ? ['一','二','三','四','五','六','日'] : ['M','T','W','T','F','S','S'];
-    const maxV = 6.1;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 16),
-          child: Text(zh ? '使用统计' : 'Statistics', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20),
-        child: Row(children: [
-          for (final m in [(zh ? '本月流量' : 'Traffic', '42.6', 'GB'), (zh ? '平均延迟' : 'Ping', '29', 'ms'), (zh ? '本月时长' : 'Time', '86.4', 'h')])
-            Expanded(child: Container(
-              margin: const EdgeInsets.only(right: 12),
-              padding: const EdgeInsets.all(14),
-              decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-                Text(m.$1, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
-                const SizedBox(height: 6),
-                Text.rich(TextSpan(text: m.$2, style: PangolinText.mono.copyWith(fontSize: 20, color: c.fg1, fontWeight: FontWeight.w500),
-                    children: [TextSpan(text: ' ${m.$3}', style: PangolinText.caption.copyWith(color: c.fg3))])),
+          Expanded(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () => onTap(i),
+              child: Column(mainAxisSize: MainAxisSize.min, children: [
+                Icon(items[i].$1, size: 22, color: i == index ? c.accent : c.fg3),
+                const SizedBox(height: 4),
+                Text(items[i].$2,
+                    style: PangolinText.caption.copyWith(
+                        color: i == index ? c.accent : c.fg3, fontWeight: i == index ? FontWeight.w700 : FontWeight.w500)),
               ]),
-            )),
-        ]),
-      ),
-      const SizedBox(height: 16),
-      Expanded(child: Padding(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-        child: Container(
-          width: double.infinity,
-          padding: const EdgeInsets.all(18),
-          decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '本周流量 (GB)' : 'This week (GB)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
-            const SizedBox(height: 18),
-            Expanded(child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
-              for (var i = 0; i < vals.length; i++)
-                Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
-                  Text('${vals[i]}', style: PangolinText.mono.copyWith(fontSize: 12, color: c.fg3)),
-                  const SizedBox(height: 6),
-                  Container(height: 90 * (vals[i] / maxV), margin: const EdgeInsets.symmetric(horizontal: 6),
-                      decoration: BoxDecoration(color: c.accent.withOpacity(.85), borderRadius: const BorderRadius.vertical(top: Radius.circular(6)))),
-                  const SizedBox(height: 6),
-                  Text(labels[i], style: PangolinText.caption.copyWith(color: c.fg3)),
-                ])),
-            ])),
-          ]),
-        ),
-      )),
-    ]);
-  }
-}
-
-/// ── Account page ──
-class _AccountPage extends StatelessWidget {
-  const _AccountPage({required this.zh});
-  final bool zh;
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 14),
-          child: Text(zh ? '我的' : 'Account', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Expanded(child: ListView(padding: const EdgeInsets.fromLTRB(20, 0, 20, 20), children: [
-        Container(
-          padding: const EdgeInsets.all(18),
-          decoration: BoxDecoration(
-            gradient: const LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [PangolinColors.clay600, PangolinColors.clay800]),
-            borderRadius: BorderRadius.circular(PangolinRadius.xl), boxShadow: PangolinShadow.md,
-          ),
-          child: Row(children: [
-            Container(width: 44, height: 44, decoration: BoxDecoration(color: PangolinColors.white.withOpacity(.18), shape: BoxShape.circle),
-                child: const Icon(PangolinIcons.crown, size: 22, color: PangolinColors.white)),
-            const SizedBox(width: 11),
-            Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-              const Text('me@pangolin.vpn', style: TextStyle(color: PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 16)),
-              const SizedBox(height: 4),
-              Text(zh ? 'PRO 会员 · 至 2026-12-31' : 'PRO · until 2026-12-31', style: TextStyle(color: PangolinColors.white.withOpacity(.85), fontSize: 12)),
-            ])),
-            FilledButton(
-              onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => PlansScreen(zh: zh, onChoose: (_) => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))))),
-              style: FilledButton.styleFrom(backgroundColor: PangolinColors.white, foregroundColor: PangolinColors.clay700, shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10)),
-              child: Text(zh ? '续费 / 升级' : 'Renew', style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
             ),
-          ]),
-        ),
-        const SizedBox(height: 18),
-        _accountRow(c, PangolinIcons.mail, zh ? '邮箱' : 'Email', 'me@pangolin.vpn'),
-        _accountRow(c, PangolinIcons.lock, zh ? '密码' : 'Password', '••••••••••'),
-        _accountRow(c, PangolinIcons.monitorSmartphone, zh ? '我的设备' : 'My devices', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => DevicesScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.shoppingBag, zh ? '兑换 & 购买' : 'Redeem & buy', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.messageCircle, zh ? '联系我们' : 'Contact us', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => ContactScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.logOut, zh ? '退出登录' : 'Sign out', '', danger: true),
-      ])),
-    ]);
-  }
-
-  Widget _accountRow(PangolinScheme c, IconData icon, String title, String value, {bool danger = false, VoidCallback? onTap}) {
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: onTap,
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 10),
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-        decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-        child: Row(children: [
-          Icon(icon, size: 20, color: danger ? c.danger : c.accent),
-          const SizedBox(width: 13),
-          Expanded(child: Text(title, style: PangolinText.body.copyWith(color: danger ? c.danger : c.fg1, fontWeight: FontWeight.w500))),
-          if (value.isNotEmpty) Text(value, style: PangolinText.sm.copyWith(color: c.fg3))
-          else Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
-        ]),
-      ),
-    );
-  }
-}
-
-/// ── Shared top bar ──
-class _TopBar extends StatelessWidget {
-  const _TopBar({required this.zh, this.trailing});
-  final bool zh; final Widget? trailing;
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
-      child: Row(children: [
-        PangolinBrandLockup(zh: zh, markSize: 24),
-        const Spacer(),
-        if (trailing != null) trailing!,
+          ),
       ]),
     );
   }
diff --git a/client/lib/widgets/onboarding_screen.dart b/client/lib/widgets/onboarding_screen.dart
index 7d079fc..1938009 100644
--- a/client/lib/widgets/onboarding_screen.dart
+++ b/client/lib/widgets/onboarding_screen.dart
@@ -1,5 +1,6 @@
-// onboarding_screen.dart — 首次引导页(3 屏可滑动)
+// onboarding_screen.dart — 首次引导页(3 屏可滑动,文案经 AppText 单显)
 import 'package:flutter/material.dart';
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
 import 'pangolin_icons.dart';
 import 'pangolin_button.dart';
@@ -12,8 +13,9 @@ class OnboardingStep {
 }
 
 class OnboardingScreen extends StatefulWidget {
-  const OnboardingScreen({super.key, required this.onDone, this.steps});
+  const OnboardingScreen({super.key, required this.onDone, required this.t, this.steps});
   final VoidCallback onDone;
+  final AppText t;
   final List<OnboardingStep>? steps;
 
   @override
@@ -24,12 +26,15 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
   int _i = 0;
   final _pager = PageController();
 
-  List<OnboardingStep> _defaults(PangolinScheme c) => [
-        OnboardingStep(icon: PangolinIcons.globe, title: '一键连接全球', body: '80+ 节点,智能选择最快线路,稳定不掉线。', cta: '下一步'),
-        OnboardingStep(icon: PangolinIcons.shield, title: '授权网络配置', body: '系统会请求添加一个网络配置,用于建立加密隧道。', cta: '允许并继续'),
-        OnboardingStep(icon: PangolinIcons.shieldCheck, title: '安全 · 无日志', body: '端到端加密,我们不记录你的任何浏览数据。', cta: '开始使用',
-            tint: c.success, tintBg: c.successSubtle),
-      ];
+  List<OnboardingStep> _defaults(PangolinScheme c) {
+    final t = widget.t;
+    return [
+      OnboardingStep(icon: PangolinIcons.globe, title: t.ob1Title, body: t.ob1Sub, cta: t.obNext),
+      OnboardingStep(icon: PangolinIcons.shield, title: t.ob2Title, body: t.ob2Sub, cta: t.obAllow),
+      OnboardingStep(icon: PangolinIcons.shieldCheck, title: t.ob3Title, body: t.ob3Sub, cta: t.obStart,
+          tint: c.success, tintBg: c.successSubtle),
+    ];
+  }
 
   @override
   void dispose() { _pager.dispose(); super.dispose(); }
@@ -48,7 +53,7 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
             alignment: Alignment.centerRight,
             child: Padding(
               padding: const EdgeInsets.all(8),
-              child: TextButton(onPressed: widget.onDone, child: Text('跳过', style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
+              child: TextButton(onPressed: widget.onDone, child: Text(widget.t.obSkip, style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
             ),
           ),
           Expanded(
diff --git a/client/lib/widgets/pangolin_icons.dart b/client/lib/widgets/pangolin_icons.dart
index 820d706..3aa42c2 100644
--- a/client/lib/widgets/pangolin_icons.dart
+++ b/client/lib/widgets/pangolin_icons.dart
@@ -12,6 +12,9 @@ class PangolinIcons {
   static const loader       = LucideIcons.loader;
   static const zap          = LucideIcons.zap;
   static const globe        = LucideIcons.globe;
+  static const clock        = LucideIcons.clock;
+  static const playCircle   = LucideIcons.playCircle;
+  static const wifi         = LucideIcons.wifi;
 
   // ── 导航 / 操作 ──
   static const settings     = LucideIcons.settings;
diff --git a/client/lib/widgets/pangolin_logo.dart b/client/lib/widgets/pangolin_logo.dart
index 5d5f8d5..08014f0 100644
--- a/client/lib/widgets/pangolin_logo.dart
+++ b/client/lib/widgets/pangolin_logo.dart
@@ -41,18 +41,18 @@ class PangolinAppIcon extends StatelessWidget {
   }
 }
 
-/// 顶栏品牌锁版:标记 + 「穿山甲 / Pangolin」
+/// 顶栏品牌锁版:标记 + 品牌名(文案由 l10n 传入,单显)
 class PangolinBrandLockup extends StatelessWidget {
-  const PangolinBrandLockup({super.key, this.zh = true, this.markSize = 26});
-  final bool zh; final double markSize;
+  const PangolinBrandLockup({super.key, required this.brand, this.markSize = 26});
+  final String brand;
+  final double markSize;
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return Row(mainAxisSize: MainAxisSize.min, children: [
       PangolinMark(size: markSize),
       const SizedBox(width: 9),
-      Text(zh ? '穿山甲' : 'Pangolin',
-          style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+      Text(brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
     ]);
   }
 }
diff --git a/client/lib/widgets/pangolin_widgets.dart b/client/lib/widgets/pangolin_widgets.dart
index c4f1a19..8afff72 100644
--- a/client/lib/widgets/pangolin_widgets.dart
+++ b/client/lib/widgets/pangolin_widgets.dart
@@ -1,13 +1,17 @@
-// pangolin_widgets.dart — 统一导出穿山甲 VPN 核心组件。
-export 'pangolin_icons.dart';
-export 'pangolin_button.dart';
-export 'country_code.dart';
-export 'status_pill.dart';
-export 'connect_button.dart';
-export 'server_tile.dart';
-export 'plan_card.dart';
-export 'auth_screen.dart';
-export 'onboarding_screen.dart';
-export 'home_shell.dart';
+// pangolin_widgets.dart — 统一导出穿山甲核心组件。
 export 'account_screens.dart';
+export 'app_top_bar.dart';
+export 'auth_screen.dart';
+export 'connect_button.dart';
+export 'country_code.dart';
+export 'home_shell.dart';
+export 'onboarding_screen.dart';
+export 'pangolin_button.dart';
+export 'pangolin_icons.dart';
 export 'pangolin_logo.dart';
+export 'plan_card.dart';
+export 'quota_card.dart';
+export 'server_tile.dart';
+export 'smart_select_card.dart';
+export 'status_pill.dart';
+export 'tab_swipe.dart';
diff --git a/client/lib/widgets/quota_card.dart b/client/lib/widgets/quota_card.dart
new file mode 100644
index 0000000..4e908f2
--- /dev/null
+++ b/client/lib/widgets/quota_card.dart
@@ -0,0 +1,120 @@
+// quota_card.dart — 免费版每日额度卡(纯展示)
+//
+// 今日剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」;
+// 解锁后变绿「已解锁 · 今日可用」。状态由 quota_provider 注入,本地仅展示。
+import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import '../state/quota_provider.dart';
+import 'pangolin_icons.dart';
+
+class QuotaCard extends StatelessWidget {
+  const QuotaCard({super.key, required this.quota, required this.t, required this.onWatchAd});
+
+  final FreeQuotaState quota;
+  final AppText t;
+  final VoidCallback onWatchAd;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final barColor = quota.isLow ? c.warning : c.accent;
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
+      decoration: BoxDecoration(
+        color: c.surface,
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        border: Border.all(color: c.border),
+        boxShadow: PangolinShadow.sm,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Row(children: [
+            Icon(PangolinIcons.clock, size: 15, color: c.accent),
+            const SizedBox(width: 7),
+            Text(t.quotaToday,
+                style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 12)),
+            const SizedBox(width: 7),
+            Text('${quota.remainingMinutes} ${t.minutes}',
+                style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w600)),
+            const Spacer(),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
+              decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+              child: Text(t.quotaFree,
+                  style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 10.5)),
+            ),
+          ]),
+          const SizedBox(height: 9),
+          // 进度条:剩余比例;≤3 分钟切 warning 色(满宽轨道 + 比例填充)
+          ClipRRect(
+            borderRadius: BorderRadius.circular(3),
+            child: SizedBox(
+              height: 6,
+              child: Stack(children: [
+                Positioned.fill(child: ColoredBox(color: c.bgSubtle)),
+                FractionallySizedBox(
+                  alignment: Alignment.centerLeft,
+                  widthFactor: quota.progress,
+                  child: AnimatedContainer(
+                    duration: PangolinMotion.base,
+                    curve: PangolinMotion.easeOut,
+                    decoration: BoxDecoration(color: barColor, borderRadius: BorderRadius.circular(3)),
+                  ),
+                ),
+              ]),
+            ),
+          ),
+          const SizedBox(height: 11),
+          if (quota.adUnlocked)
+            SizedBox(
+              height: 38,
+              child: Center(
+                child: Row(mainAxisSize: MainAxisSize.min, children: [
+                  Icon(PangolinIcons.checkCircle, size: 16, color: c.success),
+                  const SizedBox(width: 7),
+                  Text(t.adUnlocked,
+                      style: PangolinText.sm.copyWith(color: c.success, fontWeight: FontWeight.w700, fontSize: 13)),
+                ]),
+              ),
+            )
+          else
+            _WatchAdButton(t: t, onTap: onWatchAd),
+        ],
+      ),
+    );
+  }
+}
+
+class _WatchAdButton extends StatelessWidget {
+  const _WatchAdButton({required this.t, required this.onTap});
+  final AppText t;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Material(
+      color: c.accentSubtle,
+      shape: StadiumBorder(side: BorderSide(color: c.accentBorder, width: 1.5)),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: SizedBox(
+          height: 38,
+          child: Center(
+            child: Row(mainAxisSize: MainAxisSize.min, children: [
+              Icon(PangolinIcons.playCircle, size: 16, color: c.accent),
+              const SizedBox(width: 7),
+              Text(t.watchAd,
+                  style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700, fontSize: 13)),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/client/lib/widgets/server_tile.dart b/client/lib/widgets/server_tile.dart
index b0fe53e..42245cc 100644
--- a/client/lib/widgets/server_tile.dart
+++ b/client/lib/widgets/server_tile.dart
@@ -1,18 +1,23 @@
-// server_tile.dart — 服务器列表行
+// server_tile.dart — 节点列表行(国家码块 · 名称 · 延迟 · 信号条 · 选中态)
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../models/node.dart';
 import '../pangolin_theme.dart';
 import 'country_code.dart';
 import 'pangolin_icons.dart';
 
-class ServerInfo {
-  const ServerInfo({required this.code, required this.name, required this.sub, required this.ping});
-  final String code, name, sub;
-  final int ping;
-}
-
 class ServerTile extends StatelessWidget {
-  const ServerTile({super.key, required this.server, this.active = false, this.onTap});
-  final ServerInfo server;
+  const ServerTile({
+    super.key,
+    required this.node,
+    required this.lang,
+    this.active = false,
+    this.onTap,
+  });
+
+  final Node node;
+  final AppLang lang;
   final bool active;
   final VoidCallback? onTap;
 
@@ -26,21 +31,24 @@ class ServerTile extends StatelessWidget {
         padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
         child: Row(
           children: [
-            CountryCode(code: server.code, active: active),
+            CountryCode(code: node.code, active: active),
             const SizedBox(width: 13),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(server.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 15)),
+                  Text(node.localizedName(lang),
+                      style: PangolinText.sm
+                          .copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 15)),
                   const SizedBox(height: 2),
-                  Text(server.sub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+                  Text(node.localizedSub(lang),
+                      style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
                 ],
               ),
             ),
-            Text('${server.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
+            Text('${node.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
             const SizedBox(width: 8),
-            SignalBars(ping: server.ping),
+            SignalBars(ping: node.ping),
             if (active) ...[const SizedBox(width: 10), Icon(PangolinIcons.check, size: 18, color: c.accent)],
           ],
         ),
diff --git a/client/lib/widgets/smart_select_card.dart b/client/lib/widgets/smart_select_card.dart
new file mode 100644
index 0000000..185477d
--- /dev/null
+++ b/client/lib/widgets/smart_select_card.dart
@@ -0,0 +1,82 @@
+// smart_select_card.dart — 节点页置顶「智能选择」推荐卡(纯展示)
+//
+// accent-subtle 底 + clay 渐变 zap 图标 + 「推荐」胶囊 + 脱敏文案,默认选中。
+import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import 'pangolin_icons.dart';
+
+class SmartSelectCard extends StatelessWidget {
+  const SmartSelectCard({super.key, required this.t, required this.selected, required this.onTap});
+
+  final AppText t;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Material(
+      color: c.accentSubtle,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(PangolinRadius.xl),
+        side: BorderSide(color: selected ? c.accent : c.accentBorder, width: 1.5),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 15),
+          child: Row(
+            children: [
+              Container(
+                width: 42,
+                height: 42,
+                decoration: BoxDecoration(
+                  gradient: const LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [PangolinColors.clay500, PangolinColors.clay700],
+                  ),
+                  borderRadius: BorderRadius.circular(PangolinRadius.md),
+                ),
+                child: const Icon(PangolinIcons.zap, size: 21, color: PangolinColors.white),
+              ),
+              const SizedBox(width: 13),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(children: [
+                      Flexible(
+                        child: Text(t.smartSelect,
+                            style: PangolinText.body
+                                .copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 15.5)),
+                      ),
+                      const SizedBox(width: 8),
+                      Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                        decoration: BoxDecoration(color: c.accent, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+                        child: Text(t.recommended,
+                            style: PangolinText.caption.copyWith(
+                                color: c.fgOnAccent, fontWeight: FontWeight.w700, fontSize: 10)),
+                      ),
+                    ]),
+                    const SizedBox(height: 3),
+                    Text(t.smartSub,
+                        style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w400, height: 1.5)),
+                  ],
+                ),
+              ),
+              if (selected) ...[
+                const SizedBox(width: 8),
+                Icon(PangolinIcons.check, size: 19, color: c.accent),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/client/lib/widgets/tab_swipe.dart b/client/lib/widgets/tab_swipe.dart
new file mode 100644
index 0000000..6b834a7
--- /dev/null
+++ b/client/lib/widgets/tab_swipe.dart
@@ -0,0 +1,110 @@
+// tab_swipe.dart — Tab 左右滑动切换的手势仲裁组件
+//
+// 约定(design/CLAUDE.md §5):横向位移 >60px 且明显大于纵向时切换 Tab;
+// 子页内的纵向滚动区域不响应该手势。
+//
+// 仲裁机制:本组件只接 HorizontalDrag。纵向滚动由内部 ListView 的
+// VerticalDragGestureRecognizer 在手势竞技场中胜出,本组件的横向识别器
+// 自然落败——因此「滚动列表/纵向拖拽」永远不会误触发 Tab 切换,无需手写
+// dx/dy 比例判断。横向为主的拖拽才会进入本组件并按阈值判定方向。
+import 'package:flutter/material.dart';
+
+/// 方向感知:1 = 向后(进入右侧 Tab),-1 = 向前(进入左侧 Tab)。
+typedef SwipeCallback = void Function();
+
+class HorizontalSwipeArea extends StatefulWidget {
+  const HorizontalSwipeArea({
+    super.key,
+    required this.child,
+    this.onSwipeLeft,
+    this.onSwipeRight,
+    this.threshold = 60,
+  });
+
+  /// 包裹的内容(通常是当前 Tab 页)。
+  final Widget child;
+
+  /// 向左滑(手指从右往左)→ 切到下一个 Tab。
+  final VoidCallback? onSwipeLeft;
+
+  /// 向右滑(手指从左往右)→ 切到上一个 Tab。
+  final VoidCallback? onSwipeRight;
+
+  /// 触发阈值(逻辑像素)。
+  final double threshold;
+
+  @override
+  State<HorizontalSwipeArea> createState() => _HorizontalSwipeAreaState();
+}
+
+class _HorizontalSwipeAreaState extends State<HorizontalSwipeArea> {
+  double _dx = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      // 仅接横向拖拽:纵向滚动交给内部可滚动组件(竞技场仲裁)。
+      onHorizontalDragStart: (_) => _dx = 0,
+      onHorizontalDragUpdate: (d) => _dx += d.delta.dx,
+      onHorizontalDragEnd: (details) {
+        final v = details.primaryVelocity ?? 0;
+        // 位移过阈值,或带明显速度的快划。
+        final left = _dx <= -widget.threshold || v < -300;
+        final right = _dx >= widget.threshold || v > 300;
+        if (left) {
+          widget.onSwipeLeft?.call();
+        } else if (right) {
+          widget.onSwipeRight?.call();
+        }
+        _dx = 0;
+      },
+      child: widget.child,
+    );
+  }
+}
+
+/// 方向感知的页面切换动画:200ms 轻移淡入(对齐 React pg-in-l / pg-in-r)。
+class DirectionalTabSwitcher extends StatelessWidget {
+  const DirectionalTabSwitcher({super.key, required this.index, required this.direction, required this.child});
+
+  /// 当前 Tab 索引(作为切换 key)。
+  final int index;
+
+  /// 进入方向:1 从右进(下一个),-1 从左进(上一个),0 无动画。
+  final int direction;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 200),
+      switchInCurve: PangolinMotionEaseOut.curve,
+      transitionBuilder: (child, animation) {
+        // 仅对「进入」的新页做方向位移 + 淡入;旧页直接淡出,避免回弹。
+        final isIncoming = child.key == ValueKey<int>(index);
+        if (direction == 0 || !isIncoming) {
+          return FadeTransition(opacity: animation, child: child);
+        }
+        final begin = Offset(direction > 0 ? 0.06 : -0.06, 0);
+        return FadeTransition(
+          opacity: animation,
+          child: SlideTransition(
+            position: Tween<Offset>(begin: begin, end: Offset.zero).animate(animation),
+            child: child,
+          ),
+        );
+      },
+      layoutBuilder: (currentChild, previousChildren) => Stack(
+        alignment: Alignment.topCenter,
+        children: [...previousChildren, if (currentChild != null) currentChild],
+      ),
+      child: KeyedSubtree(key: ValueKey<int>(index), child: child),
+    );
+  }
+}
+
+/// 暴露 easeOut 曲线(避免在本文件 import 主题造成循环)。
+class PangolinMotionEaseOut {
+  PangolinMotionEaseOut._();
+  static const Curve curve = Cubic(0.22, 1, 0.36, 1);
+}
diff --git a/client/pubspec.yaml b/client/pubspec.yaml
index d56147c..250e334 100644
--- a/client/pubspec.yaml
+++ b/client/pubspec.yaml
@@ -13,6 +13,7 @@ dependencies:
   flutter_svg: ^2.0.10      # 加载 assets/ 下的矢量 logo
   lucide_icons: ^0.257.0    # Lucide 细线条图标
   google_fonts: ^6.2.1      # 运行时加载 Sora / Manrope / Noto Sans SC / JetBrains Mono
+  flutter_riverpod: ^2.5.1  # 状态层(连接状态机 / 免费额度 / 节点选择 / 语言 / 主题)
 
 dev_dependencies:
   flutter_test:
diff --git a/client/test/golden/components_golden_test.dart b/client/test/golden/components_golden_test.dart
new file mode 100644
index 0000000..3a86678
--- /dev/null
+++ b/client/test/golden/components_golden_test.dart
@@ -0,0 +1,87 @@
+// components_golden_test.dart — 关键组件 golden(明/暗两主题)
+//
+// 覆盖:连接键三态、智能选择推荐卡、免费额度卡。
+// 首次生成基准图:`flutter test --update-goldens test/golden`。
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/l10n/strings_zh.dart';
+import 'package:pangolin_vpn/state/connection_provider.dart';
+import 'package:pangolin_vpn/state/quota_provider.dart';
+import 'package:pangolin_vpn/widgets/connect_button.dart';
+import 'package:pangolin_vpn/widgets/quota_card.dart';
+import 'package:pangolin_vpn/widgets/smart_select_card.dart';
+
+import '../helpers/harness.dart';
+
+void main() {
+  setUpAll(disableGoogleFontsFetching);
+  const t = StringsZh();
+
+  Future<void> goldenOf(
+    WidgetTester tester,
+    Widget child,
+    Finder finder,
+    String name, {
+    bool dark = false,
+    Duration settle = Duration.zero,
+  }) async {
+    await tester.pumpWidget(wrapThemed(child, dark: dark));
+    if (settle == Duration.zero) {
+      await tester.pump();
+    } else {
+      await tester.pump(settle); // 固定帧,确保连接中旋转角确定
+    }
+    await expectLater(finder, matchesGoldenFile('goldens/$name.png'));
+  }
+
+  ConnectButton btn(VpnPhase phase, {Duration elapsed = Duration.zero}) => ConnectButton(
+        phase: phase,
+        elapsed: elapsed,
+        offLabel: t.connectNow,
+        secureLabel: t.secure,
+        onTap: () {},
+      );
+
+  for (final dark in [false, true]) {
+    final suffix = dark ? 'dark' : 'light';
+
+    testWidgets('连接键 off · $suffix', (tester) async {
+      await goldenOf(tester, btn(VpnPhase.off), find.byType(ConnectButton), 'connect_off_$suffix', dark: dark);
+    });
+
+    testWidgets('连接键 connecting · $suffix', (tester) async {
+      await goldenOf(tester, btn(VpnPhase.connecting), find.byType(ConnectButton), 'connect_connecting_$suffix',
+          dark: dark, settle: const Duration(milliseconds: 700));
+    });
+
+    testWidgets('连接键 on · $suffix', (tester) async {
+      await goldenOf(tester, btn(VpnPhase.on, elapsed: const Duration(seconds: 5)), find.byType(ConnectButton),
+          'connect_on_$suffix', dark: dark);
+    });
+
+    testWidgets('推荐卡 · $suffix', (tester) async {
+      await goldenOf(tester, SmartSelectCard(t: t, selected: true, onTap: () {}), find.byType(SmartSelectCard),
+          'smart_card_$suffix', dark: dark);
+    });
+
+    testWidgets('额度卡(低额度警示)· $suffix', (tester) async {
+      await goldenOf(
+        tester,
+        QuotaCard(quota: const FreeQuotaState(remainingMinutes: 2), t: t, onWatchAd: () {}),
+        find.byType(QuotaCard),
+        'quota_low_$suffix',
+        dark: dark,
+      );
+    });
+
+    testWidgets('额度卡(已解锁)· $suffix', (tester) async {
+      await goldenOf(
+        tester,
+        QuotaCard(quota: const FreeQuotaState(adUnlocked: true), t: t, onWatchAd: () {}),
+        find.byType(QuotaCard),
+        'quota_unlocked_$suffix',
+        dark: dark,
+      );
+    });
+  }
+}
diff --git a/client/test/helpers/harness.dart b/client/test/helpers/harness.dart
new file mode 100644
index 0000000..f18e4eb
--- /dev/null
+++ b/client/test/helpers/harness.dart
@@ -0,0 +1,33 @@
+// harness.dart — 测试公共脚手架
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:pangolin_vpn/pangolin_theme.dart';
+
+/// 测试环境禁用 google_fonts 运行时网络拉取(离线确定化)。
+void disableGoogleFontsFetching() {
+  GoogleFonts.config.allowRuntimeFetching = false;
+}
+
+/// 用穿山甲明/暗主题包裹被测组件,并固定宽度便于 golden 对照。
+Widget wrapThemed(
+  Widget child, {
+  bool dark = false,
+  double width = 360,
+  List<Override> overrides = const [],
+}) {
+  return ProviderScope(
+    overrides: overrides,
+    child: MaterialApp(
+      debugShowCheckedModeBanner: false,
+      theme: PangolinTheme.light,
+      darkTheme: PangolinTheme.dark,
+      themeMode: dark ? ThemeMode.dark : ThemeMode.light,
+      home: Scaffold(
+        body: Center(
+          child: SizedBox(width: width, child: child),
+        ),
+      ),
+    ),
+  );
+}
diff --git a/client/test/unit/connection_controller_test.dart b/client/test/unit/connection_controller_test.dart
new file mode 100644
index 0000000..7bb97ec
--- /dev/null
+++ b/client/test/unit/connection_controller_test.dart
@@ -0,0 +1,71 @@
+// connection_controller_test.dart — 连接状态机:严格三态、禁乐观显示
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/state/connection_provider.dart';
+
+void main() {
+  // 注入极短握手时长,用真实计时器走完状态流转。
+  ConnectionController make() => ConnectionController(handshake: const Duration(milliseconds: 20));
+
+  test('初始为 off', () {
+    final ctl = make();
+    expect(ctl.state.phase, VpnPhase.off);
+    ctl.dispose();
+  });
+
+  test('connect: off → connecting → on', () async {
+    final ctl = make();
+    ctl.connect();
+    expect(ctl.state.phase, VpnPhase.connecting);
+    await Future<void>.delayed(const Duration(milliseconds: 60));
+    expect(ctl.state.phase, VpnPhase.on);
+    ctl.dispose();
+  });
+
+  test('握手中再次 toggle 被忽略(禁止乐观回退)', () async {
+    final ctl = make();
+    ctl.toggle(); // off → connecting
+    expect(ctl.state.phase, VpnPhase.connecting);
+    ctl.toggle(); // connecting 中点击 → 仍 connecting
+    expect(ctl.state.phase, VpnPhase.connecting);
+    await Future<void>.delayed(const Duration(milliseconds: 60));
+    expect(ctl.state.phase, VpnPhase.on);
+    ctl.dispose();
+  });
+
+  test('on 态 toggle → off', () async {
+    final ctl = make();
+    ctl.connect();
+    await Future<void>.delayed(const Duration(milliseconds: 60));
+    expect(ctl.state.phase, VpnPhase.on);
+    ctl.toggle();
+    expect(ctl.state.phase, VpnPhase.off);
+    ctl.dispose();
+  });
+
+  test('已连接时切换节点 → 重连(回到 connecting)', () async {
+    final ctl = make();
+    ctl.connect();
+    await Future<void>.delayed(const Duration(milliseconds: 60));
+    expect(ctl.state.phase, VpnPhase.on);
+    ctl.onNodeChanged();
+    expect(ctl.state.phase, VpnPhase.connecting);
+    ctl.dispose();
+  });
+
+  test('on 态计时累加', () async {
+    final ctl = make();
+    ctl.connect();
+    await Future<void>.delayed(const Duration(milliseconds: 60));
+    expect(ctl.state.elapsed, Duration.zero);
+    await Future<void>.delayed(const Duration(milliseconds: 1100));
+    expect(ctl.state.elapsed.inSeconds, greaterThanOrEqualTo(1));
+    ctl.dispose();
+  });
+
+  test('off 态切换节点不会自动连接', () {
+    final ctl = make();
+    ctl.onNodeChanged();
+    expect(ctl.state.phase, VpnPhase.off);
+    ctl.dispose();
+  });
+}
diff --git a/client/test/unit/nodes_provider_test.dart b/client/test/unit/nodes_provider_test.dart
new file mode 100644
index 0000000..dbcee1c
--- /dev/null
+++ b/client/test/unit/nodes_provider_test.dart
@@ -0,0 +1,40 @@
+// nodes_provider_test.dart — 节点选择 / 智能选择派生
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/l10n/app_text.dart';
+import 'package:pangolin_vpn/models/node.dart';
+import 'package:pangolin_vpn/state/nodes_provider.dart';
+
+void main() {
+  test('默认智能选择(AUTO)', () {
+    final c = ProviderContainer();
+    addTearDown(c.dispose);
+    expect(c.read(selectedNodeCodeProvider), kSmartNodeCode);
+    expect(c.read(isSmartSelectProvider), true);
+  });
+
+  test('智能选择取延迟最小节点', () {
+    final c = ProviderContainer();
+    addTearDown(c.dispose);
+    final node = c.read(effectiveNodeProvider);
+    final minPing = kDemoNodes.map((n) => n.ping).reduce((a, b) => a < b ? a : b);
+    expect(node.ping, minPing);
+  });
+
+  test('选中具体节点后生效节点随之改变', () {
+    final c = ProviderContainer();
+    addTearDown(c.dispose);
+    c.read(selectedNodeCodeProvider.notifier).state = 'JP';
+    expect(c.read(isSmartSelectProvider), false);
+    expect(c.read(effectiveNodeProvider).code, 'JP');
+  });
+
+  test('localizedSub 不串语言:无标签用拉丁地名', () {
+    const tw = Node(code: 'TW', nameZh: '台湾 台北', nameEn: 'Taipei', ping: 28);
+    expect(tw.localizedSub(AppLang.zh), 'Taipei');
+    expect(tw.localizedSub(AppLang.en), 'Taipei');
+    const hk = Node(code: 'HK', nameZh: '香港 · 流媒体', nameEn: 'Hong Kong', ping: 18, tag: NodeTag.streaming);
+    expect(hk.localizedSub(AppLang.zh), '流媒体优化');
+    expect(hk.localizedSub(AppLang.en), 'Streaming');
+  });
+}
diff --git a/client/test/unit/quota_controller_test.dart b/client/test/unit/quota_controller_test.dart
new file mode 100644
index 0000000..3b4df65
--- /dev/null
+++ b/client/test/unit/quota_controller_test.dart
@@ -0,0 +1,36 @@
+// quota_controller_test.dart — 免费额度状态机
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/state/quota_provider.dart';
+
+void main() {
+  test('默认值:10 分钟总额 / 6 分钟剩余 / 未解锁', () {
+    final ctl = QuotaController();
+    expect(ctl.state.totalMinutes, 10);
+    expect(ctl.state.remainingMinutes, 6);
+    expect(ctl.state.adUnlocked, false);
+  });
+
+  test('progress = 剩余/总额', () {
+    final ctl = QuotaController(const FreeQuotaState(totalMinutes: 10, remainingMinutes: 5));
+    expect(ctl.state.progress, closeTo(0.5, 1e-9));
+  });
+
+  test('isLow:剩余 ≤3 分钟为真', () {
+    expect(const FreeQuotaState(remainingMinutes: 3).isLow, true);
+    expect(const FreeQuotaState(remainingMinutes: 4).isLow, false);
+  });
+
+  test('watchAd 解锁今日使用', () {
+    final ctl = QuotaController();
+    expect(ctl.state.adUnlocked, false);
+    ctl.watchAd();
+    expect(ctl.state.adUnlocked, true);
+  });
+
+  test('reset 回到未解锁初始态', () {
+    final ctl = QuotaController()..watchAd();
+    ctl.reset();
+    expect(ctl.state.adUnlocked, false);
+    expect(ctl.state.remainingMinutes, 6);
+  });
+}
diff --git a/client/test/widget/cards_test.dart b/client/test/widget/cards_test.dart
new file mode 100644
index 0000000..bb8d0fc
--- /dev/null
+++ b/client/test/widget/cards_test.dart
@@ -0,0 +1,55 @@
+// cards_test.dart — 额度卡 / 智能选择推荐卡 行为
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/l10n/strings_zh.dart';
+import 'package:pangolin_vpn/state/quota_provider.dart';
+import 'package:pangolin_vpn/widgets/pangolin_icons.dart';
+import 'package:pangolin_vpn/widgets/quota_card.dart';
+import 'package:pangolin_vpn/widgets/smart_select_card.dart';
+
+import '../helpers/harness.dart';
+
+void main() {
+  setUpAll(disableGoogleFontsFetching);
+  const t = StringsZh();
+
+  testWidgets('额度卡:未解锁显示看广告按钮,点击回调', (tester) async {
+    var watched = 0;
+    await tester.pumpWidget(wrapThemed(
+      QuotaCard(quota: const FreeQuotaState(), t: t, onWatchAd: () => watched++),
+    ));
+    await tester.pump();
+    expect(find.text(t.watchAd), findsOneWidget);
+    await tester.tap(find.text(t.watchAd));
+    expect(watched, 1);
+  });
+
+  testWidgets('额度卡:已解锁显示已解锁文案', (tester) async {
+    await tester.pumpWidget(wrapThemed(
+      QuotaCard(quota: const FreeQuotaState(adUnlocked: true), t: t, onWatchAd: () {}),
+    ));
+    await tester.pump();
+    expect(find.text(t.adUnlocked), findsOneWidget);
+    expect(find.byIcon(PangolinIcons.checkCircle), findsOneWidget);
+  });
+
+  testWidgets('推荐卡:展示推荐胶囊与文案,选中显示对勾', (tester) async {
+    await tester.pumpWidget(wrapThemed(
+      SmartSelectCard(t: t, selected: true, onTap: () {}),
+    ));
+    await tester.pump();
+    expect(find.text(t.smartSelect), findsOneWidget);
+    expect(find.text(t.recommended), findsOneWidget);
+    expect(find.text(t.smartSub), findsOneWidget);
+    expect(find.byIcon(PangolinIcons.check), findsOneWidget);
+  });
+
+  testWidgets('推荐卡:点击回调', (tester) async {
+    var picked = 0;
+    await tester.pumpWidget(wrapThemed(
+      SmartSelectCard(t: t, selected: false, onTap: () => picked++),
+    ));
+    await tester.pump();
+    await tester.tap(find.text(t.smartSelect));
+    expect(picked, 1);
+  });
+}
diff --git a/client/test/widget/connect_button_test.dart b/client/test/widget/connect_button_test.dart
new file mode 100644
index 0000000..89f27d7
--- /dev/null
+++ b/client/test/widget/connect_button_test.dart
@@ -0,0 +1,51 @@
+// connect_button_test.dart — 连接键三态展示与回调
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pangolin_vpn/state/connection_provider.dart';
+import 'package:pangolin_vpn/widgets/connect_button.dart';
+import 'package:pangolin_vpn/widgets/pangolin_icons.dart';
+
+import '../helpers/harness.dart';
+
+void main() {
+  setUpAll(disableGoogleFontsFetching);
+
+  Widget button(VpnPhase phase, {Duration elapsed = Duration.zero, VoidCallback? onTap}) => wrapThemed(
+        ConnectButton(
+          phase: phase,
+          elapsed: elapsed,
+          offLabel: '点击连接',
+          secureLabel: '已加密',
+          onTap: onTap ?? () {},
+        ),
+      );
+
+  testWidgets('off 态:power 图标 + 点击连接', (tester) async {
+    await tester.pumpWidget(button(VpnPhase.off));
+    await tester.pump();
+    expect(find.byIcon(PangolinIcons.power), findsOneWidget);
+    expect(find.text('点击连接'), findsOneWidget);
+  });
+
+  testWidgets('connecting 态:loader 图标', (tester) async {
+    await tester.pumpWidget(button(VpnPhase.connecting));
+    await tester.pump(const Duration(milliseconds: 100));
+    expect(find.byIcon(PangolinIcons.loader), findsOneWidget);
+  });
+
+  testWidgets('on 态:盾勾 + 计时 + 已加密', (tester) async {
+    await tester.pumpWidget(button(VpnPhase.on, elapsed: const Duration(seconds: 5)));
+    await tester.pump();
+    expect(find.byIcon(PangolinIcons.shieldCheck), findsOneWidget);
+    expect(find.text('00:00:05'), findsOneWidget);
+    expect(find.text('已加密'), findsOneWidget);
+  });
+
+  testWidgets('点击触发回调', (tester) async {
+    var tapped = 0;
+    await tester.pumpWidget(button(VpnPhase.off, onTap: () => tapped++));
+    await tester.pump();
+    await tester.tap(find.byType(ConnectButton));
+    expect(tapped, 1);
+  });
+}
diff --git a/todo/todo.html b/todo/todo.html
index efe8630..b12ca64 100644
--- a/todo/todo.html
+++ b/todo/todo.html
@@ -131,6 +131,37 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 }
 .reject-date { color: #ef9999; font-size: 12px; }
 
+/* ── 确认闸（方案/改动说明）── */
+.gate-block { margin: 10px 0 4px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
+.gate-pending { background: #fff7ed; border: 1px solid #fdba74; }
+.gate-granted { background: #f0fdf4; border: 1px solid #bbf7d0; }
+.gate-info    { background: #f1f5f9; border: 1px solid #e2e8f0; }
+.gate-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
+.gate-badge { padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
+.gate-badge.pending { background: #f97316; color: #fff; }
+.gate-badge.granted { background: #22c55e; color: #fff; }
+.gate-badge.info    { background: #94a3b8; color: #fff; }
+.gate-kind { font-size: 12px; color: #52606d; }
+.gate-date { font-size: 12px; color: #8aa3c4; margin-left: auto; }
+.gate-note { color: #52606d; margin: 4px 0; white-space: pre-wrap; }
+.gate-ref  { font-size: 12.5px; color: #52606d; margin-top: 4px; }
+.gate-note code, .gate-ref code {
+  background: #fff; padding: 1px 5px; border-radius: 3px;
+  font-family: "JetBrains Mono", monospace; font-size: 12px; color: #b91c1c;
+}
+.approve-btn {
+  margin-top: 8px; padding: 5px 14px; border-radius: 6px; border: none;
+  background: #16a34a; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
+  transition: background .15s;
+}
+.approve-btn:hover { background: #15803d; }
+.approve-cmd { margin-top: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; }
+.approve-cmd-label { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
+.approve-cmd-code { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #86efac; display: block; word-break: break-all; }
+.approve-copy-btn { margin-top: 8px; padding: 4px 12px; border-radius: 6px; background: #334155; color: #e2e8f0; border: none; font-size: 12px; cursor: pointer; }
+.approve-copy-btn:hover { background: #475569; }
+.stat-pill.gate-stat { background: #f97316; }
+
 /* ── 子任务区 ── */
 .subtask-block {
   margin-top: 12px; padding: 10px 14px;
@@ -221,13 +252,14 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 <header>
   <div class="wrap">
     <h1>doc — 项目 TODO</h1>
-    <div class="header-meta">生成于 2026-06-11 · 真相源 todo/todo.json</div>
+    <div class="header-meta">生成于 2026-06-13 · 真相源 todo/todo.json</div>
     <div class="stats">
-      <div class="stat-pill"><strong>18</strong>全部</div>
+      <div class="stat-pill"><strong>19</strong>全部</div>
       <div class="stat-pill"><strong>18</strong>待开始</div>
       <div class="stat-pill"><strong>0</strong>开发中</div>
-      <div class="stat-pill"><strong>0</strong>待验收</div>
+      <div class="stat-pill"><strong>1</strong>待验收</div>
       <div class="stat-pill"><strong>0</strong>已验收</div>
+      
     </div>
   </div>
 </header>
@@ -294,6 +326,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">依据 doc/02、doc/03：openapi.yaml 展开全部 /v1 契约（connect 返回 sing-box 凭证而非 WG peer）；MySQL 8 全量 DDL（users/devices/plans/subscriptions/codes/usage_daily/audit_log + providers/node_events/directory_version）。后端各模块的共同前置。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span> <span class="tag t-tag" data-tag="数据库">数据库</span></div>
         <div class="item-meta">
@@ -322,6 +355,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">proto 定义（注册/心跳/凭证下发与回收/用量上报，mTLS 双向）、节点目录 version 灰度（if_version 304）、connect/disconnect 下发 REALITY/Hy2 参数、free 凭证 TTL。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -350,6 +384,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">用 design/flutter/ 起步包建工程：pubspec 覆盖、theme/widgets/main 拷入、字体配置，flutter run 出登录→引导→主框架演示态。前端线起点，可与后端完全并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span></div>
         <div class="item-meta">
@@ -378,6 +413,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">gomobile AAR/XCFramework + iOS NetworkExtension / Android VpnService / 桌面 TUN 子进程；URLTest 智能选线、Kill-switch。全项目最大技术风险，应尽早并行启动。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span> <span class="tag t-tag" data-tag="mac">mac</span> <span class="tag t-tag" data-tag="Windows">Windows</span></div>
         <div class="item-meta">
@@ -406,6 +442,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">境内多 ISP 拨测 + 境外对照 + 流量骤降三路互证；blocked_suspect/confirmed 状态机、阈值与熔断、池水位告警、自动补新。依赖 #5、#14。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -434,6 +471,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">邮箱验证码限频、注册自动 7 天 PRO 试用、argon2id、JWT RS256（access 15min + refresh 30d）、Redis 滑窗限流。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -462,6 +500,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">批量生成（Crockford Base32 + 校验位，库存 hash）、发卡店 webhook（HMAC）、兑换幂等 + 订阅顺延叠加、失败锁定、audit_log。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -490,6 +529,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">设备登记/移除（同步回收节点侧凭证）、套餐/到期/设备数校验中间件。依赖 #1、#2。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -518,6 +558,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">轻量 agent：mTLS 自注册、心跳、sing-box 用户表增删（凭证下发/回收/TTL）、负载上报 Redis；cloud-init 一段式安装。依赖 #5 的 proto。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -546,6 +587,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">usage_daily 聚合（仅字节/分钟，无日志口径）、/v1/ads/unlock 验广告 SDK 回执、free 用户 connect 额度校验。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -574,6 +616,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">对照 ui_kits/mobile + tablet 逐屏补齐：智能选择推荐卡、免费额度卡+看广告解锁、Tab 滑动切换、宽度 ≥900 切侧栏分栏（连接页双栏/节点双列网格）；四态验证（明暗×中英）。依赖 #9。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span></div>
         <div class="item-meta">
@@ -602,6 +645,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">ui_kits/website → Astro SSG + Cloudflare Pages 多镜像；保留 i18n 单显、响应式断点、全部脱敏文案。完全独立可并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
@@ -630,6 +674,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">ui_kits/usercenter React 组件直接复用；先 mock 数据，后接 me/redeem/devices；TOTP 2FA。UI 部分独立并行，接口联调依赖 #2。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
@@ -658,6 +703,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">多厂商 API 适配层（providers 池）、cloud-init 模板、replace 一键更换（make-before-break）与全量滚动轮换、换 IP 不换机。依赖 #6 的 agent。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="CI/CD">CI/CD</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -686,6 +732,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">四组域名隔离与冷备池、源站隐藏（回源鉴权）、Ed25519 签名端点更新与公告 JSON 多镜像、客户端 DoH/IP 直连兜底联动。可独立并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span></div>
         <div class="item-meta">
@@ -714,6 +761,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">xtrabackup 每日全量 + binlog 15min 增量、age 加密异地（独立身份账号）、月度恢复演练脚本、RPO≤15min/RTO≤4h 验证。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="数据库">数据库</span> <span class="tag t-tag" data-tag="CI/CD">CI/CD</span></div>
         <div class="item-meta">
@@ -742,6 +790,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">码批次生成导出、节点操作（replace/draining）、audit_log 查看；独立监听 + 内网白名单 + 2FA。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span> <span class="tag t-tag" data-tag="Web">Web</span></div>
         <div class="item-meta">
@@ -770,6 +819,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">lint + 单测 + OpenAPI 同步校验 + 脱敏红线词扫描（UI 文案资源）+ 容器镜像构建。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="CI/CD">CI/CD</span></div>
         <div class="item-meta">
@@ -794,12 +844,40 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   </div>
   <div class="section-block" id="section-done">
     <div class="section-title st-done" data-toggle="done">
-      🔍 待验收 <span class="s-count">0</span>
+      🔍 待验收 <span class="s-count">1</span>
       <span class="s-arrow">▴ 收起</span>
     </div>
     <div class="section-list-wrap " id="list-wrap-done">
       <ul class="todo-list" id="list-done">
-        <p class="empty-tip">暂无条目</p>
+        
+    <li class="todo-card s-done"
+        data-id="19"
+        data-level="mid"
+        data-status="done"
+        data-tier=""
+        data-tags="">
+      <div class="card-header">
+        <span class="item-title">Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线</span>
+        <div class="card-badges">
+          <span class="tag status-badge s-done">待验收</span>
+          <span class="tag t-high">重要</span>
+          
+          
+          <button class="reject-btn" data-id="19" data-title="Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线">拒绝验收</button>
+        </div>
+      </div>
+      
+      
+      
+      
+      <div class="card-footer">
+        <div class="tag-row"></div>
+        <div class="item-meta">
+      <span class="meta-date">🕐 2026-06-13</span>
+      
+    </div>
+      </div>
+    </li>
       </ul>
     </div>
   </div>
@@ -844,6 +922,16 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   let curTier   = 'all';
   let curTags   = new Set();
 
+  // 通过本地服务（http）打开时，按钮直接写库；用 file:// 直接打开则回退为「复制命令」
+  const SERVED = location.protocol === 'http:' || location.protocol === 'https:';
+  function postAction(url, payload) {
+    return fetch(url, {
+      method: 'POST',
+      headers: payload ? { 'Content-Type': 'application/json' } : undefined,
+      body: payload ? JSON.stringify(payload) : undefined,
+    }).then(r => r.json());
+  }
+
   function applyFilter() {
     document.querySelectorAll('.todo-card').forEach(card => {
       const lvl    = card.dataset.level;
@@ -964,8 +1052,13 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       reasonInput.focus();
       return;
     }
-    const escaped = reason.replace(/\/g, '\\').replace(/"/g, '\"');
-    const cmd = '/todo reject ' + rejectId + ' ' + escaped;
+    if (SERVED) {
+      postAction('/api/reject/' + rejectId, { reason })
+        .then(d => { if (d.ok) { location.reload(); } else { alert('拒绝失败：' + (d.error || '')); } })
+        .catch(() => alert('请求失败，确认本地服务是否在运行'));
+      return;
+    }
+    const cmd = '/todo reject ' + rejectId + ' ' + JSON.stringify(reason);
     cmdText.textContent = cmd;
     cmdWrap.style.display = 'block';
     document.getElementById('reject-confirm-btn').style.display = 'none';
@@ -983,6 +1076,32 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       copyBtn.textContent = '已复制 ✓';
     });
   });
+
+  // ── 确认闸：服务模式直接写库；file:// 模式回退为展开命令 ──
+  document.querySelectorAll('.approve-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const id = btn.dataset.id;
+      if (SERVED) {
+        btn.disabled = true; btn.textContent = '确认中…';
+        postAction('/api/approve/' + id)
+          .then(d => {
+            if (d.ok) { location.reload(); }
+            else { btn.disabled = false; btn.textContent = '确认执行 ✓'; alert('确认失败：' + (d.error || '')); }
+          })
+          .catch(() => { btn.disabled = false; btn.textContent = '确认执行 ✓'; alert('请求失败，确认本地服务是否在运行'); });
+      } else {
+        const box = document.getElementById('approve-cmd-' + id);
+        if (box) box.style.display = box.style.display === 'none' ? 'block' : 'none';
+      }
+    });
+  });
+  document.querySelectorAll('.approve-copy-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(btn.dataset.cmd).then(() => { btn.textContent = '已复制 ✓'; });
+    });
+  });
 })();
 </script>
 </body>
diff --git a/todo/todo.json b/todo/todo.json
index 69603d1..1e96f86 100644
--- a/todo/todo.json
+++ b/todo/todo.json
@@ -1,9 +1,9 @@
 {
   "meta": {
     "title": "doc — 项目 TODO",
-    "updated_at": "2026-06-11T15:48:46.142Z"
+    "updated_at": "2026-06-13T06:32:11.161Z"
   },
-  "seq": 18,
+  "seq": 19,
   "items": [
     {
       "id": 1,
@@ -288,6 +288,19 @@
       "done": false,
       "completed_at": null,
       "version": null
+    },
+    {
+      "id": 19,
+      "title": "Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线",
+      "desc": null,
+      "level": "mid",
+      "tier": null,
+      "tags": [],
+      "status": "done",
+      "created_at": "2026-06-13T06:08:14.230Z",
+      "done": false,
+      "completed_at": null,
+      "version": null
     }
   ]
 }