diff --git a/tools/SubConverter/cf_worker_v2ray_converter.js b/tools/SubConverter/cf_worker_v2ray_converter.js
index 1de58b3..a83d81c 100644
--- a/tools/SubConverter/cf_worker_v2ray_converter.js
+++ b/tools/SubConverter/cf_worker_v2ray_converter.js
@@ -14,25 +14,25 @@ addEventListener('fetch', event => {
 
 async function handleRequest(request) {
   const url = new URL(request.url)
-  
+
   // 处理根路径 - 返回网页界面
   if (url.pathname === '/' && request.method === 'GET') {
     return new Response(getHTML(), {
       headers: { 'Content-Type': 'text/html;charset=UTF-8' }
     })
   }
-  
+
   // 处理转换请求
   if (url.pathname === '/convert' && request.method === 'POST') {
     try {
       const { clashUrl } = await request.json()
-      
+
       if (!clashUrl) {
         return jsonResponse({ error: '请提供 Clash 订阅链接' }, 400)
       }
-      
+
       const v2raySubscription = await convertClashToV2ray(clashUrl)
-      
+
       return new Response(v2raySubscription, {
         headers: {
           'Content-Type': 'text/plain;charset=UTF-8',
@@ -43,15 +43,15 @@ async function handleRequest(request) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 处理直接URL转换（用于在线订阅链接）
   if (url.pathname === '/convert' && request.method === 'GET') {
     const clashUrl = url.searchParams.get('url')
-    
+
     if (!clashUrl) {
       return jsonResponse({ error: '请提供 url 参数' }, 400)
     }
-    
+
     try {
       const v2raySubscription = await convertClashToV2ray(clashUrl)
       return new Response(v2raySubscription, {
@@ -66,27 +66,27 @@ async function handleRequest(request) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 处理生成短链接（如果配置了 KV）
   if (url.pathname === '/shorten' && request.method === 'POST') {
     try {
       const { clashUrl } = await request.json()
-      
+
       if (!clashUrl) {
         return jsonResponse({ error: '请提供 Clash 订阅链接' }, 400)
       }
-      
+
       // 检查是否配置了 KV
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         // 如果没有配置 KV，直接返回长链接
         const longUrl = `${url.origin}/convert?url=${encodeURIComponent(clashUrl)}`
         return jsonResponse({ url: longUrl, type: 'direct' })
       }
-      
+
       // 使用 KV 生成短链接
       const shortId = generateShortId()
       const expirationTime = 7 * 24 * 60 * 60 // 7天过期
-      
+
       const metadata = {
         clashUrl,
         createdAt: Date.now()
@@ -95,41 +95,41 @@ async function handleRequest(request) {
         expirationTtl: expirationTime,
         metadata
       })
-      
+
       const shortUrl = `${url.origin}/s/${shortId}`
       return jsonResponse({ url: shortUrl, type: 'short', expiresIn: expirationTime })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 处理短链接访问
   if (url.pathname.startsWith('/s/')) {
     const shortId = url.pathname.substring(3)
     const requestedType = url.searchParams.get('type') // clash or v2ray
-    
+
     try {
       // 检查是否配置了 KV
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return new Response('短链接功能未启用', { status: 404 })
       }
-      
+
       const shortLinkJson = await SUBSCRIPTION_KV.get(shortId)
-      
+
       if (!shortLinkJson) {
         return new Response('链接不存在或已过期', { status: 404 })
       }
-      
+
       const shortLinkData = JSON.parse(shortLinkJson)
-      
+
       const sourceUrl = shortLinkData.url
       const sourceType = shortLinkData.type || 'clash'
       const defaultOutputType = shortLinkData.outputType || 'v2ray'
       const targetType = requestedType || defaultOutputType
-      
+
       let result
-      
+
       // 根据源类型和目标类型进行转换
       if (sourceType === 'clash' && targetType === 'v2ray') {
         result = await convertClashToV2ray(sourceUrl)
@@ -151,7 +151,7 @@ async function handleRequest(request) {
         // 默认：clash to v2ray
         result = await convertClashToV2ray(sourceUrl)
       }
-      
+
       return new Response(result, {
         headers: {
           'Content-Type': 'text/plain;charset=UTF-8',
@@ -166,21 +166,21 @@ async function handleRequest(request) {
   }
 
   // ========== 订阅管理 API ==========
-  
+
   // 创建新订阅
   if (url.pathname === '/api/subscriptions' && request.method === 'POST') {
     try {
       const { name, clashUrl, expiration = '7d', outputType = 'auto', subscriptionMode = 'permanent' } = await request.json()
-      
+
       if (!name || !clashUrl) {
         return jsonResponse({ error: '缺少必需参数 name 或 clashUrl' }, 400)
       }
-      
+
       // 检查是否配置了 KV
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       // 临时订阅限制有效期
       let finalExpiration = expiration
       if (subscriptionMode === 'temporary') {
@@ -189,15 +189,15 @@ async function handleRequest(request) {
           finalExpiration = '3d'  // 默认3天
         }
       }
-      
+
       // 自动检测订阅类型
       const subscriptionType = await detectSubscriptionType(clashUrl)
-      
+
       // 生成订阅ID
       const subscriptionId = generateShortId()
-      
+
       const expirationTime = parseExpiration(finalExpiration)
-      
+
       // 创建订阅对象（先创建，短链按需生成）
       const subscription = {
         id: subscriptionId,
@@ -213,29 +213,29 @@ async function handleRequest(request) {
         expiration: finalExpiration,
         updatedAt: Date.now()
       }
-      
+
       // 保存订阅
       await SUBSCRIPTION_KV.put(`sub:${subscriptionId}`, JSON.stringify(subscription))
-      
+
       // 更新订阅列表索引
       await addToSubscriptionList(subscriptionId)
-      
+
       // 短链按需生成，不在这里预先创建
       subscription.isExpired = expirationTime ? Date.now() > subscription.expiresAt : false
-      
+
       return jsonResponse({ success: true, subscription })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 获取所有订阅列表
   if (url.pathname === '/api/subscriptions' && request.method === 'GET') {
     try {
       const subscriptionIds = await getSubscriptionList()
       const subscriptions = []
-      
+
       for (const id of subscriptionIds) {
         const data = await SUBSCRIPTION_KV.get(`sub:${id}`)
         if (data) {
@@ -247,73 +247,73 @@ async function handleRequest(request) {
           subscriptions.push(sub)
         }
       }
-      
+
       return jsonResponse({ success: true, subscriptions })
-      
+
     } catch (error) {
       console.error('获取订阅列表失败:', error)
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 获取单个订阅详情
   if (url.pathname.match(/^\/api\/subscriptions\/[^\/]+$/) && request.method === 'GET') {
     try {
       const subscriptionId = url.pathname.split('/').pop()
-      
+
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       const data = await SUBSCRIPTION_KV.get(`sub:${subscriptionId}`)
       if (!data) {
         return jsonResponse({ error: '订阅不存在' }, 404)
       }
-      
+
       const subscription = JSON.parse(data)
       subscription.shortIds = subscription.shortIds || {}
       subscription.shortIdsExpiry = subscription.shortIdsExpiry || {}
       subscription.isExpired = subscription.expiresAt ? Date.now() > subscription.expiresAt : false
-      
+
       return jsonResponse({ success: true, subscription })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 更新订阅
   if (url.pathname.match(/^\/api\/subscriptions\/[^\/]+$/) && request.method === 'PUT') {
     try {
       const subscriptionId = url.pathname.split('/').pop()
       const updates = await request.json()
-      
+
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       const data = await SUBSCRIPTION_KV.get(`sub:${subscriptionId}`)
       if (!data) {
         return jsonResponse({ error: '订阅不存在' }, 404)
       }
-      
+
       const subscription = JSON.parse(data)
-      
+
       // 更新允许的字段
       if (updates.name) subscription.name = updates.name
       if (updates.outputType) subscription.outputType = updates.outputType
-      
+
       if (updates.clashUrl && updates.clashUrl !== subscription.clashUrl) {
         // 如果更新了 clashUrl，重新检测类型并更新所有已存在的短链接
         subscription.clashUrl = updates.clashUrl
         subscription.subscriptionType = await detectSubscriptionType(updates.clashUrl)
-        
+
         // 更新所有已存在的短链接数据
         const ttl = subscription.expiresAt ? Math.floor((subscription.expiresAt - Date.now()) / 1000) : null
         const putOptions = ttl && ttl > 0
           ? { expirationTtl: ttl, metadata: { updatedAt: Date.now() } }
           : { metadata: { updatedAt: Date.now(), permanent: true } }
-        
+
         subscription.shortIds = subscription.shortIds || {}
         for (const [linkType, shortId] of Object.entries(subscription.shortIds)) {
           if (shortId) {
@@ -327,68 +327,68 @@ async function handleRequest(request) {
           }
         }
       }
-      
+
       subscription.updatedAt = Date.now()
-      
+
       // 保存更新后的订阅
       await SUBSCRIPTION_KV.put(`sub:${subscriptionId}`, JSON.stringify(subscription))
-      
+
       subscription.shortIds = subscription.shortIds || {}
       subscription.shortIdsExpiry = subscription.shortIdsExpiry || {}
       subscription.isExpired = subscription.expiresAt ? Date.now() > subscription.expiresAt : false
-      
+
       return jsonResponse({ success: true, subscription })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 清空所有KV数据 (必须放在删除订阅路由之前，否则会被正则匹配拦截)
   if (url.pathname === '/api/subscriptions/clear-all' && request.method === 'POST') {
     try {
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       // 列出所有 KV 键并逐一删除
       let cursor = undefined
       let deletedCount = 0
-      
+
       do {
         const listResult = await SUBSCRIPTION_KV.list({ limit: 1000, cursor })
-        
+
         for (const key of listResult.keys) {
           await SUBSCRIPTION_KV.delete(key.name)
           deletedCount++
         }
-        
+
         cursor = listResult.list_complete ? undefined : listResult.cursor
       } while (cursor)
-      
+
       return jsonResponse({ success: true, message: `已清空所有数据，共删除 ${deletedCount} 条记录` })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 删除订阅
   if (url.pathname.match(/^\/api\/subscriptions\/[^\/]+$/) && request.method === 'DELETE') {
     try {
       const subscriptionId = url.pathname.split('/').pop()
-      
+
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       const data = await SUBSCRIPTION_KV.get(`sub:${subscriptionId}`)
       if (!data) {
         return jsonResponse({ error: '订阅不存在' }, 404)
       }
-      
+
       const subscription = JSON.parse(data)
-      
+
       // 删除所有短链接
       if (subscription.shortIds) {
         for (const shortId of Object.values(subscription.shortIds)) {
@@ -397,40 +397,40 @@ async function handleRequest(request) {
           }
         }
       }
-      
+
       // 删除订阅
       await SUBSCRIPTION_KV.delete(`sub:${subscriptionId}`)
-      
+
       // 从订阅列表中移除
       await removeFromSubscriptionList(subscriptionId)
-      
+
       return jsonResponse({ success: true, message: '订阅已删除' })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 续期订阅短链
   if (url.pathname.match(/^\/api\/subscriptions\/[^\/]+\/renew$/) && request.method === 'POST') {
     try {
       const subscriptionId = url.pathname.split('/')[3]
       const { expiration = '7d', outputType, linkType = 'auto' } = await request.json()
-      
+
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       const data = await SUBSCRIPTION_KV.get(`sub:${subscriptionId}`)
       if (!data) {
         return jsonResponse({ error: '订阅不存在' }, 404)
       }
-      
+
       const subscription = JSON.parse(data)
-      
+
       subscription.shortIds = subscription.shortIds || {}
       subscription.shortIdsExpiry = subscription.shortIdsExpiry || {}
-      
+
       // 临时订阅限制有效期
       let finalExpiration = expiration
       if (subscription.subscriptionMode === 'temporary') {
@@ -438,24 +438,24 @@ async function handleRequest(request) {
           finalExpiration = '3d'
         }
       }
-      
+
       const expirationTime = parseExpiration(finalExpiration)
       const newExpiryTime = expirationTime ? Date.now() + expirationTime * 1000 : null
-      
+
       // 更新输出类型（如果提供）
       if (outputType) {
         subscription.outputType = outputType
       }
-      
+
       // 检查是否已有该类型的短链，如有则续期，没有则创建
       let targetShortId = subscription.shortIds[linkType]
-      
+
       if (!targetShortId) {
         // 创建新的短链
         targetShortId = generateShortId()
         subscription.shortIds[linkType] = targetShortId
       }
-      
+
       // 更新短链接过期时间
       const shortLinkData = {
         url: subscription.clashUrl,
@@ -464,59 +464,59 @@ async function handleRequest(request) {
         outputType: linkType,
         subscriptionMode: subscription.subscriptionMode
       }
-      
+
       const putOptions = expirationTime
         ? { expirationTtl: expirationTime, metadata: { renewedAt: Date.now() } }
         : { metadata: { renewedAt: Date.now(), permanent: true } }
-      
+
       await SUBSCRIPTION_KV.put(targetShortId, JSON.stringify(shortLinkData), putOptions)
-      
+
       // 保存该短链的过期时间
       subscription.shortIdsExpiry[linkType] = newExpiryTime
-      
+
       // 更新订阅过期时间（取所有短链中最晚的）
       const allExpiries = Object.values(subscription.shortIdsExpiry).filter(t => t !== null)
       subscription.expiresAt = allExpiries.length > 0 ? Math.max(...allExpiries) : null
       subscription.expiration = finalExpiration
       subscription.updatedAt = Date.now()
-      
+
       await SUBSCRIPTION_KV.put(`sub:${subscriptionId}`, JSON.stringify(subscription))
-      
+
       subscription.isExpired = false
-      
-      return jsonResponse({ 
-        success: true, 
-        subscription, 
+
+      return jsonResponse({
+        success: true,
+        subscription,
         message: `已续期: ${finalExpiration}`,
         shortId: targetShortId,
         shortUrl: `${url.origin}/s/${targetShortId}`
       })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
   }
-  
+
   // 重新生成短链
   if (url.pathname.match(/^\/api\/subscriptions\/[^\/]+\/regenerate$/) && request.method === 'POST') {
     try {
       const subscriptionId = url.pathname.split('/')[3]
       const { expiration = '7d', outputType, linkType = 'auto' } = await request.json()
-      
+
       if (typeof SUBSCRIPTION_KV === 'undefined') {
         return jsonResponse({ error: 'KV 未配置' }, 500)
       }
-      
+
       const data = await SUBSCRIPTION_KV.get(`sub:${subscriptionId}`)
       if (!data) {
         return jsonResponse({ error: '订阅不存在' }, 404)
       }
-      
+
       const subscription = JSON.parse(data)
-      
+
       subscription.shortIds = subscription.shortIds || {}
       subscription.shortIdsExpiry = subscription.shortIdsExpiry || {}
-      
+
       // 临时订阅限制有效期
       let finalExpiration = expiration
       if (subscription.subscriptionMode === 'temporary') {
@@ -524,23 +524,23 @@ async function handleRequest(request) {
           finalExpiration = '3d'
         }
       }
-      
+
       // 删除该类型的旧短链接（如果存在）
       const oldShortId = subscription.shortIds[linkType]
       if (oldShortId) {
         await SUBSCRIPTION_KV.delete(oldShortId)
       }
-      
+
       // 生成新短链接
       const newShortId = generateShortId()
       const expirationTime = parseExpiration(finalExpiration)
       const newExpiryTime = expirationTime ? Date.now() + expirationTime * 1000 : null
-      
+
       // 更新输出类型（如果提供）
       if (outputType) {
         subscription.outputType = outputType
       }
-      
+
       const shortLinkData = {
         url: subscription.clashUrl,
         type: subscription.subscriptionType || 'clash',
@@ -548,35 +548,35 @@ async function handleRequest(request) {
         outputType: linkType,
         subscriptionMode: subscription.subscriptionMode
       }
-      
+
       const putOptions = expirationTime
         ? { expirationTtl: expirationTime, metadata: { regeneratedAt: Date.now() } }
         : { metadata: { regeneratedAt: Date.now(), permanent: true } }
-      
+
       await SUBSCRIPTION_KV.put(newShortId, JSON.stringify(shortLinkData), putOptions)
-      
+
       // 更新订阅中该类型的短链
       subscription.shortIds[linkType] = newShortId
       subscription.shortIdsExpiry[linkType] = newExpiryTime
-      
+
       // 更新订阅过期时间（取所有短链中最晚的）
       const allExpiries = Object.values(subscription.shortIdsExpiry).filter(t => t !== null)
       subscription.expiresAt = allExpiries.length > 0 ? Math.max(...allExpiries) : null
       subscription.expiration = finalExpiration
       subscription.updatedAt = Date.now()
-      
+
       await SUBSCRIPTION_KV.put(`sub:${subscriptionId}`, JSON.stringify(subscription))
-      
+
       subscription.isExpired = false
-      
-      return jsonResponse({ 
-        success: true, 
-        subscription, 
+
+      return jsonResponse({
+        success: true,
+        subscription,
         message: '已生成新短链',
         shortId: newShortId,
         shortUrl: `${url.origin}/s/${newShortId}`
       })
-      
+
     } catch (error) {
       return jsonResponse({ error: error.message }, 500)
     }
@@ -660,7 +660,7 @@ async function handleRequest(request) {
     await SUBSCRIPTION_KV.delete(id)
     return jsonResponse({ ok: true })
   }
-  
+
   return new Response('Not Found', { status: 404 })
 }
 
@@ -673,33 +673,33 @@ async function detectSubscriptionType(subscriptionUrl) {
       headers: { 'User-Agent': 'ClashForWindows/0.20.39' },
       cf: { cacheTtl: 0, cacheEverything: false }
     })
-    
+
     if (!response.ok) return 'unknown'
-    
+
     const text = await response.text()
-    
+
     // 尝试 Base64 解码检测 v2ray
     try {
       const decoded = atob(text.trim())
-      if (decoded.includes('vmess://') || decoded.includes('ss://') || 
-          decoded.includes('trojan://') || decoded.includes('vless://')) {
+      if (decoded.includes('vmess://') || decoded.includes('ss://') ||
+        decoded.includes('trojan://') || decoded.includes('vless://')) {
         return 'v2ray'
       }
     } catch (e) {
       // 不是 base64，继续检测
     }
-    
+
     // 检测是否是 Clash YAML 格式
     if (text.includes('proxies:') || text.includes('proxy-groups:')) {
       return 'clash'
     }
-    
+
     // 直接包含协议链接（未编码的 v2ray）
-    if (text.includes('vmess://') || text.includes('ss://') || 
-        text.includes('trojan://') || text.includes('vless://')) {
+    if (text.includes('vmess://') || text.includes('ss://') ||
+      text.includes('trojan://') || text.includes('vless://')) {
       return 'v2ray'
     }
-    
+
     return 'unknown'
   } catch (error) {
     console.error('检测订阅类型失败:', error)
@@ -712,25 +712,25 @@ function parseExpiration(input) {
   if (!input || input === 'unlimited' || input === 'never') {
     return null // 无限期
   }
-  
+
   const str = String(input).trim().toLowerCase()
-  
+
   // 纯数字，默认天
   if (/^\d+$/.test(str)) {
     return parseInt(str) * 24 * 60 * 60
   }
-  
+
   // 带单位
   const match = str.match(/^(\d+)([dmy])$/)
   if (match) {
     const value = parseInt(match[1])
     const unit = match[2]
-    
+
     if (unit === 'd') return value * 24 * 60 * 60
     if (unit === 'm') return value * 30 * 24 * 60 * 60
     if (unit === 'y') return value * 365 * 24 * 60 * 60
   }
-  
+
   // 默认 7 天
   return 7 * 24 * 60 * 60
 }
@@ -741,23 +741,23 @@ async function convertV2rayToClash(v2rayUrl) {
     headers: { 'User-Agent': 'v2rayN/6.0' },
     cf: { cacheTtl: 0, cacheEverything: false }
   })
-  
+
   if (!response.ok) {
     throw new Error(`下载订阅失败: ${response.status}`)
   }
-  
+
   let text = await response.text()
-  
+
   // 尝试 Base64 解码
   try {
     text = atob(text.trim())
   } catch (e) {
     // 已经是解码状态
   }
-  
+
   const lines = text.split('\n').filter(l => l.trim())
   const proxies = []
-  
+
   for (const line of lines) {
     try {
       if (line.startsWith('vmess://')) {
@@ -771,11 +771,11 @@ async function convertV2rayToClash(v2rayUrl) {
       console.error('解析节点失败:', e)
     }
   }
-  
+
   if (proxies.length === 0) {
     throw new Error('没有找到有效的节点')
   }
-  
+
   // 生成 Clash YAML
   const yaml = generateClashYAML(proxies)
   return yaml
@@ -801,7 +801,7 @@ function parseShadowsocksToClash(ssLink) {
   const url = new URL(ssLink)
   const userinfo = atob(url.username)
   const [cipher, password] = userinfo.split(':')
-  
+
   return {
     name: decodeURIComponent(url.hash.substring(1)) || 'SS',
     type: 'ss',
@@ -814,7 +814,7 @@ function parseShadowsocksToClash(ssLink) {
 
 function parseTrojanToClash(trojanLink) {
   const url = new URL(trojanLink)
-  
+
   return {
     name: decodeURIComponent(url.hash.substring(1)) || 'Trojan',
     type: 'trojan',
@@ -832,7 +832,7 @@ function generateClashYAML(proxies) {
     yaml += `    type: ${proxy.type}\n`
     yaml += `    server: ${proxy.server}\n`
     yaml += `    port: ${proxy.port}\n`
-    
+
     if (proxy.type === 'vmess') {
       yaml += `    uuid: ${proxy.uuid}\n`
       yaml += `    alterId: ${proxy.alterId}\n`
@@ -860,23 +860,23 @@ async function convertClashToV2ray(clashUrl) {
       cacheEverything: false
     }
   })
-  
+
   if (!response.ok) {
     throw new Error(`下载订阅失败: ${response.status} ${response.statusText}`)
   }
-  
+
   const text = await response.text()
-  
+
   // 2. 解析 YAML (简化版解析器)
   const config = parseSimpleYAML(text)
-  
+
   if (!config.proxies || !Array.isArray(config.proxies)) {
     throw new Error('订阅格式错误: 找不到 proxies 节点')
   }
-  
+
   // 3. 转换每个代理节点
   const v2rayLinks = []
-  
+
   for (const proxy of config.proxies) {
     try {
       const link = convertProxyToV2ray(proxy)
@@ -888,11 +888,11 @@ async function convertClashToV2ray(clashUrl) {
       // 继续处理其他节点
     }
   }
-  
+
   if (v2rayLinks.length === 0) {
     throw new Error('没有成功转换的节点')
   }
-  
+
   // 4. 生成最终订阅 (Base64 编码)
   const allLinks = v2rayLinks.join('\n')
   return btoa(unescape(encodeURIComponent(allLinks)))
@@ -902,12 +902,12 @@ function convertProxyToV2ray(proxy) {
   const name = encodeURIComponent(proxy.name || 'node')
   const sniValue = proxy.sni || proxy.servername || ''
   const fingerprintValue = proxy.fingerprint || proxy['client-fingerprint'] || ''
-  
+
   // Shadowsocks
   if (proxy.type === 'ss') {
     const userInfo = `${proxy.cipher}:${proxy.password}`
     const userInfoB64 = btoa(userInfo)
-    
+
     // 处理插件和插件选项
     let plugin = ''
     if (proxy.plugin) {
@@ -921,10 +921,10 @@ function convertProxyToV2ray(proxy) {
         }
       }
     }
-    
+
     return `ss://${userInfoB64}@${proxy.server}:${proxy.port}${plugin}#${name}`
   }
-  
+
   // VMess
   if (proxy.type === 'vmess') {
     const net = proxy.network || 'tcp'
@@ -948,62 +948,62 @@ function convertProxyToV2ray(proxy) {
     if (proxy['skip-cert-verify']) {
       vmessData.allowInsecure = true
     }
-    
+
     // 处理 WebSocket
     if (net === 'ws' && proxy['ws-opts']) {
       vmessData.path = proxy['ws-opts'].path || '/'
       vmessData.host = proxy['ws-opts'].headers?.Host || sniValue || ''
     }
-    
+
     // 处理 HTTP/2
     if (net === 'h2' && proxy['h2-opts']) {
       vmessData.path = proxy['h2-opts'].path || '/'
-      vmessData.host = Array.isArray(proxy['h2-opts'].host) 
-        ? proxy['h2-opts'].host.join(',') 
+      vmessData.host = Array.isArray(proxy['h2-opts'].host)
+        ? proxy['h2-opts'].host.join(',')
         : (proxy['h2-opts'].host || '')
     }
-    
+
     // 处理 gRPC
     if (net === 'grpc' && proxy['grpc-opts']) {
       vmessData.path = proxy['grpc-opts']['grpc-service-name'] || ''
       vmessData.type = 'gun'  // gRPC 的 type
     }
-    
+
     // 处理 ALPN
     if (proxy.alpn) {
-      vmessData.alpn = Array.isArray(proxy.alpn) 
-        ? proxy.alpn.join(',') 
+      vmessData.alpn = Array.isArray(proxy.alpn)
+        ? proxy.alpn.join(',')
         : proxy.alpn
     }
-    
+
     // 处理 fingerprint (TLS)
     if (fingerprintValue) {
       vmessData.fp = fingerprintValue
     }
-    
+
     const vmessJson = JSON.stringify(vmessData)
     const vmessB64 = btoa(unescape(encodeURIComponent(vmessJson)))
     return `vmess://${vmessB64}`
   }
-  
+
   // Trojan
   if (proxy.type === 'trojan') {
     const params = new URLSearchParams()
-    
+
     if (sniValue) params.set('sni', sniValue)
     if (proxy.alpn) {
       const alpn = Array.isArray(proxy.alpn) ? proxy.alpn.join(',') : proxy.alpn
       params.set('alpn', alpn)
     }
     if (proxy['skip-cert-verify']) params.set('allowInsecure', '1')
-    
+
     // WebSocket 传输
     if (proxy.network === 'ws' || proxy['ws-opts']) {
       params.set('type', 'ws')
       if (proxy['ws-opts']?.path) params.set('path', proxy['ws-opts'].path)
       if (proxy['ws-opts']?.headers?.Host) params.set('host', proxy['ws-opts'].headers.Host)
     }
-    
+
     // gRPC 传输
     if (proxy.network === 'grpc' || proxy['grpc-opts']) {
       params.set('type', 'grpc')
@@ -1014,18 +1014,18 @@ function convertProxyToV2ray(proxy) {
         params.set('mode', proxy['grpc-opts'].mode)
       }
     }
-    
+
     const query = params.toString() ? `?${params.toString()}` : ''
     return `trojan://${proxy.password}@${proxy.server}:${proxy.port}${query}#${name}`
   }
-  
+
   // VLESS (部分 Clash 版本支持)
   if (proxy.type === 'vless') {
     const params = new URLSearchParams()
-    
+
     params.set('encryption', proxy.cipher || 'none')
     if (proxy.flow) params.set('flow', proxy.flow)
-    
+
     // TLS/Reality 设置
     if (proxy.tls) {
       params.set('security', 'tls')
@@ -1033,7 +1033,7 @@ function convertProxyToV2ray(proxy) {
       if (proxy['skip-cert-verify']) params.set('allowInsecure', '1')
       if (fingerprintValue) params.set('fp', fingerprintValue)
     }
-    
+
     // Reality 协议支持
     if (proxy['reality-opts']) {
       params.set('security', 'reality')
@@ -1060,11 +1060,11 @@ function convertProxyToV2ray(proxy) {
         params.set('spx', proxy['reality-opts'].spiderx || proxy['reality-opts'].spiderX)
       }
     }
-    
+
     // 传输协议
     const network = proxy.network || 'tcp'
     params.set('type', network)
-    
+
     if (network === 'ws' && proxy['ws-opts']) {
       if (proxy['ws-opts'].path) params.set('path', proxy['ws-opts'].path)
       const wsHost = proxy['ws-opts'].headers?.Host || sniValue
@@ -1078,37 +1078,37 @@ function convertProxyToV2ray(proxy) {
       if (xhHost) params.set('host', xhHost)
       if (proxy['xhttp-opts'].mode) params.set('mode', proxy['xhttp-opts'].mode)
     }
-    
+
     if (network === 'grpc' && proxy['grpc-opts']) {
       params.set('serviceName', proxy['grpc-opts']['grpc-service-name'] || '')
       if (proxy['grpc-opts'].mode) params.set('mode', proxy['grpc-opts'].mode)
     }
-    
+
     if (network === 'h2' && proxy['h2-opts']) {
       if (proxy['h2-opts'].path) params.set('path', proxy['h2-opts'].path)
       if (proxy['h2-opts'].host) {
-        const host = Array.isArray(proxy['h2-opts'].host) 
-          ? proxy['h2-opts'].host.join(',') 
+        const host = Array.isArray(proxy['h2-opts'].host)
+          ? proxy['h2-opts'].host.join(',')
           : proxy['h2-opts'].host
         params.set('host', host)
       } else if (sniValue) {
         params.set('host', sniValue)
       }
     }
-    
+
     // ALPN
     if (proxy.alpn) {
       const alpn = Array.isArray(proxy.alpn) ? proxy.alpn.join(',') : proxy.alpn
       params.set('alpn', alpn)
     }
-    
+
     return `vless://${proxy.uuid}@${proxy.server}:${proxy.port}?${params.toString()}#${name}`
   }
-  
+
   // Hysteria (v1)
   if (proxy.type === 'hysteria') {
     const params = new URLSearchParams()
-    
+
     if (proxy.protocol) params.set('protocol', proxy.protocol)
     if (proxy.up) params.set('upmbps', proxy.up)
     if (proxy.down) params.set('downmbps', proxy.down)
@@ -1120,15 +1120,15 @@ function convertProxyToV2ray(proxy) {
     }
     if (proxy['skip-cert-verify']) params.set('insecure', '1')
     if (sniValue) params.set('peer', sniValue)
-    
+
     const auth = proxy.auth || proxy.password || ''
     return `hysteria://${proxy.server}:${proxy.port}?auth=${encodeURIComponent(auth)}&${params.toString()}#${name}`
   }
-  
+
   // Hysteria2
   if (proxy.type === 'hysteria2' || proxy.type === 'hy2') {
     const params = new URLSearchParams()
-    
+
     if (proxy.password) params.set('password', proxy.password)
     if (proxy.obfs) {
       params.set('obfs', proxy.obfs)
@@ -1137,10 +1137,10 @@ function convertProxyToV2ray(proxy) {
     if (sniValue) params.set('sni', sniValue)
     if (proxy['skip-cert-verify']) params.set('insecure', '1')
     if (fingerprintValue) params.set('pinSHA256', fingerprintValue)
-    
+
     return `hysteria2://${proxy.password}@${proxy.server}:${proxy.port}?${params.toString()}#${name}`
   }
-  
+
   console.log(`不支持的协议类型: ${proxy.type}`)
   return null
 }
@@ -1153,17 +1153,17 @@ function parseSimpleYAML(yamlText) {
   let currentProxy = null
   let currentNested = null
   let nestedKey = null
-  
+
   for (let line of lines) {
     const trimmed = line.trim()
-    
+
     if (trimmed === 'proxies:') {
       inProxies = true
       continue
     }
-    
+
     if (!inProxies) continue
-    
+
     // 检测新的代理节点 (  - name: xxx)
     if (line.match(/^  - name:/)) {
       if (currentProxy) {
@@ -1176,14 +1176,14 @@ function parseSimpleYAML(yamlText) {
       if (match) currentProxy.name = match[1].replace(/['"]/g, '').trim()
       continue
     }
-    
+
     // 检测嵌套对象开始 (    xxx-opts:) 或数组开始
     if (currentProxy && line.match(/^    [\w-]+:/)) {
       const match = line.match(/^    ([\w-]+):\s*(.*)$/)
       if (match) {
         const key = match[1]
         let value = match[2].trim()
-        
+
         // 如果值为空，表示这是一个嵌套对象或数组的开始
         if (!value || value === '') {
           nestedKey = key
@@ -1200,7 +1200,7 @@ function parseSimpleYAML(yamlText) {
       }
       continue
     }
-    
+
     // 处理数组项 (      - value)
     if (currentProxy && line.match(/^      - /)) {
       const match = line.match(/^      - (.+)/)
@@ -1214,39 +1214,39 @@ function parseSimpleYAML(yamlText) {
       }
       continue
     }
-    
+
     // 解析嵌套对象的属性 (      key: value)
     if (currentNested && line.match(/^      [\w-]+:/)) {
       const match = line.match(/^      ([\w-]+):\s*(.+)/)
       if (match) {
         const key = match[1]
         let value = parseValue(match[2])
-        
+
         // 特殊处理 headers
         if ((nestedKey === 'ws-opts' || nestedKey === 'h2-opts') && key === 'headers') {
           currentNested.headers = {}
           continue
         }
-        
+
         currentNested[key] = value
       }
       continue
     }
-    
+
     // 解析更深层嵌套 (        Host: xxx)
     if (currentNested && line.match(/^        [\w-]+:/)) {
       const match = line.match(/^        ([\w-]+):\s*(.+)/)
       if (match) {
         const key = match[1]
         const value = parseValue(match[2])
-        
+
         if (currentNested.headers) {
           currentNested.headers[key] = value
         }
       }
       continue
     }
-    
+
     // 检测新的 section（退出 proxies）
     if (inProxies && line.match(/^[\w-]+:/) && !line.match(/^  /)) {
       if (currentProxy) {
@@ -1255,11 +1255,11 @@ function parseSimpleYAML(yamlText) {
       break
     }
   }
-  
+
   if (currentProxy) {
     config.proxies.push(currentProxy)
   }
-  
+
   return config
 }
 
@@ -1268,7 +1268,7 @@ function parseValue(str) {
   // 去掉行内注释（# 之后的内容）
   const noComment = str.split('#')[0]
   let value = noComment.replace(/['"]/g, '').trim()
-  
+
   // 数字
   if (/^\d+$/.test(value)) {
     return parseInt(value)
@@ -1276,12 +1276,12 @@ function parseValue(str) {
   // 布尔值
   if (value === 'true') return true
   if (value === 'false') return false
-  
+
   // 数组 [a, b, c]
   if (value.startsWith('[') && value.endsWith(']')) {
     return value.slice(1, -1).split(',').map(v => v.trim())
   }
-  
+
   return value
 }
 
@@ -1338,92 +1338,122 @@ function getHTML() {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>订阅管理中心</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Subscription Manager</title>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --primary: #6366f1;
-            --primary-hover: #4f46e5;
-            --primary-light: #e0e7ff;
-            --secondary: #ec4899;
-            --accent: #0ea5e9;
+            --primary: #4f46e5;
+            --primary-hover: #4338ca;
+            --primary-light: #eef2ff;
+            --primary-transparent: rgba(79, 70, 229, 0.1);
+            
             --success: #10b981;
+            --success-light: #d1fae5;
             --warning: #f59e0b;
+            --warning-light: #fef3c7;
             --danger: #ef4444;
-            --bg-body: #f3f4f6;
-            --bg-card: #ffffff;
-            --bg-sidebar: #f9fafb;
-            --text-main: #111827;
-            --text-sub: #6b7280;
-            --border: #e5e7eb;
+            --danger-light: #fee2e2;
+            
+            --bg-body: #f8fafc;
+            --bg-surface: #ffffff;
+            --bg-sidebar: rgba(255, 255, 255, 0.8);
+            
+            --text-main: #0f172a;
+            --text-secondary: #64748b;
+            --text-tertiary: #94a3b8;
+            
+            --border: #e2e8f0;
+            --radius-xl: 24px;
+            --radius-lg: 16px;
+            --radius-md: 12px;
+            --radius-sm: 8px;
+            
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
             --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            --radius: 16px;
+            --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
 
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
         
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
             background-color: var(--bg-body);
             color: var(--text-main);
             height: 100vh;
             display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
+            padding: 24px;
+            overflow: hidden;
+            background-image: 
+                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
         }
 
         .app-container {
             width: 100%;
-            max-width: 1200px;
-            height: 90vh;
-            background: var(--bg-card);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow-lg);
+            max-width: 1400px;
+            height: 100%;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-2xl);
+            border: 1px solid rgba(255, 255, 255, 0.5);
             display: flex;
             overflow: hidden;
-            border: 1px solid var(--border);
         }
 
         /* Sidebar */
         .sidebar {
-            width: 320px;
+            width: 340px;
             background: var(--bg-sidebar);
             border-right: 1px solid var(--border);
             display: flex;
             flex-direction: column;
             flex-shrink: 0;
+            z-index: 10;
         }
 
         .sidebar-header {
-            padding: 24px;
-            border-bottom: 1px solid var(--border);
+            padding: 32px 24px;
         }
 
         .app-title {
-            font-size: 20px;
+            font-size: 24px;
             font-weight: 800;
-            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            margin-bottom: 4px;
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 12px;
+            margin-bottom: 8px;
+        }
+
+        .app-logo {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--primary), #818cf8);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 18px;
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
         }
 
         .app-subtitle {
-            font-size: 12px;
-            color: var(--text-sub);
+            font-size: 13px;
+            color: var(--text-secondary);
             font-weight: 500;
+            padding-left: 44px;
         }
 
         .sidebar-actions {
-            padding: 16px 24px 0;
+            padding: 0 24px 20px;
             display: flex;
-            gap: 10px;
+            gap: 12px;
         }
 
         .btn-add {
@@ -1431,136 +1461,187 @@ function getHTML() {
             background: var(--primary);
             color: white;
             border: none;
-            padding: 10px;
-            border-radius: 10px;
+            padding: 12px;
+            border-radius: var(--radius-md);
             font-weight: 600;
+            font-size: 14px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 6px;
-            box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
+            gap: 8px;
+            box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25);
         }
 
         .btn-add:hover {
             background: var(--primary-hover);
-            transform: translateY(-1px);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(79, 70, 229, 0.3);
         }
 
         .btn-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 10px;
+            width: 42px;
+            height: 42px;
+            border-radius: var(--radius-md);
             border: 1px solid var(--border);
             background: white;
-            color: var(--text-sub);
+            color: var(--text-secondary);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.2s;
+            font-size: 16px;
         }
 
         .btn-icon:hover {
-            background: #f3f4f6;
+            border-color: var(--primary);
+            color: var(--primary);
+            background: var(--primary-light);
+        }
+
+        .dropdown-container {
+            position: relative;
+        }
+
+        .dropdown-menu {
+            display: none;
+            position: absolute;
+            top: 48px;
+            right: 0;
+            background: white;
+            border: 1px solid var(--border);
+            border-radius: var(--radius-md);
+            box-shadow: var(--shadow-lg);
+            min-width: 200px;
+            z-index: 1000;
+            overflow: hidden;
+        }
+
+        .dropdown-menu.active {
+            display: block;
+            animation: fadeIn 0.2s ease;
+        }
+
+        .dropdown-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
             color: var(--text-main);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .dropdown-item:hover {
+            background: var(--bg-body);
+        }
+
+        .dropdown-item.danger {
+            color: var(--danger);
+        }
+
+        .dropdown-item.danger:hover {
+            background: var(--danger-light);
         }
 
         .subscription-list {
             flex: 1;
             overflow-y: auto;
-            padding: 16px;
+            padding: 0 16px 24px;
             display: flex;
             flex-direction: column;
-            gap: 8px;
+            gap: 12px;
         }
 
         .sub-item {
-            padding: 16px;
+            padding: 18px;
             background: white;
             border: 1px solid transparent;
-            border-radius: 12px;
+            border-radius: var(--radius-lg);
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
-            overflow: hidden;
+            box-shadow: var(--shadow-sm);
         }
 
         .sub-item:hover {
-            background: white;
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
             border-color: var(--primary-light);
-            box-shadow: var(--shadow-sm);
-            transform: translateY(-1px);
         }
 
         .sub-item.active {
-            background: #f5f7ff;
+            background: var(--bg-surface);
             border-color: var(--primary);
-            box-shadow: var(--shadow-md);
-        }
-
-        .sub-item.active::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 4px;
-            background: var(--primary);
+            box-shadow: var(--shadow-lg);
+            border-width: 2px;
         }
 
         .sub-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 6px;
+            margin-bottom: 10px;
         }
 
         .sub-name {
-            font-weight: 600;
-            font-size: 14px;
+            font-weight: 700;
+            font-size: 15px;
             color: var(--text-main);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            max-width: 160px;
         }
 
-        .sub-badges {
+        .badge-group {
             display: flex;
-            gap: 4px;
+            gap: 6px;
         }
 
         .badge {
             font-size: 10px;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-weight: 600;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-weight: 700;
             text-transform: uppercase;
+            letter-spacing: 0.02em;
         }
 
-        .badge-clash { background: #e0f2fe; color: #0369a1; }
-        .badge-v2ray { background: #f0fdf4; color: #15803d; }
-        .badge-temp { background: #fffbeb; color: #b45309; }
-        .badge-perm { background: #f3f4f6; color: #4b5563; }
-        .badge-expired { background: #fef2f2; color: #b91c1c; }
-        .badge-expiring { background: #fff7ed; color: #c2410c; }
+        .badge-clash { background: #e0f2fe; color: #0284c7; }
+        .badge-v2ray { background: #dcfce7; color: #16a34a; }
+        .badge-temp { background: #fffbeb; color: #d97706; }
+        .badge-perm { background: #f1f5f9; color: #475569; }
+        .badge-expired { background: #fee2e2; color: #dc2626; }
+        .badge-expiring { background: #ffedd5; color: #ea580c; }
 
-        .sub-info {
-            font-size: 11px;
-            color: var(--text-sub);
+        .sub-footer {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding-top: 10px;
+            border-top: 1px solid var(--border);
+            margin-top: 4px;
         }
 
+        .sub-info-text {
+            font-size: 11px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
         /* Main Content */
         .main-content {
             flex: 1;
-            background: var(--bg-card);
             display: flex;
             flex-direction: column;
             overflow-y: auto;
+            position: relative;
+            background: rgba(255, 255, 255, 0.5);
         }
 
         .empty-state {
@@ -1569,34 +1650,44 @@ function getHTML() {
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            color: var(--text-sub);
+            color: var(--text-tertiary);
+            animation: fadeIn 0.5s ease;
         }
 
         .empty-icon {
-            font-size: 64px;
-            margin-bottom: 16px;
-            opacity: 0.5;
+            font-size: 80px;
+            margin-bottom: 24px;
+            opacity: 0.8;
+            filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
+        }
+
+        .empty-text {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-secondary);
         }
 
         .detail-view {
-            padding: 40px;
-            max-width: 800px;
-            margin: 0 auto;
+            padding: 48px 64px;
             width: 100%;
+            max-width: 1000px;
+            margin: 0 auto;
+            animation: slideUp 0.4s ease;
         }
 
         .detail-header {
             display: flex;
             justify-content: space-between;
             align-items: flex-start;
-            margin-bottom: 32px;
+            margin-bottom: 40px;
         }
 
         .detail-title-group h2 {
-            font-size: 28px;
-            font-weight: 700;
+            font-size: 32px;
+            font-weight: 800;
             color: var(--text-main);
-            margin-bottom: 8px;
+            margin-bottom: 12px;
+            letter-spacing: -0.02em;
         }
 
         .detail-meta {
@@ -1605,95 +1696,131 @@ function getHTML() {
             align-items: center;
         }
 
-        .detail-actions {
+        .action-bar {
             display: flex;
-            gap: 8px;
+            gap: 12px;
         }
 
         .btn-action {
-            padding: 8px 16px;
-            border-radius: 8px;
-            font-size: 13px;
-            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 20px;
+            border-radius: var(--radius-md);
+            font-size: 14px;
+            font-weight: 600;
             cursor: pointer;
             border: 1px solid var(--border);
             background: white;
-            color: var(--text-main);
+            color: var(--text-secondary);
             transition: all 0.2s;
+            box-shadow: var(--shadow-sm);
         }
 
         .btn-action:hover {
-            background: #f9fafb;
-            border-color: #d1d5db;
+            background: var(--bg-body);
+            color: var(--text-main);
+            border-color: #cbd5e1;
+            transform: translateY(-1px);
         }
 
         .btn-danger {
             color: var(--danger);
-            border-color: #fecaca;
-            background: #fef2f2;
+            border-color: var(--danger-light);
+            background: #fffafa;
         }
 
         .btn-danger:hover {
-            background: #fee2e2;
+            background: var(--danger-light);
             border-color: #fca5a5;
+            color: #dc2626;
         }
 
         .card {
             background: white;
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 24px;
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            margin-bottom: 32px;
+            box-shadow: var(--shadow-md);
+            transition: transform 0.3s ease;
+        }
+        
+        .card:hover {
+            box-shadow: var(--shadow-lg);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             margin-bottom: 24px;
-            box-shadow: var(--shadow-sm);
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--border);
         }
 
         .card-title {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 16px;
+            font-size: 18px;
+            font-weight: 700;
             color: var(--text-main);
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 10px;
         }
 
         .info-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 32px;
         }
 
         .info-item label {
             display: block;
             font-size: 12px;
-            color: var(--text-sub);
-            margin-bottom: 4px;
+            font-weight: 600;
+            color: var(--text-tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 8px;
         }
 
         .info-item div {
-            font-size: 14px;
-            font-weight: 500;
+            font-size: 15px;
+            font-weight: 600;
             color: var(--text-main);
         }
 
-        .link-tabs {
+        .full-width { grid-column: 1 / -1; }
+
+        .url-box {
+            background: var(--bg-body);
+            padding: 16px;
+            border-radius: var(--radius-md);
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            font-family: 'Menlo', 'Monaco', monospace;
+            font-size: 13px;
+            word-break: break-all;
+            line-height: 1.5;
+        }
+
+        /* Tabs */
+        .tab-container {
             display: flex;
-            gap: 4px;
-            background: #f3f4f6;
+            background: var(--bg-body);
             padding: 4px;
-            border-radius: 10px;
-            margin-bottom: 16px;
+            border-radius: 14px;
             width: fit-content;
         }
 
         .tab-btn {
-            padding: 8px 20px;
-            border-radius: 8px;
+            padding: 10px 24px;
+            border-radius: 10px;
             border: none;
             background: transparent;
-            color: var(--text-sub);
-            font-size: 13px;
-            font-weight: 500;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 600;
             cursor: pointer;
             transition: all 0.2s;
         }
@@ -1702,83 +1829,103 @@ function getHTML() {
             background: white;
             color: var(--primary);
             box-shadow: var(--shadow-sm);
-            font-weight: 600;
         }
 
-        .url-container {
+        /* URL Generator Area */
+        .generator-box {
+            margin-top: 24px;
             position: relative;
-            margin-bottom: 16px;
+        }
+
+        .input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
         }
 
         .url-input {
             width: 100%;
-            padding: 14px 100px 14px 16px;
-            background: #f9fafb;
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            font-family: 'Monaco', 'Consolas', monospace;
-            font-size: 13px;
+            padding: 18px 120px 18px 20px;
+            background: var(--bg-body);
+            border: 2px solid transparent;
+            border-radius: var(--radius-md);
+            font-family: 'Monaco', monospace;
+            font-size: 14px;
             color: var(--text-main);
             outline: none;
             transition: all 0.2s;
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
         }
 
         .url-input:focus {
-            border-color: var(--primary);
             background: white;
-            box-shadow: 0 0 0 3px var(--primary-light);
+            border-color: var(--primary);
+            box-shadow: 0 0 0 4px var(--primary-light);
         }
 
-        .btn-copy {
+        .btn-copy-absolute {
             position: absolute;
             right: 8px;
-            top: 50%;
-            transform: translateY(-50%);
             background: white;
             border: 1px solid var(--border);
-            padding: 6px 12px;
-            border-radius: 6px;
-            font-size: 12px;
+            padding: 8px 16px;
+            border-radius: var(--radius-sm);
+            font-size: 13px;
             font-weight: 600;
             color: var(--text-main);
             cursor: pointer;
             transition: all 0.2s;
+            box-shadow: var(--shadow-sm);
         }
-
-        .btn-copy:hover {
-            border-color: var(--primary);
+        
+        .btn-copy-absolute:hover {
             color: var(--primary);
+            border-color: var(--primary);
+            transform: translateY(-1px);
         }
 
-        .link-actions {
+        .link-status-bar {
+            margin-top: 20px;
             display: flex;
-            gap: 12px;
             align-items: center;
+            gap: 16px;
+            background: var(--bg-body);
+            padding: 12px 16px;
+            border-radius: var(--radius-md);
         }
 
-        .progress-wrapper {
+        .progress-track {
             flex: 1;
-            background: #f3f4f6;
-            height: 8px;
-            border-radius: 4px;
+            height: 10px;
+            background: #e2e8f0;
+            border-radius: 5px;
             overflow: hidden;
-            position: relative;
         }
 
-        .progress-bar {
+        .progress-fill {
             height: 100%;
             background: var(--success);
-            border-radius: 4px;
-            transition: width 0.5s ease;
+            border-radius: 5px;
+            width: 0%;
+            transition: width 1s ease, background-color 0.3s;
         }
 
-        .progress-text {
-            font-size: 12px;
-            color: var(--text-sub);
-            min-width: 80px;
+        .status-text {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            min-width: 100px;
             text-align: right;
         }
 
+        .action-row {
+            display: flex;
+            gap: 12px;
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px dashed var(--border);
+        }
+
         /* Modals */
         .modal {
             display: none;
@@ -1787,199 +1934,236 @@ function getHTML() {
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.4);
-            backdrop-filter: blur(4px);
-            z-index: 1000;
+            background: rgba(15, 23, 42, 0.4);
+            backdrop-filter: blur(8px);
+            z-index: 100;
             align-items: center;
             justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
 
-        .modal.active { display: flex; }
+        .modal.active { display: flex; opacity: 1; }
 
         .modal-content {
             background: white;
-            border-radius: 20px;
-            padding: 32px;
+            border-radius: var(--radius-xl);
+            padding: 40px;
             width: 90%;
-            max-width: 480px;
-            box-shadow: var(--shadow-lg);
-            animation: modalSlide 0.3s ease;
+            max-width: 520px;
+            box-shadow: var(--shadow-float);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         }
 
-        @keyframes modalSlide {
-            from { transform: translateY(20px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
+        .modal.active .modal-content { transform: scale(1); }
 
         .modal-header {
-            font-size: 20px;
-            font-weight: 700;
-            margin-bottom: 24px;
+            font-size: 24px;
+            font-weight: 800;
             color: var(--text-main);
+            margin-bottom: 32px;
+            text-align: center;
         }
 
-        .form-group { margin-bottom: 20px; }
+        .form-group { margin-bottom: 24px; }
 
         .form-label {
             display: block;
-            font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
+            font-size: 14px;
             color: var(--text-main);
-            margin-bottom: 8px;
+            margin-bottom: 10px;
         }
 
         .form-input, .form-select {
             width: 100%;
-            padding: 12px;
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            font-size: 14px;
+            padding: 14px 16px;
+            border: 2px solid var(--border);
+            border-radius: var(--radius-md);
+            font-size: 15px;
             outline: none;
             transition: all 0.2s;
+            background: var(--bg-body);
         }
-
+        
         .form-input:focus, .form-select:focus {
             border-color: var(--primary);
-            box-shadow: 0 0 0 3px var(--primary-light);
+            background: white;
+            box-shadow: 0 0 0 4px var(--primary-light);
         }
-
+        
         .form-hint {
             font-size: 12px;
-            color: var(--text-sub);
-            margin-top: 6px;
+            color: var(--text-tertiary);
+            margin-top: 8px;
+            padding-left: 4px;
         }
 
         .modal-footer {
             display: flex;
-            gap: 12px;
-            margin-top: 32px;
+            gap: 16px;
+            margin-top: 40px;
         }
 
         .btn-primary {
-            flex: 1;
+            flex: 2;
             background: var(--primary);
             color: white;
             border: none;
-            padding: 12px;
-            border-radius: 10px;
-            font-weight: 600;
+            padding: 16px;
+            border-radius: var(--radius-lg);
+            font-weight: 700;
+            font-size: 15px;
             cursor: pointer;
             transition: all 0.2s;
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
         }
 
-        .btn-primary:hover { background: var(--primary-hover); }
+        .btn-primary:hover {
+            background: var(--primary-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
+        }
 
         .btn-secondary {
             flex: 1;
             background: white;
-            color: var(--text-main);
-            border: 1px solid var(--border);
-            padding: 12px;
-            border-radius: 10px;
-            font-weight: 600;
+            color: var(--text-secondary);
+            border: 2px solid var(--border);
+            padding: 16px;
+            border-radius: var(--radius-lg);
+            font-weight: 700;
+            font-size: 15px;
             cursor: pointer;
             transition: all 0.2s;
         }
 
-        .btn-secondary:hover { background: #f9fafb; }
+        .btn-secondary:hover {
+            border-color: #cbd5e1;
+            background: var(--bg-body);
+            color: var(--text-main);
+        }
+
+        /* Animations */
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
 
         /* Scrollbar */
-        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar { width: 8px; }
         ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
     </style>
 </head>
 <body>
+    <!-- (HTML structure is same, omitted to save token usage perception, but technically tool output is not token heavy) -->
+    <!-- I will re-output the whole thing to be safe -->
     <div class="app-container">
         <!-- Sidebar -->
         <div class="sidebar">
             <div class="sidebar-header">
                 <div class="app-title">
-                    <span>⚡️ 订阅中心</span>
+                    <div class="app-logo">⚡️</div>
+                    <span>SubManager</span>
                 </div>
-                <div class="app-subtitle">智能转换 · 灵活管理</div>
+                <div class="app-subtitle">Cloudflare Subscription Tool</div>
             </div>
             
             <div class="sidebar-actions">
                 <button class="btn-add" onclick="showAddModal()">
-                    <span>+</span> 新建订阅
-                </button>
-                <button class="btn-icon" onclick="clearAllSubscriptions()" title="清空所有">
-                    🗑️
+                    <span>＋</span> New Subscription
                 </button>
+                <div class="dropdown-container">
+                    <button class="btn-icon" onclick="toggleDropdown()" title="More Options">
+                        ⋮
+                    </button>
+                    <div id="dropdownMenu" class="dropdown-menu">
+                        <div class="dropdown-item danger" onclick="clearAllSubscriptions()">
+                            🗑️ Clear All Data
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <div id="subscriptionList" class="subscription-list">
-                <!-- List items will be injected here -->
+                <!-- List items injected by JS -->
             </div>
         </div>
 
         <!-- Main Content -->
         <div class="main-content">
             <div id="emptyState" class="empty-state">
-                <div class="empty-icon">📡</div>
-                <h3>选择一个订阅</h3>
-                <p>查看详情或生成转换链接</p>
+                <div class="empty-icon">👋</div>
+                <div class="empty-text">Select a subscription to manage</div>
             </div>
 
             <div id="detailView" class="detail-view" style="display: none;">
                 <div class="detail-header">
                     <div class="detail-title-group">
-                        <h2 id="detailTitle">订阅名称</h2>
+                        <h2 id="detailTitle">Subscription Name</h2>
                         <div class="detail-meta">
                             <span id="detailTypeBadge" class="badge"></span>
                             <span id="detailModeBadge" class="badge"></span>
                         </div>
                     </div>
-                    <div class="detail-actions">
-                        <button class="btn-action" onclick="editSubscription()">✏️ 编辑</button>
-                        <button class="btn-action btn-danger" onclick="deleteCurrentSubscription()">🗑️ 删除</button>
+                    <div class="action-bar">
+                        <button class="btn-action" onclick="editSubscription()">✏️ Edit</button>
+                        <button class="btn-action btn-danger" onclick="deleteCurrentSubscription()">🗑️ Delete</button>
                     </div>
                 </div>
 
                 <div class="card">
-                    <div class="card-title">📝 基本信息</div>
+                    <div class="card-header">
+                        <div class="card-title">📝 Basic Information</div>
+                    </div>
                     <div class="info-grid">
                         <div class="info-item">
-                            <label>源格式</label>
+                            <label>Source Type</label>
                             <div id="detailSourceType">-</div>
                         </div>
                         <div class="info-item">
-                            <label>创建时间</label>
+                            <label>Created At</label>
                             <div id="detailCreatedAt">-</div>
                         </div>
                         <div class="info-item">
-                            <label>有效期至</label>
+                            <label>Expires At</label>
                             <div id="detailExpiration">-</div>
                         </div>
-                        <div class="info-item" style="grid-column: 1 / -1;">
-                            <label>原始链接</label>
-                            <div id="detailOriginalUrl" style="font-family: monospace; font-size: 12px; word-break: break-all; color: var(--text-sub); background: #f9fafb; padding: 8px; border-radius: 6px;">-</div>
+                        <div class="info-item full-width">
+                            <label>Source URL</label>
+                            <div id="detailOriginalUrl" class="url-box">-</div>
                         </div>
                     </div>
                 </div>
 
                 <div class="card">
-                    <div class="card-title">🔗 转换链接</div>
-                    
-                    <div class="link-tabs">
-                        <button class="tab-btn active" data-type="clash" onclick="switchLinkType('clash')">Clash</button>
-                        <button class="tab-btn" data-type="v2ray" onclick="switchLinkType('v2ray')">V2Ray</button>
-                    </div>
-
-                    <div class="url-container">
-                        <input type="text" id="detailShortUrl" class="url-input" readonly placeholder="生成中...">
-                        <button class="btn-copy" onclick="copyShortUrl(event)">复制</button>
-                    </div>
-
-                    <div class="link-actions">
-                        <div class="progress-wrapper">
-                            <div id="linkProgressBar" class="progress-bar" style="width: 0%"></div>
+                    <div class="card-header">
+                        <div class="card-title">🔗 Converter Link</div>
+                        <div class="tab-container">
+                            <button class="tab-btn active" data-type="clash" onclick="switchLinkType('clash')">Clash</button>
+                            <button class="tab-btn" data-type="v2ray" onclick="switchLinkType('v2ray')">V2Ray</button>
+                        </div>
+                    </div>
+                    
+                    <div class="generator-box">
+                        <div class="input-wrapper">
+                            <input type="text" id="detailShortUrl" class="url-input" readonly placeholder="Generating...">
+                            <button class="btn-copy-absolute" onclick="copyShortUrl(event)">Copy Link</button>
+                        </div>
+                        
+                        <div class="link-status-bar">
+                            <span style="font-size:12px; color:var(--text-tertiary);">VALIDITY</span>
+                            <div class="progress-track">
+                                <div id="linkProgressBar" class="progress-fill"></div>
+                            </div>
+                            <div id="linkProgressText" class="status-text">--</div>
+                        </div>
+
+                        <div class="action-row">
+                            <button class="btn-action" style="color: var(--primary); border-color: var(--primary-light); width: 100%; justify-content: center;" onclick="renewSubscription()">🔄 Renew Validity</button>
+                            <button class="btn-action" style="width: 100%; justify-content: center;" onclick="regenerateShortUrl()">⚡️ Regenerate Token</button>
                         </div>
-                        <div id="linkProgressText" class="progress-text">--</div>
-                        <button class="btn-action" style="color: var(--primary); border-color: var(--primary-light);" onclick="renewSubscription()">🔄 续期</button>
-                        <button class="btn-action" onclick="regenerateShortUrl()">⚡️ 换新</button>
                     </div>
                 </div>
             </div>
@@ -1989,51 +2173,50 @@ function getHTML() {
     <!-- Add/Edit Modal -->
     <div id="subscriptionModal" class="modal">
         <div class="modal-content">
-            <div class="modal-header" id="modalTitle">新建订阅</div>
+            <div class="modal-header" id="modalTitle">New Subscription</div>
             
             <div class="form-group">
-                <label class="form-label">订阅名称</label>
-                <input type="text" id="subName" class="form-input" placeholder="例如：我的主力节点">
+                <label class="form-label">Name</label>
+                <input type="text" id="subName" class="form-input" placeholder="e.g. My Premium Node">
             </div>
             
             <div class="form-group">
-                <label class="form-label">订阅链接</label>
+                <label class="form-label">Source URL</label>
                 <input type="url" id="subClashUrl" class="form-input" placeholder="https://...">
-                <div class="form-hint">支持 Clash 或 V2Ray 链接，系统自动识别</div>
+                <div class="form-hint">Supports Clash or V2Ray/SS/VMess links</div>
             </div>
             
             <div class="form-group">
-                <label class="form-label">订阅模式</label>
+                <label class="form-label">Mode</label>
                 <select id="subMode" class="form-select" onchange="onSubscriptionModeChange()">
-                    <option value="permanent">正式订阅 (长期)</option>
-                    <option value="temporary">临时订阅 (短期)</option>
+                    <option value="permanent">Permanent (Long-term)</option>
+                    <option value="temporary">Temporary (Short-term)</option>
                 </select>
             </div>
             
-            <div class="form-group">
-                <label class="form-label">短链有效期</label>
+            <div id="expirationGroup" class="form-group">
+                <label class="form-label">Short Link Expiration</label>
                 <div id="permanentExpiration">
                     <select id="subPermanentExpiration" class="form-select">
-                        <option value="7d">7天</option>
-                        <option value="1m">1个月</option>
-                        <option value="3m">3个月</option>
-                        <option value="1y" selected>1年</option>
-                        <option value="3y">3年</option>
-                        <option value="unlimited">长期</option>
+                        <option value="7d">7 Days</option>
+                        <option value="1m">1 Month</option>
+                        <option value="3m">3 Months</option>
+                        <option value="1y" selected>1 Year</option>
+                        <option value="unlimited">Unlimited</option>
                     </select>
                 </div>
                 <div id="temporaryExpiration" style="display: none;">
                     <select id="subTempExpiration" class="form-select">
-                        <option value="1d">1天</option>
-                        <option value="3d" selected>3天</option>
-                        <option value="7d">7天</option>
+                        <option value="1d">1 Day</option>
+                        <option value="3d" selected>3 Days</option>
+                        <option value="7d">7 Days</option>
                     </select>
                 </div>
             </div>
             
             <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeModal()">取消</button>
-                <button class="btn-primary" onclick="saveSubscription()">保存订阅</button>
+                <button class="btn-secondary" onclick="closeModal()">Cancel</button>
+                <button class="btn-primary" onclick="saveSubscription()">Save Subscription</button>
             </div>
         </div>
     </div>
@@ -2041,55 +2224,52 @@ function getHTML() {
     <!-- Renew Modal -->
     <div id="renewModal" class="modal">
         <div class="modal-content">
-            <div class="modal-header" id="renewModalTitle">续期订阅</div>
+            <div class="modal-header" id="renewModalTitle">Renew Link</div>
             
             <div class="form-group">
-                <label class="form-label">选择新的有效期</label>
+                <label class="form-label">New Duration</label>
                 <div id="renewPermanentExpiration">
                     <select id="renewPermanentExp" class="form-select">
-                        <option value="7d">7天</option>
-                        <option value="1m">1个月</option>
-                        <option value="3m">3个月</option>
-                        <option value="1y" selected>1年</option>
-                        <option value="3y">3年</option>
-                        <option value="unlimited">长期</option>
+                        <option value="7d">7 Days</option>
+                        <option value="1m">1 Month</option>
+                        <option value="3m">3 Months</option>
+                        <option value="1y" selected>1 Year</option>
+                        <option value="unlimited">Unlimited</option>
                     </select>
                 </div>
                 <div id="renewTemporaryExpiration" style="display: none;">
                     <select id="renewTempExpiration" class="form-select">
-                        <option value="1d">1天</option>
-                        <option value="3d" selected>3天</option>
-                        <option value="7d">7天</option>
+                        <option value="1d">1 Day</option>
+                        <option value="3d" selected>3 Days</option>
+                        <option value="7d">7 Days</option>
                     </select>
                 </div>
             </div>
             
             <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeRenewModal()">取消</button>
-                <button class="btn-primary" onclick="confirmRenew()">确认执行</button>
+                <button class="btn-secondary" onclick="closeRenewModal()">Cancel</button>
+                <button class="btn-primary" onclick="confirmRenew()">Confirm</button>
             </div>
         </div>
     </div>
 
-    <!-- Custom Alert Modal -->
+    <!-- Alert Modal -->
     <div id="customAlertModal" class="modal">
-        <div class="modal-content" style="max-width: 400px;">
-            <div class="modal-header" id="customAlertTitle">提示</div>
-            <div id="customAlertMessage" style="color: var(--text-main); font-size: 14px; line-height: 1.6; margin-bottom: 24px;"></div>
-            <div class="modal-footer" style="justify-content: flex-end;">
-                <button class="btn-primary" style="flex: none; min-width: 100px;" onclick="closeCustomAlert()">确定</button>
-            </div>
+        <div class="modal-content" style="max-width: 400px; text-align: center;">
+            <div class="modal-header" id="customAlertTitle" style="font-size: 20px; margin-bottom: 16px;">Notice</div>
+            <div id="customAlertMessage" style="color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6;"></div>
+            <button class="btn-primary" style="width: 100%;" onclick="closeCustomAlert()">OK</button>
         </div>
     </div>
 
-    <!-- Custom Confirm Modal -->
+    <!-- Confirm Modal -->
     <div id="customConfirmModal" class="modal">
-        <div class="modal-content" style="max-width: 400px;">
-            <div class="modal-header" id="customConfirmTitle">确认</div>
-            <div id="customConfirmMessage" style="color: var(--text-main); font-size: 14px; line-height: 1.6; margin-bottom: 24px;"></div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeCustomConfirm()">取消</button>
-                <button class="btn-primary" id="customConfirmBtn" onclick="executeCustomConfirm()">确定</button>
+        <div class="modal-content" style="max-width: 400px; text-align: center;">
+            <div class="modal-header" id="customConfirmTitle" style="font-size: 20px; margin-bottom: 16px;">Confirm</div>
+            <div id="customConfirmMessage" style="color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6;"></div>
+            <div class="modal-footer" style="margin-top: 24px;">
+                <button class="btn-secondary" onclick="closeCustomConfirm()">Cancel</button>
+                <button class="btn-primary" onclick="executeCustomConfirm()">Confirm</button>
             </div>
         </div>
     </div>
@@ -2105,8 +2285,8 @@ function getHTML() {
 
         window.onload = loadSubscriptions;
 
-        // --- Custom Dialog Functions ---
-        function showCustomAlert(message, title = '提示') {
+        // --- Custom Dialog ---
+        function showCustomAlert(message, title = 'Notice') {
             document.getElementById('customAlertTitle').textContent = title;
             document.getElementById('customAlertMessage').textContent = message;
             document.getElementById('customAlertModal').classList.add('active');
@@ -2116,7 +2296,7 @@ function getHTML() {
             document.getElementById('customAlertModal').classList.remove('active');
         }
 
-        function showCustomConfirm(message, callback, title = '确认') {
+        function showCustomConfirm(message, callback, title = 'Confirm Action') {
             document.getElementById('customConfirmTitle').textContent = title;
             document.getElementById('customConfirmMessage').textContent = message;
             confirmCallback = callback;
@@ -2130,28 +2310,17 @@ function getHTML() {
 
         function executeCustomConfirm() {
             document.getElementById('customConfirmModal').classList.remove('active');
-            if (confirmCallback && typeof confirmCallback === 'function') {
-                confirmCallback();
-            }
+            if (confirmCallback) confirmCallback();
             confirmCallback = null;
         }
 
-        // --- UI Logic ---
+        // --- Logic ---
         function onSubscriptionModeChange() {
             const mode = document.getElementById('subMode').value;
-            const permExp = document.getElementById('permanentExpiration');
-            const tempExp = document.getElementById('temporaryExpiration');
-            
-            if (mode === 'temporary') {
-                permExp.style.display = 'none';
-                tempExp.style.display = 'block';
-            } else {
-                permExp.style.display = 'block';
-                tempExp.style.display = 'none';
-            }
+            document.getElementById('permanentExpiration').style.display = mode === 'permanent' ? 'block' : 'none';
+            document.getElementById('temporaryExpiration').style.display = mode === 'temporary' ? 'block' : 'none';
         }
 
-        // --- Data Logic ---
         async function loadSubscriptions() {
             try {
                 const res = await fetch('/api/subscriptions');
@@ -2164,48 +2333,40 @@ function getHTML() {
                 } else if (allSubscriptions.length === 0) {
                     showEmptyState();
                 }
-            } catch (e) {
-                console.error(e);
-            }
+            } catch (e) { console.error(e); }
         }
 
         function renderList() {
             const container = document.getElementById('subscriptionList');
             if (allSubscriptions.length === 0) {
-                container.innerHTML = '<div style="text-align:center; padding:20px; color:#9ca3af; font-size:13px;">暂无订阅</div>';
+                container.innerHTML = '<div style="text-align:center; padding:32px; color:var(--text-tertiary);">No subscriptions found</div>';
                 return;
             }
 
             container.innerHTML = allSubscriptions.map(sub => {
-                const activeClass = sub.id === currentSelectedId ? 'active' : '';
-                const typeBadge = sub.subscriptionType === 'v2ray' ? 'badge-v2ray' : 'badge-clash';
+                const active = sub.id === currentSelectedId ? 'active' : '';
                 const typeText = sub.subscriptionType === 'v2ray' ? 'V2Ray' : 'Clash';
-                const modeBadge = sub.subscriptionMode === 'temporary' ? 'badge-temp' : 'badge-perm';
-                const modeText = sub.subscriptionMode === 'temporary' ? '临时' : '正式';
+                const typeClass = sub.subscriptionType === 'v2ray' ? 'badge-v2ray' : 'badge-clash';
+                const modeText = sub.subscriptionMode === 'temporary' ? 'TEMP' : 'PERM';
                 
-                // 计算状态标记（仅对长期订阅显示快过期/已过期）
-                let statusBadge = '';
+                let statusHtml = '';
                 if (sub.subscriptionMode === 'permanent' && sub.expiresAt) {
-                    const now = Date.now();
-                    const daysRemaining = (sub.expiresAt - now) / (1000 * 60 * 60 * 24);
-                    if (sub.isExpired || daysRemaining <= 0) {
-                        statusBadge = '<span class="badge badge-expired">已过期</span>';
-                    } else if (daysRemaining <= 15) {
-                        statusBadge = '<span class="badge badge-expiring">快过期</span>';
-                    }
+                    const days = (sub.expiresAt - Date.now()) / 86400000;
+                    if (sub.isExpired || days <= 0) statusHtml = '<span class="badge badge-expired">Expired</span>';
+                    else if (days <= 15) statusHtml = '<span class="badge badge-expiring">Expiring</span>';
                 }
-                
-                return \`<div class="sub-item \${activeClass}" onclick="selectSubscription('\${sub.id}')">
+
+                return \`<div class="sub-item \${active}" onclick="selectSubscription('\${sub.id}')">
                     <div class="sub-header">
                         <div class="sub-name">\${escapeHtml(sub.name)}</div>
-                        <div class="sub-badges">
-                            <span class="badge \${typeBadge}">\${typeText}</span>
-                            \${statusBadge}
+                        <div class="badge-group">
+                            <span class="badge \${typeClass}">\${typeText}</span>
+                            \${statusHtml}
                         </div>
                     </div>
-                    <div class="sub-info">
-                        <span class="badge \${modeBadge}" style="font-weight:normal; padding:1px 4px;">\${modeText}</span>
-                        <span>\${sub.isExpired ? '<span style="color:var(--danger)">已过期</span>' : (sub.expiresAt ? formatDateSimple(sub.expiresAt) : '无限期')}</span>
+                    <div class="sub-footer">
+                        <span class="sub-info-text">\${modeText}</span>
+                        <span class="sub-info-text">\${sub.expiresAt ? formatDateSimple(sub.expiresAt) : 'Unlimited'}</span>
                     </div>
                 </div>\`;
             }).join('');
@@ -2213,7 +2374,7 @@ function getHTML() {
 
         function selectSubscription(id) {
             currentSelectedId = id;
-            renderList(); // Update active state
+            renderList();
             
             const sub = allSubscriptions.find(s => s.id === id);
             if (!sub) return;
@@ -2221,31 +2382,26 @@ function getHTML() {
             document.getElementById('emptyState').style.display = 'none';
             document.getElementById('detailView').style.display = 'block';
 
-            // Fill Info
             document.getElementById('detailTitle').textContent = sub.name;
             
-            const typeText = sub.subscriptionType === 'v2ray' ? 'V2Ray' : 'Clash';
-            const typeClass = sub.subscriptionType === 'v2ray' ? 'badge-v2ray' : 'badge-clash';
-            const modeText = sub.subscriptionMode === 'temporary' ? '临时订阅' : '正式订阅';
-            const modeClass = sub.subscriptionMode === 'temporary' ? 'badge-temp' : 'badge-perm';
-
+            // Badges
             const typeBadge = document.getElementById('detailTypeBadge');
-            typeBadge.className = 'badge ' + typeClass;
-            typeBadge.textContent = typeText;
+            typeBadge.className = 'badge ' + (sub.subscriptionType === 'v2ray' ? 'badge-v2ray' : 'badge-clash');
+            typeBadge.textContent = sub.subscriptionType === 'v2ray' ? 'V2Ray' : 'Clash';
 
             const modeBadge = document.getElementById('detailModeBadge');
-            modeBadge.className = 'badge ' + modeClass;
-            modeBadge.textContent = modeText;
+            modeBadge.className = 'badge ' + (sub.subscriptionMode === 'temporary' ? 'badge-temp' : 'badge-perm');
+            modeBadge.textContent = sub.subscriptionMode === 'temporary' ? 'Temporary' : 'Permanent';
 
-            document.getElementById('detailSourceType').textContent = typeText;
+            // Info
+            document.getElementById('detailSourceType').textContent = sub.subscriptionType === 'v2ray' ? 'V2Ray / VLESS / VMess' : 'Clash YAML';
             document.getElementById('detailCreatedAt').textContent = formatDate(sub.createdAt);
-            document.getElementById('detailExpiration').textContent = sub.expiresAt ? formatDate(sub.expiresAt) : '无限期';
+            document.getElementById('detailExpiration').textContent = sub.expiresAt ? formatDate(sub.expiresAt) : 'Unlimited';
             document.getElementById('detailOriginalUrl').textContent = sub.clashUrl;
 
-            // Set default tab based on source type preference, or stick to current if valid
-            // Logic: if source is v2ray, default to v2ray tab, else clash
+            // Link logic
             const defaultType = sub.subscriptionType === 'v2ray' ? 'v2ray' : 'clash';
-            switchLinkType(defaultType);
+            switchLinkType(defaultType); // Reset to default preference or keep state? Resetting is safer for now.
         }
 
         function showEmptyState() {
@@ -2258,38 +2414,31 @@ function getHTML() {
             if (!currentSelectedId) return;
             currentLinkType = type;
             
-            // Update Tabs
             document.querySelectorAll('.tab-btn').forEach(btn => {
                 btn.classList.toggle('active', btn.dataset.type === type);
             });
 
             const sub = allSubscriptions.find(s => s.id === currentSelectedId);
-            if (!sub) return;
-
-            const shortId = sub.shortIds && sub.shortIds[type];
-            const expiry = sub.shortIdsExpiry && sub.shortIdsExpiry[type];
+            const shortId = sub?.shortIds?.[type];
+            const expiry = sub?.shortIdsExpiry?.[type];
 
             if (shortId) {
                 document.getElementById('detailShortUrl').value = window.location.origin + '/s/' + shortId;
                 updateLinkStatus(expiry);
             } else {
-                // Auto generate if missing
                 generateLink(type);
             }
         }
 
         async function generateLink(type) {
             const sub = allSubscriptions.find(s => s.id === currentSelectedId);
-            
-            if (!sub) {
-                document.getElementById('detailShortUrl').value = '订阅不存在';
-                return;
-            }
-            
-            document.getElementById('detailShortUrl').value = '正在生成链接...';
+            if (!sub) return;
+
+            const input = document.getElementById('detailShortUrl');
+            input.value = 'Generating...';
             document.getElementById('linkProgressBar').style.width = '100%';
-            document.getElementById('linkProgressBar').style.background = 'var(--warning)';
-            document.getElementById('linkProgressText').textContent = '生成中';
+            document.getElementById('linkProgressBar').style.backgroundColor = 'var(--warning)';
+            document.getElementById('linkProgressText').textContent = 'Processing';
 
             try {
                 const res = await fetch('/api/subscriptions/' + currentSelectedId + '/renew', {
@@ -2301,20 +2450,16 @@ function getHTML() {
                     })
                 });
                 
-                if (!res.ok) throw new Error('Failed');
-                
                 const data = await res.json();
-                document.getElementById('detailShortUrl').value = data.shortUrl;
+                if (!res.ok) throw new Error(data.error);
                 
-                // Refresh data
+                input.value = data.shortUrl;
                 await loadSubscriptions();
-                const updatedSub = allSubscriptions.find(s => s.id === currentSelectedId);
-                if (updatedSub) {
-                    updateLinkStatus(updatedSub.shortIdsExpiry[type]);
-                }
+                const updated = allSubscriptions.find(s => s.id === currentSelectedId);
+                updateLinkStatus(updated?.shortIdsExpiry?.[type]);
             } catch (e) {
-                document.getElementById('detailShortUrl').value = '生成失败';
-                document.getElementById('linkProgressBar').style.background = 'var(--danger)';
+                input.value = 'Error generating link';
+                document.getElementById('linkProgressBar').style.backgroundColor = 'var(--danger)';
             }
         }
 
@@ -2324,8 +2469,8 @@ function getHTML() {
             
             if (!expiry) {
                 bar.style.width = '100%';
-                bar.style.background = 'var(--success)';
-                text.textContent = '永久有效';
+                bar.style.backgroundColor = 'var(--success)';
+                text.textContent = 'Unlimited';
                 return;
             }
 
@@ -2334,62 +2479,45 @@ function getHTML() {
             
             if (remaining <= 0) {
                 bar.style.width = '0%';
-                bar.style.background = 'var(--danger)';
-                text.textContent = '已过期';
+                bar.style.backgroundColor = 'var(--danger)';
+                text.textContent = 'Expired';
                 return;
             }
 
-            const days = Math.ceil(remaining / (86400000));
-            const total = 7 * 86400000; // Assume 7 days base for visual
-            const pct = Math.min(100, (remaining / total) * 100);
+            const total = 7 * 86400000; // Base reference
+            const pct = Math.min(100, Math.max(5, (remaining / total) * 100));
             
             bar.style.width = pct + '%';
-            bar.style.background = pct < 20 ? 'var(--danger)' : (pct < 50 ? 'var(--warning)' : 'var(--success)');
+            bar.style.backgroundColor = pct < 20 ? 'var(--danger)' : (pct < 50 ? 'var(--warning)' : 'var(--success)');
             
-            if (days > 1) text.textContent = \`剩余 \${days} 天\`;
-            else {
-                const hours = Math.ceil(remaining / 3600000);
-                text.textContent = \`剩余 \${hours} 小时\`;
-            }
+            const days = Math.ceil(remaining / 86400000);
+            text.textContent = days > 1 ? \`\${days} Days\` : \`\${Math.ceil(remaining / 3600000)} Hours\`;
         }
 
-        // --- Actions ---
+        // Actions
         function showAddModal() {
-            document.getElementById('modalTitle').textContent = '新建订阅';
+            document.getElementById('modalTitle').textContent = 'New Subscription';
             document.getElementById('subName').value = '';
             document.getElementById('subClashUrl').value = '';
             document.getElementById('subMode').value = 'permanent';
             onSubscriptionModeChange();
+            // Show expiration field for new subscriptions
+            document.getElementById('expirationGroup').style.display = 'block';
             currentEditId = null;
             document.getElementById('subscriptionModal').classList.add('active');
         }
 
-        async function editSubscription() {
+        function editSubscription() {
             if (!currentSelectedId) return;
             const sub = allSubscriptions.find(s => s.id === currentSelectedId);
             
-            document.getElementById('modalTitle').textContent = '编辑订阅';
+            document.getElementById('modalTitle').textContent = 'Edit Subscription';
             document.getElementById('subName').value = sub.name;
             document.getElementById('subClashUrl').value = sub.clashUrl;
             document.getElementById('subMode').value = sub.subscriptionMode || 'permanent';
-            
-            // Restore expiration UI state
-            if (sub.subscriptionMode === 'temporary') {
-                document.getElementById('subTempExpiration').value = sub.expiration || '3d';
-            } else {
-                // 设置永久订阅的有效期下拉框
-                const expSelect = document.getElementById('subPermanentExpiration');
-                const exp = sub.expiration || '7d';
-                // 检查是否是预设选项
-                const options = Array.from(expSelect.options).map(o => o.value);
-                if (options.includes(exp)) {
-                    expSelect.value = exp;
-                } else {
-                    expSelect.value = '7d'; // 默认值
-                }
-            }
             onSubscriptionModeChange();
-            
+            // Hide expiration field when editing
+            document.getElementById('expirationGroup').style.display = 'none';
             currentEditId = currentSelectedId;
             document.getElementById('subscriptionModal').classList.add('active');
         }
@@ -2398,16 +2526,12 @@ function getHTML() {
             const name = document.getElementById('subName').value.trim();
             const url = document.getElementById('subClashUrl').value.trim();
             const mode = document.getElementById('subMode').value;
-            
-            let expiration;
-            if (mode === 'temporary') {
-                expiration = document.getElementById('subTempExpiration').value;
-            } else {
-                expiration = document.getElementById('subPermanentExpiration').value;
-            }
+            const expiration = mode === 'temporary' 
+                ? document.getElementById('subTempExpiration').value 
+                : document.getElementById('subPermanentExpiration').value;
 
             if (!name || !url) {
-                showCustomAlert('请填写完整信息');
+                showCustomAlert('Please fill in all fields');
                 return;
             }
 
@@ -2421,139 +2545,84 @@ function getHTML() {
                     body: JSON.stringify({ name, clashUrl: url, expiration, subscriptionMode: mode })
                 });
                 
-                const data = await res.json();
-                
-                if (!res.ok) throw new Error(data.error || 'Failed');
+                if (!res.ok) throw new Error((await res.json()).error);
                 
                 closeModal();
-                
-                // 新建订阅时，设置 currentSelectedId 避免 loadSubscriptions 自动选中触发重复生成
-                const newSubId = !currentEditId && data.subscription ? data.subscription.id : null;
-                if (newSubId) {
-                    currentSelectedId = newSubId;
-                }
-                
                 await loadSubscriptions();
-                
-                // 新建订阅时选中它（此时 loadSubscriptions 不会重复调用 selectSubscription）
-                if (newSubId) {
-                    selectSubscription(newSubId);
-                }
             } catch (e) {
-                showCustomAlert('保存失败: ' + e.message);
+                showCustomAlert('Failed: ' + e.message);
             }
         }
 
         async function deleteCurrentSubscription() {
-            showCustomConfirm('确定要删除此订阅吗？', async () => {
-                try {
-                    await fetch('/api/subscriptions/' + currentSelectedId, { method: 'DELETE' });
-                    currentSelectedId = null;
-                    await loadSubscriptions();
-                } catch (e) {
-                    showCustomAlert('删除失败');
-                }
+            showCustomConfirm('Are you sure you want to delete this?', async () => {
+                await fetch('/api/subscriptions/' + currentSelectedId, { method: 'DELETE' });
+                currentSelectedId = null;
+                await loadSubscriptions();
             });
         }
 
         async function clearAllSubscriptions() {
-            showCustomConfirm('⚠️ 警告：这将清空所有订阅数据，此操作不可恢复！确定继续？', async () => {
-                try {
-                    const res = await fetch('/api/subscriptions/clear-all', { method: 'POST' });
-                    const data = await res.json();
-                    console.log('Clear all response:', res.status, data);
-                    if (res.ok) {
-                        currentSelectedId = null;
-                        allSubscriptions = [];
-                        renderList();
-                        showEmptyState();
-                        showCustomAlert(data.message || '已清空所有数据');
-                    } else {
-                        showCustomAlert('清空失败: ' + (data.error || '未知错误'));
-                    }
-                } catch (e) {
-                    console.error('Clear all error:', e);
-                    showCustomAlert('清空失败: ' + e.message);
-                }
+            // Close dropdown if open
+            const dropdown = document.getElementById('dropdownMenu');
+            if (dropdown) dropdown.classList.remove('active');
+            
+            showCustomConfirm('WARNING: This will delete ALL subscriptions! Continue?', async () => {
+                await fetch('/api/subscriptions/clear-all', { method: 'POST' });
+                currentSelectedId = null;
+                await loadSubscriptions();
+                showCustomAlert('All data cleared');
             });
         }
 
-        // --- Renew/Regenerate ---
-        function renewSubscription() {
-            openRenewModal('renew');
+        function toggleDropdown() {
+            const dropdown = document.getElementById('dropdownMenu');
+            dropdown.classList.toggle('active');
         }
 
-        function regenerateShortUrl() {
-            openRenewModal('regenerate');
-        }
+        function renewSubscription() { openRenewModal('renew'); }
+        function regenerateShortUrl() { openRenewModal('regenerate'); }
 
         function openRenewModal(action) {
             currentRenewAction = action;
             currentRenewId = currentSelectedId;
             const sub = allSubscriptions.find(s => s.id === currentSelectedId);
+            if (!sub) return;
+
+            document.getElementById('renewModalTitle').textContent = action === 'renew' ? 'Renew Validity' : 'Regenerate Token';
             
-            if (!sub) {
-                showCustomAlert('请先选择一个订阅');
-                return;
-            }
-            
-            document.getElementById('renewModalTitle').textContent = action === 'renew' ? '续期链接' : '更换新链接';
-            
-            if (sub.subscriptionMode === 'temporary') {
-                document.getElementById('renewPermanentExpiration').style.display = 'none';
-                document.getElementById('renewTemporaryExpiration').style.display = 'block';
-            } else {
-                document.getElementById('renewPermanentExpiration').style.display = 'block';
-                document.getElementById('renewTemporaryExpiration').style.display = 'none';
-            }
+            const isTemp = sub.subscriptionMode === 'temporary';
+            document.getElementById('renewPermanentExpiration').style.display = isTemp ? 'none' : 'block';
+            document.getElementById('renewTemporaryExpiration').style.display = isTemp ? 'block' : 'none';
             
             document.getElementById('renewModal').classList.add('active');
         }
 
         async function confirmRenew() {
             const sub = allSubscriptions.find(s => s.id === currentRenewId);
-            
-            if (!sub) {
-                showCustomAlert('订阅不存在');
-                closeRenewModal();
-                return;
-            }
-            
-            let expiration;
-            
-            if (sub.subscriptionMode === 'temporary') {
-                expiration = document.getElementById('renewTempExpiration').value;
-            } else {
-                expiration = document.getElementById('renewPermanentExp').value;
-            }
+            const expiration = sub.subscriptionMode === 'temporary'
+                ? document.getElementById('renewTempExpiration').value
+                : document.getElementById('renewPermanentExp').value;
 
-            const endpoint = \`/api/subscriptions/\${currentRenewId}/\${currentRenewAction}\`;
-            
             try {
-                const res = await fetch(endpoint, {
+                await fetch(\`/api/subscriptions/\${currentRenewId}/\${currentRenewAction}\`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ expiration, linkType: currentLinkType })
                 });
-                
-                if (!res.ok) throw new Error('Failed');
-                
                 closeRenewModal();
                 await loadSubscriptions();
                 
-                // Refresh view
-                const updatedSub = allSubscriptions.find(s => s.id === currentRenewId);
-                if (updatedSub) {
-                    const shortId = updatedSub.shortIds[currentLinkType];
-                    document.getElementById('detailShortUrl').value = window.location.origin + '/s/' + shortId;
-                    updateLinkStatus(updatedSub.shortIdsExpiry[currentLinkType]);
-                }
+                // Refresh link view
+                const updated = allSubscriptions.find(s => s.id === currentRenewId);
+                document.getElementById('detailShortUrl').value = window.location.origin + '/s/' + updated.shortIds[currentLinkType];
+                updateLinkStatus(updated.shortIdsExpiry[currentLinkType]);
             } catch (e) {
-                showCustomAlert('操作失败');
+                showCustomAlert('Operation failed');
             }
         }
 
-        // --- Utils ---
+        // Utils
         function closeModal() { document.getElementById('subscriptionModal').classList.remove('active'); }
         function closeRenewModal() { document.getElementById('renewModal').classList.remove('active'); }
         
@@ -2564,12 +2633,12 @@ function getHTML() {
             
             const btn = e.target;
             const original = btn.textContent;
-            btn.textContent = '已复制';
+            btn.textContent = 'Copied!';
             btn.style.color = 'var(--success)';
             setTimeout(() => {
                 btn.textContent = original;
                 btn.style.color = '';
-            }, 2000);
+            }, 1000);
         }
 
         function escapeHtml(text) {
@@ -2579,25 +2648,28 @@ function getHTML() {
         }
 
         function formatDate(ts) {
-            return new Date(ts).toLocaleString('zh-CN', { hour12: false });
+            return new Date(ts).toLocaleString();
         }
         
         function formatDateSimple(ts) {
-            const d = new Date(ts);
-            return \`\${d.getMonth()+1}-\${d.getDate()} \${d.getHours()}:\${d.getMinutes().toString().padStart(2,'0')}\`;
+            return new Date(ts).toLocaleDateString() + ' ' + new Date(ts).getHours() + ':' + new Date(ts).getMinutes().toString().padStart(2, '0');
         }
 
-        window.onclick = function(event) {
-            if (event.target.classList.contains('modal')) {
-                event.target.classList.remove('active');
+        window.onclick = function(e) {
+            if (e.target.classList.contains('modal')) e.target.classList.remove('active');
+            
+            // Close dropdown if clicking outside
+            const dropdown = document.getElementById('dropdownMenu');
+            if (dropdown && !e.target.closest('.dropdown-container')) {
+                dropdown.classList.remove('active');
             }
         }
     </script>
 </body>
-</html>
-`
+</html>`
 }
 
+
 function getAdminHTML() {
   return `<!DOCTYPE html>
 <html lang="zh-CN">