* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: 'Arial', sans-serif;

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  min-height: 100vh;

  color: white;

  overflow-x: hidden;

}

.container {

  max-width: 800px;

  margin: 0 auto;

  padding: 20px;

}

.header {

  text-align: center;

  margin-bottom: 30px;

}

h1 {

  font-size: 3rem;

  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

  margin-bottom: 10px;

  background: linear-gradient(45deg, #ff6b6b, #ff00ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.subtitle {

  font-size: 1.2rem;

  opacity: 0.9;

}

.upload-area {

  border: 3px dashed rgba(255, 0, 255, 0.5);

  border-radius: 20px;

  padding: 40px;

  text-align: center;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  transition: all 0.3s ease;

  margin-bottom: 20px;

}

.upload-area:hover {

  border-color: #ff00ff;

  background: rgba(255, 255, 255, 0.2);

}

.upload-area p {

  font-size: 1.2rem;

  margin-bottom: 20px;

  color: #fff;

}

.select-btn, .submit-btn {

  background: linear-gradient(45deg, #ff6b6b, #ff00ff);

  border: none;

  padding: 15px 30px;

  border-radius: 50px;

  color: white;

  font-size: 1.1rem;

  cursor: pointer;

  margin: 10px;

  transition: transform 0.3s ease;

}

.select-btn:hover, .submit-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(255, 0, 255, 0.4);

}

.submit-btn:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}

#uploadedFiles {

  margin-top: 30px;

}

.file-preview {

  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.1);

  padding: 15px;

  border-radius: 15px;

  margin: 10px 0;

  backdrop-filter: blur(10px);

}

.file-icon {

  font-size: 2rem;

  margin-right: 15px;

}

.file-info {

  flex-grow: 1;

}

.file-name {

  font-weight: bold;

  margin-bottom: 5px;

}

.file-size {

  opacity: 0.8;

  font-size: 0.9rem;

}

.uploaded-file {

  background: rgba(255, 255, 255, 0.15);

  padding: 20px;

  border-radius: 15px;

  margin: 15px 0;

  backdrop-filter: blur(10px);

}

.file-header {

  display: flex;

  align-items: center;

  margin-bottom: 15px;

}

.file-header .file-icon {

  font-size: 1.5rem;

  margin-right: 10px;

}

.audio-player {

  width: 100%;

  margin: 10px 0;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.3);

}

.download-link {

  display: inline-block;

  background: rgba(255, 255, 255, 0.2);

  padding: 8px 15px;

  border-radius: 20px;

  color: white;

  text-decoration: none;

  margin: 5px;

  transition: background 0.3s ease;

}

.download-link:hover {

  background: rgba(255, 255, 255, 0.3);

}

@keyframes floatUp {

  from { 

    transform: translateY(0) rotate(0deg);

    opacity: 0.7; 

  }

  to { 

    transform: translateY(-120vh) rotate(360deg);

    opacity: 0; 

  }

}

.floating-rose {

  pointer-events: none;

  user-select: none;

}