*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cairo',sans-serif;
}

body{

background:#f3f7fb;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:20px;

}

.container{

width:100%;

max-width:520px;

background:#fff;

border-radius:20px;

padding:35px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.header{

text-align:center;

margin-bottom:30px;

}

.logo{

width:85px;

margin-bottom:15px;

}

.header h1{

font-size:28px;

color:#2563eb;

}

.header p{

margin-top:5px;

color:#666;

font-size:14px;

}

label{

display:block;

margin-bottom:10px;

font-weight:bold;

color:#333;

}

input[type=text]{

width:100%;

padding:15px;

border:2px solid #e5e7eb;

border-radius:12px;

margin-bottom:20px;

font-size:16px;

outline:none;

}

input[type=text]:focus{

border-color:#2563eb;

}

.upload{

display:block;

cursor:pointer;

}

.upload input{

display:none;

}

.upload div{

height:220px;

border:2px dashed #2563eb;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

background:#f8fbff;

transition:.3s;

}

.upload div:hover{

background:#eef5ff;

}

.upload i{

font-size:65px;

color:#2563eb;

margin-bottom:15px;

}

.upload h3{

margin-bottom:10px;

color:#2563eb;

}

.upload p{

color:#666;

}

#progressBox{

width:100%;

height:18px;

background:#ddd;

border-radius:50px;

overflow:hidden;

margin-top:25px;

display:none;

}

#progressBar{

width:0;

height:100%;

background:#22c55e;

transition:.2s;

}

#percent{

text-align:center;

margin-top:12px;

font-size:18px;

font-weight:bold;

color:#2563eb;

}

#status{

text-align:center;

margin-top:8px;

color:#666;

}

button{

width:100%;

padding:16px;

margin-top:25px;

border:none;

border-radius:12px;

background:#2563eb;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#1d4ed8;

}

#message{

margin-top:20px;

}