.compress-container{

max-width:900px;

margin:auto;

padding:40px;

}

.upload-box{

height:180px;

border:3px dashed #d0d0d0;

border-radius:12px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

transition:.25s;

margin-bottom:35px;

}

.upload-box:hover{

border-color:#e5322d;

background:#fff5f5;

}

.preview-area{

display:flex;

justify-content:center;

margin-bottom:35px;

}

.preview-card{

width:260px;

background:white;

border:1px solid #ddd;

border-radius:12px;

padding:15px;

text-align:center;

position:relative;

box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.preview-card canvas{

width:180px;

height:240px;

border:1px solid #eee;

margin:auto;

display:block;

}

.remove-btn{

position:absolute;

top:10px;

right:15px;

font-size:24px;

font-weight:bold;

color:#e5322d;

cursor:pointer;

}

.compress-options{

margin-top:25px;

text-align:center;

}

.compress-options label{

display:block;

font-size:22px;

margin-bottom:12px;

}

.compress-options input{

width:180px;

padding:10px;

font-size:22px;

text-align:center;

}

.quality-box{

margin-top:25px;

font-size:20px;

}

#compressBtn{

margin-top:30px;

padding:16px 50px;

font-size:24px;

border:none;

background:#e5322d;

color:white;

border-radius:10px;

cursor:pointer;

}

#compressBtn:hover{

background:#c62828;

}

/* ============================== */
/* Smart Recommendation */
/* ============================== */

.recommend-box{

margin-top:25px;

background:#fff;

border:1px solid #ddd;

border-radius:12px;

padding:18px;

}

.recommend-box h3{

margin:0 0 15px;

font-size:18px;

text-align:center;

}

.recommend-item{

display:flex;

justify-content:space-between;

align-items:center;

margin:10px 0;

}

.recommend-item div{

display:flex;

flex-direction:column;

}

.recommend-item strong{

font-size:15px;

}

.recommend-item small{

font-size:12px;

color:#777;

margin-top:2px;

}

.recommend-item button{

background:#f5f5f5;

border:1px solid #ddd;

padding:8px 14px;

border-radius:8px;

cursor:pointer;

font-weight:bold;

}

.recommend-item button:hover{

background:#e5322d;

color:white;

}

/* ===================================== */
/* Progress Popup */
/* ===================================== */

.progress-popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.progress-card{

width:420px;

background:white;

padding:30px;

border-radius:14px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.progress-card h2{

margin-bottom:20px;

}

.progress-bar{

width:100%;

height:18px;

background:#ddd;

border-radius:30px;

overflow:hidden;

margin-bottom:18px;

}

#progressFill{

width:0%;

height:100%;

background:#e5322d;

transition:width .25s;

}

#progressText{

font-size:22px;

font-weight:bold;

margin:10px 0;

}

#progressPage{

color:#666;

}