feat(subscription): add VIP subscription page

Add a new /subscription route showing three VIP membership plans (Monthly,
Quarterly, Annual) with a pink→peach banner, per-plan gradient price bars,
a benefits card, a mock activate CTA, and an agreement checkbox.

- New reusable <Checkbox /> in src/app/_components/core for the legal
  agreement toggle
- Hardcoded SUBSCRIPTION_PLANS constant in src/data/constants
- New SubscriptionScreen composed of 7 colocated components (back link,
  user row, banner, plan card, benefits card, CTA button) with CSS
  Modules matching the existing design-token system
- Route registered as protected and reached from /sidebar "Membership"
- Mock CTA: window.alert + router.push(/chat) — no payment calls

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

src/app/_components/core/checkbox.module.css

@@ -0,0 +1,56 @@
+/* 通用圆形复选框
+ *
+ * 视觉规格：
+ *   - 16px 白色圆形复选框 + 1px 浅阴影
+ *   - 选中时 10px 粉色实心圆
+ *   - 行内标签可点击
+ */
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  width: 100%;
+  cursor: pointer;
+}
+
+.checkbox {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--auth-legal-checkbox-size);
+  height: var(--auth-legal-checkbox-size);
+  border-radius: 50%;
+  background: var(--color-auth-surface);
+  border: 1px solid var(--color-auth-surface);
+  padding: 0;
+  cursor: pointer;
+  margin-top: 2px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.checkboxInner {
+  display: block;
+  width: var(--auth-legal-checkbox-inner-size);
+  height: var(--auth-legal-checkbox-inner-size);
+  border-radius: 50%;
+  background: var(--color-auth-legal-check);
+}
+
+.text {
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  color: var(--color-auth-text-primary);
+  text-align: left;
+  flex: 1 1 auto;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

src/app/_components/core/checkbox.tsx

@@ -0,0 +1,65 @@
+"use client";
+/**
+ * 通用圆形复选框
+ *
+ * 视觉规格（与 `auth-legal-text` 一致）：
+ *   - 16px 白色圆形
+ *   - 选中时 10px 粉色实心圆
+ *   - 提供可选 `label`，与复选框一起点击可切换
+ */
+import type { ReactNode } from "react";
+
+import styles from "./checkbox.module.css";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  /** 可选标签；提供时点击文字也能切换 */
+  label?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  /** 当未提供 label 时使用 */
+  ariaLabel?: string;
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  className,
+  ariaLabel,
+}: CheckboxProps) {
+  const button = (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={[styles.checkbox, disabled ? styles.disabled : ""]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {checked ? <span className={styles.checkboxInner} /> : null}
+    </button>
+  );
+
+  if (label == null) {
+    return (
+      <span className={className} style={{ display: "inline-flex" }}>
+        {button}
+      </span>
+    );
+  }
+
+  return (
+    <label
+      className={[styles.row, className].filter(Boolean).join(" ")}
+    >
+      {button}
+      <span className={styles.text}>{label}</span>
+    </label>
+  );
+}

src/app/_components/core/index.ts

@@ -4,6 +4,7 @@
 
 export * from "./auth-back-button";
 export * from "./bottom-sheet";
+export * from "./checkbox";
 export * from "./dialog";
 export * from "./loading-indicator";
 export * from "./mobile-shell";