.share-modal-overlay{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; justify-content:center; align-items:center; z-index:10000; opacity:0; visibility:hidden; transition:all 0.3s ease}.share-modal-overlay.show{opacity:1; visibility:visible}.share-modal{background:white; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:90%; max-width:480px; max-height:90vh; overflow-y:auto; transform:translateY(30px) scale(0.9); transition:all 0.3s ease}.share-modal-overlay.show .share-modal{transform:translateY(0) scale(1)}.share-modal-header{padding:24px 24px 16px; text-align:center; border-bottom:1px solid #f0f0f0}.share-modal-header h3{margin:0; font-size:20px; font-weight:600; color:#333; display:flex; align-items:center; justify-content:center; gap:8px}.share-modal-header .celebration-icon{font-size:24px}.share-modal-body{padding:20px 24px 24px}.upload-progress{margin-bottom:24px}.upload-progress-label{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; color:#666}.progress-bar{width:100%; height:8px; background:#f0f0f0; border-radius:4px; overflow:hidden}.progress-bar-fill{height:100%; background:linear-gradient(90deg,#667eea,#764ba2); border-radius:4px; width:0%; transition:width 0.3s ease}.progress-percentage{font-size:12px; color:#999; margin-top:4px; text-align:right}.social-share-section{margin-bottom:24px}.section-title{font-size:16px; font-weight:600; color:#333; margin-bottom:12px; display:flex; align-items:center; gap:8px}.social-buttons{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}.social-button{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border:2px solid #e0e0e0; border-radius:12px; background:white; cursor:pointer; transition:all 0.2s ease; text-decoration:none; color:#666}.social-button:hover{border-color:#667eea; background:#f8f9ff; transform:translateY(-2px)}.social-button .icon{font-size:22px}.social-button .label{font-size:12px; font-weight:500}.social-button.facebook .icon{color:#1877f2}.social-button.twitter .icon{color:#1da1f2}.social-button.whatsapp .icon{color:#25d366}.social-button.telegram .icon{color:#0088cc}.social-button.linkedin .icon{color:#0a66c2}.social-button.pinterest .icon{color:#bd081c}.social-button.reddit .icon{color:#ff4500}.link-share-section{margin-bottom:24px}.link-input-group{display:flex; gap:8px; margin-bottom:12px}.link-input{flex:1; padding:12px 16px; border:2px solid #e0e0e0; border-radius:8px; font-size:14px; color:#333; background:#f9f9f9; font-family:'Courier New',monospace}.copy-link-btn,.qr-code-btn{padding:12px 16px; background:#667eea; color:white; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s ease; white-space:nowrap}.copy-link-btn:hover,.qr-code-btn:hover{background:#5a67d8; transform:translateY(-1px)}.copy-link-btn.copied{background:#48bb78}.download-section{margin-bottom:24px}.download-button{width:100%; padding:16px; background:#f7fafc; border:2px solid #e2e8f0; border-radius:12px; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:500; color:#4a5568}.download-button:hover{background:#edf2f7; border-color:#cbd5e0}.watermark-notice{margin-top:8px; padding:8px 12px; background:#fff5cd; border-left:3px solid #f6e05e; border-radius:4px; font-size:12px; color:#744210}.recommendation{background:linear-gradient(135deg,#667eea,#764ba2); color:white; padding:20px; border-radius:16px; margin-bottom:24px; position:relative; overflow:hidden}.recommendation::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%); pointer-events:none}.recommendation-title{font-size:16px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; position:relative; z-index:1}.recommendation-title i{font-size:18px; opacity:0.9}.recommendation-list{font-size:14px; line-height:1.6; position:relative; z-index:1; list-style:none; padding:0; margin:0}.recommendation-list li{margin-bottom:6px; padding-left:20px; position:relative}.recommendation-list li::before{content:'✓'; position:absolute; left:0; top:0; color:rgba(255,255,255,0.8); font-weight:bold; font-size:14px}.close-modal-btn{position:absolute; top:16px; right:16px; width:32px; height:32px; border:none; background:#f0f0f0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease}.close-modal-btn:hover{background:#e0e0e0}@media (max-width:768px){.share-modal{width:95%; margin:20px; max-height:calc(100vh - 40px)}.share-modal-header{padding:20px 20px 12px}.share-modal-body{padding:16px 20px 20px}.social-buttons{grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}.social-button{padding:8px 4px}.social-button .icon{font-size:20px}.social-button .label{font-size:11px}.link-input-group{flex-direction:column}.link-input{font-size:16px}.copy-link-btn,.qr-code-btn{width:100%; justify-content:center}}@media (max-width:480px){.share-modal{width:100%; height:100%; max-height:100vh; border-radius:0; margin:0}.share-modal-header h3{font-size:18px}.section-title{font-size:15px}.social-buttons{grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px}.social-button{padding:6px 2px}.social-button .icon{font-size:18px}.social-button .label{display:none}}.qr-modal-overlay{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; z-index:10001; opacity:0; visibility:hidden; transition:all 0.3s ease}.qr-modal-overlay.show{opacity:1; visibility:visible}.qr-modal{background:white; border-radius:16px; padding:24px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); transform:scale(0.9); transition:all 0.3s ease}.qr-modal-overlay.show .qr-modal{transform:scale(1)}.qr-modal h4{margin:0 0 16px 0; font-size:18px; color:#333}.qr-code-container{margin-bottom:16px}.qr-close-btn{padding:8px 16px; background:#667eea; color:white; border:none; border-radius:6px; cursor:pointer}.qr-loading{width:200px; height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fa; border-radius:12px; gap:12px}.qr-spinner{width:40px; height:40px; border:4px solid #e0e0e0; border-top-color:#667eea; border-radius:50%; animation:qr-spin 0.8s linear infinite}@keyframes qr-spin{to{transform:rotate(360deg)}}.qr-loading-text{font-size:13px; color:#666; font-weight:500}.qr-error{display:flex; flex-direction:column; align-items:center; gap:8px; color:#e74c3c}.qr-error i{font-size:32px}.qr-error div{font-size:14px; font-weight:500}