diff --git a/frontend/components/subscription/UnlockProOverlay.module.css b/frontend/components/subscription/UnlockProOverlay.module.css
new file mode 100644
index 00000000..16f323df
--- /dev/null
+++ b/frontend/components/subscription/UnlockProOverlay.module.css
@@ -0,0 +1,734 @@
+/* ── Outer shell ── */
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 820px;
+  max-height: calc(100dvh - 2.5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: linear-gradient(160deg, #111827 0%, #0d1525 40%, #090f1c 100%);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 32px 80px -12px rgba(0, 0, 0, 0.8),
+    0 0 120px -40px rgba(79, 109, 230, 0.28);
+  padding: 28px 24px 24px;
+}
+
+@media (min-width: 768px) {
+  .modal {
+    padding: 36px 36px 28px;
+  }
+}
+
+/* ── Ambient glows (not clipped by modal) ── */
+.glowLeft {
+  pointer-events: none;
+  position: absolute;
+  left: -80px;
+  top: -80px;
+  width: 280px;
+  height: 280px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(59, 130, 246, 0.18) 0%,
+    transparent 70%
+  );
+}
+
+.glowRight {
+  pointer-events: none;
+  position: absolute;
+  right: -60px;
+  bottom: -60px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(99, 102, 241, 0.14) 0%,
+    transparent 70%
+  );
+}
+
+.topLine {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(96, 165, 250, 0.35),
+    transparent
+  );
+}
+
+/* ── Close button ── */
+.closeBtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.05);
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.closeBtn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.closeBtn:active {
+  transform: scale(0.9);
+}
+
+/* ── Header ── */
+.header {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(251, 191, 36, 0.28);
+  background: rgba(251, 191, 36, 0.1);
+  margin-bottom: 18px;
+}
+
+.badgeText {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #fbbf24;
+}
+
+.title {
+  font-size: clamp(1.9rem, 5vw, 3rem);
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  background: linear-gradient(175deg, #fff 20%, #94a3b8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #64748b;
+  max-width: 420px;
+}
+
+/* ── Card grid ── */
+.grid {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* ── Plan card ── */
+.planCard {
+  position: relative;
+  border-radius: 20px;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  background: linear-gradient(
+    135deg,
+    rgba(30, 58, 110, 0.55) 0%,
+    rgba(15, 28, 58, 0.4) 100%
+  );
+  padding: 22px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.planCard::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
+    rgba(59, 130, 246, 0.12) 0%,
+    transparent 60%
+  );
+  pointer-events: none;
+}
+
+/* ── Points card (eligible) ── */
+.pointsCard {
+  position: relative;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 22px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  transition:
+    border-color 0.3s,
+    background 0.3s;
+}
+
+.pointsCardActive {
+  border-color: rgba(52, 211, 153, 0.3);
+  background: linear-gradient(
+    135deg,
+    rgba(16, 60, 45, 0.5) 0%,
+    rgba(5, 30, 22, 0.35) 100%
+  );
+}
+
+.pointsCardActive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
+    rgba(52, 211, 153, 0.1) 0%,
+    transparent 60%
+  );
+  pointer-events: none;
+}
+
+/* ── Points not-eligible card ── */
+.pointsUnavailableCard {
+  position: relative;
+  border-radius: 20px;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 22px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.3s;
+}
+
+.pointsUnavailableCard:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ── Plan label chip ── */
+.planChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.18);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  color: #93c5fd;
+  width: fit-content;
+}
+
+/* ── Price ── */
+.price {
+  font-size: 50px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  color: #fff;
+  margin: 10px 0 0;
+}
+
+.priceSuffix {
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+  margin-left: 4px;
+}
+
+/* ── Feature list ── */
+.featureList {
+  list-style: none;
+  margin: 16px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.featureItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12.5px;
+  color: #94a3b8;
+}
+
+.featureIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+}
+
+/* ── Points card header row ── */
+.pointsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.pointsLabelRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pointsIconBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: #1e293b;
+  color: #475569;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.pointsIconBoxActive {
+  background: #10b981;
+  color: #fff;
+}
+
+.pointsLabel {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  color: #475569;
+  transition: color 0.2s;
+}
+
+.pointsLabelActive {
+  color: #6ee7b7;
+}
+
+/* ── Toggle ── */
+.toggle {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: #1e293b;
+  cursor: pointer;
+  border: none;
+  transition: background 0.3s;
+}
+
+.toggleActive {
+  background: #10b981;
+}
+
+.toggleThumb {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s;
+}
+
+.toggleThumbActive {
+  transform: translateX(20px);
+}
+
+/* ── Discount amount ── */
+.discount {
+  font-size: 48px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  color: #334155;
+  transition: color 0.3s;
+}
+
+.discountActive {
+  color: #34d399;
+}
+
+.discountSuffix {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #334155;
+  margin-left: 6px;
+}
+
+.pointsNote {
+  margin-top: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #475569;
+}
+
+.pointsBalance {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 12px;
+  font-size: 11px;
+  color: #334155;
+}
+
+.balanceNum {
+  font-weight: 700;
+  color: #475569;
+  transition: color 0.2s;
+}
+
+.balanceNumActive {
+  color: #34d399;
+}
+
+/* ── Unavailable card content ── */
+.unavailTitle {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: #e2e8f0;
+  margin: 0 0 6px;
+}
+
+.unavailDesc {
+  font-size: 12px;
+  line-height: 1.6;
+  color: #475569;
+  margin: 0;
+}
+
+.progressWrap {
+  margin-top: 16px;
+}
+
+.progressHeader {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: #334155;
+  margin-bottom: 5px;
+}
+
+.progressTrack {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #3b82f6, #6366f1);
+  transition: width 0.5s ease;
+}
+
+.unavailCta {
+  margin-top: auto;
+  padding-top: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #3b82f6;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.unavailCta:hover {
+  color: #60a5fa;
+}
+
+/* ── Payment summary box ── */
+.summaryBox {
+  position: relative;
+  z-index: 10;
+  margin-top: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.03);
+  overflow: hidden;
+}
+
+.summaryRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+}
+
+.summaryLabel {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #475569;
+  margin: 0 0 2px;
+}
+
+.summaryOriginal {
+  font-size: 11px;
+  color: #334155;
+  text-decoration: line-through;
+}
+
+.summaryAmount {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.summaryPrice {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 40px;
+  font-weight: 900;
+  line-height: 1;
+  color: #fff;
+}
+
+.summaryUnit {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #334155;
+}
+
+.summaryDivider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.06);
+  margin: 0 20px;
+}
+
+.ctaWrap {
+  padding: 12px;
+}
+
+/* ── CTA Button ── */
+.ctaBtn {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  overflow: hidden;
+  border-radius: 14px;
+  border: none;
+  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 100%);
+  padding: 14px 24px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow:
+    0 0 0 1px rgba(99, 102, 241, 0.5),
+    0 8px 32px -6px rgba(79, 86, 230, 0.55);
+}
+
+.ctaBtn:hover:not(:disabled) {
+  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
+  box-shadow:
+    0 0 0 1px rgba(99, 102, 241, 0.7),
+    0 12px 40px -6px rgba(99, 102, 241, 0.65);
+  transform: translateY(-1px);
+}
+
+.ctaBtn:active:not(:disabled) {
+  transform: scale(0.99);
+}
+
+.ctaBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Shimmer on hover */
+.ctaBtn::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 35%,
+    rgba(255, 255, 255, 0.12) 50%,
+    transparent 65%
+  );
+  transform: translateX(-100%) skewX(-15deg);
+  transition: transform 0.6s;
+}
+
+.ctaBtn:hover::after {
+  transform: translateX(100%) skewX(-15deg);
+}
+
+/* ── Footer ── */
+.footer {
+  position: relative;
+  z-index: 10;
+  margin-top: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #1e293b;
+}
+
+.footerLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.footerLink:hover {
+  color: #475569;
+}
+
+/* ── Alert messages ── */
+.alertError {
+  margin-top: 14px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  background: rgba(239, 68, 68, 0.07);
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #f87171;
+}
+
+.alertInfo {
+  margin-top: 14px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(52, 211, 153, 0.2);
+  background: rgba(52, 211, 153, 0.07);
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #6ee7b7;
+}
+
+.alertIconBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  margin-top: 1px;
+}
+
+.alertIconError {
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+.alertIconInfo {
+  background: rgba(52, 211, 153, 0.2);
+  color: #6ee7b7;
+}
+
+/* ── Chip for unavail ── */
+.unavailChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.unavailChipIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #334155;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.pointsUnavailableCard:hover .unavailChipIcon {
+  background: rgba(255, 255, 255, 0.08);
+  color: #475569;
+}
+
+.unavailChipLabel {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  color: #334155;
+}
diff --git a/frontend/components/subscription/UnlockProOverlay.tsx b/frontend/components/subscription/UnlockProOverlay.tsx
index 45c3d8cf..114f9c62 100644
--- a/frontend/components/subscription/UnlockProOverlay.tsx
+++ b/frontend/components/subscription/UnlockProOverlay.tsx
@@ -18,6 +18,7 @@ import {
   X,
   Zap,
 } from "lucide-react";
