body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: linear-gradient(135deg,#e9eef7,#f8fbff);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.container{
    width:100%;
    max-width:640px;
    padding:20px;
}

.card{
    background:white;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    text-align:center;
}

h1{
    margin-top:0;
    font-size:26px;
    color:#2c3e50;
}

.file-info{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:25px 0;
}

.file-icon{
    font-size:40px;
}

.file-name{
    font-weight:600;
    font-size:18px;
}

.file-size{
    color:#7f8c8d;
    font-size:14px;
}

.progress-container{
    width:100%;
    height:10px;
    background:#edf1f7;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:20px;
}

.progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#4facfe,#00f2fe);
    transition:width 0.3s ease;
}

button{
    width:100%;
    padding:14px;
    font-size:16px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#4facfe,#00c6ff);
    color:white;
    cursor:pointer;
    font-weight:600;
    transition:0.2s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,0,0,0.12);
}

button:active{
    transform:scale(0.98);
}

#statusText{
    margin-top:15px;
    color:#555;
    font-size:14px;
}

#statusText2{
    margin-top:15px;
    color:#555;
    font-size:14px;
}

.info-section{
    margin-bottom:20px;
    padding:15px;
    border-radius:12px;
    background:#f7f9fc;
    text-align:left;
}

.info-section h2{
    margin-top:0;
    font-size:16px;
    color:#2c3e50;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:10px 0;
}

.info-item{
    display:flex;
    flex-direction:column;
    font-size:13px;
}

.info-label{
    color:#7f8c8d;
}

.info-value{
    font-weight:600;
}

.info-description{
    font-size:13px;
    color:#555;
    margin-top:8px;
}


