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/subscription/components/subscription-benefits-card.module.css

@@ -0,0 +1,56 @@
+.card {
+  background: #ffffff;
+  border-radius: var(--radius-xl);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.header {
+  background: linear-gradient(
+    90deg,
+    var(--color-auth-primary-gradient-start),
+    var(--color-auth-primary-gradient-end)
+  );
+  padding: var(--spacing-md);
+  text-align: center;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 1.3;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-md);
+  color: var(--color-auth-text-primary);
+  line-height: 1.4;
+}
+
+.item + .item {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.numeral {
+  flex: 0 0 auto;
+  font-weight: 500;
+  min-width: 20px;
+  color: var(--color-auth-text-primary);
+}
+
+.text {
+  flex: 1 1 auto;
+}