/* UPDATED: - Date 04-03-2026 */
body,header{padding:20px}.btn,.card{transition:.3s;position:relative;overflow:hidden}.btn::before,.card::before{position:absolute;top:0;height:100%;content:''}.btn,.card,.container,.image-preview,.upload-area{position:relative}.btn,.card,.image-preview,.progress-bar{overflow:hidden}.empty-state,.upload-area,header{text-align:center}:root{--primary:#4361ee;--primary-light:#6a7ef0;--primary-dark:#314ac7;--secondary:#3a0ca3;--accent:#f72585;--accent-light:#f94a9b;--accent-dark:#d81159;--light:#f8f9fa;--dark:#212529;--success:#4cc9f0;--success-light:#6fd7f5;--warning:#ff9e00;--error:#e63946;--border:#dee2e6;--card-bg:#ffffff;--shadow:rgba(0, 0, 0, 0.08);--shadow-hover:rgba(0, 0, 0, 0.12);--text-muted:#6c757d;--gradient:linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%)}*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f5f7fa 0,#e6e9f0 100%);color:var(--dark);line-height:1.6;min-height:100vh}.card::before,h1{background:var(--gradient)}.container{max-width:1200px;margin:0 auto}header{margin-bottom:30px}h1{font-size:2.5rem;-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;font-weight:800}.tagline{font-size:1.2rem;color:var(--primary);margin-bottom:20px;font-weight:500}.main-content{display:grid;grid-template-columns:1fr;gap:30px}.card{background:var(--card-bg);border-radius:16px;box-shadow:0 10px 30px var(--shadow);padding:25px}.card:hover{transform:translateY(-5px);box-shadow:0 15px 35px var(--shadow-hover)}.card::before{left:0;width:5px;opacity:0;transition:opacity .3s}.card:hover::before{opacity:1}.card-title{font-size:1.5rem;color:var(--secondary);margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px}.button-group{display:flex;gap:15px;margin:20px 0;flex-wrap:wrap}.btn,.btn-history{background:0 0;padding:12px 24px;font-size:1rem;display:inline-flex;align-items:center;font-weight:500;gap:8px;cursor:pointer}.btn{color:var(--primary);border:2px solid var(--primary);border-radius:45px;justify-content:center;box-shadow:0 4px 6px rgba(67,97,238,.1);flex:1}.btn::before{left:-100%;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.btn:hover::before{left:100%}.btn-history:hover,.btn:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 6px 12px rgba(67,97,238,.3)}.btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(67,97,238,.2)}.btn-accent{background:0 0;color:var(--accent);border:2px solid var(--accent);box-shadow:0 4px 6px rgba(247,37,133,.1)}#uploadStats i,.btn-history,.btn-history i,.upload-area i{color:var(--primary)}.btn-accent:hover{background:var(--accent);color:#fff;box-shadow:0 6px 12px rgba(247,37,133,.3)}.btn-history{border:2px solid var(--primary);border-radius:45px;transition:.3s;justify-content:center;box-shadow:0 4px 6px rgba(67,97,238,.1);flex:1}.btn-history:hover i{color:#fff}.upload-area{border:2px dashed var(--primary);border-radius:12px;padding:30px;margin-bottom:20px;cursor:pointer;transition:.3s;background:rgba(67,97,238,.03)}.upload-area:hover{border-color:var(--accent);background:rgba(67,97,238,.05);transform:translateY(-2px)}.upload-area.dragover{border-color:var(--accent);background:rgba(67,97,238,.1);transform:scale(1.02)}.upload-area i{font-size:3rem;margin-bottom:15px;transition:.3s}.upload-area:hover i{color:var(--accent);transform:scale(1.1)}.upload-text{font-size:1.1rem;margin-bottom:15px;color:var(--dark);font-weight:500}.upload-area p:last-of-type{color:var(--text-muted);font-size:.9rem;margin-bottom:15px}.file-input,.floating-btn{display:none}.preview-container{margin-top:25px}.preview-title{font-size:1.2rem;margin-bottom:15px;color:var(--secondary);display:flex;align-items:center;gap:8px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}@media (min-width:768px){.preview-grid{grid-template-columns:repeat(4,1fr);gap:12px}}@media (min-width:992px){.main-content{grid-template-columns:1fr 1fr}.preview-grid{grid-template-columns:repeat(5,1fr);gap:15px}}.image-preview{border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.1);aspect-ratio:1/1;transition:.3s;border:2px solid transparent}.image-preview:hover{transform:scale(1.05);box-shadow:0 5px 15px rgba(0,0,0,.2);border-color:var(--primary);z-index:2}.image-preview .remove-btn,.preview-badge{top:5px;right:5px;width:24px;height:24px;font-size:12px;z-index:3;display:flex;position:absolute}.image-preview img{width:100%;height:100%;object-fit:cover;display:block}.preview-badge{background:var(--primary);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.2)}.image-preview .remove-btn{background:rgba(255,255,255,.9);border:none;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;color:var(--error);transition:.3s;box-shadow:0 2px 4px rgba(0,0,0,.1)}#uploadStats div,.url-item:hover{border-left:4px solid var(--primary)}.image-preview .remove-btn:hover{background:var(--error);color:#fff;transform:scale(1.1)}.progress-bar{height:8px;background:var(--border);border-radius:4px;margin:15px 0;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress{height:100%;background:var(--gradient);width:0%;transition:width .3s;border-radius:4px}#uploadStats div{background:#f8f9fa;border-radius:8px;padding:12px;margin:15px 0;display:flex;justify-content:space-between;font-size:14px;box-shadow:0 2px 5px rgba(0,0,0,.05)}#uploadStats span{display:flex;align-items:center;gap:5px}.url-container{background:var(--light);border-radius:12px;padding:15px;margin-top:20px;display:flex;align-items:center;gap:10px}.url-text{flex:1;word-break:break-all;padding:10px;background:#fff;border-radius:8px;font-family:monospace;border:1px solid var(--border);font-size:.9rem}.url-info small,.url-item{display:flex;align-items:center}.url-item,.url-item img{border-radius:8px;transition:.3s}.url-history{max-height:500px;overflow-y:auto;padding-right:10px}.url-history::-webkit-scrollbar{width:6px}.url-history::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.url-history::-webkit-scrollbar-thumb{background:var(--primary-light);border-radius:10px}.url-history::-webkit-scrollbar-thumb:hover{background:var(--primary)}.url-item{gap:15px;padding:15px;border-bottom:1px solid var(--border);margin-bottom:5px;background:#fff}.url-item:hover{background:linear-gradient(135deg,#f8f9fa,#fff);transform:translateX(5px);box-shadow:0 5px 15px rgba(67,97,238,.15)}.url-item img{width:60px;height:60px;object-fit:cover;box-shadow:0 3px 6px rgba(0,0,0,.1);border:2px solid transparent}.url-item:hover img{transform:scale(1.05);box-shadow:0 5px 10px rgba(0,0,0,.15);border-color:var(--primary)}.url-info{flex:1}.url-info strong{display:block;margin-bottom:5px;color:var(--dark);font-size:1rem}.action-btn,.url-info p{color:var(--text-muted)}.url-info p{font-size:.9rem;word-break:break-all;margin-bottom:5px}.url-info small{color:var(--primary-light);font-size:.8rem;gap:3px}.action-btn,.copy-btn{display:flex;align-items:center;transition:.3s;cursor:pointer}.url-actions{display:flex;gap:8px}.action-btn{background:var(--light);border:none;width:36px;height:36px;border-radius:50%;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.1)}.action-btn:hover,.copy-btn{background:var(--primary);color:#fff}.action-btn:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.15)}.close-modal:hover,.url-item.error i,.url-item.error p{color:var(--error)}.delete-btn:hover{background:var(--error)}.copy-btn{position:relative;border:none;width:40px;height:40px;border-radius:50%;justify-content:center;overflow:hidden;box-shadow:0 3px 6px rgba(67,97,238,.2)}.modal-content,.upload-success-card{box-shadow:0 20px 40px rgba(0,0,0,.2)}.copy-btn:hover{background:var(--primary-dark);transform:scale(1.1);box-shadow:0 5px 10px rgba(67,97,238,.3)}.copy-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.copy-btn:hover::before{width:300%;height:300%}.copy-btn.copied{background:var(--success);animation:.5s pulse}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.copy-btn.copied i{animation:.5s checkmark}@keyframes checkmark{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}.url-item.error{background:#fff5f5;border-left:4px solid var(--error)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(5px);animation:.3s fadeIn}.close-modal,.toast{display:flex;transition:.3s}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:16px;width:90%;max-width:800px;max-height:80vh;overflow-y:auto;padding:30px;position:relative;animation:.3s slideUp}@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.close-modal{position:absolute;top:20px;right:20px;background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:var(--dark);width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center}.close-modal:hover{background:var(--light);transform:rotate(90deg)}.empty-state{padding:40px 20px;color:var(--text-muted)}.empty-state i{font-size:48px;margin-bottom:15px;color:#adb5bd}.upload-success-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:30px;z-index:2000;text-align:center;min-width:300px;animation:.3s cardPop;border-left:4px solid var(--success)}@keyframes cardPop{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}.upload-success-card i{font-size:50px;color:var(--success);margin-bottom:15px}.upload-success-card h3{color:var(--dark);margin-bottom:10px;font-size:1.5rem}.upload-success-card p{color:var(--text-muted);margin-bottom:20px}.upload-success-card .success-count{font-size:2rem;font-weight:700;color:var(--success);margin:10px 0}.upload-success-card .success-btn{background:var(--success);color:#fff;border:none;padding:10px 30px;border-radius:45px;font-size:1rem;cursor:pointer;transition:.3s}.upload-success-card .success-btn:hover{background:var(--success-light);transform:scale(1.05)}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 25px;border-radius:50px;box-shadow:0 5px 15px rgba(0,0,0,.2);align-items:center;gap:10px;z-index:1000;opacity:0;visibility:hidden}.toast.show{opacity:1;visibility:visible;animation:.3s toastIn}@keyframes toastIn{0%{transform:translateX(-50%) translateY(20px);opacity:0}100%{transform:translateX(-50%) translateY(0);opacity:1}}.toast.error{background:#e63946!important}.toast.success{background:#10b981!important}.toast.warning{background:#f59e0b!important}.toast.info{background:#3b82f6!important}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:1s ease-in-out infinite spin}@media (max-width:768px){body{padding:15px}h1{font-size:2rem}.card,.upload-area{padding:20px}.url-item{flex-direction:column;text-align:center;gap:10px}.url-actions{align-self:center;justify-content:center}.url-item img{width:80px;height:80px}.button-group{flex-direction:column;gap:10px;width:100%}.btn,.btn-history{width:100%;justify-content:center;padding:14px 20px}}@media (max-width:480px){h1{font-size:1.8rem}.tagline{font-size:1rem}.card-title{font-size:1.3rem}.url-item img{width:70px;height:70px}.modal-content{padding:20px}}