body{
font-family:Arial;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
color:white;
margin:0;
text-align:center;
}

header{
padding:40px;
}

#dropArea{
border:2px dashed white;
padding:60px;
margin:30px auto;
width:60%;
border-radius:15px;
transition:0.3s;
}

#dropArea:hover{
background:rgba(255,255,255,0.1);
}

.settings{
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:12px;
width:60%;
margin:auto;
}

.settings label{
display:block;
margin-top:15px;
}

.settings select,
.settings input{
width:80%;
padding:8px;
border-radius:8px;
border:none;
}

button{
margin-top:20px;
padding:12px 25px;
border:none;
border-radius:10px;
background:#ff7e5f;
color:white;
font-weight:bold;
cursor:pointer;
}

.progress-bar{
width:60%;
height:20px;
background:#444;
margin:30px auto;
border-radius:20px;
}

#progress{
height:100%;
width:0%;
background:#00ff88;
border-radius:20px;
}

audio{
margin-top:10px;
}