feat(client): 免费版连接倒计时 + 到点切断 + 灰按钮 + 看广告加时(#21 前端)

四端共享 Dart 实现,配合 #21 后端账户级卡控:

- me.dart: 加 quota_cap_min(当日总额度 = daily + 看广告 bonus,进度条分母)。
- quota_provider: total 取 quotaCapMin;isExhausted;markExhausted(倒计时归零本地置耗尽
  + 登录态拉 me 校准);watchAd() async 调 /ads/unlock(占位 ad_token=uuid)→ 刷新 me,返回 granted。
- connection_provider: 连接时锁定 _freeRemainingSec(会员 null 不倒计时);复用 elapsed 计时器
  每 tick 算 freeCountdown,归零 → _onFreeQuotaExhausted(主动切断不报节点异常 + markExhausted);
  倒计时用墙上时钟(后台漏跳回前台补上、准时切);连接遇后端 QUOTA_EXHAUSTED 兜底置耗尽。
- connect_button: enabled/onDisabledTap —— 额度耗尽 off 态灰化(锁图标),点击弹加时。
- quota_card: 三态(连接倒计时 mm:ss / 未连接剩余分钟 / 耗尽今日已用完);移动「看广告加时」、桌面「升级会员」。
- ad_reward_dialog(新): 移动端占位广告(播放中→3s→加时→奖励);桌面版硬 10 分钟提示去移动端/升级。
- l10n(zh/en): 倒计时/已用完/看广告加时/占位广告/桌面升级 双语。
- 测试: quota isExhausted/markExhausted;连接倒计时归零自动切断+置耗尽(注入时钟);
  额度卡三态 widget;/me 契约含 quota_cap_min;golden 更新(Linux 权威基线 quota_low/exhausted)。
- 文档: docs/free-quota-ad.html + 登记 docs/index.html。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/lib/widgets/connect_button.dart

@@ -24,11 +24,19 @@ class ConnectButton extends StatefulWidget {
     required this.secureLabel,
     this.elapsed = Duration.zero,
     this.size = 208,
+    this.enabled = true,
+    this.onDisabledTap,
   });
 
   final VpnPhase phase;
   final VoidCallback onTap;
 
+  /// 是否可点。免费额度耗尽时置 false → 灰化不可连,点击走 onDisabledTap。
+  final bool enabled;
+
+  /// 灰化态被点击的回调(如弹看广告加时/升级)。enabled=false 时生效。
+  final VoidCallback? onDisabledTap;
+
   /// off 态圆内文字(如「点击连接」/「CONNECT」)。
   final String offLabel;
 
@@ -55,18 +63,26 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
   Widget build(BuildContext context) {
     final c = context.pangolin;
     final s = widget.phase;
+    // 免费额度耗尽:off 态灰化不可连(锁图标 + 柔和阴影),点击走 onDisabledTap。
+    final disabled = !widget.enabled && s == VpnPhase.off;
 
-    final Color fill = switch (s) {
-      VpnPhase.off => c.bgSubtle,
-      VpnPhase.connecting => c.accent,
-      VpnPhase.on => c.success,
-    };
-    final Color fg = s == VpnPhase.off ? c.accent : PangolinColors.white;
-    final IconData icon = switch (s) {
-      VpnPhase.off => PangolinIcons.power,
-      VpnPhase.connecting => PangolinIcons.loader,
-      VpnPhase.on => PangolinIcons.shieldCheck,
-    };
+    final Color fill = disabled
+        ? c.bgSubtle
+        : switch (s) {
+            VpnPhase.off => c.bgSubtle,
+            VpnPhase.connecting => c.accent,
+            VpnPhase.on => c.success,
+          };
+    final Color fg = disabled
+        ? c.fg3
+        : (s == VpnPhase.off ? c.accent : PangolinColors.white);
+    final IconData icon = disabled
+        ? PangolinIcons.lock
+        : switch (s) {
+            VpnPhase.off => PangolinIcons.power,
+            VpnPhase.connecting => PangolinIcons.loader,
+            VpnPhase.on => PangolinIcons.shieldCheck,
+          };
 
     // off 用柔和阴影;connecting/on 增加同色光晕环(box-shadow,不动背景计算)。
     final List<BoxShadow> glow = s == VpnPhase.off
@@ -84,7 +100,7 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
       button: true,
       label: widget.offLabel,
       child: GestureDetector(
-        onTap: widget.onTap,
+        onTap: disabled ? widget.onDisabledTap : widget.onTap,
         child: AnimatedContainer(
           duration: PangolinMotion.slow,
           curve: PangolinMotion.easeOut,