body{
margin:0;
font-family:Arial;
background:linear-gradient(135deg,#667eea,#764ba2);
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

.container{
background:white;
padding:30px;
border-radius:15px;
width:420px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

h1{
margin-bottom:10px;
}

#dropArea{
border:2px dashed #aaa;
padding:30px;
margin:20px 0;
border-radius:10px;
cursor:pointer;
}

#dropArea:hover{
border-color:#667eea;
}

button{
padding:10px 20px;
border:none;
border-radius:8px;
background:#667eea;
color:white;
cursor:pointer;
margin-top:10px;
}

button:hover{
background:#5563d1;
}

#preview{
width:100%;
margin-top:10px;
display:none;
border-radius:10px;
}

textarea{
width:100%;
height:120px;
margin-top:15px;
padding:10px;
border-radius:8px;
border:1px solid #ddd;
}

#loaderContainer{
width:100%;
height:10px;
background:#eee;
border-radius:10px;
margin-top:15px;
overflow:hidden;
display:none;
}

#loaderBar{
height:100%;
width:0%;
background:#667eea;
transition:width 0.3s;
}

#progressText{
font-size:14px;
margin-top:5px;
}