body{

font-family:Arial;
background:#0b0b18;
color:white;
padding:20px;
text-align:center;

}

.container{

max-width:1100px;
margin:auto;
background:#141430;
padding:25px;
border-radius:12px;

}

#dropZone{

border:2px dashed #00ffd0;
padding:40px;
border-radius:10px;
margin-bottom:20px;

}

#preview{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:15px;

}

.card{

background:#1b1b40;
padding:10px;
border-radius:10px;

}

.thumb{

width:100%;
height:120px;
object-fit:contain;
background:black;
border-radius:6px;

}

button{

width:100%;
margin-top:5px;
padding:6px;
border:none;
border-radius:6px;
cursor:pointer;

}

.convert{background:#00e5ff;color:black}

.converted{background:#27ff00;color:black}

.download{background:#ffcc00}

.remove{background:#ff3b3b}

.progress{

width:100%;
height:6px;
background:#333;
border-radius:5px;
margin-top:4px;
overflow:hidden;

}

.progressInner{

height:6px;
width:0%;
background:#00ffd0;

}

#stats{

margin:10px;

}

.modal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
align-items:center;
justify-content:center;

}

.modalBox{

background:#1b1b40;
padding:30px;
border-radius:10px;
max-width:400px;

}

.auth{

display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:15px;
flex-wrap:wrap;

}

.auth input{

padding:8px;
border-radius:6px;
border:none;
width:auto;

}

.auth button{

width:auto;
padding:8px 16px;

}

.planList{

display:flex;
flex-direction:column;
gap:8px;
margin:15px 0;

}

.planBtn{

background:#00ffd0;
color:black;
font-weight:bold;
padding:10px;

}