:root{--primary-color: #1890ff;--secondary-color: #52c41a;--accent-color: #4e54c8;--accent-light: #8f94fb;--background-color: #fafafa;--text-color: #333;--text-secondary: #666;--border-color: #d9d9d9;--card-background: #ffffff;--shadow: 0 4px 16px rgba(0, 0, 0, .08);--shadow-hover: 0 8px 32px rgba(0, 0, 0, .12);--border-radius: 12px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--transition: all .3s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.6;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1400px;margin:0 auto;padding:0 20px}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:80px 0 60px;margin-bottom:40px;border-radius:0 0 30px 30px;box-shadow:var(--shadow)}.header-content{max-width:800px;margin:0 auto;text-align:center}.header-title{font-size:3.5rem!important;font-weight:700!important;margin-bottom:20px!important;background:linear-gradient(135deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-subtitle{font-size:1.2rem!important;color:#ffffffe6!important;margin-bottom:30px!important}.header-cta .ant-btn{font-weight:600;letter-spacing:.5px;transition:var(--transition)}.header-cta .ant-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0003}.showcase-section{margin-bottom:60px;padding:40px 0}.showcase-content{max-width:900px;margin:0 auto;text-align:center}.showcase-title{font-size:2.5rem!important;margin-bottom:20px!important;color:var(--text-color)}.showcase-description{font-size:1.1rem!important;color:var(--text-secondary)!important;margin-bottom:40px!important}.comparison-container{position:relative;width:100%;height:400px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:30px;cursor:ew-resize;-webkit-user-select:none;user-select:none}.showcase-comparison{border-radius:16px;overflow:hidden}.checkerboard-bg{width:100%;height:100%;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:40px 40px;background-position:0 0,0 20px,20px -20px,-20px 0px;display:flex;align-items:center;justify-content:center}.comparison-before,.comparison-after{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.comparison-before{left:0;z-index:1}.comparison-after{left:0;z-index:0}.comparison-image{width:100%;height:100%;object-fit:cover}.transparent-demo-area{width:100%;height:100%;position:relative;overflow:hidden}.demo-content{width:100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.checkerboard-pattern{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:40px 40px;background-position:0 0,0 20px,20px -20px,-20px 0px}.transparent-indicator{position:relative;z-index:1;padding:12px 24px;background:#fffc;color:var(--text-color);font-size:18px;font-weight:600;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 12px #0000001a;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.comparison-label{position:absolute;top:20px;padding:8px 16px;background:#000000b3;color:#fff;border-radius:20px;font-size:14px;font-weight:500;z-index:2}.comparison-label.after-label{right:20px}.comparison-slider{position:absolute;top:0;width:4px;height:100%;background:#ffffff4d;z-index:2;cursor:ew-resize;transition:all .2s ease}.comparison-slider:hover{background:#ffffff80}.slider-handle{position:absolute;top:50%;left:50%;width:40px;height:40px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:center;cursor:ew-resize;transition:all .2s ease;z-index:3}.slider-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.slider-icon{font-size:18px;color:var(--primary-color)}.slider-line{position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--primary-color);transform:translate(-50%)}.main-content{display:flex;gap:40px;margin-bottom:60px;flex-wrap:wrap}.pricing-section{flex:1;min-width:300px}.section-title{margin-bottom:30px!important;color:var(--text-color);font-weight:600!important}.packages-container{display:flex;gap:20px;flex-wrap:wrap}.package-card{background-color:var(--card-background);border-radius:var(--border-radius);padding:30px;flex:1;min-width:280px;box-shadow:var(--shadow);transition:var(--transition);position:relative;border:2px solid transparent;cursor:pointer}.package-card:active{transform:none!important;box-shadow:var(--shadow)!important}.package-card.selected{border-color:var(--primary-color);box-shadow:0 0 0 3px #1890ff4d,0 10px 30px #1890ff33;background:linear-gradient(135deg,#1890ff0d,#1890ff05);transform:translateY(-5px);transition:all .3s cubic-bezier(.4,0,.2,1)}.package-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:var(--primary-color);transition:all .3s cubic-bezier(.4,0,.2,1)}.package-card.popular:hover,.package-card.popular.selected:hover{transform:translateY(-10px);box-shadow:0 12px 36px #1890ff40}.package-card.popular{border-color:var(--primary-color);transform:translateY(-5px)}.package-card.popular.selected{transform:translateY(0)}.popular-badge{position:absolute;top:-12px;right:20px;background:var(--primary-color);color:#fff;padding:4px 16px;border-radius:12px;font-size:12px;font-weight:600}.package-card h3{font-size:1.5rem;margin-bottom:15px;color:var(--text-color);font-weight:600}.package-price{font-size:2rem;font-weight:700;margin-bottom:20px;color:var(--primary-color)}.package-divider{margin:20px 0!important}.package-features{list-style-type:none;margin-bottom:30px}.package-features li{padding:10px 0 10px 28px;position:relative;font-size:14px;color:var(--text-secondary)}.package-features li:before{content:"✓";position:absolute;left:0;color:var(--secondary-color);font-weight:700;font-size:18px}.subscribe-button{width:100%;padding:12px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;position:relative;overflow:hidden}.subscribe-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}.subscribe-button:hover:before{left:100%}.package-card.selected .subscribe-button:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.package-card.selected .subscribe-button{transform:scale(1.05);background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #1890ff4d}.subscribe-button.primary-button{background:linear-gradient(135deg,var(--accent-color),var(--accent-light));border:none}.subscribe-button.primary-button:hover{background:linear-gradient(135deg,var(--accent-light),var(--accent-color));transform:translateY(-2px);box-shadow:0 4px 16px #4e54c84d}.image-processing-section{margin-bottom:60px;padding:40px 0}.processing-wrapper{max-width:900px;margin:0 auto;text-align:center}.upload-area{border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:60px 40px;text-align:center;cursor:pointer;transition:var(--transition);background-color:var(--card-background);min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center}.upload-area:hover{border-color:var(--primary-color);background-color:#f9f9f9;box-shadow:var(--shadow)}.upload-icon{margin-bottom:20px;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.upload-title{margin-bottom:15px!important;color:var(--text-color)!important}.upload-text{margin-bottom:20px!important;color:var(--text-secondary)!important}.browse-button{margin-bottom:20px;font-weight:600}.upload-hint{font-size:12px!important;color:#999!important}.processing-container{background-color:var(--card-background);border-radius:var(--border-radius);padding:40px;box-shadow:var(--shadow);min-height:400px}.process-actions{display:flex;flex-direction:column;align-items:center;gap:30px}.preview-image-container{max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000014}.preview-image{max-width:100%;height:auto;display:block}.process-button{padding:12px 36px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,var(--primary-color),#40a9ff);border:none;transition:var(--transition)}.process-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #1890ff4d}.processing-spinner{height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.processing-text{color:var(--text-secondary)!important;text-align:center}.result-container{display:flex;flex-direction:column;align-items:center;gap:30px}.result-title{color:var(--primary-color)!important;margin-bottom:20px!important}.result-comparison{width:100%;height:350px}.result-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.download-button,.new-image-button{padding:12px 36px;font-size:1rem;font-weight:600;transition:var(--transition)}.download-button{background:linear-gradient(135deg,var(--secondary-color),#73d13d);border:none}.download-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #52c41a4d}.new-image-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.qrcode-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.qrcode-content{background:#fff;border-radius:16px;padding:16px;width:100%;max-width:350px;box-shadow:0 10px 28px #00000026,0 3px 12px #0000001a;animation:fadeInUp .3s ease-out;position:relative;overflow:hidden;transform:translateY(-5px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.traditional-qrcode-container{margin:24px 0;display:flex;justify-content:center;align-items:center;position:relative}.traditional-qrcode{position:relative;width:280px;height:280px;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}.payment-actions{display:flex;justify-content:flex-end;margin-top:24px}.payment-radio,.payment-title,.platform-badge,.qrcode-logo,.logo-content,.logo-circle,.logo-text-container,.logo-text{display:none!important}.payment-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.payment-actions .ant-btn:not(.confirm-button){flex:1;height:42px;font-size:15px;border-radius:21px;background:#fff;border:1px solid #d9d9d9;color:#666;transition:all .2s ease}.payment-actions .ant-btn:not(.confirm-button):hover{border-color:#4e54c8;color:#4e54c8;background:#4e54c80d}.payment-actions .confirm-button{flex:2}.confirm-button{width:100%;height:42px;font-size:15px;font-weight:600;border-radius:21px;background:linear-gradient(135deg,#4e54c8,#8f94fb);border:none;box-shadow:0 3px 12px #4e54c840;transition:all .2s ease;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.1)}.confirm-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 16px #4e54c859;background:linear-gradient(135deg,#454bbf,#8289e8)}.confirm-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #4e54c840}.confirm-button:disabled{opacity:.8;transform:none;box-shadow:0 2px 8px #4e54c833}.confirm-button.ant-btn-loading:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-50%,-50%) rotate(30deg);animation:buttonShimmer 1.5s infinite}@keyframes buttonShimmer{0%{transform:translate(-150%,-50%) rotate(30deg)}to{transform:translate(150%,-50%) rotate(30deg)}}.platform-badge{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:600}.platform-badge.wechat{background:#07c1601a;color:#07c160}.platform-badge.alipay{background:#1677ff1a;color:#1677ff}.qrcode-container{margin-bottom:24px;display:flex;justify-content:center;align-items:center;position:relative}.qrcode-placeholder{position:relative;width:280px;height:280px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 12px #0000000d;padding:16px}.qrcode-placeholder.wechat{border:3px solid #07c160}.qrcode-placeholder.alipay{border:3px solid #1677ff}.qrcode-pattern{width:100%;height:100%;background-color:#fff;position:relative;display:grid;grid-template-columns:repeat(25,1fr);grid-template-rows:repeat(25,1fr);gap:1px;animation:qrGenerate 1s ease-in-out}@keyframes qrGenerate{0%{opacity:0;transform:scale(.8)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}.selected-package{text-align:center;margin-bottom:12px;padding:12px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:10px;position:relative}.selected-package:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#4e54c8,#8f94fb)}.package-badge{display:inline-block;background:#4e54c81a;color:#4e54c8;padding:2px 10px;border-radius:14px;font-size:10px;font-weight:600;margin-bottom:6px}.package-name{font-size:16px;font-weight:700;color:#333;margin-bottom:6px}.price-container{display:flex;align-items:center;justify-content:center;gap:6px}.package-price{font-size:20px;font-weight:700;color:#ff4d4f}.price-note{font-size:11px;color:#999}.payment-info{margin:10px 0;padding:10px 12px;background:#f8f9fa;border-radius:8px;display:flex;flex-direction:column;gap:8px}.payment-description{font-size:13px;color:#555;line-height:1.4;margin:0;text-align:center;font-weight:500;padding:4px;background:#ffffffb3;border-radius:6px}.scan-guidance,.scan-line{display:none!important}.payment-methods{margin:12px 0;padding:0;background:transparent;border-radius:12px;border:none;box-shadow:none;transition:none}.payment-methods h4{margin:0 0 10px;font-size:15px;font-weight:600;color:#333;text-align:left;position:relative;padding-bottom:6px}.payment-methods h4:after{content:"";position:absolute;bottom:0;left:0;width:25px;height:2px;background:linear-gradient(90deg,#1890ff,#52c41a);border-radius:2px}.payment-radio-group{display:flex;flex-direction:column;gap:6px;margin-top:6px}.payment-method-option{width:100%;text-align:center;padding:12px 14px;border-radius:8px;transition:all .2s ease;font-size:14px;display:flex;align-items:center;justify-content:center;border:1px solid #e8e8e8;background:#fff;position:relative;overflow:hidden;height:50px}.payment-wechat{border-color:#07c16066;background:linear-gradient(to right,#07c16005,#fff)}.payment-wechat:hover{border-color:#07c160b3;background:linear-gradient(to right,#07c1600d,#fffffff2);transform:translateY(-1px);box-shadow:0 2px 8px #07c16026}.payment-alipay{border-color:#1677ff66;background:linear-gradient(to right,#1677ff05,#fff)}.payment-alipay:hover{border-color:#1677ffb3;background:linear-gradient(to right,#1677ff0d,#fffffff2);transform:translateY(-1px);box-shadow:0 2px 8px #1677ff26}.payment-wechat.ant-radio-button-wrapper-checked{background:linear-gradient(135deg,#07c160,#06b558);color:#fff;border-color:#07c160;box-shadow:0 3px 10px #07c1604d}.payment-alipay.ant-radio-button-wrapper-checked{background:linear-gradient(135deg,#1677ff,#156ae5);color:#fff;border-color:#1677ff;box-shadow:0 3px 10px #1677ff4d}.payment-method-option.ant-radio-button-wrapper-checked:after{content:"✓";position:absolute;right:14px;font-size:14px;font-weight:700}.payment-wechat.ant-radio-button-wrapper-checked:after{color:#ffffffe6}.payment-alipay.ant-radio-button-wrapper-checked:after{color:#ffffffe6}.payment-info{margin:20px 0;padding:24px;background:#fafafa;border-radius:12px;text-align:center;transition:all .3s ease}.payment-info:hover{background:#f0f0f0;box-shadow:0 4px 12px #00000014}.payment-description{font-size:16px;color:#333;line-height:1.6;margin:0 0 16px}.payment-tips{margin:16px 0;display:flex;flex-direction:column;gap:8px}.tip-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.tip-icon{color:#52c41a;font-size:16px}.qrcode-info{margin-bottom:20px}.qrcode-instruction,.qrcode-expire{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:14px}.qrcode-instruction{color:var(--text-color)}.qrcode-expire{color:#999;margin-bottom:0}.instruction-icon,.expire-icon{font-size:16px}.expire-time{color:#ff4d4f;font-weight:700;font-size:16px;animation:pulse 1s infinite;padding:0 4px}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.payment-tips{background:#fffc;padding:16px;border-radius:12px;border:1px solid rgba(0,0,0,.06)}.tip-item{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:#666}.tip-item:last-child{margin-bottom:0}.tip-icon{color:#52c41a;font-weight:700;font-size:14px}.payment-modal .ant-modal-footer{padding:20px 24px;background:#fafafa;border-top:1px solid #f0f0f0;display:flex;gap:12px}.cancel-button{flex:1;border-radius:8px;height:40px;font-weight:600;transition:all .3s ease}.cancel-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.confirm-button{flex:2;border-radius:8px;height:40px;font-weight:600;background:linear-gradient(135deg,#4e54c8,#8f94fb);border:none;transition:all .3s ease}.confirm-button:hover{background:linear-gradient(135deg,#5f65d6,#9f94fb);transform:translateY(-1px);box-shadow:0 4px 16px #4e54c866}.confirm-button:active{transform:translateY(0)}.ant-radio-inner{transition:all .3s ease}.ant-radio-inner:after{transform:scale(0);transition:transform .3s ease}.ant-radio-checked .ant-radio-inner:after{transform:scale(.8)}.ant-radio.ant-radio-checked .ant-radio-inner{background-color:#1890ff;border-color:#1890ff}.payment-radio.ant-radio-wrapper-checked:hover .ant-radio-inner{border-color:#40a9ff;transform:scale(1.1)}@media (max-width: 480px){.payment-modal .ant-modal-content{margin:16px;width:calc(100% - 32px)!important;max-width:none}.qrcode-placeholder{width:200px;height:200px}.package-name{font-size:20px}.package-price{font-size:24px}}.features-section{padding:60px 0;background-color:var(--card-background);border-radius:20px;margin-bottom:60px;box-shadow:var(--shadow)}.features-title{text-align:center;margin-bottom:40px!important;color:var(--text-color)}.features-grid{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}.feature-card{flex:1;min-width:250px;padding:30px;background:#f8f9fa;border-radius:16px;text-align:center;transition:var(--transition);border:2px solid transparent}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--primary-color)}.feature-icon{font-size:3rem;margin-bottom:20px}.feature-title{margin-bottom:15px!important;color:var(--text-color)!important}.feature-description{color:var(--text-secondary)!important;font-size:1rem!important}.footer{background-color:var(--card-background);padding:30px 0;border-radius:20px 20px 0 0;box-shadow:0 -2px 16px #0000000d}.footer-content{text-align:center}.footer-text{color:var(--text-secondary)!important;margin-bottom:0!important}@media (max-width: 1024px){.main-content{flex-direction:column}.header-title{font-size:2.8rem!important}}@media (max-width: 768px){.header{padding:60px 0 40px}.header-title{font-size:2.2rem!important}.comparison-container{height:300px}.result-comparison{height:250px}.upload-area{padding:40px 20px}.processing-container{padding:30px 20px}.result-actions{flex-direction:column;width:100%}.download-button,.new-image-button{width:100%}}@media (max-width: 480px){.header-title{font-size:1.8rem!important}.showcase-title{font-size:2rem!important}.comparison-container,.result-comparison{height:200px}.packages-container{flex-direction:column}.package-card{width:100%}}.ant-modal-header{background:linear-gradient(135deg,var(--primary-color),#40a9ff);color:#fff;border-radius:12px 12px 0 0!important}.ant-modal-title{color:#fff!important;font-weight:600}.ant-modal-content{border-radius:12px;box-shadow:0 12px 48px #00000026}input[type=file]{display:none}