diff --git a/src/handlers/payment.rs b/src/handlers/payment.rs
index cc80f4d..f4386b0 100644
--- a/src/handlers/payment.rs
+++ b/src/handlers/payment.rs
@@ -309,8 +309,7 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
   /* ===== 登录区域 ===== */
   .login-section { max-width: 400px; margin: 0 auto; padding: 0 24px; }
   .login-card { background: #fff; border-radius: 20px; padding: 48px 32px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
-  .login-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
-  .login-icon svg { width: 48px; height: 48px; }
+  .login-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
   .login-title { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
   .login-desc { font-size: 14px; color: #999; margin-bottom: 32px; line-height: 1.6; }
 
@@ -332,52 +331,57 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
 
   /* ===== 会员区域 ===== */
   .paid-section { display: none; }
-  .paid-banner { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 32px 20px 28px; text-align: center; }
-  .paid-banner h2 { font-size: 20px; margin-bottom: 4px; }
-  .paid-banner p { font-size: 13px; opacity: 0.85; }
-  .paid-info { background: #fff; margin: -16px 12px 0; border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); position: relative; z-index: 1; }
+  .paid-status { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 36px 20px; text-align: center; }
+  .paid-status .check { width: 56px; height: 56px; margin: 0 auto 12px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
+  .paid-status h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
+  .paid-status p { font-size: 13px; opacity: 0.85; }
+  .paid-info { background: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
   .paid-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
   .paid-info-row:last-child { border-bottom: none; }
   .paid-info-label { color: #999; }
   .paid-info-value { color: #333; font-weight: 500; }
-  .paid-badge { display: inline-block; background: #07c160; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
+  .paid-badge { display: inline-block; background: #07c160; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 10px; }
+  .paid-section .wrapper { max-width: 480px; margin: -20px auto 0; padding: 0 12px; position: relative; z-index: 1; }
 
   /* ===== 套餐区域 ===== */
   .packages { display: none; max-width: 480px; margin: 0 auto; padding: 0 12px 60px; }
-  .packages-title { text-align: center; padding: 28px 0 20px; font-size: 18px; color: #333; }
-  .pkg-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; position: relative; }
-  .pkg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
-  .pkg-card.selected { border-color: #07c160; background: #f0f7ff; }
-  .pkg-tag { position: absolute; top: -1px; right: 16px; background: #07c160; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 0 0 8px 8px; }
-  .pkg-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
-  .pkg-price { font-size: 32px; font-weight: 700; color: #07c160; margin-bottom: 4px; }
-  .pkg-price .unit { font-size: 14px; font-weight: 400; }
-  .pkg-desc { font-size: 13px; color: #999; }
-  .pkg-original { font-size: 14px; color: #bbb; text-decoration: line-through; margin-right: 4px; }
-  .pkg-features { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
-  .pkg-feature { font-size: 13px; color: #666; margin-bottom: 6px; }
-  .btn-pay { display: block; width: 100%; max-width: 480px; margin: 0 auto 16px; background: #07c160; color: #fff; border: none; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
+  .pkgs-title { text-align: center; padding: 24px 0 16px; font-size: 17px; color: #333; font-weight: 600; }
+  .pkgs-sub { text-align: center; font-size: 13px; color: #999; margin-bottom: 16px; }
+  .pkg-card { background: #fff; border-radius: 14px; padding: 20px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; border: 2px solid #f0f0f0; position: relative; display: flex; align-items: center; gap: 16px; }
+  .pkg-card:hover { border-color: #d9d9d9; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
+  .pkg-card.selected { border-color: #07c160; background: #f6fff9; }
+  .pkg-tag { position: absolute; top: -1px; right: 12px; background: #ff6b35; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 0 0 6px 6px; }
+  .pkg-left { flex: 1; }
+  .pkg-name { font-size: 16px; font-weight: 600; color: #333; }
+  .pkg-desc { font-size: 12px; color: #999; margin-top: 2px; }
+  .pkg-right { text-align: right; }
+  .pkg-price { font-size: 24px; font-weight: 700; color: #07c160; line-height: 1; }
+  .pkg-price .unit { font-size: 13px; font-weight: 400; }
+  .pkg-original { font-size: 13px; color: #bbb; text-decoration: line-through; }
+  .pkg-perday { font-size: 11px; color: #999; margin-top: 2px; }
+  .btn-pay { display: block; width: 100%; max-width: 480px; margin: 8px auto 12px; background: #07c160; color: #fff; border: none; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
+  .btn-pay:active { transform: scale(0.98); }
   .btn-pay:hover { background: #06ad56; }
-  .btn-pay:disabled { background: #d9d9d9; cursor: not-allowed; }
-  .notice { text-align: center; font-size: 12px; color: #bbb; }
-  .btn-logout { display: block; width: 100%; max-width: 480px; margin: 0 auto; background: #fff; color: #999; border: 1px solid #d9d9d9; border-radius: 12px; padding: 12px; font-size: 14px; cursor: pointer; }
-  .btn-logout:hover { color: #666; border-color: #999; }
+  .btn-pay:disabled { background: #d9d9d9; cursor: not-allowed; transform: none; }
+  .notice { text-align: center; font-size: 12px; color: #bbb; margin-top: 4px; }
+  .footer-links { text-align: center; margin-top: 24px; }
+  .btn-logout { display: inline-block; background: none; color: #bbb; border: none; font-size: 13px; cursor: pointer; padding: 8px 16px; }
+  .btn-logout:hover { color: #999; }
 
   /* 错误提示 */
   .error-msg { background: #fff2f0; color: #cf1322; border: 1px solid #ffccc7; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 14px; display: none; }
 
   @media (max-width: 480px) {
-    .paid-banner { padding: 24px 16px 20px; }
-    .paid-banner h2 { font-size: 18px; }
-    .paid-info { margin: -14px 8px 0; padding: 16px; border-radius: 12px; }
+    .paid-status { padding: 28px 16px; }
+    .paid-status .check { width: 48px; height: 48px; font-size: 24px; }
+    .paid-status h2 { font-size: 16px; }
+    .paid-info { padding: 14px 16px; }
     .paid-info-row { font-size: 13px; padding: 8px 0; }
-    .packages-title { font-size: 16px; padding: 20px 0 16px; }
-    .pkg-card { padding: 16px; margin-bottom: 12px; }
-    .pkg-name { font-size: 16px; }
-    .pkg-price { font-size: 26px; }
-    .pkg-desc { font-size: 12px; }
-    .pkg-original { font-size: 13px; }
-    .pkg-feature { font-size: 12px; }
+    .pkgs-title { font-size: 16px; }
+    .pkg-card { padding: 14px; gap: 12px; }
+    .pkg-name { font-size: 15px; }
+    .pkg-price { font-size: 20px; }
+    .pkg-desc { font-size: 11px; }
     .btn-pay { padding: 14px; font-size: 16px; }
   }
 </style>
@@ -387,13 +391,7 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
 <!-- 登录区（等待授权） -->
 <div class="login-section" id="loginSection">
   <div class="login-card">
-    <div class="login-icon">
-      <svg viewBox="0 0 24 24" fill="#fff">
-        <path d="M8.68 10.74a.5.5 0 01-.01.85l-3.6 2.88a.5.5 0 01-.74-.38V7.13a.5.5 0 01.74-.38l3.6 2.88a.5.5 0 01.01.85l-1.6 1.28 1.6 1.28z"/>
-        <path d="M12.02 5.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm0 10.5a4 4 0 110-8 4 4 0 010 8z"/>
-        <path d="M15.32 8.68a.5.5 0 01.01.85l-1.6 1.28 1.6 1.28a.5.5 0 01-.74.38l-3.6-2.88a.5.5 0 01.01-.85l3.6-2.88a.5.5 0 01.72.38v3.22z"/>
-      </svg>
-    </div>
+    <div class="login-icon">🔒</div>
     <div class="login-title">等待授权</div>
     <div class="login-desc" id="loginDesc">请在微信小程序中<br>点击「去授权」完成登录</div>
 
@@ -412,74 +410,84 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
 
 <!-- 会员信息区（已登录） -->
 <div class="paid-section" id="paidSection">
-  <div class="paid-banner">
+  <div class="paid-status">
+    <div class="check">✓</div>
     <h2 id="paidTitle">会员专享福利</h2>
     <p id="paidSubtitle">无限存储空间</p>
   </div>
-  <div class="paid-info">
-    <div class="paid-info-row">
-      <span class="paid-info-label">会员状态</span>
-      <span class="paid-info-value"><span class="paid-badge" id="paidBadge">付费会员</span></span>
-    </div>
-    <div class="paid-info-row" id="expiresRow">
-      <span class="paid-info-label">到期时间</span>
-      <span class="paid-info-value" id="paidExpires">--</span>
-    </div>
-    <div class="paid-info-row">
-      <span class="paid-info-label">存储空间</span>
-      <span class="paid-info-value">无限制</span>
+  <div class="wrapper">
+    <div class="paid-info">
+      <div class="paid-info-row">
+        <span class="paid-info-label">会员状态</span>
+        <span class="paid-info-value"><span class="paid-badge" id="paidBadge">付费会员</span></span>
+      </div>
+      <div class="paid-info-row" id="expiresRow">
+        <span class="paid-info-label">到期时间</span>
+        <span class="paid-info-value" id="paidExpires">--</span>
+      </div>
+      <div class="paid-info-row">
+        <span class="paid-info-label">存储空间</span>
+        <span class="paid-info-value">无限制</span>
+      </div>
     </div>
   </div>
 </div>
 
 <!-- 套餐区（登录后显示） -->
 <div class="packages" id="packages">
-  <div class="packages-title">选择会员套餐</div>
+  <div class="pkgs-title" id="pkgsTitle">选择会员套餐</div>
+  <div class="pkgs-sub" id="pkgsSub">开通后享无限存储，随时可续费</div>
 
   <div class="pkg-card" data-package="monthly" onclick="selectPackage('monthly')">
-    <div class="pkg-name">包月会员</div>
-    <div class="pkg-price"><span class="pkg-original">¥9.9</span> ¥5.9<span class="unit">/月</span></div>
-    <div class="pkg-desc">适合短期使用需求</div>
-    <div class="pkg-features">
-      <div class="pkg-feature">每月 500 条存储记录</div>
-      <div class="pkg-feature">查看完整历史记录</div>
+    <div class="pkg-left">
+      <div class="pkg-name">包月会员</div>
+      <div class="pkg-desc">适合短期使用</div>
+    </div>
+    <div class="pkg-right">
+      <div class="pkg-price"><span class="pkg-original">¥9.9</span> ¥5.9<span class="unit">/月</span></div>
+      <div class="pkg-perday">约 ¥0.20/天</div>
     </div>
   </div>
 
   <div class="pkg-card" data-package="quarterly" onclick="selectPackage('quarterly')">
-    <div class="pkg-name">季卡会员</div>
-    <div class="pkg-price"><span class="pkg-original">¥29</span> ¥16.8<span class="unit">/季</span></div>
-    <div class="pkg-desc">适合中期使用</div>
-    <div class="pkg-features">
-      <div class="pkg-feature">每季 500 条存储记录</div>
-      <div class="pkg-feature">查看完整历史记录</div>
+    <div class="pkg-left">
+      <div class="pkg-name">季卡会员</div>
+      <div class="pkg-desc">适合中期使用</div>
+    </div>
+    <div class="pkg-right">
+      <div class="pkg-price"><span class="pkg-original">¥29</span> ¥16.8<span class="unit">/季</span></div>
+      <div class="pkg-perday">约 ¥0.19/天</div>
     </div>
   </div>
 
   <div class="pkg-card" data-package="half_year" onclick="selectPackage('half_year')">
-    <div class="pkg-name">半年会员</div>
-    <div class="pkg-price"><span class="pkg-original">¥49</span> ¥31.9<span class="unit">/半年</span></div>
-    <div class="pkg-desc">性价比之选</div>
-    <div class="pkg-features">
-      <div class="pkg-feature">半年 500 条存储记录</div>
-      <div class="pkg-feature">查看完整历史记录</div>
+    <div class="pkg-left">
+      <div class="pkg-name">半年会员</div>
+      <div class="pkg-desc">性价比之选</div>
+    </div>
+    <div class="pkg-right">
+      <div class="pkg-price"><span class="pkg-original">¥49</span> ¥31.9<span class="unit">/半年</span></div>
+      <div class="pkg-perday">约 ¥0.18/天</div>
     </div>
   </div>
 
   <div class="pkg-card" data-package="yearly" onclick="selectPackage('yearly')">
     <div class="pkg-tag">推荐</div>
-    <div class="pkg-name">包年会员</div>
-    <div class="pkg-price"><span class="pkg-original">¥99</span> ¥60.2<span class="unit">/年</span></div>
-    <div class="pkg-desc">相当于每月 ¥5.0，性价比最高</div>
-    <div class="pkg-features">
-      <div class="pkg-feature">每年 5000 条存储记录</div>
-      <div class="pkg-feature">查看完整历史记录</div>
+    <div class="pkg-left">
+      <div class="pkg-name">包年会员</div>
+      <div class="pkg-desc">相当于每月仅 ¥5.0</div>
+    </div>
+    <div class="pkg-right">
+      <div class="pkg-price"><span class="pkg-original">¥99</span> ¥60.2<span class="unit">/年</span></div>
+      <div class="pkg-perday">约 ¥0.16/天</div>
     </div>
   </div>
 
   <button class="btn-pay" id="payBtn" onclick="goPay()" disabled>请先选择套餐</button>
-  <button class="btn-logout" onclick="logout()">退出登录</button>
-  <div class="notice" style="margin-top:16px">支付成功后额度将自动到账</div>
+  <div class="notice">支付成功后额度将自动到账</div>
+  <div class="footer-links">
+    <button class="btn-logout" onclick="logout()">退出登录</button>
+  </div>
 </div>
 
 <script>
@@ -562,6 +570,8 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
       // 已付费用户，显示会员信息 + 续费套餐
       document.getElementById('paidSection').style.display = 'block';
       document.getElementById('paidBadge').textContent = '付费会员';
+      document.getElementById('pkgsTitle').textContent = '续费套餐';
+      document.getElementById('pkgsSub').textContent = '选择套餐延长会员有效期，现有权益不受影响';
       if (paidExpiresAt) {
         document.getElementById('paidExpires').textContent = new Date(paidExpiresAt).toLocaleString('zh-CN');
         document.getElementById('expiresRow').style.display = 'flex';
@@ -571,6 +581,9 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
         document.getElementById('packages').style.display = 'none';
         return;
       }
+    } else {
+      document.getElementById('pkgsTitle').textContent = '选择会员套餐';
+      document.getElementById('pkgsSub').textContent = '开通后享无限存储，随时可续费';
     }
     // 显示套餐（未付费用户购买 / 已付费用户续费）
     document.getElementById('paidSection').style.display = 'block';