.webp-to-image-container{max-width:1200px;margin:0 auto;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Roboto','Helvetica Neue',sans-serif;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:30px;border-radius:30px;box-shadow:0 20px 60px rgb(0 0 0 / .1)}.webp-to-image-container h2{text-align:center;font-size:36px;font-weight:800;background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;margin-bottom:5px;animation:fadeInDown 0.5s ease}.subtitle{text-align:center;color:#555;margin-bottom:30px;font-size:16px;animation:fadeInUp 0.5s ease}.format-selection{background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);padding:20px 25px;border-radius:20px;margin-bottom:25px;text-align:center;box-shadow:0 5px 15px rgb(0 0 0 / .08);transition:transform 0.3s ease,box-shadow 0.3s ease}.format-selection:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(0 0 0 / .12)}.format-selection label{font-weight:700;margin-right:20px;color:#333;font-size:16px}.format-select{padding:12px 25px;font-size:16px;border:2px solid #e5322d;border-radius:50px;background:#fff;cursor:pointer;font-weight:600;transition:all 0.3s ease;outline:none}.format-select:hover{border-color:#ff6b6b;transform:scale(1.02)}.format-select:focus{box-shadow:0 0 0 3px rgb(229 50 45 / .2)}.drop-area{border:3px dashed #e5322d;border-radius:30px;padding:60px 20px;text-align:center;background:linear-gradient(135deg,#ffffff 0%,#fff5f5 100%);cursor:pointer;transition:all 0.4s cubic-bezier(.4,0,.2,1);margin-bottom:25px;position:relative;overflow:hidden}.drop-area::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(229 50 45 / .1),transparent);transition:left 0.5s}.drop-area:hover::before{left:100%}.drop-area.drag-over{background:linear-gradient(135deg,#ffe0e0 0%,#ffd6d6 100%);border-color:#b81f1a;transform:scale(.98)}.drop-text{font-size:26px;font-weight:700;color:#e5322d;margin-bottom:15px;animation:bounce 2s infinite}.or-text{font-size:18px;color:#888;margin:15px 0;position:relative}.or-text::before,.or-text::after{content:'';position:absolute;top:50%;width:30%;height:1px;background:linear-gradient(90deg,transparent,#e5322d,transparent)}.or-text::before{left:10%}.or-text::after{right:10%}.upload-btn{background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);color:#fff;border:none;padding:14px 40px;font-size:18px;border-radius:50px;cursor:pointer;font-weight:700;transition:all 0.3s ease;margin:15px 0;box-shadow:0 4px 15px rgb(229 50 45 / .3)}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(229 50 45 / .4)}.upload-btn:active{transform:translateY(0)}.info-text{font-size:13px;color:#999;margin-top:20px;background:rgb(0 0 0 / .05);display:inline-block;padding:5px 15px;border-radius:20px}.add-more-btn{background:linear-gradient(135deg,#0073aa 0%,#00a0d2 100%);color:#fff;border:none;padding:14px 40px;font-size:18px;border-radius:50px;cursor:pointer;font-weight:700;width:100%;margin-bottom:15px;transition:all 0.3s ease;box-shadow:0 4px 15px rgb(0 115 170 / .3)}.add-more-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(0 115 170 / .4)}.convert-all-btn{background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);color:#fff;border:none;padding:14px 40px;font-size:18px;border-radius:50px;cursor:pointer;font-weight:700;width:100%;margin-bottom:15px;transition:all 0.3s ease;box-shadow:0 4px 15px rgb(229 50 45 / .3);position:relative;overflow:hidden}.convert-all-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgb(255 255 255 / .3);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}.convert-all-btn:active::after{width:300px;height:300px}.convert-all-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(229 50 45 / .4)}.convert-all-btn:disabled{background:linear-gradient(135deg,#ccc 0%,#999 100%);cursor:not-allowed;transform:none}.download-all-btn{background:linear-gradient(135deg,#28a745 0%,#34ce57 100%);color:#fff;border:none;padding:12px 30px;font-size:16px;border-radius:50px;cursor:pointer;font-weight:700;margin-right:10px;transition:all 0.3s ease;box-shadow:0 4px 12px rgb(40 167 69 / .3)}.download-all-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgb(40 167 69 / .4)}.convert-more-btn{background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);color:#fff;border:none;padding:12px 30px;font-size:16px;border-radius:50px;cursor:pointer;font-weight:700;transition:all 0.3s ease;box-shadow:0 4px 12px rgb(229 50 45 / .3)}.convert-more-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgb(229 50 45 / .4)}#action-buttons{display:flex;gap:15px;justify-content:center;margin-bottom:25px;flex-wrap:wrap}#global-progress{background:rgb(255 255 255 / .95);border-radius:20px;padding:20px;margin-bottom:25px;box-shadow:0 5px 20px rgb(0 0 0 / .1);animation:slideIn 0.3s ease}.progress-label{font-size:14px;margin-bottom:12px;font-weight:600;color:#333}.progress-bar{background:#e0e0e0;border-radius:30px;height:14px;overflow:hidden;box-shadow:inset 0 1px 3px rgb(0 0 0 / .1)}#progress-fill{background:linear-gradient(90deg,#e5322d 0%,#ff6b6b 100%);width:0%;height:100%;transition:width 0.4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#progress-fill::after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,rgb(255 255 255 / .2),rgb(255 255 255 / .4));animation:shimmer 1.5s infinite}#images-list{display:flex;flex-direction:column;gap:20px;max-height:600px;overflow-y:auto;padding:5px}#images-list::-webkit-scrollbar{width:8px}#images-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}#images-list::-webkit-scrollbar-thumb{background:#e5322d;border-radius:10px}#images-list::-webkit-scrollbar-thumb:hover{background:#c22a25}.image-card{background:#fff;border-radius:20px;padding:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 5px 20px rgb(0 0 0 / .08);transition:all 0.3s ease;animation:fadeInScale 0.3s ease}.image-card:hover{transform:translateX(5px);box-shadow:0 8px 30px rgb(0 0 0 / .12)}.image-preview{width:90px;height:90px;object-fit:cover;border-radius:16px;border:2px solid #e5322d20;transition:transform 0.3s ease}.image-preview:hover{transform:scale(1.05)}.image-info{flex:2;min-width:180px}.image-name{font-weight:700;word-break:break-all;color:#333;margin-bottom:5px}.image-size{font-size:12px;color:#888}.single-progress{width:140px;background:#e0e0e0;border-radius:20px;height:8px;margin-top:8px;overflow:hidden}.single-progress-fill{background:linear-gradient(90deg,#e5322d 0%,#ff6b6b 100%);width:0%;height:100%;border-radius:20px;transition:width 0.3s ease}.convert-single{background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);color:#fff;border:none;padding:10px 25px;border-radius:50px;cursor:pointer;font-weight:600;transition:all 0.3s ease;box-shadow:0 2px 8px rgb(229 50 45 / .3)}.convert-single:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(229 50 45 / .4)}.convert-single:disabled{background:linear-gradient(135deg,#ccc 0%,#999 100%);cursor:not-allowed;transform:none}.result-area{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.result-size{font-size:13px;color:#28a745;font-weight:600;background:#d4edda;padding:4px 12px;border-radius:20px}.format-badge{display:inline-block;background:#e5322d20;color:#e5322d;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;margin-left:5px}.preview-btn{background:linear-gradient(135deg,#0073aa 0%,#00a0d2 100%);color:#fff;border:none;padding:6px 18px;border-radius:30px;cursor:pointer;transition:all 0.3s ease}.preview-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgb(0 115 170 / .3)}.download-btn{background:linear-gradient(135deg,#28a745 0%,#34ce57 100%);color:#fff;text-decoration:none;padding:6px 18px;border-radius:30px;display:inline-block;transition:all 0.3s ease}.download-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgb(40 167 69 / .3)}.preview-modal{animation:fadeIn 0.3s ease}.preview-modal>div{animation:scaleIn 0.3s ease}.close-modal-btn{background:linear-gradient(135deg,#e5322d 0%,#ff6b6b 100%);color:#fff;border:none;padding:10px 30px;border-radius:30px;cursor:pointer;font-weight:700;transition:all 0.3s ease}.close-modal-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgb(229 50 45 / .4)}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media (max-width:768px){.webp-to-image-container{padding:20px;border-radius:20px}.webp-to-image-container h2{font-size:28px}.drop-text{font-size:20px}.upload-btn,.add-more-btn,.convert-all-btn{padding:12px 30px;font-size:16px}.image-card{padding:15px;gap:12px}.image-preview{width:70px;height:70px}.result-area{width:100%;justify-content:center}.download-all-btn,.convert-more-btn{width:100%;margin:5px 0}#action-buttons{flex-direction:column}.format-select{width:100%;margin-top:10px}.format-selection{text-align:left}.format-selection label{display:block;margin-bottom:10px}.or-text::before,.or-text::after{width:25%}}@media (max-width:480px){.webp-to-image-container{padding:15px}.webp-to-image-container h2{font-size:24px}.drop-text{font-size:18px}.drop-area{padding:40px 15px}.image-card{flex-direction:column;text-align:center}.convert-single{width:100%}.single-progress{width:100%}}