*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Poppins,sans-serif;line-height:1.6;color:#333}button{font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:40px;color:#fff}h1{display:flex;align-items:center;justify-content:center;gap:20px;font-size:3rem;font-weight:700;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}h1 img{width:72px;height:72px;background:#fff;border-radius:100px;box-shadow:0 4px 10px #00000026}.subtitle{font-size:1.2rem;opacity:.9;margin-bottom:30px}.main-card{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:40px;margin-bottom:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-area{border:3px dashed #ddd;border-radius:15px;padding:60px 20px;text-align:center;transition:all .3s ease;margin-bottom:30px;background:#fafafa}.upload-area.dragover{border-color:#667eea;background:#f0f4ff;transform:scale(1.02)}.upload-icon{font-size:4rem;color:#667eea;margin-bottom:20px;display:block}.upload-text{font-size:1.2rem;color:#666;margin-bottom:15px}.file-input{display:none}.upload-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:30px}.option-group{background:#f8f9fa;padding:25px;border-radius:15px;border:1px solid #e9ecef}.option-group h3{margin-bottom:15px;color:#495057;font-size:1.1rem}.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.size-option{display:flex;align-items:center;gap:8px;padding:10px;background:#fff;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .2s ease}.size-option:hover{border-color:#667eea;background:#f0f4ff}.size-option input[type=checkbox]{margin:0}.quality-slider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer}.quality-value{text-align:center;font-weight:700;color:#667eea;margin-top:10px}.preview-area{display:none;margin:30px 0;text-align:center}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;margin-top:20px}.preview-item{background:#f8f9fa;padding:20px;border-radius:10px;border:1px solid #e9ecef}.preview-item img{max-width:100%;height:auto;margin-bottom:10px}.convert-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:15px 40px;border-radius:50px;font-size:1.2rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #28a7454d;display:none;margin:20px auto}.convert-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #28a74566}.download-area{display:none;text-align:center;margin-top:30px;padding:30px;background:#d4edda;border-radius:15px;border:1px solid #c3e6cb}.download-btn{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.1rem;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;margin:10px;box-shadow:0 4px 15px #007bff4d}.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #007bff66}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:50px}.feature-card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 20px #0000001a;text-align:center;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:20px;color:#667eea}.feature-card h3{margin-bottom:15px;color:#333}.progress-bar{width:100%;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;margin:20px 0;display:none}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;transition:width .3s ease}footer{text-align:center;padding:40px 20px;color:#fff;opacity:.8;margin-top:50px}@media (max-width: 768px){h1{font-size:2rem}.main-card{padding:20px}.options-grid{grid-template-columns:1fr}.size-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}