+import s from "./UnlockProOverlay.module.css";
 
 export type UnlockProBilling = {
   pointsEnabled: boolean;
@@ -46,16 +47,12 @@ type UnlockProOverlayProps = {
   telegramGroupUrl?: string;
 };
 
-const features = {
-  "zh-CN": [
-    { icon: TrendingUp, label: "15天高精度趋势预报" },
-    { icon: Radar, label: "实时多源雷达图" },
-    { icon: Send, label: "全平台智能气象推送" },
-  ],
+const FEATURES = {
+  "zh-CN": ["15天高精度趋势预报", "实时多源雷达图", "全平台智能气象推送"],
   "en-US": [
-    { icon: TrendingUp, label: "15-day precision forecast" },
-    { icon: Radar, label: "Real-time radar panel" },
-    { icon: Send, label: "Cross-platform alert push" },
+    "15-day precision forecast",
+    "Real-time radar panel",
+    "Cross-platform alerts",
   ],
 };
 
@@ -76,358 +73,284 @@ export function UnlockProOverlay({
   telegramGroupUrl,
 }: UnlockProOverlayProps) {
   const isEn = locale === "en-US";
-
-  const title = isEn ? "Unlock PolyWeather Pro" : "解锁 PolyWeather Pro";
-  const subtitle = isEn
-    ? "High-precision weather intelligence, delivered everywhere."
-    : "全球最精准的高精度气象推送，全平台覆盖";
-
+  const canUsePoints = billing.pointsEnabled && billing.isEligible;
+  const featureList = FEATURES[locale] ?? FEATURES["zh-CN"];
   const finalPayLabel =
     payLabel || (isEn ? "Subscribe & Activate" : "立即订阅并激活服务");
 
-  const featureList = features[locale] ?? features["zh-CN"];
-
-  const canUsePoints = billing.pointsEnabled && billing.isEligible;
+  const progressPct = billing.pointsEnabled
+    ? Math.min(100, Math.round((points / billing.pointsPerUsd) * 100))
+    : 0;
 
   return (
-    <div className="relative w-full max-w-[820px] overflow-hidden rounded-[32px] border border-white/[0.08] bg-[#0c1220] shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_32px_80px_-16px_rgba(0,0,0,0.7),0_0_120px_-40px_rgba(99,130,246,0.25)]">
-      {/* Ambient background */}
-      <div className="pointer-events-none absolute inset-0">
-        <div className="absolute -left-32 -top-32 h-72 w-72 rounded-full bg-blue-600/20 blur-[80px]" />
-        <div className="absolute -bottom-24 -right-16 h-64 w-64 rounded-full bg-indigo-600/15 blur-[80px]" />
-        <div className="absolute left-1/2 top-0 h-px w-3/4 -translate-x-1/2 bg-gradient-to-r from-transparent via-blue-400/30 to-transparent" />
-      </div>
+    <div className={s.modal}>
+      {/* Ambient glows */}
+      <div className={s.glowLeft} />
+      <div className={s.glowRight} />
+      <div className={s.topLine} />
 
       {/* Close button */}
       {onClose && (
         <button
           onClick={onClose}
-          className="absolute right-4 top-4 z-20 flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-500 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/10 hover:text-white active:scale-90"
+          className={s.closeBtn}
           title={isEn ? "Close" : "关闭"}
         >
-          <X size={16} />
+          <X size={15} />
         </button>
       )}
 
-      <div className="relative z-10 p-6 md:p-8 lg:p-10">
-        {/* Header */}
-        <div className="mb-8 flex flex-col items-center text-center">
-          {/* Badge */}
-          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-amber-400/25 bg-amber-400/10 px-3.5 py-1.5 backdrop-blur-sm">
-            <Crown size={13} className="text-amber-400" />
-            <span className="text-[11px] font-bold uppercase tracking-[0.14em] text-amber-300">
-              Pro
-            </span>
-          </div>
-
-          <h2 className="bg-gradient-to-b from-white via-white to-slate-300 bg-clip-text text-4xl font-black leading-[1.05] tracking-tight text-transparent md:text-5xl lg:text-[3.25rem]">
-            {title}
-          </h2>
-          <p className="mt-3 max-w-[440px] text-sm leading-relaxed text-slate-400 md:text-[15px]">
-            {subtitle}
-          </p>
+      {/* ── Header ── */}
+      <div className={s.header}>
+        <div className={s.badge}>
+          <Crown size={12} style={{ color: "#fbbf24" }} />
+          <span className={s.badgeText}>Pro</span>
         </div>
+        <h2 className={s.title}>
+          {isEn ? "Unlock PolyWeather Pro" : "解锁 PolyWeather Pro"}
+        </h2>
+        <p className={s.subtitle}>
+          {isEn
+            ? "High-precision weather intelligence, delivered everywhere."
+            : "全球最精准的高精度气象推送，全平台覆盖"}
+        </p>
+      </div>
 
-        {/* Main content grid */}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr]">
-          {/* Left: Plan card */}
-          <div className="relative overflow-hidden rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-600/10 via-blue-500/5 to-transparent p-5 md:p-6">
-            {/* Inner glow */}
-            <div className="pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full bg-blue-500/20 blur-2xl" />
-
-            <div className="relative">
-              <div className="flex items-center justify-between">
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-blue-500/15 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.14em] text-blue-300">
-                  <Zap size={10} />
-                  Standard Pro
-                </span>
-                <span className="text-[11px] text-slate-500">
-                  / {isEn ? "mo" : "月"}
-                </span>
-              </div>
-
-              <div className="mt-3 flex items-baseline gap-1">
-                <span className="text-[52px] font-black leading-none tracking-tight text-white">
-                  ${planPriceUsd.toFixed(2)}
-                </span>
-              </div>
-
-              <div className="mt-5 space-y-2.5">
-                {featureList.map(({ icon: Icon, label }, i) => (
-                  <div key={i} className="flex items-center gap-2.5">
-                    <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-blue-500/20">
-                      <CheckCircle2 size={12} className="text-blue-400" />
-                    </div>
-                    <span className="text-[13px] text-slate-300">{label}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Right: Points card */}
-          {canUsePoints ? (
-            <div
-              className={`relative overflow-hidden rounded-2xl border p-5 transition-all duration-300 md:p-6 ${
-                usePoints
-                  ? "border-emerald-500/30 bg-gradient-to-br from-emerald-600/10 via-emerald-500/5 to-transparent"
-                  : "border-white/[0.08] bg-white/[0.03]"
-              }`}
-            >
-              <div
-                className={`pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full blur-2xl transition-all duration-300 ${
-                  usePoints ? "bg-emerald-500/15" : "bg-transparent"
-                }`}
-              />
-
-              <div className="relative">
-                {/* Header row */}
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`flex h-7 w-7 items-center justify-center rounded-lg transition-colors duration-200 ${
-                        usePoints
-                          ? "bg-emerald-500 text-white"
-                          : "bg-slate-800 text-slate-500"
-                      }`}
-                    >
-                      <Coins size={14} />
-                    </div>
-                    <span
-                      className={`text-[11px] font-bold uppercase tracking-[0.12em] transition-colors duration-200 ${
-                        usePoints ? "text-emerald-300" : "text-slate-500"
-                      }`}
-                    >
-                      {isEn ? "Points Credit" : "积分抵扣"}
-                    </span>
-                  </div>
-
-                  {/* Toggle */}
-                  <button
-                    onClick={onToggleUsePoints}
-                    className={`relative h-6 w-11 flex-shrink-0 cursor-pointer rounded-full transition-all duration-300 ${
-                      usePoints ? "bg-emerald-500" : "bg-slate-700"
-                    }`}
-                  >
-                    <div
-                      className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow transition-all duration-200 ${
-                        usePoints ? "right-1" : "left-1"
-                      }`}
-                    />
-                  </button>
-                </div>
-
-                {/* Discount display */}
-                <div className="mt-4 flex items-baseline gap-1.5">
-                  <span
-                    className={`text-[48px] font-black leading-none tracking-tight transition-colors duration-300 ${
-                      usePoints ? "text-emerald-400" : "text-slate-600"
-                    }`}
-                  >
-                    -${billing.discountAmount.toFixed(2)}
-                  </span>
-                  <span className="mb-1 text-[10px] font-bold uppercase tracking-[0.1em] text-slate-600">
-                    off
-                  </span>
-                </div>
-
-                <p className="mt-3 text-[12px] leading-5 text-slate-400">
-                  {usePoints
-                    ? isEn
-                      ? `Using ${billing.pointsUsed} pts · saves $${billing.discountAmount.toFixed(2)}`
-                      : `已消耗 ${billing.pointsUsed} 积分 · 省 $${billing.discountAmount.toFixed(2)}`
-                    : isEn
-                      ? `Toggle to save up to $${billing.maxDiscountUsd.toFixed(2)}`
-                      : `开启可最多抵扣 $${billing.maxDiscountUsd.toFixed(2)}`}
-                </p>
-
-                {/* Points balance */}
-                <div className="mt-4 flex items-center gap-1.5">
-                  <Sparkles size={11} className="text-slate-600" />
-                  <span className="text-[11px] text-slate-500">
-                    {isEn ? "Your balance:" : "当前积分："}{" "}
-                    <span
-                      className={`font-bold ${
-                        usePoints ? "text-emerald-400" : "text-slate-400"
-                      }`}
-                    >
-                      {points}
-                    </span>
-                  </span>
-                </div>
-              </div>
-            </div>
-          ) : (
-            /* Not eligible / points disabled */
-            <div className="group relative overflow-hidden rounded-2xl border border-dashed border-white/10 bg-white/[0.025] p-5 transition-all duration-300 hover:border-white/20 md:p-6">
-              <div className="relative flex h-full flex-col">
-                {/* Top */}
-                <div>
-                  <div className="mb-3 flex items-center gap-2">
-                    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-slate-800 text-slate-600 transition-colors duration-200 group-hover:bg-slate-700 group-hover:text-slate-400">
-                      <Coins size={14} />
-                    </div>
-                    <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-600">
-                      {!billing.pointsEnabled
-                        ? isEn
-                          ? "Points Disabled"
-                          : "积分未开启"
-                        : isEn
-                          ? "Insufficient Points"
-                          : "积分不足"}
-                    </span>
-                  </div>
-
-                  <h4 className="text-base font-bold text-slate-200">
-                    {isEn ? "Earn Points & Save" : "赚取积分，抵扣订阅"}
-                  </h4>
-                  <p className="mt-1.5 text-[12px] leading-5 text-slate-500">
-                    {!billing.pointsEnabled
-                      ? isEn
-                        ? "Points redemption is unavailable for this plan."
-                        : "当前套餐暂不支持积分抵扣。"
-                      : isEn
-                        ? `Need ${billing.pointsPerUsd} pts minimum. You have: ${points}`
-                        : `至少需要 ${billing.pointsPerUsd} 积分，当前仅有 ${points}`}
-                  </p>
-                </div>
-
-                {/* Progress bar */}
-                {billing.pointsEnabled && (
-                  <div className="mt-4">
-                    <div className="mb-1.5 flex items-center justify-between text-[10px] text-slate-600">
-                      <span>
-                        {points} / {billing.pointsPerUsd}
-                      </span>
-                      <span>
-                        {Math.min(
-                          100,
-                          Math.round((points / billing.pointsPerUsd) * 100),
-                        )}
-                        %
-                      </span>
-                    </div>
-                    <div className="h-1 w-full overflow-hidden rounded-full bg-slate-800">
-                      <div
-                        className="h-full rounded-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-500"
-                        style={{
-                          width: `${Math.min(100, (points / billing.pointsPerUsd) * 100)}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {/* Bottom CTA */}
-                <div className="mt-auto pt-4">
-                  {telegramGroupUrl ? (
-                    <Link
-                      href={telegramGroupUrl}
-                      target="_blank"
-                      className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 transition-colors hover:text-blue-300"
-                    >
-                      <MessageSquare size={12} />
-                      {isEn ? "Join Telegram to earn" : "加入电报群赚取积分"}
-                      <ArrowRight size={11} />
-                    </Link>
-                  ) : (
-                    <span className="inline-flex items-center gap-1.5 text-[11px] text-slate-600">
-                      <MessageSquare size={12} />
-                      {isEn
-                        ? "Join community to earn points"
-                        : "加入社群即可赚取积分"}
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Payment summary */}
-        <div className="mt-5 overflow-hidden rounded-2xl border border-white/[0.07] bg-white/[0.03]">
-          {/* Summary row */}
-          <div className="flex items-center justify-between px-5 py-4">
-            <div className="space-y-0.5">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-600">
-                {isEn ? "Total Due Today" : "今日应付"}
-              </p>
-              {billing.discountAmount > 0 && usePoints && (
-                <p className="text-[11px] text-slate-600 line-through">
-                  ${planPriceUsd.toFixed(2)} USD
-                </p>
-              )}
-            </div>
-            <div className="flex items-baseline gap-1.5">
-              <span className="font-mono text-[36px] font-black leading-none tracking-tight text-white md:text-[42px]">
-                ${billing.finalPrice.toFixed(2)}
-              </span>
-              <span className="font-mono text-xs font-bold uppercase tracking-[0.1em] text-slate-500">
-                USD
-              </span>
-            </div>
-          </div>
-
-          {/* CTA Button */}
-          <div className="border-t border-white/[0.06] p-3">
-            <button
-              onClick={onPay}
-              disabled={payBusy}
-              className="group relative flex w-full items-center justify-center gap-3 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-3.5 text-[15px] font-bold text-white shadow-[0_0_0_1px_rgba(99,102,241,0.5),0_8px_32px_-8px_rgba(99,102,241,0.6)] transition-all duration-200 hover:from-blue-500 hover:to-indigo-500 hover:shadow-[0_0_0_1px_rgba(99,102,241,0.7),0_12px_40px_-8px_rgba(99,102,241,0.7)] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {/* Shimmer */}
-              <div className="pointer-events-none absolute inset-0 -translate-x-full skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
-
-              {payBusy ? (
-                <Loader2 size={18} className="animate-spin" />
-              ) : (
-                <>
-                  <Wallet size={17} />
-                  <span>{finalPayLabel}</span>
-                  <ArrowRight
-                    size={17}
-                    className="transition-transform duration-200 group-hover:translate-x-0.5"
-                  />
-                </>
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Footer links */}
-        <div className="mt-4 flex items-center justify-center gap-6 text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-700">
-          <span className="flex items-center gap-1.5">
-            <Lock size={11} />
-            {isEn ? "Secure Payment" : "安全付款"}
+      {/* ── Cards ── */}
+      <div className={s.grid}>
+        {/* Left: Plan card */}
+        <div className={s.planCard}>
+          <span className={s.planChip}>
+            <Zap size={10} />
+            Standard Pro
           </span>
-          <span className="text-slate-800">·</span>
-          <Link
-            href={faqHref}
-            className="flex items-center gap-1.5 transition-colors hover:text-slate-500"
+
+          <div
+            style={{
+              display: "flex",
+              alignItems: "baseline",
+              gap: 4,
+              marginTop: 12,
+            }}
           >
-            <BellRing size={11} />
-            {isEn ? "Subscription FAQ" : "订阅说明"}
-          </Link>
+            <span className={s.price}>${planPriceUsd.toFixed(2)}</span>
+            <span className={s.priceSuffix}>/ {isEn ? "mo" : "月"}</span>
+          </div>
+
+          <ul className={s.featureList}>
+            {featureList.map((item, i) => (
+              <li key={i} className={s.featureItem}>
+                <span className={s.featureIcon}>
+                  <CheckCircle2 size={11} />
+                </span>
+                {item}
+              </li>
+            ))}
+          </ul>
         </div>
 
-        {/* Error / Info messages */}
-        {errorText && (
-          <div className="mt-4 flex items-start gap-2.5 rounded-xl border border-rose-500/20 bg-rose-500/8 p-3">
-            <div className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-rose-500/20">
-              <X size={10} className="text-rose-400" />
+        {/* Right: Points card */}
+        {canUsePoints ? (
+          <div
+            className={`${s.pointsCard} ${usePoints ? s.pointsCardActive : ""}`}
+          >
+            {/* Header row */}
+            <div className={s.pointsHeader}>
+              <div className={s.pointsLabelRow}>
+                <div
+                  className={`${s.pointsIconBox} ${usePoints ? s.pointsIconBoxActive : ""}`}
+                >
+                  <Coins size={13} />
+                </div>
+                <span
+                  className={`${s.pointsLabel} ${usePoints ? s.pointsLabelActive : ""}`}
+                >
+                  {isEn ? "Points Credit" : "积分抵扣"}
+                </span>
+              </div>
+              <button
+                onClick={onToggleUsePoints}
+                className={`${s.toggle} ${usePoints ? s.toggleActive : ""}`}
+                title={isEn ? "Toggle points" : "切换积分"}
+              >
+                <div
+                  className={`${s.toggleThumb} ${usePoints ? s.toggleThumbActive : ""}`}
+                />
+              </button>
+            </div>
+
+            {/* Discount amount */}
+            <div style={{ display: "flex", alignItems: "baseline" }}>
+              <span
+                className={`${s.discount} ${usePoints ? s.discountActive : ""}`}
+              >
+                -${billing.discountAmount.toFixed(2)}
+              </span>
+              <span className={s.discountSuffix}>off</span>
+            </div>
+
+            <p className={s.pointsNote}>
+              {usePoints
+                ? isEn
+                  ? `Using ${billing.pointsUsed} pts · saves $${billing.discountAmount.toFixed(2)}`
+                  : `已消耗 ${billing.pointsUsed} 积分 · 省 $${billing.discountAmount.toFixed(2)}`
+                : isEn
+                  ? `Toggle to save up to $${billing.maxDiscountUsd.toFixed(2)}`
+                  : `开启可最多抵扣 $${billing.maxDiscountUsd.toFixed(2)}`}
+            </p>
+
+            <div className={s.pointsBalance}>
+              <Sparkles size={11} />
+              <span>
+                {isEn ? "Balance:" : "当前积分："}{" "}
+                <span
+                  className={`${s.balanceNum} ${usePoints ? s.balanceNumActive : ""}`}
+                >
+                  {points}
+                </span>
+              </span>
             </div>
-            <p className="text-[12px] leading-5 text-rose-400">{errorText}</p>
           </div>
-        )}
-        {infoText && (
-          <div className="mt-4 flex items-start gap-2.5 rounded-xl border border-emerald-500/20 bg-emerald-500/8 p-3">
-            <div className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/20">
-              <CheckCircle2 size={10} className="text-emerald-400" />
+        ) : (
+          /* Not eligible */
+          <div className={s.pointsUnavailableCard}>
+            <div className={s.unavailChip}>
+              <div className={s.unavailChipIcon}>
+                <Coins size={12} />
+              </div>
+              <span className={s.unavailChipLabel}>
+                {!billing.pointsEnabled
+                  ? isEn
+                    ? "Points Disabled"
+                    : "积分未开启"
+                  : isEn
+                    ? "Insufficient Points"
+                    : "积分不足"}
+              </span>
+            </div>
+
+            <h4 className={s.unavailTitle}>
+              {isEn ? "Earn Points & Save" : "赚取积分，抵扣订阅"}
+            </h4>
+            <p className={s.unavailDesc}>
+              {!billing.pointsEnabled
+                ? isEn
+                  ? "Points redemption is unavailable for this plan."
+                  : "当前套餐暂不支持积分抵扣。"
+                : isEn
+                  ? `Need ${billing.pointsPerUsd} pts minimum. You have: ${points}`
+                  : `至少需要 ${billing.pointsPerUsd} 积分，当前仅有 ${points}`}
+            </p>
+
+            {billing.pointsEnabled && (
+              <div className={s.progressWrap}>
+                <div className={s.progressHeader}>
+                  <span>
+                    {points} / {billing.pointsPerUsd}
+                  </span>
+                  <span>{progressPct}%</span>
+                </div>
+                <div className={s.progressTrack}>
+                  <div
+                    className={s.progressFill}
+                    style={{ width: `${progressPct}%` }}
+                  />
+                </div>
+              </div>
+            )}
+
+            <div style={{ marginTop: "auto", paddingTop: 16 }}>
+              {telegramGroupUrl ? (
+                <Link
+                  href={telegramGroupUrl}
+                  target="_blank"
+                  className={s.unavailCta}
+                >
+                  <MessageSquare size={12} />
+                  {isEn ? "Join Telegram to earn" : "加入电报群赚取积分"}
+                  <ArrowRight size={11} />
+                </Link>
+              ) : (
+                <span className={s.unavailCta} style={{ cursor: "default" }}>
+                  <MessageSquare size={12} />
+                  {isEn
+                    ? "Join community to earn points"
+                    : "加入社群即可赚取积分"}
+                </span>
+              )}
             </div>
-            <p className="text-[12px] leading-5 text-emerald-400">{infoText}</p>
           </div>
         )}
       </div>
+
+      {/* ── Payment summary ── */}
+      <div className={s.summaryBox}>
+        <div className={s.summaryRow}>
+          <div>
+            <p className={s.summaryLabel}>
+              {isEn ? "Total Due Today" : "今日应付"}
+            </p>
+            {billing.discountAmount > 0 && usePoints && (
+              <p className={s.summaryOriginal}>
+                ${planPriceUsd.toFixed(2)} USD
+              </p>
+            )}
+          </div>
+          <div className={s.summaryAmount}>
+            <span className={s.summaryPrice}>
+              ${billing.finalPrice.toFixed(2)}
+            </span>
+            <span className={s.summaryUnit}>USD</span>
+          </div>
+        </div>
+
+        <div className={s.summaryDivider} />
+
+        <div className={s.ctaWrap}>
+          <button onClick={onPay} disabled={payBusy} className={s.ctaBtn}>
+            {payBusy ? (
+              <Loader2 size={18} className="animate-spin" />
+            ) : (
+              <>
+                <Wallet size={17} />
+                {finalPayLabel}
+                <ArrowRight size={17} />
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* ── Footer ── */}
+      <div className={s.footer}>
+        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
+          <Lock size={11} />
+          {isEn ? "Secure Payment" : "安全付款"}
+        </span>
+        <span style={{ color: "#0f172a" }}>·</span>
+        <Link href={faqHref} className={s.footerLink}>
+          <BellRing size={11} />
+          {isEn ? "Subscription FAQ" : "订阅说明"}
+        </Link>
+      </div>
+
+      {/* ── Error / Info ── */}
+      {errorText && (
+        <div className={s.alertError}>
+          <div className={`${s.alertIconBox} ${s.alertIconError}`}>
+            <X size={10} />
+          </div>
+          {errorText}
+        </div>
+      )}
+      {infoText && (
+        <div className={s.alertInfo}>
+          <div className={`${s.alertIconBox} ${s.alertIconInfo}`}>
+            <CheckCircle2 size={10} />
+          </div>
+          {infoText}
+        </div>
+      )}
     </div>
   );
 }