*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #FF6B9D;--primary-dark: #FF4785;--secondary-color: #4ECDC4;--accent-color: #FFE66D;--background-image:url(/assets/bg-B1kh_Y6K.jpg);--card-bg: rgba(255, 255, 255, .95);--text-primary: #2d3748;--text-secondary: #718096;--shadow: 0 10px 40px rgba(0, 0, 0, .1);--shadow-hover: 0 20px 60px rgba(0, 0, 0, .15)}body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background:var(--background-image);background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100vh;overflow-x:hidden}.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding:20px}.page-wrapper{position:relative;z-index:1}.page{animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.title{text-align:center;color:#fff;font-size:1.8rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.subtitle{text-align:center;color:#ffffffe6;font-size:1rem;margin-bottom:30px}.card{background:var(--card-bg);border-radius:20px;padding:25px;box-shadow:var(--shadow);margin-bottom:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 25px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:15px}.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:0 4px 15px #ff6b9d66}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff6b9d80}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.btn-secondary{background:#e2e8f0;color:var(--text-primary)}.btn-secondary:hover{background:#cbd5e0}.btn-download{background:linear-gradient(135deg,var(--secondary-color) 0%,#3dbdb4 100%);color:#fff;box-shadow:0 4px 15px #4ecdc466}.btn-download:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ecdc480}.btn-icon{font-size:1.2rem}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh}.logo-container{margin-bottom:20px}.logo{font-size:5rem;animation:bounce 2s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.welcome-text{text-align:center;color:var(--text-primary);font-size:1.1rem;margin-bottom:10px}.hint-text{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}.home-page{padding-top:30px}.privacy-card{border-left:4px solid var(--secondary-color)}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.card-header .icon{font-size:1.5rem}.card-header h3{color:var(--text-primary);font-size:1.1rem}.privacy-content{display:flex;flex-direction:column;gap:12px}.privacy-item{display:flex;align-items:flex-start;gap:10px}.check-icon{color:var(--secondary-color);font-weight:700;flex-shrink:0}.privacy-item p{color:var(--text-secondary);font-size:.9rem;line-height:1.5;text-align:left;margin:0}.upload-card{text-align:center}.upload-icon{font-size:4rem;margin-bottom:15px}.upload-text{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:5px}.upload-hint{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}.video-list-page{padding-top:20px}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}.video-card{background:var(--card-bg);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:all .3s ease;cursor:pointer}.video-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.video-card.selected{border:3px solid var(--primary-color);transform:scale(1.02)}.video-preview{position:relative;aspect-ratio:16/10;overflow:hidden}.video-thumbnail{width:100%;height:100%;background-size:cover;background-position:center;position:relative}.play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;display:flex;align-items:center;justify-content:center;transition:background .3s ease}.video-card:hover .play-overlay{background:#00000080}.play-icon{width:50px;height:50px;background:#ffffffe6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:1.2rem;padding-left:5px;transition:transform .3s ease}.video-card:hover .play-icon{transform:scale(1.1)}.video-duration{position:absolute;bottom:8px;right:8px;background:#000000b3;color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem}.video-info{padding:12px}.video-name{color:var(--text-primary);font-size:.9rem;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox{display:none}.checkmark{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:.75rem;color:#fff}.checkbox:checked+.checkmark{background:var(--primary-color);border-color:var(--primary-color)}.checkbox:checked+.checkmark:after{content:"✓"}.checkbox-text{font-size:.8rem;color:var(--text-secondary)}.selected-count{text-align:center;color:#fff;font-size:1rem;margin-bottom:15px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.video-modal-content{background:#fff;border-radius:16px;overflow:hidden;max-width:600px;width:100%;position:relative}.close-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;background:#00000080;border:none;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .3s ease}.close-btn:hover{background:#000000b3}.video-player{width:100%;aspect-ratio:16/9;background:#000}.video-title{padding:15px;color:var(--text-primary);font-size:1.1rem;text-align:center}.camera-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.camera-modal-content{background:#000;border-radius:16px;overflow:hidden;max-width:500px;width:100%;position:relative}.camera-view,.photo-preview{position:relative;width:100%}.camera-video,.preview-image{width:100%;display:block}.camera-controls{position:absolute;bottom:0;left:0;right:0;padding:30px;display:flex;justify-content:center;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.capture-btn{width:80px;height:80px;border-radius:50%;border:4px solid white;background:var(--primary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.capture-btn:hover{transform:scale(1.1);background:var(--primary-dark)}.capture-icon{font-size:2rem}.preview-controls{display:flex;gap:15px;padding:20px;background:#fff}.retake-btn,.use-btn{flex:1;margin:0}.payment-page{padding-top:30px}.payment-card{text-align:center}.payment-icon{font-size:4rem;margin-bottom:20px}.order-info{margin-bottom:25px}.order-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e2e8f0}.order-row:last-child{border-bottom:none}.label{color:var(--text-secondary);font-size:.95rem}.price{color:var(--primary-color);font-size:1.8rem;font-weight:700}.order-id{color:var(--text-primary);font-family:monospace;font-size:.9rem}.video-count{color:var(--secondary-color);font-weight:600}.payment-methods{margin-bottom:20px}.payment-method{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e2e8f0;border-radius:12px;cursor:pointer;transition:all .3s ease}.payment-method.active{border-color:var(--primary-color);background:#ff6b9d0d}.method-icon{font-size:1.5rem}.method-name{flex:1;color:var(--text-primary);font-weight:500}.method-check{color:var(--primary-color);font-weight:700}.download-page{padding-top:30px}.success-animation{text-align:center;position:relative;margin-bottom:20px}.success-icon{font-size:5rem;animation:successPop .5s ease-out}@keyframes successPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.confetti{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.confetti span{position:absolute;font-size:1.5rem;animation:confetti-fall 3s ease-out forwards}@keyframes confetti-fall{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--tx),200px) rotate(720deg)}}.confetti-1{--tx: -50px;animation-delay:0s}.confetti-2{--tx: 50px;animation-delay:.1s}.confetti-3{--tx: -30px;animation-delay:.2s}.confetti-4{--tx: 30px;animation-delay:.3s}.confetti-5{--tx: -70px;animation-delay:.4s}.confetti-6{--tx: 70px;animation-delay:.5s}.confetti-7{--tx: -20px;animation-delay:.6s}.confetti-8{--tx: 20px;animation-delay:.7s}.confetti-9{--tx: -60px;animation-delay:.8s}.confetti-10{--tx: 60px;animation-delay:.9s}.confetti-11{--tx: -40px;animation-delay:1s}.confetti-12{--tx: 40px;animation-delay:1.1s}.confetti-13{--tx: -80px;animation-delay:1.2s}.confetti-14{--tx: 80px;animation-delay:1.3s}.confetti-15{--tx: -10px;animation-delay:1.4s}.confetti-16{--tx: 10px;animation-delay:1.5s}.confetti-17{--tx: -55px;animation-delay:1.6s}.confetti-18{--tx: 55px;animation-delay:1.7s}.confetti-19{--tx: -25px;animation-delay:1.8s}.confetti-20{--tx: 25px;animation-delay:1.9s}.success-title{animation:fadeInUp .5s ease-out .3s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.download-card{text-align:center}.download-preview{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;padding:30px;margin-bottom:20px}.preview-icon{font-size:3rem;margin-bottom:10px}.preview-text{color:var(--text-primary);font-size:1.1rem;font-weight:600;margin-bottom:5px}.preview-info{color:var(--text-secondary);font-size:.9rem}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease,transform .3s ease}.fade-enter-from,.fade-leave-to{opacity:0;transform:translate(30px)}.modal-enter-active,.modal-leave-active{transition:opacity .3s ease}.modal-enter-from,.modal-leave-to{opacity:0}@media(max-width:480px){.app{padding:15px}.title{font-size:1.5rem}.video-grid{grid-template-columns:1fr}.card{padding:20px}}