*{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;padding: 20px;} .container{max-width: 1200px;margin: 0 auto;background: white;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.1);overflow: hidden;} .header{background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);color: white;text-align: center;padding: 40px 20px;position: relative;} .header::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity: 0.3;} .header h1{font-size: 2.5rem;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);position: relative;z-index: 1;} .header p{font-size: 1.2rem;opacity: 0.9;position: relative;z-index: 1;} .main-content{padding: 40px;} .upload-section{background: #f8f9fa;border: 3px dashed #dee2e6;border-radius: 15px;padding: 40px;text-align: center;margin-bottom: 30px;transition: all 0.3s ease;cursor: pointer;position: relative;overflow: hidden;} .upload-section::before{content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: linear-gradient(45deg, #4facfe, #00f2fe, #4facfe);border-radius: 15px;opacity: 0;transition: opacity 0.3s ease;z-index: -1;} .upload-section:hover{border-color: #4facfe;background: #f0f8ff;transform: translateY(-2px);box-shadow: 0 10px 25px rgba(79, 172, 254, 0.2);} .upload-section.dragover{border-color: #00f2fe;background: #e6f7ff;transform: scale(1.02);box-shadow: 0 15px 35px rgba(0, 242, 254, 0.3);} .upload-section.dragover::before{opacity: 1;} .upload-icon{font-size: 4rem;color: #6c757d;margin-bottom: 20px;animation: bounce 2s infinite;} @keyframes bounce{0%, 20%, 50%, 80%, 100%{transform: translateY(0);} 40%{transform: translateY(-10px);} 60%{transform: translateY(-5px);}} .upload-text{font-size: 1.3rem;color: #495057;margin-bottom: 15px;font-weight: 600;} .upload-info{color: #6c757d;font-size: 0.9rem;line-height: 1.6;} .file-input{display: none;} .btn{background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);color: white;border: none;padding: 12px 30px;border-radius: 25px;font-size: 1rem;cursor: pointer;transition: all 0.3s ease;margin: 10px 5px;text-decoration: none;display: inline-block;position: relative;overflow: hidden;} .btn::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition: left 0.5s;} .btn:hover::before{left: 100%;} .btn:hover{transform: translateY(-2px);box-shadow: 0 8px 15px rgba(79, 172, 254, 0.4);} .btn:active{transform: translateY(0);} .optimization-section{background: linear-gradient(135deg, #fff3cd, #ffeaa7);border: 1px solid #ffeaa7;border-radius: 15px;padding: 25px;margin-bottom: 30px;position: relative;overflow: hidden;} .optimization-section::before{content: '⚡';position: absolute;top: -10px;right: -10px;font-size: 4rem;opacity: 0.1;transform: rotate(15deg);} .optimization-title{color: #856404;font-weight: bold;margin-bottom: 15px;display: flex;align-items: center;gap: 15px;font-size: 1.1rem;} .toggle-switch{position: relative;display: inline-block;width: 60px;height: 34px;} .toggle-switch input{opacity: 0;width: 0;height: 0;} .slider{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: .4s;border-radius: 34px;} .slider:before{position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;transition: .4s;border-radius: 50%;box-shadow: 0 2px 4px rgba(0,0,0,0.2);} input:checked + .slider{background: linear-gradient(135deg, #4facfe, #00f2fe);} input:checked + .slider:before{transform: translateX(26px);} .decode-section{background: linear-gradient(135deg, #f0f8ff, #e6f7ff);border: 2px solid #b3d9ff;border-radius: 15px;padding: 25px;margin-bottom: 30px;position: relative;} .decode-section::before{content: '🔍';position: absolute;top: -10px;right: -10px;font-size: 4rem;opacity: 0.1;transform: rotate(-15deg);} .decode-section h3{color: #4facfe;margin-bottom: 15px;font-size: 1.3rem;} .base64-input-container textarea{width: 100%;padding: 15px;border: 2px solid #dee2e6;border-radius: 10px;font-family: 'Courier New', monospace;font-size: 0.9rem;resize: vertical;margin-bottom: 15px;transition: all 0.3s ease;background: white;} .base64-input-container textarea:focus{outline: none;border-color: #4facfe;box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);transform: scale(1.01);} .input-buttons{display: flex;gap: 10px;flex-wrap: wrap;} .results-section{margin-top: 30px;} .image-result{background: white;border: 1px solid #dee2e6;border-radius: 15px;padding: 25px;margin-bottom: 20px;box-shadow: 0 5px 15px rgba(0,0,0,0.1);transition: all 0.3s ease;position: relative;overflow: hidden;} .image-result::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 3px;background: linear-gradient(90deg, #4facfe, #00f2fe);transition: left 0.8s ease;} .image-result:hover::before{left: 100%;} .image-result:hover{transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0,0,0,0.15);} .image-preview{display: flex;align-items: center;gap: 20px;margin-bottom: 15px;} .preview-img{max-width: 120px;max-height: 120px;border-radius: 10px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);transition: transform 0.3s ease;} .preview-img:hover{transform: scale(1.05);} .image-info{flex: 1;} .image-name{font-weight: bold;color: #495057;margin-bottom: 8px;font-size: 1.1rem;} .image-details{color: #6c757d;font-size: 0.9rem;line-height: 1.5;} .base64-output{background: #f8f9fa;border: 2px solid #dee2e6;border-radius: 10px;padding: 20px;margin-top: 15px;font-family: 'Courier New', monospace;font-size: 0.85rem;max-height: 200px;overflow-y: auto;word-break: break-all;position: relative;transition: all 0.3s ease;} .base64-output:hover{border-color: #4facfe;background: #f0f8ff;} .copy-btn{background: linear-gradient(135deg, #28a745, #20c997);font-size: 0.9rem;padding: 10px 25px;margin-top: 15px;} .copy-btn:hover{box-shadow: 0 8px 15px rgba(40, 167, 69, 0.4);} .copy-btn.copied{background: linear-gradient(135deg, #17a2b8, #20c997);animation: pulse 0.6s ease;} @keyframes pulse{0%{transform: scale(1);} 50%{transform: scale(1.05);} 100%{transform: scale(1);}} .progress-bar{width: 100%;height: 8px;background: #e9ecef;border-radius: 4px;overflow: hidden;margin: 15px 0;box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);} .progress-fill{height: 100%;background: linear-gradient(90deg, #4facfe, #00f2fe);width: 0%;transition: width 0.3s ease;border-radius: 4px;position: relative;} .progress-fill::after{content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);animation: shimmer 2s infinite;} @keyframes shimmer{0%{transform: translateX(-100%);} 100%{transform: translateX(100%);}} .stats{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 20px;margin-top: 30px;} .stat-card{background: white;border: 1px solid #dee2e6;border-radius: 15px;padding: 25px;text-align: center;box-shadow: 0 5px 15px rgba(0,0,0,0.1);transition: all 0.3s ease;position: relative;overflow: hidden;} .stat-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #4facfe, #00f2fe);} .stat-card:hover{transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.15);} .stat-number{font-size: 2.2rem;font-weight: bold;color: #4facfe;margin-bottom: 8px;text-shadow: 0 2px 4px rgba(79, 172, 254, 0.2);} .stat-label{color: #6c757d;font-size: 0.95rem;font-weight: 500;} .decoded-result{margin-top: 20px;padding: 25px;background: white;border: 2px solid #28a745;border-radius: 15px;box-shadow: 0 5px 15px rgba(40, 167, 69, 0.1);animation: fadeInUp 0.5s ease;} @keyframes fadeInUp{from{opacity: 0;transform: translateY(20px);} to{opacity: 1;transform: translateY(0);}} .decoded-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 15px;} .decoded-header h4{color: #28a745;margin: 0;font-size: 1.2rem;} .decoded-preview{display: flex;gap: 25px;align-items: flex-start;flex-wrap: wrap;} .decoded-preview img{max-width: 300px;max-height: 300px;border-radius: 10px;box-shadow: 0 8px 20px rgba(0,0,0,0.15);border: 3px solid #dee2e6;transition: all 0.3s ease;} .decoded-preview img:hover{transform: scale(1.02);border-color: #28a745;} .decoded-info{flex: 1;min-width: 280px;} .info-item{display: flex;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid #eee;transition: background 0.2s ease;} .info-item:hover{background: #f8f9fa;margin: 0 -15px;padding: 12px 15px;border-radius: 8px;} .info-label{font-weight: 600;color: #495057;} .info-value{color: #6c757d;font-family: 'Courier New', monospace;} .error-message{background: linear-gradient(135deg, #f8d7da, #f5c6cb);border: 2px solid #f5c6cb;color: #721c24;padding: 20px;border-radius: 10px;margin-top: 15px;animation: shake 0.5s ease;position: relative;} .error-message::before{content: '⚠️';position: absolute;top: 15px;left: 15px;font-size: 1.2rem;} .error-message{padding-left: 50px;} @keyframes shake{0%, 100%{transform: translateX(0);} 25%{transform: translateX(-5px);} 75%{transform: translateX(5px);}} .browser-support{margin-top: 30px;padding: 25px;background: linear-gradient(135deg, #e7f3ff, #cce7ff);border-radius: 15px;border: 2px solid #b3d9ff;} .browser-support h3{color: #4facfe;margin-bottom: 15px;text-align: center;} .browser-icons{display: flex;justify-content: center;gap: 20px;margin-top: 20px;flex-wrap: wrap;} .browser-icon{width: 50px;height: 50px;border-radius: 12px;display: flex;align-items: center;justify-content: center;font-size: 1.8rem;background: white;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transition: all 0.3s ease;cursor: help;} .browser-icon:hover{transform: translateY(-3px) scale(1.1);box-shadow: 0 8px 20px rgba(0,0,0,0.2);} .notification{position: fixed;top: 20px;right: 20px;background: linear-gradient(135deg, #28a745, #20c997);color: white;padding: 15px 25px;border-radius: 10px;box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);z-index: 1000;animation: slideInRight 0.5s ease;display: none;} @keyframes slideInRight{from{transform: translateX(100%);opacity: 0;} to{transform: translateX(0);opacity: 1;}} .loading-spinner{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;margin-right: 10px;} @keyframes spin{to{transform: rotate(360deg);}} .format-selector{display: flex;gap: 10px;margin: 15px 0;flex-wrap: wrap;} .format-btn{padding: 12px 20px;border: 2px solid #dee2e6;background: white;border-radius: 12px;cursor: pointer;transition: all 0.3s ease;font-size: 0.9rem;text-align: center;min-width: 140px;display: flex;flex-direction: column;gap: 4px;} .format-btn small{font-size: 0.7rem;color: #6c757d;font-family: 'Courier New', monospace;opacity: 0.8;line-height: 1.2;} .format-btn.active{background: linear-gradient(135deg, #4facfe, #00f2fe);color: white;border-color: #4facfe;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);} .format-btn.active small{color: rgba(255, 255, 255, 0.9);} .format-btn:hover{border-color: #4facfe;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);} @media (max-width: 768px){.header h1{font-size: 2rem;} .main-content{padding: 20px;} .image-preview{flex-direction: column;text-align: center;} .decoded-preview{flex-direction: column;} .stats{grid-template-columns: 1fr;} .browser-icons{gap: 15px;} .input-buttons{justify-content: center;}} @media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}}